search

gochain / netstats

GNU General Public License v3.0
4 stars 4 forks source link

web: remove max-width; make responsive #48

Closed jmank88 closed 5 years ago

jmank88 commented 5 years ago

This PR removes the max-width: 1000px limit and adapts the interface to lower resolutions. The biggest change is that the table collapses gracefully, but there are many other small tweaks as well. Screenshot from 2019-05-21 09-34-57

brockmcblockchain commented 5 years ago

If you want some mobile style:

@media only screen and (max-width: 992px)
  .nodeBody>.nodeRow {
    padding: 2rem 1rem 4rem;
  }
  .big-info.chart {
    display: none;
  }
  .nodeBody>.nodeRow:nth-child(odd) {
    background: #232323b3;
  }
}

take it or leave it -- just gives the rows of nodes a bit more breathing room/difference in background to make them more readable. Also removes the big bars of blue that don't really mean anything on mobile as they rely on hover to show their data.

jmank88 commented 5 years ago

Updated with row padding and odd backgrounds. I don't want to hide the charts just yet, since I think they can be improved and the tooltips are still accessible right now - created #49 to follow up since this may be a more JS heavy change. Edit: Was breaking on block numbers in the millions - tweaked to fit up to hundreds of millions.