Skip to content

Commit f1ae0fc

Browse files
marekvospelmarekvospel
authored
fix(css): overflowing events, open links in new tab (#132)
* chore(links): make external links open in new tab Closes #121 * fix(akce): overflowing events * fix(events): limit paginator size * fix(events): show events in grid * fix(events): improve the overflow situation people use phones smaller than 400px? * fix(akce): overflowing title * chore: remove app.css * chore: im dumb * fix: current events row/col
1 parent 3da2000 commit f1ae0fc

File tree

6 files changed

+151
-60
lines changed

6 files changed

+151
-60
lines changed

‎_includes/foot.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44
<div class="footer_colums">
55
<div>
66
<article class="refs__links">
7-
<a class="refs__links__link" href="https://instagram.com/klubFITpp"><iconify-icon noobserver class="refs__links__link__logo" icon="ion:logo-instagram"></iconify-icon> @klubFITpp</a>
8-
<a class="refs__links__link" href="https://mastodon.social/@klubfitpp" rel="me"><iconify-icon noobserver class="refs__links__link__logo" icon="ion:logo-mastodon"></iconify-icon> @klubfitpp</a>
9-
<a class="refs__links__link" href="https://twitter.com/klubFITpp"><iconify-icon noobserver class="refs__links__link__logo" icon="ion:logo-twitter"></iconify-icon> @klubFITpp</a>
10-
<a class="refs__links__link" href="https://youtube.com/@klubFITpp"><iconify-icon noobserver class="refs__links__link__logo" icon="ion:logo-youtube"></iconify-icon> @klubFITpp</a>
11-
<a class="refs__links__link" href="https://facebook.com/klubFITpp"><iconify-icon noobserver class="refs__links__link__logo" icon="ion:logo-facebook"></iconify-icon> FITplusplus</a>
12-
<a class="refs__links__link" href="https://linkedin.com/company/fitpp"><iconify-icon noobserver class="refs__links__link__logo" icon="ion:logo-linkedin"></iconify-icon> fitpp</a>
13-
<a class="refs__links__link" href="mailto:[email protected]"><iconify-icon noobserver class="refs__links__link__logo" icon="ion:ios-mail"></iconify-icon> [email protected]</a>
7+
<a class="refs__links__link" href="https://instagram.com/klubFITpp" rel="noopener noreferrer" target="_blank"><iconify-icon noobserver class="refs__links__link__logo" icon="ion:logo-instagram"></iconify-icon> @klubFITpp</a>
8+
<a class="refs__links__link" href="https://mastodon.social/@klubfitpp" rel="me noopener noreferrer" target="_blank"><iconify-icon noobserver class="refs__links__link__logo" icon="ion:logo-mastodon"></iconify-icon> @klubfitpp</a>
9+
<a class="refs__links__link" href="https://twitter.com/klubFITpp" target="_blank" rel="noopener noreferrer"><iconify-icon noobserver class="refs__links__link__logo" icon="ion:logo-twitter"></iconify-icon> @klubFITpp</a>
10+
<a class="refs__links__link" href="https://youtube.com/@klubFITpp" target="_blank" rel="noopener noreferrer"><iconify-icon noobserver class="refs__links__link__logo" icon="ion:logo-youtube"></iconify-icon> @klubFITpp</a>
11+
<a class="refs__links__link" href="https://facebook.com/klubFITpp" target="_blank" rel="noopener noreferrer"><iconify-icon noobserver class="refs__links__link__logo" icon="ion:logo-facebook"></iconify-icon> FITplusplus</a>
12+
<a class="refs__links__link" href="https://linkedin.com/company/fitpp" target="_blank" rel="noopener noreferrer"><iconify-icon noobserver class="refs__links__link__logo" icon="ion:logo-linkedin"></iconify-icon> fitpp</a>
13+
<a class="refs__links__link" href="mailto:[email protected]" target="_blank" rel="noopener noreferrer"><iconify-icon noobserver class="refs__links__link__logo" icon="ion:ios-mail"></iconify-icon> [email protected]</a>
1414
</article>
1515
</div>
1616
<article class="refs__links">
@@ -21,7 +21,7 @@
2121
Praha 6, 160 00<br>
2222
</div>
2323
<br>
24-
<a href="https://su.cvut.cz/"><img src="{{ "/assets/images/logo_su.svg" | relative_url }}" alt="Logo Studentské Unie ČVUT"/></a>
24+
<a href="https://su.cvut.cz/" target="_blank" rel="noopener noreferrer"><img src="{{ "/assets/images/logo_su.svg" | relative_url }}" alt="Logo Studentské Unie ČVUT"/></a>
2525
</article>
2626
</div>
2727
</footer>

‎assets/css/app.css

Lines changed: 83 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1009,10 +1009,6 @@ section {
10091009

10101010
/* documents */
10111011

1012-
.refs__scream {
1013-
text-align: center;
1014-
}
1015-
10161012
.refs__links {
10171013
margin: 2em auto;
10181014
width: -moz-fit-content;
@@ -1151,44 +1147,81 @@ section {
11511147
.events__article__wrapper {
11521148
margin-left: auto;
11531149
margin-right: auto;
1154-
display: flex;
1150+
width: 100%;
11551151
max-width: 80rem;
1156-
flex-direction: column;
1157-
flex-wrap: wrap;
1158-
align-items: center;
1159-
justify-content: flex-start;
1152+
padding-left: 2rem;
1153+
padding-right: 2rem;
11601154
}
11611155

1162-
@media (min-width: 1024px) {
1156+
@media (min-width: 768px) {
11631157
.events__article__wrapper {
1164-
justify-content: space-evenly;
1158+
padding-left: 4rem;
1159+
padding-right: 4rem;
11651160
}
11661161
}
11671162

1168-
@media (min-width: 1280px) {
1163+
.events__article__wrapper {
1164+
display: grid;
1165+
gap: 1rem;
1166+
}
1167+
1168+
@media (min-width: 768px) {
1169+
.events__article__wrapper {
1170+
grid-template-columns: repeat(2, minmax(0, 1fr));
1171+
}
1172+
}
1173+
1174+
@media (min-width: 1024px) {
11691175
.events__article__wrapper {
1176+
grid-template-columns: repeat(3, minmax(0, 1fr));
1177+
}
1178+
}
1179+
1180+
section.events .events__article__wrapper > * {
1181+
max-width: 24rem;
1182+
}
1183+
1184+
section.events .events__article__wrapper {
1185+
display: flex;
1186+
flex-direction: column;
1187+
align-items: center;
1188+
justify-content: flex-start;
1189+
}
1190+
1191+
@media (min-width: 1024px) {
1192+
section.events .events__article__wrapper {
11701193
flex-direction: row;
1194+
justify-content: space-evenly;
11711195
}
11721196
}
11731197

1174-
.events__article__wrapper .event__article {
1175-
margin-top: 1.5rem;
1176-
width: 24rem;
1198+
.events__article__wrapper a {
1199+
display: flex;
1200+
width: 100%;
1201+
flex-direction: column;
1202+
flex-wrap: wrap;
1203+
align-items: center;
1204+
justify-content: flex-start;
11771205
}
11781206

11791207
@media (min-width: 1024px) {
1180-
.events__article__wrapper .event__article {
1181-
margin-top: 0px;
1208+
.events__article__wrapper a {
1209+
justify-content: space-evenly;
1210+
}
1211+
}
1212+
1213+
@media (min-width: 1280px) {
1214+
.events__article__wrapper a {
1215+
flex-direction: row;
11821216
}
11831217
}
11841218

11851219
.events__article__wrapper .event__article {
1186-
margin-top: 0.75rem;
1187-
margin-bottom: 0.75rem;
1188-
margin-left: 1rem;
1189-
margin-right: 1rem;
1220+
display: flex;
1221+
width: 100%;
1222+
flex-grow: 0;
1223+
flex-direction: column;
11901224
flex-shrink: 0;
1191-
max-width: 90%;
11921225
}
11931226

11941227
.event__background {
@@ -1204,11 +1237,8 @@ section {
12041237
}
12051238

12061239
.event__title {
1207-
width: -moz-max-content;
1208-
width: max-content;
1209-
max-width: 100%;
1240+
flex-grow: 0;
12101241
justify-content: flex-start;
1211-
overflow: hidden;
12121242
--tw-bg-opacity: 1;
12131243
background-color: rgb(249 176 0 / var(--tw-bg-opacity, 1));
12141244
padding: 0.5rem;
@@ -1227,14 +1257,20 @@ section {
12271257
aspect-ratio: 16 / 9;
12281258
}
12291259

1260+
.event__title_wrapper {
1261+
display: flex;
1262+
width: 100%;
1263+
flex-direction: row;
1264+
justify-content: flex-start;
1265+
}
1266+
12301267
.event__footer {
12311268
display: flex;
12321269
width: 100%;
12331270
justify-content: space-between;
12341271
}
12351272

12361273
.event__link {
1237-
margin-left: 6rem;
12381274
display: block;
12391275
--tw-bg-opacity: 1;
12401276
background-color: rgb(0 115 188 / var(--tw-bg-opacity, 1));
@@ -1769,6 +1805,25 @@ section.post {
17691805
background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
17701806
}
17711807

1808+
.paginator__pages * {
1809+
display: none;
1810+
}
1811+
1812+
@media (min-width: 1024px) {
1813+
.paginator__pages * {
1814+
display: inline-block;
1815+
}
1816+
}
1817+
1818+
.paginator__pages .paginator__show-always {
1819+
display: inline-block;
1820+
}
1821+
1822+
.paginator__pages *:last-of-type,
1823+
.paginator__pages *:nth-child(1) {
1824+
display: inline-block;
1825+
}
1826+
17721827
/* Pages */
17731828

17741829
.page h1,
@@ -1926,4 +1981,4 @@ footer .refs__links__link__logo {
19261981
padding: 0.5em;
19271982
text-decoration: none;
19281983
transition: background-color 300ms;
1929-
}
1984+
}

‎assets/css/input.css

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -431,13 +431,23 @@
431431
}
432432

433433
.events__article__wrapper {
434-
@apply flex flex-col justify-start items-center max-w-7xl mx-auto xl:flex-row lg:justify-evenly flex-wrap;
434+
@apply w-full max-w-7xl mx-auto px-8 md:px-16;
435+
@apply grid gap-4 md:grid-cols-2 lg:grid-cols-3;
436+
}
437+
section.events .events__article__wrapper > * {
438+
@apply max-w-96;
439+
}
440+
section.events .events__article__wrapper {
441+
@apply flex flex-col items-center justify-start lg:justify-evenly lg:flex-row;
442+
}
443+
444+
.events__article__wrapper a {
445+
@apply w-full flex flex-col justify-start items-center xl:flex-row lg:justify-evenly flex-wrap;
435446
}
436447

437448
.events__article__wrapper .event__article {
438-
@apply w-96 mt-6 lg:mt-0;
439-
@apply my-3 mx-4 flex-shrink-0;
440-
max-width: 90%;
449+
@apply w-full flex flex-col grow-0;
450+
@apply flex-shrink-0;
441451
}
442452

443453
.event__background {
@@ -447,7 +457,7 @@
447457
}
448458

449459
.event__title {
450-
@apply font-semibold p-2 text-center w-max max-w-full bg-primary-yellow justify-start text-xl overflow-hidden;
460+
@apply font-semibold p-2 text-center bg-primary-yellow justify-start text-xl grow-0;
451461
}
452462

453463
.events__article__wrapper {
@@ -458,12 +468,16 @@
458468
@apply aspect-video;
459469
}
460470

471+
.event__title_wrapper {
472+
@apply w-full flex flex-row justify-start;
473+
}
474+
461475
.event__footer {
462476
@apply flex justify-between w-full;
463477
}
464478

465479
.event__link {
466-
@apply ml-24 block py-2 px-3 bg-primary-blue text-xl text-white hover:bg-primary-blue-hover transition;
480+
@apply block py-2 px-3 bg-primary-blue text-xl text-white hover:bg-primary-blue-hover transition;
467481
}
468482

469483
.event__date {
@@ -711,6 +725,20 @@ section.post {
711725
@apply bg-gray-400;
712726
}
713727

728+
.paginator__pages * {
729+
@apply hidden lg:inline-block;
730+
}
731+
732+
.paginator__pages .paginator__show-always {
733+
@apply inline-block;
734+
}
735+
736+
.paginator__pages *:last-of-type,
737+
.paginator__pages *:nth-child(1) {
738+
display: inline-block;
739+
}
740+
741+
714742
/* Pages */
715743

716744
.page h1,
@@ -837,4 +865,4 @@ footer .refs__links__link__logo {
837865
padding: 0.5em;
838866
text-decoration: none;
839867
transition: background-color 300ms;
840-
}
868+
}

‎events/index.html

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@ <h2 class="main__title">Akce</h2>
1818
{% for event in paginator.posts %}
1919
<a href="{{event.url}}">
2020
<article class="event__article " >
21-
<h3 class="event__title">{{event.title}}</h3>
21+
<div class="event__title_wrapper">
22+
<h3 class="event__title">{{event.title}}</h3>
23+
</div>
2224
<div class="event__background event__image" style="background-image: url({{ event.img | relative_url }});">
2325
</div>
2426
<div class="event__footer ">
@@ -38,15 +40,19 @@ <h3 class="event__title">{{event.title}}</h3>
3840
<span class="paginator__choice dead paginator__arrow"><iconify-icon noobserver class="paginator__icon" icon="ion:ios-arrow-back"></iconify-icon></span>
3941
{% endif %}
4042

41-
{% for page in (1..paginator.total_pages) %}
42-
{% if page == paginator.page %}
43-
<span class="paginator__choice selected">{{ page }}</span>
44-
{% elsif page == 1 %}
45-
<a class="paginator__choice" href="{{ '/events/' | relative_url }}">{{ page }}</a>
46-
{% else %}
47-
<a class="paginator__choice " href="/events/page{{page}}/index.html">{{ page }}</a>
48-
{% endif %}
49-
{% endfor %}
43+
<div class="paginator__pages">
44+
{% for page in (1..paginator.total_pages) %}
45+
{% if page == paginator.page %}
46+
<span class="paginator__choice selected">{{ page }}</span>
47+
{% elsif page == 1 %}
48+
<a class="paginator__choice" href="{{ '/events/' | relative_url }}">{{ page }}</a>
49+
{% else %}
50+
{% assign prev_page = page | minus: 2 %}
51+
{% assign next_page = page | plus: 1 %}
52+
<a class="paginator__choice {% if paginator.page < next_page and paginator.page > prev_page %}paginator__show-always{% endif %}" href="/events/page{{page}}/index.html">{{ page }}</a>
53+
{% endif %}
54+
{% endfor %}
55+
</div>
5056

5157
{% if paginator.next_page %}
5258
<a href="{{ paginator.next_page_path | relative_url }}" class="paginator__choice paginator__arrow"><iconify-icon noobserver class="paginator__icon" icon="ion:ios-arrow-forward"></iconify-icon></a>

‎index.html

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,9 @@ <h2 class="section__title">Nadcházející akce</h2>
4040
{% if i < 4 %}
4141
<a href="{{event.url}}">
4242
<article class="event__article " >
43-
<h3 class="event__title">{{event.title}}</h3>
43+
<div class="event__title_wrapper">
44+
<h3 class="event__title">{{event.title}}</h3>
45+
</div>
4446
<div class="event__background event__image" style="background-image: url({{ event.img | relative_url }});">
4547
</div>
4648
<div class="event__footer ">
@@ -96,9 +98,9 @@ <h3 class="people__article__name">{{person.name}} {{person.surname}}</h3>
9698
<section class="refs">
9799
<h2 class="section__title">Další zajímavé skupiny</h2>
98100
<article class="refs__links">
99-
<a class="refs__links__link" href="https://su.cvut.cz">Studentská unie ČVUT</a>
100-
<a class="refs__links__link" href="https://seznamovak.fit.cvut.cz/">Seznamovák FIT</a>
101-
<a class="refs__links__link" href="https://magistrovak.fit.cvut.cz/">Magistrovák FIT</a>
102-
<a class="refs__links__link" href="https://queer.pages.fit"> QueerFIT</a>
101+
<a class="refs__links__link" href="https://su.cvut.cz" target="_blank" rel="noopener noreferrer">Studentská unie ČVUT</a>
102+
<a class="refs__links__link" href="https://seznamovak.fit.cvut.cz/" target="_blank" rel="noopener noreferrer">Seznamovák FIT</a>
103+
<a class="refs__links__link" href="https://magistrovak.fit.cvut.cz/" target="_blank" rel="noopener noreferrer">Magistrovák FIT</a>
104+
<a class="refs__links__link" href="https://queer.pages.fit" target="_blank" rel="noopener noreferrer"> QueerFIT</a>
103105
</article>
104106
</section>

‎pages/pridejse.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ Jsme klub FIT++, který působí na Fakultě informačních technologií ČVUT.
2525
### Jak se můžu zapojit?
2626

2727
- Přijď na jakoukoliv akci, kterou najdeš [tady v kalendáři](/events)
28-
- Sleduj channel [help-needed](https://discord.com/channels/808276641603649607/1288795322524635176) na Discordu a zapoj se do projektu, který hledá dobrovolníky nebo pracovníky
28+
- Sleduj channel [help-needed](https://discord.com/channels/808276641603649607/1288795322524635176){:target="_blank" rel="noopener noreferrer"} na Discordu a zapoj se do projektu, který hledá dobrovolníky nebo pracovníky
2929
- Napiš na Discord, že máš nápad, a my ti ho pomůžeme zrealizovat
3030
- Přijď na zasedání Představenstva a společně něco vymyslíme
3131
- Kandiduj do Představenstva a buď nositelem myšlenky
@@ -46,5 +46,5 @@ Jsme klub FIT++, který působí na Fakultě informačních technologií ČVUT.
4646

4747

4848
<article class="refs__links">
49-
<a class="refs__button" style="text-decoration: none; color: var(--black)" href="https://discord.gg/2Bh93cXGJ3">Připoj se na FIT++ Discord</a>
49+
<a class="refs__button" style="text-decoration: none; color: var(--black)" href="https://discord.gg/2Bh93cXGJ3" target="_blank" rel="noopener noreferrer">Připoj se na FIT++ Discord</a>
5050
</article>

0 commit comments

Comments
 (0)