FKB Pro - Tema social

gilles · 29 Agosto, 2026 16:56

El único pequeño problema con el código scss es que no hay un salto de línea automático, por lo que las palabras se cortan

Don · 29 Agosto, 2026 16:59

¿Qué quieres decir? ¿Puedes enviar una captura de pantalla?

gilles · 29 Agosto, 2026 17:03

Aquí tienes una captura de pantalla de mi teléfono. Se puede observar que el nombre de la categoría no está completo.

Don · 29 Agosto, 2026 17:34

Este es un comportamiento intencional en el núcleo, pero si prefieres que el nombre de la categoría se ajuste a una nueva línea en lugar de truncarse, puedes probar lo siguiente:

.category-heading {
  &.--has-logo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
  }
  &__content {
    min-width: 0;
    .badge-category__wrapper {
      max-width: 100%;
      white-space: normal;
      overflow-wrap: anywhere;
      .badge-category {
        &.--style-emoji,
        &.--style-icon {
          align-items: baseline;
        }
      }
    }
  }
}

gilles · 29 Agosto, 2026 17:59

Don:

.category-heading {
  &.--has-logo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
  }
  &__content {
    min-width: 0;
    .badge-category__wrapper {
      max-width: 100%;
      white-space: normal;
      overflow-wrap: anywhere;
      .badge-category {
        &.--style-emoji,
        &.--style-icon {
          align-items: baseline;
        }
      }
    }
  }
}

¡Genial, funciona! @Don, eres un crack

gilles · 31 Agosto, 2026 06:36

He notado que en la versión para tablet no hay descripción de la categoría, pero en la versión móvil sí. Creo que sería conveniente hacer lo mismo en la versión móvil.

gilles · 31 Agosto, 2026 08:24

También he notado que, si se usan respuestas anidadas, hay un pequeño defecto de visualización del avatar, que se ve un poco grande.

No sé si soy el único.

Don · 31 Agosto, 2026 10:12

¡Gracias, @gilles! He fusionado una actualización para esto…

gilles · 31 Agosto, 2026 13:07

Lo he probado y todo está bien, gracias @Don por tu rapidez

gilles · 1 Septiembre, 2026 08:00

@Don he encontrado un pequeño bug de visualización en el modo escritorio en PC sin la barra lateral, solo como información

Don · 1 Septiembre, 2026 08:16

Gracias, lo he corregido aquí: FIX: Enhance category heading styles in SCSS · VaperinaDEV/fkb-pro-theme@95a3c25 · GitHub

gilles · 1 Septiembre, 2026 08:30

Probado y aprobado

Lou · 1 Septiembre, 2026 14:55

Acabo de instalar esto. Estoy bastante seguro de que había un panel de Fakebook en el lado derecho justo después de la instalación, pero parece haber desaparecido para mí. No estoy seguro de qué cambié para que desapareciera y cómo puedo recuperarlo.

Don · 1 Septiembre, 2026 15:24

Hola Hay un botón en la esquina inferior derecha para alternar esta sección.

Don · 1 Septiembre, 2026 20:19

He actualizado el tema: DEV: Improve FKB panel and right sidebar layout handling - Pull Request #78 - VaperinaDEV/fkb-pro-theme - GitHub

Lou · 1 Septiembre, 2026 20:42

Ah, ahí está, ¡gracias! Hmm, ¿debo haberlo pulsado por accidente? ¿O se desactivó cuando abrí esto en el móvil? Haré algunas pruebas y os contaré.

Don · 2 Septiembre, 2026 06:43

Sí, no se mostrará en dispositivos móviles.

Lou · 2 Septiembre, 2026 09:17

Claro, por supuesto.

Estaba pensando que era posible que se hubiera desactivado para mí en escritorio cuando leía nuestro foro en el móvil. Sin embargo, acabo de hacer esa prueba y el panel no se desactivó. Así que es un misterio cómo se desactivó mi panel en escritorio; debo haber hecho clic accidentalmente en la flecha de desactivación.

xlg256 · 23 Septiembre, 2026 02:56

¡Hola, Don! Me encanta el tema FKB Pro.

Petición rápida: ¿Sería posible añadir una configuración para mostrar varios avatares de participantes en las tarjetas de temas, en lugar de solo el del último mensaje?

El avatar único se ve muy limpio, pero mostrar a varios participantes resalta de verdad lo activa que es una discusión. ¡Un interruptor para esto sería genial!

¡Gracias por tu gran trabajo! Leo

gilles · 1 Octubre, 2026 15:33

Hola @Don, he hecho una pequeña modificación personal para el tema FKB pro para añadir un botón flotante de chat en la esquina inferior derecha en tablet y escritorio, y en la esquina inferior izquierda en móvil, con el mismo efecto que el botón de crear tema. Creo que en el código se podría hacer mejor, pero funciona

Aquí está el código de mi componente: css


