no-JS fixes #852
no-JS fixes #852
Conversation
|
Before:
After:
The other views show the removed "Age" columns, etc. |
There was a problem hiding this comment.
Other than the comments below, I would maybe consider hiding the /ticketpricewindows and /charts links from the hamburger menu, as those pages are pretty much worthless without js.
I put in a PR on your branch for reference or merge.
views/extras.tmpl
Outdated
| @@ -77,7 +77,7 @@ | |||
| {{else}} | |||
| <a data-keynav-skip href="https://explorer.dcrdata.org/" title="Home">Switch To Mainnet</a> | |||
| {{end}} | |||
| <span data-keynav-skip data-action="click->menu#onSunClick" class="jsonly d-inline-block"><span id="sun-icon" class="dcricon-sun-fill no-underline pr-2"></span> Night Mode</span> | |||
| <span data-keynav-skip data-action="click->menu#onSunClick" class="jsonly d-inline-block"><span id="sun-icon" class="dcricon-sun-fill no-underline pr-2 jsonly"></span> Night Mode</span> | |||
There was a problem hiding this comment.
There was already a .jsonly on the containing span, but there were a number of things coming together here to make this not work.
First, bootstrap d-inline-block's definition is display: inline-block!important; which is the highest specificity, so .jsonly's display: none; was ineffective. Some quick testing indicates that the d-inline-block tag is unnecessary (maybe due to some change in main.css), so probably just remove it.
Second, the way .jsonly elements are shown programmatically is a little blunt. jQuery show() adds a style attribute with display: inline; because that is the default display mode of anchor and span elements. Instead, the .jsonly class should simply be removed so that non-default display mode from the stylesheets can take precedence.
$('.jsonly').removeClass('jsonly')
Of course, changes in index.js will conflict with the SCSS PR, so that stinks.
Third, display: block; was being assigned with a high specificity here, so .jsonly was again innefective.
There was a problem hiding this comment.
I discovered the d-inline-block issue, as I noted in the PR description, but I see it's quite a bit worse here. I considered trying a removeClass, but decided not to do anything too drastic. I'll leave this issue until after the bigger PRs go in.
|
@buck54321 Thanks for your PR. Changes merged in. Testing it out. |
Set fallback fonts of the same class as the webfonts: - monospace for inconsolata-v15-latin-regular - sans-serif for source-sans-pro-v9-latin-regular Hide all "Age" columns with jsonly class since all age values are set via stimulus.js. Also hide all ages in "(X ago)" spots. Hide the sun/moon icon with jsonly since it is also a webfont. Ideally both the Night Mode and Enable Hot Keys menu items would be hidden entirely, but they are difficult to eliminate. Prevent text like Coinbase and Stakebase from being hash-elided by defining a new flag, TextIsHash, that is set in Go to avoid heuristics in the frontend.
main.age -> time.age
…ning span bracket in block.tmpl.
|
Seems all good now. I had to put the |
This addresses a number of issues in browsers with JavaScript disabled.
Set fallback fonts of the same class as the webfonts:
Hide all "Age" columns with jsonly class since all age values are set
via stimulus.js.
Also hide all ages in "(X ago)" spots.
Hide the sun/moon icon with jsonly since it is also a webfont. Ideally
both the Night Mode and Enable Hot Keys menu items would be hidden
entirely, but they are difficult to eliminate.
d-inline-blockusesdisplay: inline-block !important, which seems to neutralize jQuery'sshow().Hide the "since last block" and websocket status footer elements.
Prevent text like Coinbase and Stakebase from being hash-elided by
defining a new flag, TextIsHash, that is set in Go to avoid heuristics
in the frontend.