More iteration on category selector

rafalp · Aug 1, 2024 · 3818a6b · 3818a6b
1 parent 3c3edce
commit 3818a6b
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 22 deletions.
diff --git a/frontend/src/style/misago/select-category-list.less b/frontend/src/style/misago/select-category-list.less
@@ -1,14 +1,8 @@
 .select-category-list {
-  margin: 0;
+  margin: -4px 0;
   padding: 0;
   list-style: none;
 
-  a, span {
-    display: inline-block;
-    margin: 4px 0;
-
-    font-weight: 500;
-  }
 
   a:link,
   a:active,
@@ -26,29 +20,56 @@
 }
 
 .select-category-list-header {
-  a, span {
-    font-weight: bold;
-  }
+  font-weight: bold;
 
   span {
     color: @gray;
   }
 }
 
-.select-category-list-item span {
-  color: @gray-light;
+.select-category-list-item {
+  font-weight: 500;
+
+  span {
+    color: @gray-light;
+  }
 }
 
 .select-category-list-item-level {
   width: 18px;
 }
 
-.select-category-list-item-image {
+.select-category-list-item-name {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  margin: 0 -8px;
+}
+
+a.select-category-list-item-name {
+  &:link,
+  &:active,
+  &:visited,
+  &:hover,
+  &:focus {
+    color: @text-color;
+    text-decoration: none;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: @gray-lighter;
+    border-radius: @border-radius-base;
+  }
+}
+
+.select-category-list-item-bullet {
+  display: inline-block;
   margin-right: 8px;
   width: 8px;
   height: 8px;
 
-  background-color: @gray-lighter;
+  background-color: var(--color, darken(@gray-lighter, 12%));
   border-radius: @border-radius-small;
 }
 

diff --git a/misago/static/misago/css/misago.css b/misago/static/misago/css/misago.css
diff --git a/misago/static/misago/css/misago.css.map b/misago/static/misago/css/misago.css.map
diff --git a/misago/templates/misago/posting/select_category.html b/misago/templates/misago/posting/select_category.html
@@ -1,11 +1,17 @@
 <ul class="select-category-list">
   {% for choice in start_thread_choices %}
     <li class="select-category-list-header">
-      <div class="select-category-list-item-image{% if child.color %} select-category-list-item-color{% endif %}"{% if child.color %} style="--color: {{ child.color }}"{% endif %}></div>
       {% if choice.disabled %}
-        <span>{{ choice.name }}</span>
+        <span class="select-category-list-item-name">
+          <span class="select-category-list-item-bullet"{% if choice.color %} style="--color: {{ choice.color }}"{% endif %}></span>
+          {{ choice.name }}
+        </span>
       {% else %}
-        <a href="{% url 'misago:start-thread' id=choice.id slug=choice.slug %}">
+        <a
+          href="{% url 'misago:start-thread' id=choice.id slug=choice.slug %}"
+          class="select-category-list-item-name"
+        >
+          <span class="select-category-list-item-bullet"{% if choice.color %} style="--color: {{ choice.color }}"{% endif %}></span>
           {{ choice.name }}
         </a>
       {% endif %}
@@ -15,13 +21,17 @@
         {% for _ in child.level %}
           <div class="select-category-list-item-level"></div>
         {% endfor %}
-        <div class="select-category-list-item-image{% if child.color %} select-category-list-item-color{% endif %}"{% if child.color %} style="--color: {{ child.color }}"{% endif %}></div>
         {% if child.disabled %}
-          <span>
+          <span class="select-category-list-item-name">
+            <span class="select-category-list-item-bullet"{% if choice.color %} style="--color: {{ choice.color }}"{% endif %}></span>
             {{ child.name }}
           </span>
         {% else %}
-          <a href="{% url 'misago:start-thread' id=child.id slug=child.slug %}">
+          <a
+            href="{% url 'misago:start-thread' id=child.id slug=child.slug %}"
+            class="select-category-list-item-name"
+          >
+            <span class="select-category-list-item-bullet"{% if child.color %} style="--color: {{ child.color }}"{% endif %}></span>
             {{ child.name }}
           </a>
         {% endif %}