Make responsive, remove extraneous font refs, add video icons, CSS refactor

ipfs / dir-index-html

Directory listing HTML for go-ipfs gateways

MIT License

38 stars 55 forks source link

Make responsive, remove extraneous font refs, add video icons, CSS refactor #29

Closed jessicaschilling closed 4 years ago

jessicaschilling commented 4 years ago

Removes extraneous references to Glyphicons (closes #23)
Makes page responsive overall (closes #24)
Adds file icons for .wmv, .mov, .mkv (closes #19)
Strips out most of the CSS, which looks like it was originally cloned from an early version of Bootstrap but no longer needed
Makes colors consistent with those in ipfs-css
Tidies up in general

jessicaschilling commented 4 years ago

Question for @Stebalien -- What's the best way to test this in situ? At the moment I'm just looking at changes reflected in the unpopulated template, and I don't really trust that. Thanks!

jessicaschilling commented 4 years ago

@Stebalien, if you don't mind having a look, would much appreciate! Thanks.

Stebalien commented 4 years ago

Look:

The filename links kind of blend-in with the new color scheme.
In general, I'm not a fan of the "faded teal", especially in the links and in the list backgrounds.

Responsive:

It definitely looks better on smaller screens.
It would be nice if we could collapse the header items into a menu for really small screens. Right now, the "Install" and "About" buttons wrap.

jessicaschilling commented 4 years ago

@Stebalien The header works down to 315px, which AFAIK is narrower than any mainstream smartphone. Are you seeing something otherwise?

The global teal was changed in ipfs-css for reasons of failing WCAG accessibility contrast; see https://github.com/ipfs-shipyard/ipfs-webui/issues/1379#issuecomment-582457581 for details.

Stebalien commented 4 years ago

We could still pick a less ugly color.

jessicaschilling commented 4 years ago

That’s probably something to take as a discussion within ipfs-css rather than this particular instantiation. Can change links to the bright teal, but please be aware of accessibility caution.

jessicaschilling commented 4 years ago

@Stebalien Updated link color to a blue virtually identical to (but AA-compliant) one used in a few other IPFS contexts but not so far included in ipfs-css. If acceptable, will add as a link-specific color to ipfs-css for future use. Please review as time permits -- thank you.

Stebalien commented 4 years ago

Much better! Sorry for being so opinionated on this, I just really don't like that color.

jessicaschilling commented 4 years ago

@Stebalien Fair enough ... teal-type (green-leaning) blues are REALLY tough to work with from an overall a11y perspective, and I want to make sure that we give overall use of color some very careful consideration as part of the larger-scale a11y analysis to be done in https://github.com/ipfs/ipfs-gui/issues/28. That's also part of a bigger-picture suite of improvements to Desktop/WebUI that we'd ideally focus on in Q3, but in the meantime the GUI team is launching some research/survey work in the next few weeks that'll help inform the best approach. (I also want to do some overall use case/journey mapping around IPFS helper tools this quarter, but that's going to be balanced against spending my time on more tactical improvements like this one.)

RubenKelevra commented 4 years ago

Thanks, looks great!

I was wondering if we could move the PNGs out of the webpage to /ipfs/-links as well. This avoids that the browser have read over the PNG on each page view, but can place it in the cache.

jessicaschilling commented 4 years ago

@RubenKelevra Do you mind filing a separate issue (or PR!) for that one? Ideally we'd like to refactor all those file icons as SVGs that more closely fit the IPFS visual style overall — that would be a good combined effort.