feat: layout tweaks for the larger screen (#912)

* fix: layout tweaks for the larger screen

- max-width and center for files list and settings editor
- tweaks to files list to make the the filename clearer
- tweaks to the peers page to make the table responsive
- large screen layout fix for explore page


License: MIT
Signed-off-by: Oli Evans <[email protected]>

package.json

@@ -42,7 +42,7 @@
     "ipfs-redux-bundle": "^4.1.1",
     "ipfs-unixfs": "^0.1.15",
     "ipld": "^0.17.3",
-    "ipld-explorer-components": "^1.0.0",
+    "ipld-explorer-components": "^1.0.1",
     "is-binary": "^0.1.0",
     "is-ipfs": "^0.4.2",
     "milliseconds": "^1.0.3",

src/files/FilesPage.js

@@ -201,7 +201,7 @@ class FilesPage extends React.Component {
     const isRoot = files && files.path === '/'
 
     return (
-      <div data-id='FilesPage'>
+      <div data-id='FilesPage' className='mw9 center'>
         <Helmet>
           <title>{t('title')} - IPFS</title>
         </Helmet>

src/files/file-icon/FileIcon.js

@@ -9,7 +9,7 @@ import DocMusic from '../../icons/GlyphDocMusic'
 import DocPicture from '../../icons/GlyphDocPicture'
 import DocText from '../../icons/GlyphDocText'
 
-const style = { width: '2.25rem' }
+const style = { width: 36 }
 
 export default function FileIcon ({ name, type }) {
   if (type === 'directory') {

src/files/file/File.js

@@ -37,7 +37,7 @@ const File = (props) => {
     connectDragSource
   } = props
 
-  let className = 'File b--light-gray hide-child-l relative flex items-center bt pv1'
+  let className = 'File b--light-gray hide-child-l relative flex items-center bt'
 
   if (selected) {
     className += ' selected'
@@ -72,16 +72,17 @@ const File = (props) => {
           </div>
           <div style={{ width: 'calc(100% - 3.25rem)' }}>
             <Tooltip text={name}>
-              <div className='f6 truncate' style={{ color: '#656464' }}>{name}</div>
+              <div className='f6 truncate charcoal'>{name}</div>
             </Tooltip>
-
             <Tooltip text={hash}>
               <div className='f7 mt1 gray truncate monospace'>{hash}</div>
             </Tooltip>
           </div>
         </div>
       )}
-      <div className='size ph2 pv1 w-10 f6 monospace dn db-l' style={{ color: '#A0B8C5' }}>{size}</div>
+      <div className='size pl2 pr4 pv1 flex-none f6 dn db-l tr charcoal-muted'>
+        {size}
+      </div>
       <div className='ph2 pv1 relative' style={{ width: '2.5rem' }}>
         <ContextMenu
           onShare={onShare}

src/files/files-list/FilesList.js

@@ -299,12 +299,12 @@ export class FilesList extends React.Component {
           <div className='child float-on-left-l ph2 w2' style={allSelected ? { opacity: '1' } : null}>
             <Checkbox checked={allSelected} onChange={this.toggleAll} />
           </div>
-          <div className='ph2 f6 flex-grow-1 w-40'>
+          <div className='ph2 f6 flex-auto'>
             <span onClick={this.changeSort(sorts.BY_NAME)} className='pointer'>
               {t('fileName')} {this.sortByIcon(sorts.BY_NAME)}
             </span>
           </div>
-          <div className='ph2 f6 w-10 dn db-l'>
+          <div className='pl2 pr4 tr f6 flex-none dn db-l'>
             <span className='pointer' onClick={this.changeSort(sorts.BY_SIZE)}>
               {t('size')} {this.sortByIcon(sorts.BY_SIZE)}
             </span>

src/peers/PeersTable/PeersTable.js

@@ -42,10 +42,10 @@ export class PeersTable extends React.Component {
 
   render () {
     const { peerLocationsForSwarm, t } = this.props
-    const tableHeight = 320
+    const tableHeight = 400
 
     return (
-      <div className='bg-white-70 center' style={{ 'height': `${tableHeight}px`, maxWidth: 1100 }}>
+      <div className='bg-white-70 center' style={{ 'height': `${tableHeight}px`, maxWidth: 1764 }}>
         { peerLocationsForSwarm && <AutoSizer disableHeight>
           {({ width }) => (
             <Table
@@ -59,8 +59,8 @@ export class PeersTable extends React.Component {
               rowCount={peerLocationsForSwarm.length}
               rowGetter={({ index }) => peerLocationsForSwarm[index]}>
               <Column label={t('peerId')} dataKey='peerId' width={380} className='charcoal monospace truncate f7 pl2' />
-              <Column label={t('address')} cellRenderer={this.addressCellRenderer} dataKey='address' width={300} className='f6 pl2' />
-              <Column label={t('location')} cellRenderer={this.locationCellRenderer} dataKey='location' width={400} className='f5 navy-muted fw5 truncate pl2' />
+              <Column label={t('address')} cellRenderer={this.addressCellRenderer} dataKey='address' width={300} flexGrow={1} className='f6 pl2' />
+              <Column label={t('location')} cellRenderer={this.locationCellRenderer} dataKey='location' width={380} flexGrow={1} className='f5 navy-muted fw5 truncate pl2' />
             </Table>
           )}
         </AutoSizer> }

src/peers/WorldMap/WorldMap.js

@@ -15,8 +15,8 @@ const WorldMap = ({ t }) => {
   const availableWidth = innerWidth - sidebarAndPadding
   let width = availableWidth * svgWidthOversizeFactor
   // if the map gets too big the dots get lost in the dot grid, also it just overloads the viewers brain.
-  if (width > 4030) {
-    width = 4030
+  if (width > 3000) {
+    width = 3300
   }
   // if the map gets too small it becomes illegible. There will be some map cropping on mobile.
   if (width < 700) {

src/settings/SettingsPage.js

@@ -20,7 +20,7 @@ export const SettingsPage = ({
   hasSaveFailed, hasSaveSucceded, hasErrors, hasLocalChanges, hasExternalChanges, isIpfsDesktop,
   config, onChange, onReset, onSave, editorKey
 }) => (
-  <div data-id='SettingsPage'>
+  <div data-id='SettingsPage' className='mw9 center'>
     <Helmet>
       <title>{t('title')} - IPFS</title>
     </Helmet>