Skip to content

Commit aa214c1

Browse files
hpereira98hpereira98
committed
Update elements data and add elements modal
1 parent 62acfa0 commit aa214c1

13 files changed

+252
-43
lines changed

‎_data/elementos.yaml

+55-1
Original file line numberDiff line numberDiff line change
@@ -829,4 +829,58 @@ geracoes:
829829
nome: José Bastos
830830
foto: calcetas.png
831831
curso: Engenharia Informática
832-
instrumento: Percussão, Trompete
832+
instrumento: Percussão, Trompete
833+
- nome: 31ª Geração - 2021
834+
id: 31
835+
elementos:
836+
- alcunha: Bufas
837+
nome: Tiago Rodrigues
838+
curso: Engenharia Informática
839+
instrumento: Guitarra, Contrabaixo
840+
foto: bufas.png
841+
- nome: 32ª Geração - 2022
842+
id: 32
843+
elementos:
844+
- alcunha: Chimpz
845+
nome: Francisco Franco
846+
curso: Engenharia Informática
847+
instrumento: Pandeireta
848+
foto: chimpz.png
849+
- alcunha: Zénis
850+
nome: Jaime Abreu
851+
curso: Engenharia Informática
852+
instrumento: Acordeão
853+
foto: zenis.png
854+
- alcunha: Binotto
855+
nome: Afonso Silva
856+
curso: Relações Internacionais
857+
instrumento: Estandarte
858+
foto: binotto.png
859+
- alcunha: Sansão
860+
nome: João Aguiar Silva
861+
curso: Psicologia
862+
instrumento: Violino
863+
foto: sansao.png
864+
- alcunha: Tony Batatinha
865+
nome: João Santos
866+
curso: Engenharia Informática
867+
instrumento: Bandolim
868+
foto: batatinha.png
869+
- nome: 33ª Geração - 2023
870+
id: 33
871+
elementos:
872+
- alcunha: Farruko
873+
nome: João Lourenço
874+
curso: Engenharia Informática
875+
instrumento: Trompete, Estandarte
876+
foto: farruko.png
877+
- alcunha: Arredas
878+
nome: Simão Cruz
879+
curso: Física
880+
instrumento: Percussão
881+
foto: arredas.png
882+
- alcunha: Atrasado
883+
nome: Rafael Gonçalves
884+
curso: Engenharia Biomédica
885+
instrumento: Guitarra
886+
foto: atrasado.png

‎css/members.css

+125-16
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,26 @@
33
text-align: center;
44
display: inline-block;
55
padding: 2.5%;
6-
width: 220px;
6+
color: black;
7+
transition-duration: 0.2s;
8+
white-space: nowrap;
9+
}
10+
11+
.team-member:hover {
12+
color: var(--main-red);
713
}
814

915
.team-member img {
10-
width: 75px;
11-
height: 75px;
16+
width: 100px;
17+
height: 100px;
1218
object-fit: cover;
1319
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.2);
1420
}
1521

16-
.member-text:before {
17-
content: "";
18-
margin-left: -100%;
19-
}
20-
21-
.member-text:after {
22-
content: "";
23-
margin-right: -100%;
24-
}
25-
2622
.member-text {
27-
white-space: nowrap;
28-
font-size: 1.75vh;
23+
margin-top: 10px;
24+
margin-bottom: 0;
25+
font-size: initial;
2926
}
3027

3128
.member-details {
@@ -54,4 +51,116 @@
5451

5552
.card-body {
5653
text-align: center;
57-
}
54+
}
55+
56+
.member-table {
57+
margin-left: auto;
58+
margin-right: auto;
59+
margin-top: 2vh;
60+
}
61+
62+
.member-table-body {
63+
width: 100%;
64+
}
65+
66+
.member-row {
67+
flex-wrap: wrap;
68+
padding-bottom: 2vh;
69+
padding-top: 2vh;
70+
width: 100%;
71+
}
72+
73+
.member-col-name {
74+
text-align: justify;
75+
width: 20%;
76+
}
77+
78+
.member-col-empty {
79+
width: 5%;
80+
}
81+
82+
.member-col-val {
83+
text-align: start;
84+
width: 75%;
85+
}
86+
87+
.member-modal {
88+
display: none;
89+
position: fixed;
90+
z-index: 100;
91+
left: 0;
92+
top: 0;
93+
width: 100%;
94+
height: 100%;
95+
background-color: rgb(0, 0, 0);
96+
background-color: rgba(0, 0, 0, 0.4);
97+
}
98+
99+
@keyframes member-modal-in {
100+
from {
101+
opacity: 0;
102+
}
103+
to {
104+
opacity: 1;
105+
}
106+
}
107+
108+
.member-modal-content {
109+
background-color: var(--white-p95);
110+
margin: auto;
111+
margin-top: 25vh;
112+
width: 80%;
113+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
114+
animation-name: member-modal-in;
115+
animation-duration: 0.4s;
116+
}
117+
118+
.member-modal-header {
119+
padding: 2vh;
120+
background-color: var(--main-red);
121+
color: white;
122+
position: relative;
123+
}
124+
125+
.member-modal-header .member-title {
126+
right: 5vh;
127+
}
128+
129+
.member-modal-close {
130+
position: absolute;
131+
top: 0;
132+
right: 1vh;
133+
color: white;
134+
font-weight: bold;
135+
font-size: 5vh;
136+
float: right;
137+
vertical-align: top;
138+
}
139+
140+
.member-modal-close:hover,
141+
.member-modal-close:focus {
142+
color: black;
143+
text-decoration: none;
144+
cursor: pointer;
145+
}
146+
147+
.member-modal-body {
148+
padding: 2vh;
149+
overflow: auto;
150+
}
151+
152+
.member-image {
153+
width: 150px;
154+
height: 150px;
155+
object-fit: cover;
156+
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.2);
157+
}
158+
159+
.member-link {
160+
color: black;
161+
transition-duration: 0.2s;
162+
}
163+
164+
.member-link:hover {
165+
color: var(--main-red);
166+
}

