Mostrar etiquetas en la tarjeta del tema en el tema Horizon

Característica
,
1

No me di cuenta de que las etiquetas no estaban en las tarjetas de temas en las listas de temas del tema Horizon hasta que vi esto:

Ciertamente sería muy útil tenerlas, ¡así que esto tiene mi :+1:!

2 Me gusta
3

¡De acuerdo! Sería bueno poder habilitar/deshabilitar si se muestran las etiquetas.

Editar: Algunos CSS de solución que funcionaron bien para nosotros (WIP)

CSS común:

/* Metadatos de la lista de temas de Horizon + etiquetas de píldora */
.topic-list-body .topic-list-item {
  row-gap: var(--space-2);
}

.topic-list-body .topic-list-item .link-bottom-line .badge-category__wrapper  {
  display: none;
}

.topic-list-body .topic-list-item td.main-link .link-bottom-line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top: var(--space-1);
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  font-size: var(--font-0) !important;
  line-height: 1.35;
  grid-column: 2 / -2;
}

.topic-list-body .topic-list-item td.main-link .discourse-tags {
  display: inline-flex!important;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.topic-list-body .topic-list-item td.main-link .discourse-tag,
.topic-list-body .topic-list-item td.main-link .discourse-tag.box {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: calc(var(--space-1) * 1.25) var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--primary-low-mid);
  background: var(--secondary);
  color: var(--primary-high);
  font-weight: 500;
  box-shadow:
    inset 0 1px 0 var(--secondary-very-high),
    inset 0 -1px 0 var(--primary-low);
  text-decoration: none;
  margin-right: var(--space-1);
}

.topic-list-body .topic-list-item td.main-link .discourse-tag:hover,
.topic-list-body .topic-list-item td.main-link .discourse-tag.box:hover {
  border-color: var(--primary-low);
  background: var(--secondary-high);
}

CSS para móviles:

    .topic-list-body .topic-list-item .badge-category__wrapper {
        font-size: var(--font-down-1);
    }
    .topic-list-item .discourse-tags {
    font-weight: normal;
    font-size: var(--font-down-2);
}
2 Me gusta
4

¡Genial!

¿Hay alguna posibilidad de que te interese empaquetar eso como un Componente Temático y compartirlo?

1 me gusta
5

Preferiría verlo integrado en el tema de Horizon como una configuración directa, sería más apropiado allí. De lo contrario, seguimos agregando TC de una sola característica tras otra.

Veré si puedo enviar una PR y cómo… pero no cuentes con ello.

2 Me gusta
6

No soy un profesional, así que las operaciones de CSS son un poco desafiantes para mí… :sob: ¿Es posible que esta función de visualización de etiquetas se empaquete como una configuración integrada dentro del tema Horizon? ¿O quizás se implemente como un componente de tema separado? Si existe alguna posibilidad de que esto suceda, ¡estaré dispuesto a esperar! Si hay la más mínima posibilidad, agradecería mucho que alguien me mantuviera informado. ¡Muchas gracias!

7

Alternativamente, ¿podrías decirme dónde en el sitio web debo agregar este CSS? No encuentro ningún lugar para escribir CSS en mi tema Horizon (me disculpo, como puedes ver no soy un profesional, así que me faltan estos conceptos básicos de programación :sob: :cry: ).

8

Puedes añadir tu propio componente temático al tema en el que añades CSS personalizado

1 me gusta