Skip to content

Commit 54c2be3

Browse files
sdelquinsdelquin
authored
Merge pull request #413 from pythoncanarias/412-add-dyn-anchors
Añade anclas dinámicas a varias páginas de la web
2 parents 9630e83 + 7c3c732 commit 54c2be3

7 files changed

Lines changed: 81 additions & 49 deletions

File tree

‎apps/about/static/about/css/about-us.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.about-index {
2+
p {
3+
padding-top: 0.5rem;
4+
padding-bottom: 0.5rem;
5+
}
6+
7+
.dyn-anchor-link i:hover {
8+
color: tomato;
9+
}
10+
}

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

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,4 @@
11
@import 'apps/commons/static/commons/css/base';
22

3+
@import './about-us';
34
@import './allies';
4-
5-
.about-index {
6-
p {
7-
padding-top: 0.5rem;
8-
padding-bottom: 0.5rem;
9-
}
10-
11-
.message a.headerlink {
12-
color: cadetblue;
13-
text-decoration: none;
14-
}
15-
}

‎apps/about/templates/about/index.html‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@
1414
<a href="{% url 'about:join' %}" class="link button is-link is-medium is-outlined">Forma parte de la asociación</a>
1515
</div>
1616

17-
<article class="message">
17+
<article class="message" id="intro">
1818
<a id="intro"></a>
19-
<div class="message-header">
20-
Introducción
21-
<a class="headerlink" href="#intro"></a>
19+
<div class="message-header dyn-anchor-heading">
20+
Introducción
21+
<a class="dyn-anchor-link" href="#intro"><i class="fas fa-link"></i></a>
2222
</div>
2323
<div class="message-body">
2424
<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>
@@ -31,22 +31,22 @@
3131
</div>
3232
</article>
3333

34-
<article class="message">
34+
<article class="message" id="whypython">
3535
<a id="whypython"></a>
36-
<div class="message-header">
36+
<div class="message-header dyn-anchor-heading">
3737
¿Por qué Python?
38-
<a class="headerlink" href="#whypython"></a>
38+
<a class="dyn-anchor-link" href="#whypython"><i class="fas fa-link"></i></a>
3939
</div>
4040
<div class="message-body">
4141
<p>Python es un lenguaje dinámico, de alto nivel y con una sintaxis clara. Es de propósito general lo que permite usarlo para cualquier tipo de programa o herramienta. Dispone de una inmensa cantidad de librerías, tanto internas como de terceras partes. Por si todo esto fuera poco, es software libre, multiplataforma (Unix, Windows u OS/X entre otras) y multiparadigma (orientación a objetos, funcional o imperativo). Python es utilizado hoy en día por empresas tan destacadas como Instagram, The New York Times, Google, Dropbox, NASA, Mercedes-Benz, Pinterest, National Geographic, The Washington Post, YouTube, Blender o Industrial Light & Magic.</p>
4242
</div>
4343
</article>
4444

45-
<article class="message">
45+
<article class="message" id="fiscal">
4646
<a id="fiscal"></a>
47-
<div class="message-header">
47+
<div class="message-header dyn-anchor-heading">
4848
Datos fiscales
49-
<a class="headerlink" href="#fiscal"></a>
49+
<a class="dyn-anchor-link" href="#fiscal"><i class="fas fa-link"></i></a>
5050
</div>
5151
<div class="message-body">
5252
<p>
@@ -63,11 +63,11 @@
6363
</div>
6464
</article>
6565

66-
<article class="message">
66+
<article class="message" id="board">
6767
<a id="board"></a>
68-
<div class="message-header">
68+
<div class="message-header dyn-anchor-heading">
6969
Junta directiva
70-
<a class="headerlink" href="#board"></a>
70+
<a class="dyn-anchor-link" href="#board"><i class="fas fa-link"></i></a>
7171
</div>
7272
<div class="message-body">
7373
<p>Actualmente la <strong>junta directiva</strong> de {{ organization.name }} está formada por:</p>
@@ -82,11 +82,11 @@
8282
</div>
8383
</article>
8484

