mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-14 17:15:18 +01:00
add exif icons, fix formatted exposure
This commit is contained in:
parent
a0c1b43024
commit
eb892807eb
@ -80,7 +80,7 @@ function formatExif(exifData) {
|
||||
} = exifData.exif
|
||||
|
||||
const iso = `ISO ${ISO}`
|
||||
const fstop = `ƒ ${FNumber}`
|
||||
const fstop = `ƒ/${FNumber}`
|
||||
const focalLength = `${FocalLengthIn35mmFormat || FocalLength}mm`
|
||||
|
||||
// Shutter speed
|
||||
@ -126,7 +126,7 @@ function formatGps(gpsData) {
|
||||
}
|
||||
|
||||
function formatExposure(exposureMode) {
|
||||
if (!exposureMode) return
|
||||
if (exposureMode === null || exposureMode === undefined) return
|
||||
|
||||
const exposureShortened = parseFloat(exposureMode.toFixed(2))
|
||||
let exposure
|
||||
|
@ -23,6 +23,12 @@
|
||||
padding: $spacer $spacer / 1.5;
|
||||
border-bottom: 1px dashed $brand-grey-dimmed;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
margin-bottom: $spacer / 8;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
@ -2,6 +2,22 @@ import React from 'react'
|
||||
import ExifMap from './ExifMap'
|
||||
import styles from './Exif.module.scss'
|
||||
import { Exif as ExifMeta } from '../../@types/Image'
|
||||
import Icon from './Icon'
|
||||
|
||||
const ExifData = ({
|
||||
title,
|
||||
value,
|
||||
icon
|
||||
}: {
|
||||
title: string
|
||||
value: string
|
||||
icon: string
|
||||
}) => (
|
||||
<span title={title}>
|
||||
<Icon name={icon} />
|
||||
{value}
|
||||
</span>
|
||||
)
|
||||
|
||||
export default function Exif({ exif }: { exif: ExifMeta }) {
|
||||
const {
|
||||
@ -17,12 +33,20 @@ export default function Exif({ exif }: { exif: ExifMeta }) {
|
||||
return (
|
||||
<aside className={styles.exif}>
|
||||
<div className={styles.data}>
|
||||
{model && <span title="Camera model">{model}</span>}
|
||||
{focalLength && <span title="Focal length">{focalLength}</span>}
|
||||
{fstop && <span title="Aperture">{fstop}</span>}
|
||||
{shutterspeed && <span title="Shutter speed">{shutterspeed}</span>}
|
||||
{exposure && <span title="Exposure">{exposure}</span>}
|
||||
{iso && <span title="ISO">{iso}</span>}
|
||||
{model && <ExifData title="Camera model" value={model} icon="Camera" />}
|
||||
{focalLength && (
|
||||
<ExifData title="Focal length" value={focalLength} icon="Crosshair" />
|
||||
)}
|
||||
{fstop && <ExifData title="Aperture" value={fstop} icon="Aperture" />}
|
||||
{shutterspeed && (
|
||||
<ExifData
|
||||
title="Shutter speed"
|
||||
value={shutterspeed}
|
||||
icon="Stopwatch"
|
||||
/>
|
||||
)}
|
||||
{exposure && <ExifData title="Exposure" value={exposure} icon="Sun" />}
|
||||
{iso && <ExifData title="ISO" value={iso} icon="Maximize" />}
|
||||
</div>
|
||||
{gps && gps.latitude && (
|
||||
<div className={styles.map}>
|
||||
|
@ -12,22 +12,28 @@ import {
|
||||
Moon,
|
||||
Compass,
|
||||
X,
|
||||
Clipboard,
|
||||
Copy,
|
||||
Search,
|
||||
ExternalLink,
|
||||
Link,
|
||||
ChevronRight,
|
||||
ChevronLeft
|
||||
ChevronLeft,
|
||||
Camera,
|
||||
Aperture,
|
||||
Maximize,
|
||||
Crosshair
|
||||
} from 'react-feather'
|
||||
// custom icons
|
||||
import { ReactComponent as Jsonfeed } from '../../images/jsonfeed.svg'
|
||||
import { ReactComponent as Bitcoin } from '../../images/bitcoin.svg'
|
||||
import { ReactComponent as Stopwatch } from '../../images/stopwatch.svg'
|
||||
import styles from './Icon.module.scss'
|
||||
|
||||
const components: any = {
|
||||
Download: ArrowDownCircle,
|
||||
Jsonfeed,
|
||||
Bitcoin,
|
||||
Stopwatch,
|
||||
ArrowDownCircle,
|
||||
Edit,
|
||||
GitHub,
|
||||
@ -37,12 +43,16 @@ const components: any = {
|
||||
Moon,
|
||||
Compass,
|
||||
X,
|
||||
Clipboard,
|
||||
Copy,
|
||||
Search,
|
||||
ExternalLink,
|
||||
Link,
|
||||
ChevronRight,
|
||||
ChevronLeft
|
||||
ChevronLeft,
|
||||
Camera,
|
||||
Aperture,
|
||||
Maximize,
|
||||
Crosshair
|
||||
}
|
||||
|
||||
const Icon = ({ name }: { name: string }) => {
|
||||
|
@ -31,15 +31,13 @@
|
||||
padding: $spacer / 3;
|
||||
|
||||
svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
fill: $brand-grey-light;
|
||||
stroke: $brand-grey-light;
|
||||
transition: 0.15s ease-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
fill: $brand-grey-dimmed;
|
||||
stroke: $brand-grey-dimmed;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -49,6 +47,6 @@
|
||||
|
||||
// stylelint-disable-next-line no-descending-specificity
|
||||
svg {
|
||||
fill: $brand-grey-dimmed;
|
||||
stroke: $brand-grey-dimmed;
|
||||
}
|
||||
}
|
||||
|
@ -36,7 +36,7 @@ export default function Qr({
|
||||
onSuccess={e => onCopySuccess(e)}
|
||||
className={styles.button}
|
||||
>
|
||||
<Icon name="Clipboard" />
|
||||
<Icon name="Copy" />
|
||||
</Clipboard>
|
||||
</pre>
|
||||
</>
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
import styles from './IconLinks.module.scss'
|
||||
import Icon from '../atoms/Icon'
|
||||
import styles from './Networks.module.scss'
|
||||
|
||||
function NetworkIcon({ link }: { link: string }) {
|
||||
let IconComp
|
@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import { graphql, useStaticQuery } from 'gatsby'
|
||||
import Img, { FixedObject } from 'gatsby-image'
|
||||
import IconLinks from './IconLinks'
|
||||
import IconLinks from './Networks'
|
||||
import styles from './Vcard.module.scss'
|
||||
import { useSiteMetadata } from '../../hooks/use-site-metadata'
|
||||
|
||||
|
3
src/images/stopwatch.svg
Normal file
3
src/images/stopwatch.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="24" viewBox="0 0 22 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
|
||||
<path d="M9.5,22 C14.7467051,22 19,17.7467051 19,12.5 C19,7.25329488 14.7467051,3 9.5,3 C4.25329488,3 0,7.25329488 0,12.5 C0,17.7467051 4.25329488,22 9.5,22 Z M18,6.94974747 L20.0125631,5.26256313 M9.25314078,13.8966698 L12.2531408,14.8966698 M6.5,0.5 L11.5,0.5 M9,9 L9,14" transform="translate(1 1)"/>
|
||||
</svg>
|
After Width: | Height: | Size: 494 B |
Loading…
Reference in New Issue
Block a user