El estilo DiscoTOC está roto si no hay respuesta en móvil

[Don]

Hola

El estilo DiscoTOC está conectado a la clase .with-topic-progress, que se añade a .topic-navigation si hay más de 1 publicación en el tema. Por lo tanto, sin respuesta, el estilo DiscoTOC se romperá.

Creo que la Tabla de Contenidos (TOC) también debería estar activa si no hay respuesta en un tema porque no está relacionada con el número de respuestas. En el escritorio funciona bien, incluso en temas sin respuesta.

Aquí tienes un tema para probar: Customizing the topic list

Creo que se debería considerar cambiar este comportamiento.

Probablemente no sea algo nuevo, pero no me había dado cuenta hasta ahora. Ahora hemos empezado a usarlo de forma más activa.

Gracias

[JammyDodger]

Yo también me acabo de encontrar con esto. (iPhone/Safari) Sería genial si esto pudiera solucionarse. Desplazarse hasta el final de un documento largo para llegar a la tabla de contenido es un poco engorroso.

[alltiagocom (Tiago)]

Con mis habilidades básicas de codificación y algo de conversación con ChatGPT, creo que logré que funcionara.

Creé un componente personalizado y puse esto en la pestaña CSS:

/* CSS para el componente de Discourse - Solo móvil */
@media (max-width: 767px) {
    #topic-progress-wrapper.sticky-bottom {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }
}

y esto en la pestaña JS

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) =

[Don]

Hola

Esto es genial, gracias, pero creo que también podemos hacerlo solo con CSS. Solo tenemos que usar el mismo CSS en .topic-navigation que se usa en .with-topic-progress. La clase .with-topic-progress faltante está bloqueando el estilo si no hay respuesta en el tema.

Algo como esto debería funcionar.

CSS para móviles

// Navegación de tema fija
.container.posts .topic-navigation:not(.with-topic-progress) {
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
  z-index: z("timeline");
  pointer-events: none; // el contenedor puede bloquear los controles móviles
  
  > * {
    pointer-events: auto; // esto deshabilita la regla anterior para que los elementos hijos sean interactivos
  }
  
  // Añadir estilo TOC
  .d-toc-wrapper {
    position: fixed;
    margin-top: 0.25em;
    height: calc(100vh - 50px - var(--header-offset));
    opacity: 0.5;
    right: -100vw;
    top: var(--header-offset);
    width: 75vw;
    max-width: 350px;
    background-color: var(--secondary);
    box-shadow: var(--shadow-dropdown);
    z-index: z("modal", "overlay");
    transition: all 0.2s ease-in-out;

    .d-toc-main {
      width: 100%;
      padding: 0.5em;
      height: 100%;

      #d-toc {
        max-height: calc(100% - 3em);
      }
    }

    &.overlay {
      right: 0;
      width: 75vw;
      opacity: 1;

      .d-toc-main #d-toc li.d-toc-item ul {
        transition: none;
      }
    }

    a.scroll-to-bottom,
    a.d-toc-close {
      display: inline-block;
      padding: 0.5em;
    }

    .d-toc-icons {
      text-align: right;
    }
  }
}

// Soporte RTL
.rtl {
  .topic-navigation .d-toc-wrapper {
    right: unset;
    left: -100vw;

    &.overlay {
      right: unset;
      left: 0;
    }
  }
}

[chapoi]

Debería arreglarse con

UX: add missing disco toc btn