‎elementos.html

+51-25
Original file line numberDiff line numberDiff line change
@@ -3,42 +3,68 @@
33
title: Elementos
44
---
55
<link href="{{ site.baseurl }}/css/members.css" rel="stylesheet">
6+
<script src="{{ site.baseurl }}/js/modal.js"></script>
67

78
<div class="content">
89
<h2>Elementos da Tuna Universitária do Minho</h2>
910
<div class="mt-5" id="accordion">
1011
{% for ger in site.data.elementos.geracoes %}
12+
1113
<div class="card mb-3">
12-
<div class="card-header">
13-
<a class="card-link collapsed" data-toggle="collapse" href="#collapse{{ger.id}}">
14-
<b>{{ ger.nome }}</b>
15-
</a>
16-
</div>
14+
<a class="card-link collapsed" data-toggle="collapse" href="#collapse{{ger.id}}">
15+
<div class="card-header">
16+
<b>{{ ger.nome }}</b>
17+
</div>
18+
</a>
1719
<div class="collapse" data-parent="#accordion" id="collapse{{ger.id}}">
1820
<div class="card-body">
1921
{% for m in ger.elementos %}
20-
<div class="team-member">
21-
<img class="mx-auto rounded-circle" src="img/elementos/{{ m.foto }}">
22-
<br>
23-
{% assign nomes = m.nome | split: " " %}
24-
<span class="member-text">{{ nomes | slice: 0}} "{{m.alcunha}}" {{ nomes | slice: -1}}</span>
25-
<br>
26-
<span class="member-text member-details">
27-
{% if m.instrumento == "" or m.instrumento == null %}
28-
&nbsp;
29-
{% else %}
30-
{{ m.instrumento }}
31-
{% endif %}
32-
</span>
22+
<div class="team-member" id="member-card-{{ger.id}}-{{forloop.index0}}">
23+
<img class="mx-auto rounded-circle" src="{{ site.baseurl }}/img/elementos/{{ m.foto }}">
3324
<br>
34-
<span class="member-text member-details">
35-
{% if m.curso == "" or m.curso == null %}
36-
&nbsp;
37-
{% else %}
38-
{{ m.curso }}
39-
{% endif %}
40-
</span>
25+
<p class="member-text">{{m.alcunha}}</p>
26+
</div>
27+
28+
<div class="member-modal" id="member-modal-{{ger.id}}-{{forloop.index0}}">
29+
<div class="member-modal-content">
30+
<div class="member-modal-header">
31+
<span class="member-title">{{m.alcunha}}</span>
32+
<span class="member-modal-close" id="member-modal-close-{{ger.id}}-{{forloop.index0}}">&times;</span>
33+
</div>
34+
<div class="member-modal-body">
35+
<img class="member-image rounded-circle" src="{{ site.baseurl }}/img/elementos/{{ m.foto }}">
36+
<table class="member-table">
37+
<tbody class="member-table-body">
38+
39+
{% if m.nome %}
40+
<tr class="member-row">
41+
<td class="member-col-name">Nome</td>
42+
<td class="member-col-empty"></td>
43+
<td class="member-col-val">{{ m.nome }}</td>
44+
</tr>
45+
{% endif %}
46+
47+
{% if m.curso %}
48+
<tr class="member-row">
49+
<td class="member-col-name">Curso</td>
50+
<td class="member-col-empty"></td>
51+
<td class="member-col-val">{{ m.curso }}</td>
52+
</tr>
53+
{% endif %}
54+
55+
{% if m.instrumento %}
56+
<tr class="member-row">
57+
<td class="member-col-name">Instrumento</td>
58+
<td class="member-col-empty"></td>
59+
<td class="member-col-val">{{ m.instrumento }}</td>
60+
</tr>
61+
{% endif %}
62+
</tbody>
63+
</table>
64+
</div>
65+
</div>
4166
</div>
67+
<script> modalJsMembers("{{ger.id}}-{{forloop.index0}}"); </script>
4268
{% endfor %}
4369
</div>
4470
</div>

‎img/elementos/arredas.png

200 KB
Loading

‎img/elementos/atrasado.png

179 KB
Loading

‎img/elementos/batatinha.png

658 KB
Loading

‎img/elementos/binotto.png

897 KB
Loading

‎img/elementos/bufas.png

385 KB
Loading

‎img/elementos/chimpz.png

949 KB
Loading

‎img/elementos/farruko.png

96.9 KB
Loading

‎img/elementos/sansao.png

1.4 MB
Loading

‎img/elementos/zenis.png

1.52 MB
Loading

‎js/modal.js

+21-1
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,24 @@ function modalJs(i) {
1616
modal.style.display = "none";
1717
}
1818
}
19-
};
19+
};
20+
21+
function modalJsMembers(i) {
22+
var modal = document.getElementById(`member-modal-${i}`);
23+
var btn = document.getElementById(`member-card-${i}`);
24+
var span = document.getElementById(`member-modal-close-${i}`);
25+
26+
btn.onclick = function () {
27+
modal.style.display = "block";
28+
}
29+
30+
span.onclick = function () {
31+
modal.style.display = "none";
32+
}
33+
34+
modal.onclick = function (event) {
35+
if (event.target === modal) {
36+
modal.style.display = "none";
37+
}
38+
}
39+
};

0 commit comments

Comments
 (0)