85-
<article class="message">
85+
<article class="message" id="docs">
8686
<a id="docs"></a>
87-
<div class="message-header">
87+
<div class="message-header dyn-anchor-heading">
8888
Documentación
89-
<a class="headerlink" href="#docs"></a>
89+
<a class="dyn-anchor-link" href="#docs"><i class="fas fa-link"></i></a>
9090
</div>
9191
<div class="content message-body">
9292
<ul>
@@ -100,11 +100,11 @@
100100
</div>
101101
</article>
102102

103-
<article class="message">
103+
<article class="message" id="regulation">
104104
<a id="regulation"></a>
105-
<div class="message-header">
105+
<div class="message-header dyn-anchor-heading">
106106
Normativa de aplicación
107-
<a class="headerlink" href="#regulation"></a>
107+
<a class="dyn-anchor-link" href="#regulation"><i class="fas fa-link"></i></a>
108108
</div>
109109
<div class="content message-body">
110110
<ul>

‎apps/about/templates/about/join.html‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@
88

99
<div class="content box">
1010

11-
<h1>No nos mires, ¡únete! <i class="fas fa-people-carry"></i></h1>
11+
<a id="join"></a>
12+
<h1 class="dyn-anchor-heading">
13+
No nos mires, ¡únete! <i class="fas fa-people-carry"></i>
14+
<a class="dyn-anchor-link" href="#join"><i class="fas fa-link"></i></a>
15+
</h1>
1216

1317
<p>
1418
Python Canarias es una <strong>asociación sin ánimo de lucro</strong>. Para desarrollar nuestras actividades necesitamos un <strong>soporte económico</strong> que se convierte en servicios para la comunidad, principalmente en <a href="{% url 'events:past_events' %}">forma de eventos</a>. Las aportaciones de empresas colaboradoras y patrocinios son super importantes, pero aún así seguimos necesitando de otras ayudas.
@@ -27,15 +31,23 @@ <h1>No nos mires, ¡únete! <i class="fas fa-people-carry"></i></h1>
2731
<p>Si ya eres socio/a, pulsa en el siguiente botón para aceder:</p>
2832
<a class="button is-link" href="{% url 'members:login' %}">Acceso para socios/as</a>
2933

30-
<h2>Cuota</h2>
34+
<a id="fee"></a>
35+
<h2 class="dyn-anchor-heading">
36+
Cuota
37+
<a class="dyn-anchor-link" href="#fee"><i class="fas fa-link"></i></a>
38+
</h2>
3139

3240
La cuota de socio/socia es anual y su cuantía está recogida en el <a href="https://github.com/pythoncanarias/pycan-docs/blob/main/asociacion/estatutos/estatutos.pdf">artículo 24 de los estatutos de la asociación</a>:
3341
<ul>
3442
<li><span class="tag is-info is-medium">20€</span> Importe general.</li>
3543
<li><span class="tag is-primary is-medium">10€</span> Estudiantes y/o personas desempleadas.</li>
3644
</ul>
3745

38-
<h2>Procedimiento para convertirse/renovar como socio/socia</h2>
46+
<a id="method"></a>
47+
<h2 class="dyn-anchor-heading">
48+
Procedimiento para convertirse/renovar como socio/socia
49+
<a class="dyn-anchor-link" href="#method"><i class="fas fa-link"></i></a>
50+
</h2>
3951

4052
<ol>
4153
<li>

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
.dyn-anchor-heading {
22
a.dyn-anchor-link {
3-
font-size: 14pt;
3+
font-size: 12pt;
44
color: gray;
5-
margin-bottom: 5px;
65
vertical-align: middle;
7-
opacity: 0;
6+
margin-left: 4px;
7+
display: none;
88
&:hover {
9-
color: darken(gray, 20%);
9+
color: darken(gray, 30%);
1010
}
1111
&.show-it {
12-
opacity: 1;
12+
display: inline-block;
1313
}
1414
}
1515
}

‎apps/events/templates/events/event.html‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,10 @@ <h1 class="title is-1">{{ event.name }}</h1>
7171

