CSS Updates

[dternyak]

Would there be any interest in me spending some time improving the css?

I know not having JS is must, but there are still plenty of frameworks out there that support pure css.

Here's what I came up with after just an hour or so of playing around:

Do you agree this is better? It's only a handful of lines changed outside of bringing in a single, minified css file (9kb) https://milligram.github.io/. Obviously there is a lot of room for improvement, but my goal here is to make helpful style updates with as little code changes as possible.

If this sounds good, I can have a PR up shortly.

[dternyak]

Here's another, slightly more discreet update with hardly any line changes:

[moneroexamples]

Thank you for this. Currently css and html are very messy, to say the least

Some help with making css and html better would be appreciated. I dont know this framework, but one thing to remember is that the explorer is primarily aimed at use in the tor and i2p networks. This adds some constrains and issues not commonly found in clearnet website. In terms of css, the main problem is FOUC. Therefore, to overcome this issue, currently all css is embedded in html. The file style.css is preloaded by C++ and embedded into html content sent to the browser. Nothing is loaded from external files by the browser itself, because you end up with FOUC. So using this framework, have to check how it performs when being embedded in html and in tor browser.

If you want you can try adding the framework with some minimal effort, just to check how it works in tor browser, e.g. is there any noticeable footprint of adding 9kB of css into existing code? I can host the onion version for tests and also add necessary C++ code to embed it into html from external file, just like style.css is being embedded now.

If you want to try, please use this branch, as it has many changes compared to master:

• https://github.com/moneroexamples/onion-monero-blockchain-explorer/tree/try_lru_cache2

The explorer from this branch is running here: http://139.162.32.245:8081/ This is also the vanilla version. xmrchain.net already changed some css, as its white. The original explorer color is black.

One question about the framework. Does it do css based toggling of elements? In the explorer, in two places for now, css toggle checkbox hack is used (because no js). You can check it here: http://139.162.32.245:8081/tx/1e47258e8285532d1964f552125c5f3f49ee47ef33a47802b5e15f8e17517974/1 and "Show JSON representation of tx". This would be good place to start with the framework or css refactoring. Maybe it has some cool feature to make toggling functionality easier to work with? For example, now when clicking on "Show JSON representation of tx" the browser scrolls up or down, and I dont know how to make it not scroll.

If you have any questions or comments please let me know.

[dternyak]

Injecting directly in the HTML page instead of externally loading looks like a good solution against FOAC.

I'm not really familiar with onion based sites and tor, so I'm not sure how to test the footprint. I doubt 9kb will really have an affect though. Maybe I can just push it to a branch and you could test it? Sorry I can't be of much help there.

The framwork doesn't help with toggling much unfortunately. That will have to continue to be custom CSS.

In fact, to start, I don't want to replace any of your existing styles, but instead just apply some additional styling above it.

Also, the "Show JSON representation of tx" at http://139.162.32.245:8081/ doesn't cause my browser to bounce around at all, so it might just be your specific browser that's doing that.

I'll checkout that branch and commit my changes to it, and we can go from there :)

[moneroexamples]

Thanks for PRs. I applied them and added C++ to preload the framework in the new branch:

https://github.com/moneroexamples/onion-monero-blockchain-explorer/tree/pure_css_try

The onion version is running here: http://139.162.32.245:8081/

Probably later will comment more. Just made it run for now. So if you do more changes could you please use his new branch. It already embeds the pure framework into html.

As a side note. There is lots of CSS and JS in the openmonero example. So maybe this project will also interest you, since unlike the onion explorer, it has lots of front-end things to play around.

[dternyak]

Awesome - I'll add some more style updates to that pure_css_try branch.

[dternyak]

@moneroexamples Added some more styling #53

Here's how it looks:

[moneroexamples]

Closing, as there seem to be activity for this. Can reopen if needed.