Barra de pestañas de Discourse para móvil

Me encanta esta idea :heart_eyes: Así que acabo de probarla un poco. Creo que hay una forma mucho mejor de implementarlo, pero por ahora funciona bastante bien en mi sitio. :slight_smile:

Utilizo el código del componente Big Header - Little Header dentro de <head> de la plantilla para lograr esto.


Lamentablemente, en iPhone hay una limitación porque la barra de navegación inferior oculta por completo la barra de pestañas de Discourse. Por eso, la oculto.

¡He actualizado este código!
Ahora solo comparto el código aquí (no estoy seguro de si es fusionable):

Coloca esto en la sección <head> para móviles:

<script type="text/discourse-plugin" version="0.8.18">
   $(document).ready(function() {
        var lastScrollTop = 0;
        var body = $("body");
        var scrollMax = 30;
        $(window).scroll(function() {
            var scroll = $(this).scrollTop();
            if (lastScrollTop < scroll && scroll > scrollMax && !body.hasClass("tab-bar-hidden")) {
                body.addClass("tab-bar-hidden");
            } else if (lastScrollTop > scroll && body.hasClass("tab-bar-hidden")) {
                body.removeClass("tab-bar-hidden");
            }
            lastScrollTop = scroll;
        });
    });
</script>

Coloca esto en la sección de CSS para móviles:

html:not(.anon) {
  #topic-progress-wrapper,
  #reply-control.draft {
    bottom: 49px;
  }
  #reply-control.draft {
    margin-bottom: env(safe-area-inset-bottom);
    padding-bottom: 0px;
    transition: all .1s ease-out;
  }
  .posts-filtered-notice {
    transition: all .1s ease-out;
    bottom: 49px;
  } 
}

body.tab-bar-hidden {
  .d-tab-bar {
    bottom: -49px;
    transition: all .2s ease-in;
  }
  #topic-progress-wrapper:not(.docked),
  #reply-control.draft {
    bottom: 0;
    transition: all .2s ease-in;
  }
  #reply-control.draft {
    margin-bottom: env(safe-area-inset-bottom);
    padding-bottom: 0px;
    transition: all .2s ease-in;
  }
  .posts-filtered-notice {
    transition: all .2s ease-in;
    bottom: 0;
  }
}

.d-tab-bar {
  transition: all .1s ease-out;
}

body:not(.footer-nav-ipad) .footer-nav {
  display: none;
}

Demo

17 Me gusta