Add color to learning labels

Author: sdelquin

apps/learn/colors.py

@@ -0,0 +1,18 @@
+from typing import Tuple
+
+BLACK = '000000'
+WHITE = 'FFFFFF'
+
+
+def get_rgb_from_hex(value: str) -> Tuple[int, int, int, int]:
+    red = int(value[:2], base=16)
+    green = int(value[2:4], base=16)
+    blue = int(value[4:6], base=16)
+    alpha = int(value[6:8], base=16) if len(value) > 6 else 255
+    return red, green, blue, alpha
+
+
+def get_luminance(red, green, blue, alpha) -> int:
+    luminance = 0.2126 * red + 0.7152 * green + 0.0722 * blue
+    luminance *= alpha / 255
+    return round(luminance)

apps/learn/migrations/0003_label_color.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.2.13 on 2022-06-22 18:39
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('learn', '0002_auto_20220602_1951'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='label',
+            name='color',
+            field=models.CharField(default='FF0000', max_length=8),
+        ),
+    ]

apps/learn/models.py

@@ -1,16 +1,26 @@
 from django.db import models
 
+from . import colors
+
 
 class Label(models.Model):
     class Meta:
         ordering = ['name']
 
     name = models.CharField(max_length=120)
     slug = models.SlugField(max_length=120, unique=True)
+    # Label color in hex mode
+    color = models.CharField(max_length=8, default='FF0000')
 
     def __str__(self):
         return self.name
 
+    @property
+    def foreground_color(self):
+        rgb_color = colors.get_rgb_from_hex(self.color)
+        luminance = colors.get_luminance(*rgb_color)
+        return colors.BLACK if luminance > 128 else colors.WHITE
+
 
 class Resource(models.Model):
     class Meta:

apps/learn/templates/learn/base.html

@@ -5,7 +5,3 @@
 {% block style %}
   <link rel="stylesheet" href="{{ assets|get_asset_key:'learn/custom.min.css' }}">
 {% endblock style %}
-
-{% block js %}
-  <script src="{{ assets|get_asset_key:'learn/custom.min.js' }}"></script>
-{% endblock js %}

apps/learn/templates/learn/index.html

@@ -10,6 +10,8 @@
 
 <h1 class="title">Aprende Python</h1>
 
+<p>En esta sección podrás encontrar recursos de aprendizaje Python.</p>
+
 <ul>
   {% for label in labels %}
     <li><a href="{% url "learn:resources_by_label" label=label %}">{{ label }}</a></li>  

apps/learn/templates/learn/resources_by_label.html

@@ -8,14 +8,24 @@
 
 {% block content %}
 
+<nav class="breadcrumb" aria-label="breadcrumbs">
+  <ul>
+    <li><a href="{% url "homepage" %}">⌂</a></li>
+    <li><a href="{% url "learn:index" %}">Aprende Python</a></li>
+    <li class="is-active"><a href="#" aria-current="page">{{ label }}</a></li>
+  </ul>
+</nav>
+
 <h1 class="title">{{ label }}</h1>
 
 <ul>
   {% for resource in resources %}
     <li>
       <a href="{{ resource.url }}">{{ resource }}</a>
       {% for label in resource.labels.all %}
-        <span class="tag is-primary"><a href="{% url "learn:resources_by_label" label=label %}">{{ label }}</a></span>
+        <span class="tag" style="background-color: #{{ label.color }}">
+          <a style="color: #{{ label.foreground_color }}" href="{% url "learn:resources_by_label" label=label %}">{{ label }}</a>
+        </span>
       {% endfor %}
     </li>  
   {% endfor %}