parent
ed7fa5249c
commit
c915b7741f
|
@ -5,9 +5,14 @@ import Routes from './Routes'
|
||||||
import Messages from './components/messages/Messages'
|
import Messages from './components/messages/Messages'
|
||||||
|
|
||||||
const GlobalStyle = createGlobalStyle`
|
const GlobalStyle = createGlobalStyle`
|
||||||
|
html {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
#root, body {
|
#root, body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
font-size: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Make dimmer lighter */
|
/* Make dimmer lighter */
|
||||||
|
|
|
@ -21,7 +21,7 @@ const SearchField = styled.input`
|
||||||
border: 1px solid #eee;
|
border: 1px solid #eee;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
font-size: 16px;
|
font-size: 1rem;
|
||||||
font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
|
font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
|
@ -120,8 +120,8 @@ const SearchBar = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const ResultTitle = styled.h1`
|
const ResultTitle = styled.h1`
|
||||||
font-size: 20px;
|
font-size: 1.25rem;
|
||||||
margin: 12px 0 4px;
|
margin: 12px 0 0.25rem;
|
||||||
`
|
`
|
||||||
|
|
||||||
const SearchResults = ({ result }) => {
|
const SearchResults = ({ result }) => {
|
||||||
|
|
|
@ -36,18 +36,18 @@ const photoQuery = gql`
|
||||||
|
|
||||||
const PreviewImage = styled(ProtectedImage)`
|
const PreviewImage = styled(ProtectedImage)`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 333px;
|
height: ${({ imageAspect }) => imageAspect * 100}%;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
`
|
`
|
||||||
|
|
||||||
const Name = styled.div`
|
const Name = styled.div`
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 16px;
|
font-size: 1.2rem;
|
||||||
margin-bottom: 12px;
|
margin: 0.75rem 0 1rem;
|
||||||
`
|
`
|
||||||
|
|
||||||
const ExifInfo = styled.div`
|
const ExifInfo = styled.div`
|
||||||
margin-bottom: 24px;
|
margin-bottom: 1.5rem;
|
||||||
`
|
`
|
||||||
|
|
||||||
const exifNameLookup = {
|
const exifNameLookup = {
|
||||||
|
@ -109,15 +109,20 @@ const SidebarContent = ({ photo, hidePreview }) => {
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
|
|
||||||
let previewUrl = null
|
let previewImage = null
|
||||||
if (photo) {
|
if (photo) {
|
||||||
if (photo.highRes) previewUrl = photo.highRes.url
|
if (photo.highRes) previewImage = photo.highRes
|
||||||
else if (photo.thumbnail) previewUrl = photo.thumbnail.url
|
else if (photo.thumbnail) previewImage = photo.thumbnail
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{!hidePreview && <PreviewImage src={previewUrl} />}
|
{!hidePreview && (
|
||||||
|
<PreviewImage
|
||||||
|
src={previewImage.url}
|
||||||
|
imageAspect={previewImage.width / previewImage.height}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
<Name>{photo && photo.title}</Name>
|
<Name>{photo && photo.title}</Name>
|
||||||
<ExifInfo>{exifItems}</ExifInfo>
|
<ExifInfo>{exifItems}</ExifInfo>
|
||||||
<SidebarDownload photo={photo} />
|
<SidebarDownload photo={photo} />
|
||||||
|
|
|
@ -181,7 +181,7 @@ const SidebarDownload = ({ photo }) => {
|
||||||
<div style={{ marginBottom: 24 }}>
|
<div style={{ marginBottom: 24 }}>
|
||||||
<h2>Download</h2>
|
<h2>Download</h2>
|
||||||
|
|
||||||
<Table selectable singleLine>
|
<Table selectable singleLine compact>
|
||||||
<Table.Header>
|
<Table.Header>
|
||||||
<Table.Row>
|
<Table.Row>
|
||||||
<Table.HeaderCell>Name</Table.HeaderCell>
|
<Table.HeaderCell>Name</Table.HeaderCell>
|
||||||
|
|
|
@ -6,14 +6,15 @@ const ItemName = styled.div`
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 12px;
|
font-size: 0.85rem;
|
||||||
color: #888;
|
color: #888;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
margin-right: 8px;
|
margin-right: 0.5rem;
|
||||||
`
|
`
|
||||||
|
|
||||||
const ItemValue = styled.div`
|
const ItemValue = styled.div`
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
font-size: 1rem;
|
||||||
`
|
`
|
||||||
|
|
||||||
const SidebarItem = ({ name, value }) => (
|
const SidebarItem = ({ name, value }) => (
|
||||||
|
|
Loading…
Reference in New Issue