mirror
/
photoview
mirror of https://github.com/photoview/photoview.git
1
Fork 0
Code

Use relative font-size unit 

For improved accessibility
This commit is contained in:
viktorstrate 2020-07-02 21:56:28 +02:00
parent ed7fa5249c
commit c915b7741f
5 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/src/App.js
View File

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

6
ui/src/components/header/Searchbar.js
View File

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

21
ui/src/components/sidebar/PhotoSidebar.js
View File

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

2
ui/src/components/sidebar/SidebarDownload.js
View File

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

5
ui/src/components/sidebar/SidebarItem.js
View File

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