186526
/
unpkg
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Small improvements for small screens

This commit is contained in:
Michael Jackson 2019-07-28 18:04:11 -07:00
parent 34baab07ab
commit 1e83e6f52e
2 changed files with 65 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
modules/client/browse/App.js
View File

@ -213,23 +213,39 @@ 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={{
marginLeft: 20,
'@media (max-width: 700px)': {
marginLeft: 0,
marginBottom: 0
}
}}
>
<label>
Version:{' '}
<select <select
name="version" name="version"
defaultValue={packageVersion} defaultValue={packageVersion}
@ -265,7 +281,8 @@ export default function App({
</option> </option>
))} ))}
</select> </select>
</div> </label>
</p>
</header> </header>
</div> </div>

7
modules/client/browse/DirectoryViewer.js
View File

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