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

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

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

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>