Make ToH usable on a phone - #54
Conversation
On a phone the 23 column table had to be scrolled sideways. Below 767px rows are cards, folded to the device name until tapped: 11 devices per screen instead of 5. On a wide monitor the fixed column widths left 319px empty at 1600px and 1279px at 2560px. That space now goes to the columns holding text. Signed-off-by: Josef Schlehofer <pepe.schlehofer@gmail.com>
The controls above the table ate 253px of a 780px phone screen. They move into a drawer, which brings the first device up to 137px. Inside they were still built for a wide page: floated blocks and 173 controls under 32px. The desktop panel was no better, packing filters into 17px rows with 13px checkboxes, so the comfortable sizes apply everywhere and the drawer only goes further. RAM and Flash get a row of buttons instead of checkboxes. Flash needs the flash>= operator for values like "64, 128, 256", and both need numbers: as strings, "64" >= "128" is true and the filter let everything through. Adds Bootstrap's JS bundle. Only its CSS was vendored, so the drawer had nothing to run on. Signed-off-by: Josef Schlehofer <pepe.schlehofer@gmail.com>
The header dropped the floats holding its parts side by side at a fixed 1065px, so the search fell onto a second line while the bar was still half empty. It is a flex row now and wraps at 800px, when the parts really stop fitting. The phone shows fewer columns on purpose, so the top bar offers the full table, and the way back. Signed-off-by: Josef Schlehofer <pepe.schlehofer@gmail.com>
aa91895 to
e261a72
Compare
|
If you happen to have some time, @soif, I'd appreciate it if you could take a look. I'd like to move this forward so we don't have to unnecessarily revisit it later. |
|
Hi @BKPepe, Sorry for the late review. I simply didn't have enough time to go through it earlier. Overall, I think this is a really nice improvement. Things I particularly like:
A few things that, in my opinion, could still be improved on the mobile view:
These are mostly small UI/UX refinements. Overall, I really like the direction this PR is taking. By the way, I'll be leaving on vacation tomorrow and will be away for about 20 days, so I won't be available to continue reviewing during that time. I'll definitely pick it up again as soon as I'm back. Thanks again for all the work you've put into this. It's already a fantastic contribution, and I really appreciate the effort. |
The logo sat 5.5px below the middle of the header bar: its padding was still the 11px/0 the float layout needed, and #toh-header-bg centres a flex row now, so the padded box was centred rather than the logo inside it. On a phone the chrome was charging for itself - 24px for the panel's side borders, another 20px for the drawer's own padding - so the card list and the filters each get that width back. A card's brand stays left and its model moves to the right edge before the chevron, which gives a scrolling list one column of makers and one of names. The column checkboxes were 16px rows, aimed at a pointer; on a coarse pointer they are 39px. Reported by soif in the review of openwrt#54. Signed-off-by: Josef Schlehofer <pepe.schlehofer@gmail.com>
On a phone the ToH is a 23 column table you pan around sideways, with the
controls eating the first third of the screen. This gives the phone a layout of
its own and leaves the desktop a table.
Below 767px rows become cards folded to the device name, so a screenful is 11
devices instead of 5, and the filters move into a drawer, which brings the first
device up from 253px to 137px. A link offers the full table to anyone who would
rather pan around it.
At every width the filter rows go from 17px to 30px, RAM and Flash are picked
with buttons rather than checkboxes, and the columns finally use the whole
window: 319px sat unused at 1600px, 1279px at 2560px.
It vendors Bootstrap's JS bundle, because only the CSS
was in the tree and the drawer needs it.
It fixes Flash filtering, which compared values as strings, where
"64" >= "128"is true and let almost everything through. Counts now matchtoh.json.Can be tested here: https://bkpepe.github.io/toh-openwrt-org/preview/feature-responsive-ui/?view=normal
Fixes: #52