Small improvements for small screens
This commit is contained in:
parent
34baab07ab
commit
1e83e6f52e
|
@ -213,59 +213,76 @@ export default function App({
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'space-between'
|
'@media (max-width: 700px)': {
|
||||||
|
flexDirection: 'column-reverse',
|
||||||
|
alignItems: 'flex-start'
|
||||||
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<h1 css={{ fontSize: '1.5rem' }}>
|
<h1 css={{ fontSize: '1.5rem', fontWeight: 'normal', flex: 1 }}>
|
||||||
<nav>
|
<nav>
|
||||||
{breadcrumbs.map((link, index) => (
|
{breadcrumbs.map((item, index, array) => (
|
||||||
<span key={index}>
|
<span key={index}>
|
||||||
{index !== 0 && (
|
{index !== 0 && (
|
||||||
<span css={{ paddingLeft: 5, paddingRight: 5 }}>/</span>
|
<span css={{ paddingLeft: 5, paddingRight: 5 }}>/</span>
|
||||||
)}
|
)}
|
||||||
{link}
|
{index === array.length - 1 ? (
|
||||||
|
<strong>{item}</strong>
|
||||||
|
) : (
|
||||||
|
item
|
||||||
|
)}
|
||||||
</span>
|
</span>
|
||||||
))}
|
))}
|
||||||
</nav>
|
</nav>
|
||||||
</h1>
|
</h1>
|
||||||
<div>
|
<p
|
||||||
<label htmlFor="version">Version:</label>{' '}
|
css={{
|
||||||
<select
|
marginLeft: 20,
|
||||||
name="version"
|
'@media (max-width: 700px)': {
|
||||||
defaultValue={packageVersion}
|
marginLeft: 0,
|
||||||
onChange={handleChange}
|
marginBottom: 0
|
||||||
css={{
|
}
|
||||||
appearance: 'none',
|
}}
|
||||||
cursor: 'pointer',
|
>
|
||||||
padding: '4px 24px 4px 8px',
|
<label>
|
||||||
fontWeight: 600,
|
Version:{' '}
|
||||||
fontSize: '0.9em',
|
<select
|
||||||
color: '#24292e',
|
name="version"
|
||||||
border: '1px solid rgba(27,31,35,.2)',
|
defaultValue={packageVersion}
|
||||||
borderRadius: 3,
|
onChange={handleChange}
|
||||||
backgroundColor: '#eff3f6',
|
css={{
|
||||||
backgroundImage: `url(${SelectDownArrow})`,
|
appearance: 'none',
|
||||||
backgroundPosition: 'right 8px center',
|
cursor: 'pointer',
|
||||||
backgroundRepeat: 'no-repeat',
|
padding: '4px 24px 4px 8px',
|
||||||
backgroundSize: 'auto 25%',
|
fontWeight: 600,
|
||||||
':hover': {
|
fontSize: '0.9em',
|
||||||
backgroundColor: '#e6ebf1',
|
color: '#24292e',
|
||||||
borderColor: 'rgba(27,31,35,.35)'
|
border: '1px solid rgba(27,31,35,.2)',
|
||||||
},
|
borderRadius: 3,
|
||||||
':active': {
|
backgroundColor: '#eff3f6',
|
||||||
backgroundColor: '#e9ecef',
|
backgroundImage: `url(${SelectDownArrow})`,
|
||||||
borderColor: 'rgba(27,31,35,.35)',
|
backgroundPosition: 'right 8px center',
|
||||||
boxShadow: 'inset 0 0.15em 0.3em rgba(27,31,35,.15)'
|
backgroundRepeat: 'no-repeat',
|
||||||
}
|
backgroundSize: 'auto 25%',
|
||||||
}}
|
':hover': {
|
||||||
>
|
backgroundColor: '#e6ebf1',
|
||||||
{availableVersions.map(v => (
|
borderColor: 'rgba(27,31,35,.35)'
|
||||||
<option key={v} value={v}>
|
},
|
||||||
{v}
|
':active': {
|
||||||
</option>
|
backgroundColor: '#e9ecef',
|
||||||
))}
|
borderColor: 'rgba(27,31,35,.35)',
|
||||||
</select>
|
boxShadow: 'inset 0 0.15em 0.3em rgba(27,31,35,.15)'
|
||||||
</div>
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{availableVersions.map(v => (
|
||||||
|
<option key={v} value={v}>
|
||||||
|
{v}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
</p>
|
||||||
</header>
|
</header>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -141,7 +141,12 @@ export default function DirectoryViewer({ path, details: entries }) {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
borderCollapse: 'collapse',
|
borderCollapse: 'collapse',
|
||||||
borderRadius: 2,
|
borderRadius: 2,
|
||||||
background: '#fff'
|
background: '#fff',
|
||||||
|
'@media (max-width: 700px)': {
|
||||||
|
'& th + th + th + th, & td + td + td + td': {
|
||||||
|
display: 'none'
|
||||||
|
}
|
||||||
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<thead>
|
<thead>
|
||||||
|
|
Loading…
Reference in New Issue