Add custom styles to labels on learning resources

Author: sdelquin

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

@@ -0,0 +1,44 @@
+@import 'apps/commons/static/commons/css/base';
+
+ul {
+  margin-top: 1rem;
+
+  &.resources {
+    li {
+      list-style: initial;
+      margin-left: 20px;
+    }
+  }
+
+  .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;
+      }
+    }
+  }
+}
+
+.learn-index {
+  ul li i {
+    padding-right: 10px;
+  }
+
+  .label {
+    font-size: 1rem;
+    margin-bottom: 0.5rem;
+  }
+}
+
+.learn-resources_by_label {
+  .resource {
+    margin-right: 1rem;
+  }
+}

apps/learn/templates/learn/index.html

@@ -1,4 +1,4 @@
-{% extends "jobs/base.html" %}
+{% extends "learn/base.html" %}
 
 {% load utils %}
 
@@ -10,11 +10,15 @@
 
 <h1 class="title">Aprende Python</h1>
 
-<p>En esta sección podrás encontrar recursos de aprendizaje Python.</p>
+<p>En esta sección podrás encontrar <strong>recursos de aprendizaje Python</strong>. Están clasificados por etiquetas:</p>
 
 <ul>
   {% for label in labels %}
-    <li><a href="{% url "learn:resources_by_label" label=label %}">{{ label }}</a></li>  
+    <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>
+    </li>  
   {% endfor %}
 </ul>
 

apps/learn/templates/learn/resources_by_label.html

@@ -1,4 +1,4 @@
-{% extends "jobs/base.html" %}
+{% extends "learn/base.html" %}
 
 {% load utils %}
 
@@ -10,20 +10,19 @@
 
 <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>
+<h1 class="title"><i class="fas fa-tag"></i> {{ label }}</h1>
 
-<ul>
+<ul class="resources">
   {% for resource in resources %}
     <li>
-      <a href="{{ resource.url }}">{{ resource }}</a>
+      <a class="resource" href="{{ resource.url }}">{{ resource }}</a>
       {% for label in resource.labels.all %}
-        <span class="tag" style="background-color: #{{ label.color }}">
+        <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>
       {% endfor %}

gulp/config.js

@@ -1,35 +1,32 @@
-import path from 'path';
+import path from 'path'
 
-
-function getNodeModulesPathFrom(module_name)
-{
-  let module_path = require.resolve(module_name);
-  while(module_path !== '/' && path.basename(module_path) !== "node_modules")
-  {
-    module_path = path.dirname(module_path);
+function getNodeModulesPathFrom(module_name) {
+  let module_path = require.resolve(module_name)
+  while (module_path !== '/' && path.basename(module_path) !== 'node_modules') {
+    module_path = path.dirname(module_path)
   }
-  return module_path;
+  return module_path
 }
 
-
 const APPS = [
-  "commons",
-  "events",
-  "homepage",
-  "about",
-  "legal",
-  "members",
-  "jobs",
-];
+  'commons',
+  'events',
+  'homepage',
+  'about',
+  'legal',
+  'members',
+  'jobs',
+  'learn',
+]
 
-const NODE_MODULES_DIR = getNodeModulesPathFrom('@fortawesome/fontawesome-free');
+const NODE_MODULES_DIR = getNodeModulesPathFrom('@fortawesome/fontawesome-free')
 
 const LIBS = {
   CSS: {
-    commons: [NODE_MODULES_DIR + "/@fortawesome/fontawesome-free/css/all.css"],
-    homepage: ["apps/homepage/static/homepage/css/vendor.scss"],
+    commons: [NODE_MODULES_DIR + '/@fortawesome/fontawesome-free/css/all.css'],
+    homepage: ['apps/homepage/static/homepage/css/vendor.scss'],
   },
   JS: {},
-};
+}
 
-export { APPS, LIBS, NODE_MODULES_DIR };
+export { APPS, LIBS, NODE_MODULES_DIR }