Add number of resources per label

Author: sdelquin

apps/learn/static/learn/css/main.scss

@@ -1,31 +1,34 @@
 @import 'apps/commons/static/commons/css/base';
 
-ul {
-  margin-top: 1rem;
+a.label {
+  display: inline-block;
+  font-size: 13px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  padding-left: 9px;
+  padding-right: 9px;
+  border-radius: 10px;
 
-  &.resources {
-    li {
-      list-style: initial;
-      margin-left: 20px;
-    }
+  &:hover {
+    background-color: #154360 !important;
+    color: white !important;
   }
 
-  .label {
-    display: inline-block;
-    font-size: 13px;
-    padding-left: 9px;
-    padding-right: 9px;
-    border-radius: 10px;
-
-    &:hover {
-      background-color: #154360 !important;
-      a {
-        color: white !important;
-      }
-    }
+  span.badge {
+    background-color: rgba(255, 255, 255, 0.518);
+    margin-left: 3px;
+    border-radius: 12px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    padding-left: 3px;
+    padding-right: 3px;
   }
 }
 
+ul {
+  margin-top: 1rem;
+}
+
 .learn-index {
   ul li i {
     padding-right: 10px;
@@ -38,7 +41,14 @@ ul {
 }
 
 .learn-resources_by_label {
-  .resource {
+  a.resource {
     margin-right: 1rem;
   }
+
+  ul.resources {
+    li {
+      list-style: initial;
+      margin-left: 20px;
+    }
+  }
 }

apps/learn/templates/learn/index.html

@@ -15,9 +15,12 @@ <h1 class="title">Aprende Python</h1>
 <ul>
   {% for label in labels %}
     <li>
-      <span class="label" style="background-color: #{{ label.color }}">
-        <a style="color: #{{ label.foreground_color }}" href="{% url "learn:resources_by_label" label=label %}">{{ label }}</a>
-      </span>
+        <a class="label"
+           style="background-color: #{{ label.color }}; color: #{{ label.foreground_color }}"
+           href="{% url "learn:resources_by_label" label=label %}">
+           {{ label }}
+           <span class="badge">{{ label.resources.all.count }}</span>
+        </a>
     </li>  
   {% endfor %}
 </ul>

apps/learn/templates/learn/resources_by_label.html

@@ -22,9 +22,11 @@ <h1 class="title"><i class="fas fa-tag"></i> {{ label }}</h1>
     <li>
       <a class="resource" href="{{ resource.url }}">{{ resource }}</a>
       {% for label in resource.labels.all %}
-        <span class="label" style="background-color: #{{ label.color }}">
-          <a style="color: #{{ label.foreground_color }}" href="{% url "learn:resources_by_label" label=label %}">{{ label }}</a>
-        </span>
+        <a class="label"
+           style="background-color: #{{ label.color }}; color: #{{ label.foreground_color }}"
+           href="{% url "learn:resources_by_label" label=label %}">
+           {{ label }}
+        </a>
       {% endfor %}
     </li>  
   {% endfor %}

apps/learn/views.py

@@ -4,7 +4,7 @@
 
 
 def index(request):
-    labels = Label.objects.all()
+    labels = Label.objects.prefetch_related('resources').all()
     return render(request, 'learn/index.html', {'labels': labels})