Añade entidades/organizaciones amigas (aliados)

apps/about/admin.py

@@ -0,0 +1,13 @@
+from django.contrib import admin
+
+from . import models
+
+
+@admin.register(models.Ally)
+class AllyAdmin(admin.ModelAdmin):
+    list_display = (
+        'name',
+        'url',
+        'twitter',
+        'email',
+    )

apps/about/migrations/0001_initial.py

@@ -0,0 +1,26 @@
+# Generated by Django 2.2.24 on 2021-10-12 17:37
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Ally',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=120, verbose_name='Nombre')),
+                ('description', models.CharField(max_length=220, verbose_name='Descripción')),
+                ('logo', models.ImageField(blank=True, upload_to='about/allies/')),
+                ('url', models.URLField(blank=True)),
+                ('twitter', models.URLField(blank=True)),
+                ('email', models.EmailField(blank=True, max_length=254)),
+            ],
+        ),
+    ]

apps/about/models.py

@@ -0,0 +1,18 @@
+from django.db import models
+
+
+class Ally(models.Model):
+    '''Organizaciones/Asociaciones aliadas'''
+
+    name = models.CharField('Nombre', max_length=120)
+    description = models.CharField('Descripción', max_length=220)
+    logo = models.ImageField(upload_to='about/allies/', blank=True)
+    url = models.URLField(blank=True)
+    twitter = models.URLField(blank=True)
+    email = models.EmailField(blank=True)
+
+    def __str__(self):
+        return self.name
+
+    class Meta:
+        ordering = ['name']

apps/about/static/about/css/allies.scss

@@ -0,0 +1,21 @@
+.ally-block {
+  margin-bottom: 2rem;
+  img {
+    width: 5rem;
+    vertical-align: middle;
+  }
+  p.description {
+    i.quote {
+      color: gray;
+    }
+  }
+  ul {
+    list-style-type: none;
+    margin-left: 1rem;
+    padding-left: 1rem;
+    border-left: 2px solid lightgray;
+    i {
+      width: 1.5rem;
+    }
+  }
+}

apps/about/static/about/css/main.scss

@@ -1,9 +1,11 @@
 @import 'apps/commons/static/commons/css/base';
 
