Lavender, responsive.

julian

Just gonna leave this right here...

psychobunny

haha filmed with a potato

julian

Hahah yeah the .mp4 is higher quality + colour. .webm for portability

Chris

@psychobunny Out of curiosity - how hard would it be to get the loading bar on the top of the lavender into the vanilla theme? It's a really nice touch.

psychobunny

I'm probably not going to add that into vanilla (because vanilla is supposed to be a super simple theme that anyone can use as a starting point for their own). That said, it would be really easy for you to add that into your own theme(s) / plugins. TBH this could be made into a plugin quite easily (most simplest client-side plugin template to follow would be https://github.com/psychobunny/nodebb-plugin-mousetrap)

Just copy this code over:

nodebb-theme-lavender/static/lib/lavender.js at master · NodeBB/nodebb-theme-lavender

A simple theme for NodeBB. Check out the theming guide that accompanies this work - nodebb-theme-lavender/static/lib/lavender.js at master · NodeBB/nodebb-theme-lavender

GitHub (github.com)

lines 56-83

and add the div into your header (could be injected client-side as well, instead of hardcoding into header.tpl). Just extends ajaxify methods to guesstimate how long the page will take to load. Could be better imo, I didn't spend all that much time writing that.

Chris

@psychobunny mini necro here. I finally got around to adding this and it works.. mostly.

The first page load is fine, the loading bar works fine. However every link you click on the bar is already at like 80% loaded and it loads the final 20% of the bar at the top. It doesn't do a full reset of the loading bar unless I refresh the page or on initial visit.

Should I just set it back to 0% via javascript or did I maybe miss something?

psychobunny

Did you copy the LESS over as well?

 .loading-bar {
  width: 100%;
  position: absolute;
  top: -2px;
  right: 0px;
  height: 2px;
  background: white;

  -webkit-transition: width 0.5s ease-in;
  -moz-transition: width 0.5s ease-in;
  -o-transition: width 0.5s ease-in;
  -ms-transition: width 0.5s ease-in;
  transition: width 0.5s ease-in;

&.reset {
-webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  -ms-transition: none;
  transition: none;
  width: 100% !important;
  }
 }

Chris

@psychobunny Ah, that's what it is. That's LESS and not CSS (well, the reset part).