From 1e83e6f52e71dc334e7d3ff6f51cf21767bcec30 Mon Sep 17 00:00:00 2001
From: Michael Jackson <michael@jackson.us>
Date: Sun, 28 Jul 2019 18:04:11 -0700
Subject: [PATCH] Small improvements for small screens

---
 modules/client/browse/App.js             | 101 +++++++++++++----------
 modules/client/browse/DirectoryViewer.js |   7 +-
 2 files changed, 65 insertions(+), 43 deletions(-)

diff --git a/modules/client/browse/App.js b/modules/client/browse/App.js
index 04541c2..828d9f9 100644
--- a/modules/client/browse/App.js
+++ b/modules/client/browse/App.js
@@ -213,59 +213,76 @@ export default function App({
                 display: 'flex',
                 flexDirection: 'row',
                 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>
-                  {breadcrumbs.map((link, index) => (
+                  {breadcrumbs.map((item, index, array) => (
                     <span key={index}>
                       {index !== 0 && (
                         <span css={{ paddingLeft: 5, paddingRight: 5 }}>/</span>
                       )}
-                      {link}
+                      {index === array.length - 1 ? (
+                        <strong>{item}</strong>
+                      ) : (
+                        item
+                      )}
                     </span>
                   ))}
                 </nav>
               </h1>
-              <div>
-                <label htmlFor="version">Version:</label>{' '}
-                <select
-                  name="version"
-                  defaultValue={packageVersion}
-                  onChange={handleChange}
-                  css={{
-                    appearance: 'none',
-                    cursor: 'pointer',
-                    padding: '4px 24px 4px 8px',
-                    fontWeight: 600,
-                    fontSize: '0.9em',
-                    color: '#24292e',
-                    border: '1px solid rgba(27,31,35,.2)',
-                    borderRadius: 3,
-                    backgroundColor: '#eff3f6',
-                    backgroundImage: `url(${SelectDownArrow})`,
-                    backgroundPosition: 'right 8px center',
-                    backgroundRepeat: 'no-repeat',
-                    backgroundSize: 'auto 25%',
-                    ':hover': {
-                      backgroundColor: '#e6ebf1',
-                      borderColor: 'rgba(27,31,35,.35)'
-                    },
-                    ':active': {
-                      backgroundColor: '#e9ecef',
-                      borderColor: 'rgba(27,31,35,.35)',
-                      boxShadow: 'inset 0 0.15em 0.3em rgba(27,31,35,.15)'
-                    }
-                  }}
-                >
-                  {availableVersions.map(v => (
-                    <option key={v} value={v}>
-                      {v}
-                    </option>
-                  ))}
-                </select>
-              </div>
+              <p
+                css={{
+                  marginLeft: 20,
+                  '@media (max-width: 700px)': {
+                    marginLeft: 0,
+                    marginBottom: 0
+                  }
+                }}
+              >
+                <label>
+                  Version:{' '}
+                  <select
+                    name="version"
+                    defaultValue={packageVersion}
+                    onChange={handleChange}
+                    css={{
+                      appearance: 'none',
+                      cursor: 'pointer',
+                      padding: '4px 24px 4px 8px',
+                      fontWeight: 600,
+                      fontSize: '0.9em',
+                      color: '#24292e',
+                      border: '1px solid rgba(27,31,35,.2)',
+                      borderRadius: 3,
+                      backgroundColor: '#eff3f6',
+                      backgroundImage: `url(${SelectDownArrow})`,
+                      backgroundPosition: 'right 8px center',
+                      backgroundRepeat: 'no-repeat',
+                      backgroundSize: 'auto 25%',
+                      ':hover': {
+                        backgroundColor: '#e6ebf1',
+                        borderColor: 'rgba(27,31,35,.35)'
+                      },
+                      ':active': {
+                        backgroundColor: '#e9ecef',
+                        borderColor: 'rgba(27,31,35,.35)',
+                        boxShadow: 'inset 0 0.15em 0.3em rgba(27,31,35,.15)'
+                      }
+                    }}
+                  >
+                    {availableVersions.map(v => (
+                      <option key={v} value={v}>
+                        {v}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+              </p>
             </header>
           </div>
 
diff --git a/modules/client/browse/DirectoryViewer.js b/modules/client/browse/DirectoryViewer.js
index 6b66b3c..93301ec 100644
--- a/modules/client/browse/DirectoryViewer.js
+++ b/modules/client/browse/DirectoryViewer.js
@@ -141,7 +141,12 @@ export default function DirectoryViewer({ path, details: entries }) {
           width: '100%',
           borderCollapse: 'collapse',
           borderRadius: 2,
-          background: '#fff'
+          background: '#fff',
+          '@media (max-width: 700px)': {
+            '& th + th + th + th, & td + td + td + td': {
+              display: 'none'
+            }
+          }
         }}
       >
         <thead>