+@import './allies';
+
 .about-index {
   p {
-    padding-top: .5rem;
-    padding-bottom: .5rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
   }
 
   .message a.headerlink {

apps/about/templates/about/allies.html

@@ -0,0 +1,40 @@
+{% extends "about/base.html" %}
+{% load utils %}
+{% load static %}
+
+{% block title %}Aliados - {{ block.super }}{% endblock %}
+
+{% block content %}
+
+<div class="content box">
+
+<h1>Aliados</h1>
+
+<p>
+Canarias es un territorio muy prolífico en el campo de las nuevas tecnologías. Las organizaciones y asociaciones de este sector constituyen un punto de entrada para muchos usuarios y usuarias. Aquello de que la unión hace la fuerza es un principio que seguimos desde Python Canarias. Si bien apostamos, como era de esperar, por nuestro lenguaje de programación favorito, somos una comunidad abierta y nos encanta construir sinergias con otros grupos. Aquí les dejamos un listado de nuestros <b>aliados</b>:
+</p>
+
+{% for ally in allies %}
+  <div class="ally-block" id="{{ ally.name|slugify }}">
+    <h2 class="dyn-anchor-heading">
+      <img src="{{ ally.logo.url }}"> {{ ally.name }}
+      <a class="dyn-anchor-link" href="#{{ ally.name|slugify }}"><i class="fas fa-link"></i></a>
+    </h2>
+    <p class="description"><i class="fas fa-quote-left quote"></i> {{ ally.description }} <i class="fas fa-quote-right quote"></i></p>
+    <ul>
+      {% if ally.url %}
+        <li><i class="fas fa-home"></i> <a href="{{ ally.url }}">{{ ally.url }}</a></li>
+      {% endif %}
+      {% if ally.twitter %}
+        <li><i class="fab fa-twitter"></i> <a href="{{ ally.twitter }}">{{ ally.twitter }}</a></li>
+      {% endif %}
+      {% if ally.email %}
+        <li><i class="far fa-envelope"></i> <a href="mailto:{{ ally.email }}">{{ ally.email }}</a></li>
+      {% endif %}
+    </ul>
+  </div>
+{% endfor %}
+
+</div>
+
+{% endblock content %}

apps/about/templates/about/index.html

@@ -23,7 +23,7 @@
   <div class="message-body">
     <strong>{{ organization.name }}</strong> es una asociación sin ánimo de lucro cuyos objetivos, son, entre otros, promover el <strong>uso del lenguaje</strong> de programación Python, dar <strong>soporte</strong> a quienes deseen aprenderlo y promover la programación como una <strong>competencia educativa básica</strong>.</p>
 
-    <p>La asociación fue creada el <strong>{{ organization.registration_date|date:"d/m/Y" }}</strong> y desde entonces ha organizado <a href="{% url 'events:past_events' %}">diferentes eventos</a> de difusión del lenguaje de programación Python colaborando en el incremento de la comunidad de usuarios de Python en Canarias.</p>
+    <p>La asociación fue creada el <strong>{{ organization.registration_date|date:"d/m/Y" }}</strong> y desde entonces ha organizado <a href="{% url 'events:past_events' %}">diferentes eventos</a> de difusión del lenguaje de programación Python colaborando en el incremento de la comunidad de usuarios de Python en Canarias y <a href="{% url 'about:allies' %}">sumando aliados</a> por el camino.</p>
 
     <p>Te recomendamos que no dejes de <a href="{% url 'about:history' %}">repasar la historia de Python Canarias</a>.</p>
 

apps/about/urls.py

@@ -9,4 +9,5 @@
     path('us/', views.us, name='us'),
     path('join/', views.join, name='join'),
     path('history/', views.history, name='history'),
+    path('allies/', views.allies, name='allies'),
 ]

apps/about/views.py

@@ -4,6 +4,8 @@
 
 from apps.members.models import Position
 
+from .models import Ally
+
 logger = logging.getLogger(__name__)
 
 
@@ -28,3 +30,8 @@ def join(request):
 
 def history(request):
     return render(request, 'about/history.html', {})
+
+
+def allies(request):
+    allies = Ally.objects.all()
+    return render(request, 'about/allies.html', {'allies': allies})

apps/commons/static/commons/css/base.scss

@@ -1,6 +1,7 @@
 @import './variables';
 @import '~bulma/bulma.sass';
 @import './override';
+@import './dyn-anchors';
 
 html {
   // source: https://stackoverflow.com/q/46463338
@@ -122,4 +123,4 @@ body {
   border-radius: 22.5px;
   border-color: $header-bg;
   background-color: whitesmoke;
-}
+}

apps/commons/static/commons/css/dyn-anchors.scss

@@ -0,0 +1,15 @@
+.dyn-anchor-heading {
+  a.dyn-anchor-link {
+    font-size: 14pt;
+    color: gray;
+    margin-bottom: 5px;
+    vertical-align: middle;
+    opacity: 0;
+    &:hover {
+      color: darken(gray, 20%);
+    }
+    &.show-it {
+      opacity: 1;
+    }
+  }
+}

apps/commons/static/commons/js/general/dyn-anchors.js

@@ -0,0 +1,18 @@
+function init() {
+    document.querySelectorAll('.dyn-anchor-heading').forEach((item) => {
+        item.addEventListener('mouseenter', function(event) {
+            event.preventDefault()
+            let anchor = event.target.querySelector('.dyn-anchor-link')
+            anchor.classList.add('show-it')
+        })
+        item.addEventListener('mouseleave', function(event) {
+            event.preventDefault()
+            let anchor = event.target.querySelector('.dyn-anchor-link')
+            anchor.classList.remove('show-it')
+        })
+    })
+}
+
+export default {
+    init
+}

apps/commons/static/commons/js/general/index.js

@@ -2,12 +2,14 @@ import NavbarBurger from './navbar-burger'
 import Notifications from './notifications'
 import Collapsable from './collapsable'
 import ScrollUpButton from './scrollUpButton'
+import DynAnchors from './dyn-anchors'
 
 export default {
   init: () => {
     NavbarBurger.init()
     Notifications.init()
     Collapsable.init()
     ScrollUpButton.init()
+    DynAnchors.init()
   },
 }

apps/commons/templates/header.html

@@ -24,6 +24,7 @@
               <a class="navbar-item {% is_active 'about:us' %}" href="{% url 'about:us' %}">Información</a>
               <a class="navbar-item {% is_active 'about:history' %}" href="{% url 'about:history' %}">Historia</a>
               <a class="navbar-item {% is_active 'about:join' %}" href="{% url 'about:join' %}">¡Únete!</a>
+              <a class="navbar-item {% is_active 'about:allies' %}" href="{% url 'about:allies' %}">Aliados</a>
           </div>
       </div>
       <div class="navbar-item has-dropdown is-hoverable">