Some feedback from the lovely folk at my forum

  • NodeBB Admin

    @a_5mith update to latest version of lavender and change your code to

    <script>
    $(window).on('action:widgets.loaded', function() {
    var panel = $('<div class="panel pointer"><div class="panel-body text-center"><i class="fa fa-lightbulb-o fa-2x"></i></div></div>');
    $('.overlay-container').append(panel);
    panel.on('click', function() {
        localStorage.setItem('user:theme', 'lights-out');
        var theme = localStorage.getItem('user:theme');
      $('body').toggleClass(theme);
    });    
    });
    </script>
    

    Let me know if it works.


  • @baris Hey bud, that solved 1 of the 3 issues. Each page load still brings up a new icon though, nor does it remember the option.

    Lavender was updated to 0.0.66 and Vanilla to 0.0.80 if that helps.

  • NodeBB Admin

    This should fix the icon being added on each page load and remembering

    <script>
    $(window).on('action:widgets.loaded', function() {
      if (!$('.panel.lights-out').length) {
        var panel = $('<div class="panel lights-out pointer"><div class="panel-body text-center"><i class="fa fa-lightbulb-o fa-2x"></i></div></div>');
        $('.overlay-container').append(panel);
        panel.on('click', function() {
            enabled = !$('body').hasClass('lights-out');
            $('body').toggleClass('lights-out',  enabled);
            localStorage.setItem('user:theme', enabled ?  'lights-out' : '');
        });    
      }
    });
    </script>
    

    To remember the theme on page load

    <script>
    $('document').ready(function() {
        var theme = localStorage.getItem('user:theme');
        if (theme) {
            $('body').addClass(theme );
        }
    });
    </script>
    

    Obviously I didn't test any of this code 😆


  • @baris Getting closer, it remembers the theme, but the button doesn't display anymore. 😆

    EDIT: Cleared my localstorage. When the theme is "normal", the button is there, when it is set to 'lights-out' the button vanishes. So I'd need the button to toggle it back if required. (If possible)

  • NodeBB Admin

    Updated the code in the previous post, body and the button had the same class so changed the selector to if (!$('.panel.lights-out').length) {


  • @baris Perfect, thanks a lot for the help. 👍 Just need to work on Chrome now not changing .fade-out. 😆 Thanks again!

  • NodeBB Admin

    That's a css style in vanilla.

    .fade-out {
    	position: absolute;
    	top: 190px;
    	left: 0;
    	width: 100%;
    	margin: 0;
    	padding: 30px 0;
    	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, transparent),color-stop(1, white));
    	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), white);
    	background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), white);
    	background-image: -ms-linear-gradient(top, transparent, white);
    	background-image: -o-linear-gradient(top, transparent, white);
    }
    

    Just change the white to your desired background color. In your case I think it is #2b2b2b

    I think.

    .lights-out .fade-out {
    	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, transparent),color-stop(1, #2b2b2b));
    	background-image: -webkit-linear-gradient(top, rgba(43, 43, 43, 0), #2b2b2b);
    	background-image: -moz-linear-gradient(top, rgba(43, 43, 43, 0), #2b2b2b);
    	background-image: -ms-linear-gradient(top, transparent, #2b2b2b);
    	background-image: -o-linear-gradient(top, transparent, #2b2b2b);
    }
    

    Should work, adjust if you want a different color.

  • Admin

    haha nice, @baris fixing my derp for me 😄


  • Back with another one or two, there's a noticeable delay between pages loading now, happens here and on my place, also the fade out and back in of pages feels like " wading through quicksand", I'm inclined to agree, waiting for a page to fade out when you've clicked somewhere else is a bit silly, would a better option not be wait until the next page is ready and just snap between them? Or is this done because of a limitation?

  • GNU/Linux Admin

    Will defer to @psychobunny for an in-depth reply, but the fade-out is only happening because NodeBB needs to fetch the data and parse the template. If all that is done before the fadeout is finished, then we'll stop it immediately and start the fade-in with the new content.

    There might be a 100ms delay, mostly because wanted to avoid this:

    1. Content starts fading out
    2. While it's at 50% opacity, the new content appears, and user gets to watch the new content fade out
    3. New content fades in 😕

    #toofastproblems


  • @julian Makes sense. When it doesn't fade, it's really quick, but when it fades out, then sits there for a bit, it seems slower than usual. Probably doesn't help my VPS is almost maxed out with the posts I've got (upgrade imminent).

    😆

  • Admin

    I know we added an extra delay because the pages were loading too fast... over here at least. Maybe that's what is slowing you guys down?


  • @psychobunny It's kind of like the delay happens after the page fades out, rather than during for me. 😕

  • GNU/Linux Admin

    @a_5mith Keep in mind that every plugin you install takes time to parse their portion of the post.

    So if you're loading a thread with lots of soundcloud embeds, that might take a long time depending on how slow the soundcloud API is.

    Best practice is to cache those API calls, so repeated calls load from cache instead of making that network call to the soundcloud API again. I do this with GitHub plugin, which explains why sometimes after a bug is closed, the referenced bug is still listed as "open" in the embed here 😄


  • @julian Does it from Home to Categories and back again too, I'll look into the caching though, as it would be useful, I already lazyload youtube videos (plugin is coming). 😛

  • Admin

    Clear your cache here, does it seem a bit better for you now?


  • @psychobunny It's absolutely perfect on Canary (Chrome), but Firefox still has a mild delay between the page fading out and the other page fading back in again. 😕

  • Admin

    Yeah I see the same thing you do. I need to rework how ajaxify happens, @julian was mentioning a cross-fade, but I'm not sure if it would look good or would look like one of those corny wedding home videos kinda thing 😛


  • @psychobunny While we're discussing the fading, is there a way to turn it off? It's nice an all but I would like to turn it off for a forum I'm working on.

  • NodeBB Admin

    I think putting the following in customCSS will stop the fade in out

    .ajaxifying {
    	-moz-opacity: 1.00;
    	opacity: 1.00;
    	-ms-filter:~"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
    }
    

    You can modify the vanilla theme to completely remove the transition as well, not sure which one is better. https://github.com/NodeBB/nodebb-theme-vanilla/blob/master/less/style.less#L78


Suggested Topics

| | |

© 2014 – 2022 NodeBB, Inc. — Made in Canada.