¡Por favor, comparte tu CSS! Eso facilitaría la corrección del TC.
Aquí hay una forma bastante arriesgada de hacerlo (en common/css, NO en /mobile/css)
@use "lib/viewport";
@include viewport.until(md) {
.d-header:not(:has(.extra-info-wrapper.topic-info-visible)):not(:has(.extra-info-wrapper .topic-link)):not(.header-topic-info-visible) .title {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
}
2 Me gusta
Disculpas, no he tenido oportunidad de mantener este componente exactamente actualizado, pero sí, el cambio de las vistas móviles/escritorio definitivamente rompió algunas de las suposiciones que hacía el componente del tema original.
@Lilly, gracias por impulsarnos en esto; position absolute funcionaría por ahora… la reordenación de elementos en este componente simplemente está aplicando una solución sencilla con CSS Grid en su lugar.
2 Me gusta
Hola a todos, solo dando seguimiento: Lilly hizo un montón de trabajo para limpiar esto y dejarlo actualizado. Acabo de fusionar sus cambios, así que esto debería estar listo para usar ahora.
4 Me gusta
Hola @featheredtoast, tengo un PR aquí para solucionar el problema del encabezado con el tema Horizon en tamaños de viewport para teléfonos plegables y algunas tabletas.
Te lo dejo para que lo revises y lo fusiones:
5 Me gusta
se ve bien, ¡probémoslo, gracias @Lilly!
2 Me gusta
Cuando desplazo hacia arriba dentro de un tema, de modo que el encabezado cambia (para mostrar el nombre del tema y las categorías), ese nuevo encabezado no tiene el icono de hamburguesa. Con el icono de hamburguesa a la izquierda cuando está presente, significa que el icono del foro cambia de posición. Me pregunto si sería posible tener una opción para colocar el icono de hamburguesa a la derecha del icono del foro. Esto significaría que el icono del foro permanecería en el mismo lugar para ambos tipos de encabezado. Gracias.
P.D. Acabo de notar que en el escritorio, sin el componente de tema, el icono de hamburguesa permanece allí todo el tiempo. Quizás eso podría ser una opción para móviles también.
personalmente, no estoy a favor de este cambio (quizás @featheredtoast pueda pensar diferente), pero si lo necesitas, simplemente puedes agregar este CSS en otro componente de tema en tu foro para anular el orden de los elementos.
.d-header {
display: grid;
grid-template-areas: 'logo left-menu custom-header-icon-link-1 custom-header-icon-link-2 custom-header-icon-link-3 custom-header-icon-link-4 custom-header-icon-link-5 extra-info chat header-buttons search right-menu'!important;
}
resultado:
el icono de hamburguesa no debería mostrarse en el encabezado desplazado en móviles para maximizar el espacio del encabezado para títulos de temas más largos
5 Me gusta
Comparto la misma opinión que @Lilly aquí: el objetivo era que la hamburguesa a la izquierda se sintiera como en otras aplicaciones… El salto no es algo para lo que optimicé, ya que la experiencia predeterminada ya lo hacía.
Una vez que esté en cuadrícula, como ella mostró, es fácil actualizar las posiciones de todos los elementos con una mínima intervención desde el componente del tema base aquí.
Estoy abierto a PRs si hay suficiente demanda, pero esta es la primera vez que escucho una solicitud como esta actualmente.
4 Me gusta
¿De verdad?
En escritorio no hay “salto”, ya que (por lo que recuerdo) el menú hamburguesa siempre permanece a la izquierda del icono del foro.
En móvil tampoco hay salto, ya que todo lo demás excepto el icono del foro se reemplaza.
1 me gusta
Comencé a usar tu componente de tema (¡gracias por compartirlo!) y simplemente deshabilité el ícono principal en móviles para hacerlo compatible con nuestra filosofía de UI/UX de mantener todo lo más limpio posible.
1 me gusta
