عرض العلامات على بطاقة الموضوع في سمة Horizon

ميزة
,
1

لم ألاحظ أن العلامات لم تكن موجودة على بطاقات الموضوع في قوائم الموضوعات الخاصة بسمة Horizon حتى رأيت هذا:

سيكون بالتأكيد مفيدًا جدًا لوجودها، لذا فهذا يحصل على تأييدي :+1:!

إعجابَين (2)
3

أتفق! سيكون من الجيد أن نتمكن من تمكين/تعطيل ما إذا كانت العلامات معروضة أم لا.

تعديل: بعض الحلول البديلة لـ CSS التي نجحت بشكل جيد معنا (قيد العمل)

CSS المشترك:

/* Horizon topic list metadata + pill tags */
.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 للجوال:

    .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)
4

رائع!

هل هناك أي فرصة لاهتمامك بتغليف ذلك كمكون سمة (Theme Component) ومشاركته؟

إعجاب واحد (1)
5

أفضل أن أراها مدمجة في سمة Horizon كإعداد مباشر، سيكون ذلك أكثر ملاءمة هناك. بخلاف ذلك، سنستمر في إضافة ميزة واحدة تلو الأخرى.

سأرى ما إذا كان بإمكاني تقديم طلب سحب (PR) وكيف يمكنني القيام بذلك… ولكن لا تعتمد على ذلك.

إعجابَين (2)
6

لست محترفًا، لذا فإن عمليات CSS تمثل تحديًا لي بعض الشيء…:sob: هل من الممكن تغليف ميزة عرض العلامات هذه كإعداد مدمج ضمن سمة Horizon؟ أو ربما تنفيذها كمكون سمة منفصل؟ إذا كان هناك أي احتمال لحدوث ذلك، فسأكون على استعداد للانتظار! إذا كانت هناك فرصة ضئيلة، فسأكون ممتنًا جدًا إذا تمكن شخص ما من إبقائي على اطلاع دائم. شكرًا جزيلاً لك!

7

بدلاً من ذلك، هل يمكنك إخباري أين يجب علي إضافة هذا الـ CSS على موقع الويب؟ لا يمكنني العثور على أي مكان لكتابة الـ CSS في سمة Horizon الخاصة بي (أعتذر، كما ترى لست محترفًا، لذا أفتقر إلى هذه الأساسيات البرمجية :sob: :cry: ).

8

يمكنك إضافة مكون سمة خاص بك إلى السمة التي تضيف إليها CSS مخصصًا

إعجاب واحد (1)