// 1. BOTÓN FLOTANTE PRINCIPAL 
.header-dropdown-toggle.chat-header-icon {
    position: fixed !important;
    bottom: 60px !important;
    right: 20px !important;
    z-index: 9999 !important;
    
    /* Dimensiones perfectas (círculo) */
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    border-radius: 50% !important;
    
    /* Color azul brillante y sombra con color */
    background: #0084ff !important;
    box-shadow: 0 4px 14px rgba(0, 132, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    
    /* Limpieza de márgenes */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    
    /* Transición fluida */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease, box-shadow 0.2s ease !important;
}

/* Posición específica en Móvil (Pantallas <= 640px) */
@media (max-width: 640px) {
    .header-dropdown-toggle.chat-header-icon {
        bottom: 80px !important; 
        left: 20px !important;   /* Cambia a right: 20px si prefieres ponerlo a la derecha */
    }
}

/* Efecto al pasar el cursor (ampliación ligera) */
.header-dropdown-toggle.chat-header-icon:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 6px 20px rgba(0, 132, 255, 0.5), 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}


/* 2. LIMPIEZA DEL FONDO GRIS NATIVO DE DISCOURSE                 */

.header-dropdown-toggle.chat-header-icon .icon,
.header-dropdown-toggle.chat-header-icon span:not(.badge-notification):not(.chat-badge):not([class*="unread"]):not([class*="count"]) {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}


/* 3. CENTRADO PERFECTO DEL ÍCONO (La burbuja)                  */

.header-dropdown-toggle.chat-header-icon .d-icon,
.header-dropdown-toggle.chat-header-icon svg {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; 
    
    margin: 0 !important;
    padding: 0 !important;
    width: 32px !important;
    height: 32px !important;
    color: #ffffff !important;
    
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1)) !important;
}


/* 4. INSIGNIA DE NOTIFICACIÓN (Contador verde + Número visible) */

.header-dropdown-toggle.chat-header-icon .badge-notification,
.header-dropdown-toggle.chat-header-icon .chat-badge,
.header-dropdown-toggle.chat-header-icon .unread-notifications,
.header-dropdown-toggle.chat-header-icon [class*="badge"],
.d-header-icons .header-dropdown-toggle.chat-header-icon .badge-notification {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    left: auto !important;
    margin: 0 !important;
    z-index: 10 !important; 
    
    /* Color verde forzado */
    background-color: #53A548 !important;  
    background: #53A548 !important;
    color: #ffffff !important;
    
    /* Tipografía forzada para hacer visible el número */
    font-size: 13px !important;
    font-weight: bold !important;
    line-height: 18px !important;
    letter-spacing: normal !important;
    text-indent: 0 !important;
    
    /* Dimensiones y forma */
    padding: 0 6px !important;
    min-width: 22px !important;
    height: 22px !important;
    border-radius: 50px !important;
    border: 2px solid #ffffff !important;
    box-sizing: border-box !important;
    
    /* Centrado del número */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    
    /* Animación de Pulso Verde (vinculada a tus keyframes) */
    animation: badge-pulse 2s infinite !important; 
}

/* Fuerza a todos los elementos hijos (si Discourse envuelve el número en un span) a mostrarse */
.header-dropdown-toggle.chat-header-icon .badge-notification *,
.header-dropdown-toggle.chat-header-icon .chat-badge *,
.header-dropdown-toggle.chat-header-icon [class*="badge"] * {
    color: #ffffff !important;
    background: transparent !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: inherit !important;
}

/* 5. ANIMACIONES CORREGIDAS (Efecto Radar y Rebote)            */


/* 5.1 - La onda de radar (pulso) alrededor de la insignia roja */
.header-dropdown-toggle.chat-header-icon .badge-notification,
.header-dropdown-toggle.chat-header-icon .chat-badge,
.header-dropdown-toggle.chat-header-icon .chat-channel-unread-indicator {
    animation: badge-pulse 2s infinite !important;
    transform-origin: center !important;
}

/* 5.2 - El efecto de rebote en todo el botón azul cuando hay un mensaje */
.header-dropdown-toggle.chat-header-icon:has(.badge-notification),
.header-dropdown-toggle.chat-header-icon:has(.chat-badge),
.header-dropdown-toggle.chat-header-icon:has(.chat-channel-unread-indicator) {
    animation: chat-bounce 3s infinite !important;
}

/* --- DEFINICIÓN DE LOS KEYFRAMES (No modificar) --- */

/* Definición de la onda: solo usamos box-shadow para evitar errores de visualización */
@keyframes badge-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(250, 62, 62, 0.8);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(250, 62, 62, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(250, 62, 62, 0);
    }
}

/* Definición del rebote: el botón salta ligeramente cada 3 segundos */
@keyframes chat-bounce {
    0%, 20%, 50%, 80%, 100% { 
        transform: translateY(0); 
    }
    40% { 
        transform: translateY(-6px); 
    }
    60% { 
        transform: translateY(-3px); 
    }
}

