1
0
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:
Matthias Kretschmann 2019-11-17 14:18:49 +01:00
parent a0c1b43024
commit eb892807eb
Signed by: m
GPG Key ID: 606EEEF3C479A91F
10 changed files with 61 additions and 20 deletions

View File

@ -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

View File

@ -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%;
}

View File

@ -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}>

View File

@ -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 }) => {

View File

@ -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;
}
}

View File

@ -36,7 +36,7 @@ export default function Qr({
onSuccess={e => onCopySuccess(e)}
className={styles.button}
>
<Icon name="Clipboard" />
<Icon name="Copy" />
</Clipboard>
</pre>
</>

View File

@ -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

View File

@ -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
View 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