7272
<section id="speakers" class="section speakers">
7373
<div class="container">
74-
<h1 class="title section-title">Ponentes</h1>
74+
<h1 class="title section-title dyn-anchor-heading">
75+
Ponentes
76+
<a class="dyn-anchor-link" href="#speakers"><i class="fas fa-link"></i></a>
77+
</h1>
7578
<div class="columns is-multiline is-mobile is-centered">
7679
{% for speaker in event.get_non_org_speakers %}
7780

@@ -105,8 +108,11 @@ <h2 class="speaker-name">{{ speaker.name }} {{ speaker.surname }}</h2>
105108

106109
<section id="schedule" class="section schedule has-background-white">
107110
<div class="container">
108-
<h1 class="title section-title">
109-
<p>Agenda</p>
111+
<h1 class="title section-title dyn-anchor-heading">
112+
<p>
113+
Agenda
114+
<a class="dyn-anchor-link" href="#schedule"><i class="fas fa-link"></i></a>
115+
</p>
110116
<p class="section-detail"><i class="far fa-calendar-alt"></i> {{ event.start_date|as_date }}</p>
111117
{% if event.schedule_for_display and not event.closed_schedule %}
112118
<span class="tag is-warning is-medium not-closed-schedule">
@@ -140,7 +146,10 @@ <h1 class="title section-title">
140146

141147
<section id="venue" class="section venue">
142148
<div class="container">
143-
<h1 class="title section-title">Localización</h1>
149+
<h1 class="title section-title dyn-anchor-heading">
150+
Localización
151+
<a class="dyn-anchor-link" href="#venue"><i class="fas fa-link"></i></a>
152+
</h1>
144153
<div>
145154
<div class="columns is-multiline">
146155
{% if event.venue %}
@@ -207,7 +216,10 @@ <h1 class="title section-title">Localización</h1>
207216

208217
<section id="sponsors" class="section sponsors has-background-white">
209218
<div class="container">
210-
<h1 class="title section-title">Entidades</h1>
219+
<h1 class="title section-title dyn-anchor-heading">
220+
Entidades
221+
<a class="dyn-anchor-link" href="#sponsors"><i class="fas fa-link"></i></a>
222+
</h1>
211223
{% for role, categories in event.memberships_for_display.items %}
212224
<h1 class="role-title title is-4 has-text-centered">{{ role.display_name }}</h1>
213225
{% for category, organizations in categories.items %}
@@ -237,7 +249,10 @@ <h2 class="category-title subtitle is-5 has-text-centered">{{ category.display_n
237249

238250
<section id="past-events" class="section past-events">
239251
<div class="container">
240-
<h1 class="title section-title">Eventos pasados</h1>
252+
<h1 class="title section-title dyn-anchor-heading">
253+
Eventos pasados
254+
<a class="dyn-anchor-link" href="#past-events"><i class="fas fa-link"></i></a>
255+
</h1>
241256
<div class="columns is-centered">
242257
{% for past_event in past_events %}
243258
<div class="column has-text-centered">

‎apps/members/templates/members/profile.html‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,11 @@
55
{% block content %}
66
<div class="box">
77

8-
<nav class="panel">
9-
<h3 class="panel-heading">Datos personales</h3>
8+
<nav class="panel" id="personal">
9+
<h3 class="panel-heading dyn-anchor-heading">
10+
Datos personales
11+
<a class="dyn-anchor-link" href="#personal"><i class="fas fa-link"></i></a>
12+
</h3>
1013
<div class="panel-block">
1114
<table class="table table-striped">
1215
<tr> <th>Username</th> <td><code>{{ member.user.username }}</code></td> </tr>
@@ -17,8 +20,11 @@ <h3 class="panel-heading">Datos personales</h3>
1720
</div>
1821
</nav>
1922

20-
<nav class="panel">
21-
<h3 class="panel-heading">Socio/a: #{{ member.pk }}</h3>
23+
<nav class="panel" id="address">
24+
<h3 class="panel-heading dyn-anchor-heading">
25+
Socio/a: #{{ member.pk }}
26+
<a class="dyn-anchor-link" href="#address"><i class="fas fa-link"></i></a>
27+
</h3>
2228
<div class="panel-block pb-vertical">
2329
<table class="table table-striped">
2430
<tr>

0 commit comments

Comments
 (0)