/* 6. PULSACIÓN EN LA LISTA DE CANALES Y MENSAJES PRIVADOS  */


/* 6.1 - Permitimos el desbordamiento en los contenedores de lista */
.chat-channel-row,
.chat-channel-list-item,
.chat-drawer-container .chat-channel-unread-indicator,
.chat-channel-row .chat-channel-unread-indicator {
    overflow: visible !important;
}

/* 6.2 - Estilo y márgenes del punto indicador */
.chat-channel-row .chat-channel-unread-indicator,
.chat-channel-row .badge-notification,
.chat-channel-row .unread-indicator,
.chat-drawer-container .chat-channel-unread-indicator,
.chat-full-page .chat-channel-unread-indicator,
.chat-channel-list-item .chat-channel-unread-indicator {
    animation: list-dot-pulse 1.8s infinite !important;
    border-radius: 50% !important;
    position: relative !important;
    overflow: visible !important;
    margin: 0 6px !important; /* Espacio para no pegar al texto y a la fecha */
}

/* 6.3 - Animación ajustada (onda más compacta de máx. 6px) */
@keyframes list-dot-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 132, 255, 0.7); /* Se adapta al color del punto */
    }
    70% {
        box-shadow: 0 0 0 6px rgba(0, 132, 255, 0); /* Radio reducido para mantenerse dentro de la línea */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 132, 255, 0);
    }
}

y el JS:

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

export default apiInitializer((api) => {
    let lastScrollTop = 0;
    let isHiddenByScroll = false;

    // 1. Manejador de scroll (Activo ÚNICAMENTE en móvil)
    window.addEventListener("scroll", () => {
        const isMobile = window.innerWidth <= 640;
        const floatBtn = document.querySelector('.header-dropdown-toggle.chat-header-icon');

        if (!floatBtn) return;

        // Si estamos en un ordenador, nos aseguramos de que el botón siga siendo siempre visible
        if (!isMobile) {
            if (isHiddenByScroll) {
                floatBtn.style.setProperty('transform', 'translateY(0) scale(1)', 'important');
                floatBtn.style.setProperty('opacity', '1', 'important');
                isHiddenByScroll = false;
            }
            return;
        }

        const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;

        // Si hacemos scroll hacia abajo (y hemos superado los 100px)
        if (currentScrollTop > lastScrollTop && currentScrollTop > 100) {
            if (!isHiddenByScroll) {
                floatBtn.style.setProperty('transform', 'translateY(100px) scale(0.8)', 'important');
                floatBtn.style.setProperty('opacity', '0', 'important');
                isHiddenByScroll = true;
            }
        } 
        // Si hacemos scroll hacia arriba
        else if (currentScrollTop < lastScrollTop) {
            if (isHiddenByScroll) {
                floatBtn.style.setProperty('transform', 'translateY(0) scale(1)', 'important');
                floatBtn.style.setProperty('opacity', '1', 'important');
                isHiddenByScroll = false;
            }
        }
        lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop;
    }, { passive: true });

    // 2. MutationObserver para gestionar la visualización base
    const observer = new MutationObserver(() => {
        const chatOpen = document.querySelector('.chat-drawer, .d-chat-floating-panel, .chat-widget, .chat-panel, .chat-out-of-container, .chat-full-page');
        const isChatRoute = window.location.pathname.startsWith('/chat');
        const hasFullPageClass = document.body.classList.contains('has-full-page-chat');
        
        const isMobile = window.innerWidth <= 640;
        const isTopicRoute = window.location.pathname.includes('/t/') || document.body.classList.contains('archetype-regular');
        const hideOnMobileTopic = isMobile && isTopicRoute;

        const floatBtn = document.querySelector('.header-dropdown-toggle.chat-header-icon');
        
        if (floatBtn) {
            if (chatOpen || isChatRoute || hasFullPageClass || hideOnMobileTopic) {
                floatBtn.style.setProperty('display', 'none', 'important');
            } else {
                floatBtn.style.setProperty('display', 'flex', 'important');
                
                // Gestión limpia de la ubicación en móvil / escritorio
                if (isMobile) {
                    floatBtn.style.setProperty('left', '10px', 'important'); // Cambia el valor si quieres desplazarlo más
                    floatBtn.style.removeProperty('right');
                } else {
                    floatBtn.style.setProperty('right', '20px', 'important');
                    floatBtn.style.removeProperty('left');
                }
            }
        }
    });

    observer.observe(document.body, { childList: true, subtree: true, attributes: true });
});

Tema		Respuestas	Vistas
Fakebook Theme Theme official , fakebook-theme	138	35443	3 Febrero 2026
A reddit-ish theme for Discourse Theme	120	17979	29 Julio 2026
Topic List Previews (TLP) Theme component	749	41864	31 Agosto 2026
Air Theme Theme air-theme	389	72307	7 Junio 2026
Discourse Category Headers theme component Theme component	191	20377	7 Marzo 2026

FKB Pro - Tema social

Temas relacionados