Skip to content

Commit 2fe5706

Browse files
blackheavenblackheaven
committed
chore: rework layout (card/grid-based)
1 parent a0462f1 commit 2fe5706

11 files changed

+316
-5834
lines changed

‎public/css/main.css

+4-5,576
Large diffs are not rendered by default.

‎public/js/communityEvents.html

+21-24
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,28 @@
1-
<p class="title has-text-black">{{ paneTitle }}</p>
2-
<ul class="events has-text-black">
1+
<div class="card">
2+
<div class="card-content">
3+
<p class="title">{{ paneTitle }}</p>
34
{{#if noEvent}}
4-
<li>{{ noEventCaption }}</li>
5+
<p class="title is-6">
6+
{{ noEventCaption }}
7+
</p>
58
{{/if}}
69
{{#if hasEvents}}
710
{{#each events}}
8-
<li>
9-
<div>
10-
<div>
11-
<div>{{ startDateDay }}</div>
12-
<div>{{ startDateMonth }}</div>
13-
</div>
14-
<div>
15-
<div class="event-title">
16-
{{#if hasUrl}}
17-
<a href="{{url}}" target="_blank">{{ title }} <span class="fa fa-external-link" title="Lien vers l'événement dans Google Calendar"></span></a>
18-
{{else}}
19-
{{ title }}
20-
{{/if}}
21-
</div>
22-
<div>De {{ startDateHour }} à {{ endDateHour }} - {{ location }}</div>
23-
</div>
24-
</div>
25-
{{#if hasDescription}}
26-
<div class="description">{{ description }}</div>
11+
<p class="title is-6">
12+
{{ startDateDay }} {{ startDateMonth }}
13+
</p>
14+
<p class="title is-5">
15+
{{#if hasUrl}}
16+
<a href="{{url}}" target="_blank">{{ title }} <span class="fa fa-external-link" title="Lien vers l'événement dans Google Calendar"></span></a>
17+
{{else}}
18+
{{ title }}
2719
{{/if}}
28-
</li>
20+
</p>
21+
<p class="subtitle is-5">De {{ startDateHour }} à {{ endDateHour }} - {{ location }}</p>
22+
{{#if hasDescription}}
23+
<p class="description">{{ description }}</p>
24+
{{/if}}
2925
{{/each}}
3026
{{/if}}
31-
</ul>
27+
</div>
28+
</div>

‎public/js/main.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,6 @@ const loadCalendar = async () => {
9898
for (var i = 0; i < 6; i++) {
9999
color += (Math.floor(Math.random() * 100) % 16).toString(16);
100100
}
101-
console.log(community.key, color);
102101
return { id: community.key, name: community.name, backgroundColor: color };
103102
});
104103

@@ -144,7 +143,6 @@ const loadCalendar = async () => {
144143
if (patterns) {
145144
for (var j = 0; j < patterns.length; j++) {
146145
if (match[1].localeCompare(patterns[j], 'en', { sensitivity: 'base' }) === 0) {
147-
// console.log(match[2], communities[i].key);
148146
title = match[2];
149147
calendarId = communities[i].key;
150148
break;
@@ -212,7 +210,7 @@ window.onload = () => {
212210
}
213211

214212
var calendarElement = document.getElementById('calendar');
215-
if (calendar) {
213+
if (calendarElement) {
216214
loadCalendar();
217215
}
218216
}

‎src/layouts/Layout.astro

+32-37
Original file line numberDiff line numberDiff line change
@@ -16,28 +16,37 @@ interface Props {
1616
<link href="/css/toastui-calendar.min.css" rel="stylesheet">
1717
<link href="/css/main.css" rel="stylesheet">
1818
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.8/handlebars.min.js" integrity="sha512-E1dSFxg+wsfJ4HKjutk/WaCzK7S2wv1POn1RRPGh8ZK+ag9l244Vqxji3r6wgz9YBf6+vhQEYJZpSjqWFPg9gg==" crossorigin="anonymous" referrerpolicy="no-referrer" is:inline></script>
19-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer" is:inline></script>
20-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
19+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/versions/bulma-no-dark-mode.min.css">
2120
<script src="/js/ical.es5.min.cjs" is:inline></script>
2221
<script src="/js/toastui-calendar.min.js" is:inline></script>
2322
<script src="/js/main.js" is:inline></script>
2423
</head>
2524
<body>
2625
<div id="wrap">
2726
<header>
28-
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
27+
<nav class="navbar navbar-inverse navbar-fixed-top has-text-white has-background-black" role="navigation">
2928
<div class="navbar-brand">
3029
<a class="navbar-item" href="/">
31-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 761.81103 761.81102" class="LTHlogo" role="img" aria-label="Lyon tech hub logo">
30+
<svg
31+
xmlns="http://www.w3.org/2000/svg" viewBox="720 0 800 800"
32+
class="LTHlogo"
33+
role="img"
34+
aria-label="Lyon tech hub logo"
35+
width="640"
36+
height="200"
37+
>
3238
<g fill="#eb0f0f">
3339
<path d="M228.292 296.06L91.76 305.873v-19.627zm253.113 154.467l59.414 80.39 59.41 80.39-14.06 7.53-14.06 7.53-45.36-87.92zm-6.117 24.773l48.72 80.1 48.723 80.098-13.88 6.006-13.882 6.005-34.835-86.11zm-11.073 22.367l39.147 79.93 39.147 79.93-13.75 4.638-13.747 4.64-25.403-84.57zm-16.665 14.8l32.874 86.435 32.874 86.435-14.75 3.665-14.748 3.666-18.125-90.1zm-19.61 9.64l25.227 90.926 25.228 90.927-15.404 2.52-15.4 2.52-9.82-93.448zm-20.562 12.213l17.28 96.495 17.282 96.494-16.234 1.31-16.234 1.315-1.047-97.81zm-22.536-.962l9.983 97.458 9.984 97.458h-39.94l9.98-97.458zm-22.537.962l-1.047 97.812-1.047 97.812-16.23-1.317-16.23-1.318 17.28-96.5zm-20.562-12.214l-10.168 96.726-10.168 96.725-15.944-2.608-15.945-2.61 26.113-94.12zm-19.61-9.638l-18.125 90.1-18.125 90.1-14.75-3.666-14.747-3.665 32.873-86.435zm-16.663-14.8l-26.672 88.784-26.67 88.785-14.428-4.87-14.43-4.87 41.1-83.916zM294.396 475.3l-35.76 88.387-35.758 88.385-14.254-6.165-14.253-6.164 50.02-82.22zm-6.116-24.773l-45.274 87.766-45.273 87.765-14.037-7.517-14.037-7.51 59.31-80.25z"/>
3440
<path fill-rule="evenodd" d="M261.098 255.827c15.152-10.306 65.572-31.565 66.67 11.244-28.284 4.69-66.67-11.24-66.67-11.24zm247.487 0c-15.152-10.306-65.57-31.565-66.67 11.244 28.285 4.69 66.67-11.24 66.67-11.24zm-186.372 92.758s57.074 45.44 57.074 59.494c0 7.02 1.224 8.05.504 16.04-.22 2.54-47.62 20.512-63.3 30.652-8.92 5.767-4.37 8.58-4.37 8.58s49.498-27.17 72.73-27.17c23.234 0 72.73 27.17 72.73 27.17s4.548-2.813-4.372-8.58c-15.683-10.14-63.08-28.118-63.307-30.657-.72-7.988.505-9.018.505-16.045 0-14.055 57.07-59.495 57.07-59.495s-26.26 8.43-62.626 8.43-62.63-8.43-62.63-8.43z"/>
3541
<path d="M228.888 282.742l-127.69-1.176 1.72-18.232zm1.782-12.56l-135.665-12.27 3.657-19.237zm2.956-12.366l-125.53-21.724 5.107-17.68zm4.107-12.08L107.58 212.1l7.14-18.197zm5.227-11.704L123.403 192.42l8.34-16.588zm6.306-11.236l-112.334-49.85 9.62-15.458zm7.338-10.684l-107.092-58.67 11.023-14.603zm8.314-10.05l-103.87-68.895 12.682-14.02zm9.226-9.34l-98.43-78.164 14.158-13.13zm10.07-8.557l-82.252-77.82L215.87 95.52zm10.836-7.71l-76.822-86.65 15.31-9.943zm11.517-6.807l-72.202-97.692 17.088-9.15zm12.113-5.85l-58.997-96.993 16.814-7.273zm12.62-4.848L276.03 46.106l19.403-6.55zm14.034.876l-43.492-116.38 19.06-4.737zm12.323 2.88L325.14 35.114l19.855-3.247zm13.54 14.744L350.274 33.905l19.657-1.595zm13.645 33.645L375.195 36.08h19.294zm12.634-31.945l2.278-146.84 19.657 1.596zm12.112-11.144l14.83-133.49 19.432 3.18zm13.246-7.71L448.782 38.71l19.06 4.736zm15.55-1.346l35.468-118.07 19.188 6.477zm12.618 4.848l48.08-118.84 19.166 8.288zm12.115 5.85l51.842-100.5 16.07 8.607zm11.518 6.806L542.11 70.498l16.793 10.907zm10.835 7.71l82.452-106.942 16.778 13.06zm10.07 8.56l80.602-87.32 13.542 12.56zm9.226 9.338l85.358-77.615 11.873 13.124zm8.314 10.05l108.884-83.048 12.494 16.55zm7.338 10.684l105.325-66.97 9.866 15.85zm6.306 11.236l105.9-55.418 7.942 15.794zm5.226 11.703l116.263-48.988 6.75 17.198zm4.107 12.08l120.424-39.402 5.11 17.68zm2.956 13.072l129.565-30.925 3.59 18.883zm1.783 11.855l125.97-19.408 1.72 18.232zm.594 13.308l136.408-9.804v19.61zm-.594 12.003l140.822 1.297-1.896 20.107zm-1.783 12.56l142.247 12.863-3.835 20.172zm-2.956 12.367l144.724 25.045-5.88 20.38zm-4.107 12.08l144.225 37.27-7.913 20.165zm-5.226 11.703l158.42 55.14-11.05 21.978zM520.418 368l147.516 65.463L655.3 453.76zm-7.338 10.682l148.335 81.267-15.27 20.22zm-8.314 10.05l150.338 99.716-18.358 20.292zm-9.226 9.34L643.047 515.21l-21.217 19.68zm-10.07 8.558l142.426 134.75-24.083 18.743z"/>
3642
<path d="M474.635 414.34L613.12 570.543l-27.6 17.924zm-179.587 0l-119.79 188.11-29.814-19.363z"/>
3743
<path d="M284.214 406.63L161.92 565.247l-24.886-19.368zm-10.07-8.56L151.956 530.445l-20.528-19.04zm-9.226-9.338L130.013 511.398l-18.763-20.74zm-8.314-10.05L121.49 481.736 105.986 461.2zM249.266 368l-134.5 85.518-12.6-20.24zm-6.306-11.237l-139.07 72.775-10.428-20.74zm-5.227-11.703L99.867 403.15l-8.002-20.394zm-4.107-12.08L83.053 382.245l-6.386-22.104zm-2.956-12.37L88.932 354.443l-3.927-20.657zm-1.782-12.558L90.233 329.415l-1.893-20.068z"/>
3844
</g>
45+
<text transform="translate(850 450)" fill="white" font-size="256">
46+
<tspan x="0" y="0">LyonTechHub</tspan>
47+
</text>
3948
</svg>
40-
Lyon Tech Hub</a>
49+
4150
</a>
4251

4352
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
@@ -65,7 +74,7 @@ interface Props {
6574
<span class="icon is-small"><i class="fa fa-comments fa-lg"></i></span>
6675
<span>Conférences</span>
6776
</a>
68-
</div>
77+
</div>
6978
<div class="navbar-end">
7079
<a class="navbar-item" href="/about">
7180
<span class="icon is-small"><i class="fa fa-info-circle fa-lg"></i></span>
@@ -81,37 +90,23 @@ interface Props {
8190
<div id="push">
8291
</div>
8392
</div>
84-
<footer class="footer">
85-
<div class="content has-text-centered">
86-
<div class="container">
87-
<div class="row">
88-
<div class="col-xs-3"><h3>Lyon Tech Hub</h3></div>
89-
<div class="col-xs-3">
90-
<h3>
91-
<small><a href="/about">Rejoignez-nous</a></small>
92-
</h3>
93-
</div>
94-
<div class="col-xs-6">
95-
<ul class="communication-icon pull-right">
96-
<li>
97-
<a href="https://slack.lyontechhub.org/" class="fab fa-slack fa-3x" title="Salle Slack"></a>
98-
</li>
99-
<li>
100-
<a href="mailto:[email protected]" class="fa fa-envelope fa-3x" title="Mail de contact"></a>
101-
</li>
102-
<li>
103-
<a href="https://groups.google.com/forum/#!forum/lyontechhub" class="fa fa-comments fa-3x"
104-
title="Liste de discussion"></a>
105-
</li>
106-
<li>
107-
<a href="https://x.com/lyontechhub" class="fab fa-twitter fa-3x" title="X"></a>
108-
</li>
109-
<li>
110-
<a href="https://github.com/lyontechhub" class="fab fa-github fa-3x" title="GitHub"></a>
111-
</li>
112-
</ul>
113-
</div>
114-
</div>
93+
<footer class="footer has-text-white has-background-black">
94+
<div class="has-text-centered">
95+
<div class="columns">
96+
<div class="column is-3"><h3>Lyon Tech Hub</h3></div>
97+
<div class="column is-3">
98+
<h3>
99+
<small><a href="/about">Rejoignez-nous</a></small>
100+
</h3>
101+
</div>
102+
<div class="column is-6">
103+
<a href="https://slack.lyontechhub.org/" class="fab fa-slack fa-3x" title="Salle Slack"></a>
104+
<a href="mailto:[email protected]" class="fa fa-envelope fa-3x" title="Mail de contact"></a>
105+
<a href="https://groups.google.com/forum/#!forum/lyontechhub" class="fa fa-comments fa-3x"
106+
title="Liste de discussion"></a>
107+
<a href="https://x.com/lyontechhub" class="fab fa-twitter fa-3x" title="X"></a>
108+
<a href="https://github.com/lyontechhub" class="fab fa-github fa-3x" title="GitHub"></a>
109+
</div>
115110
</div>
116111
</div>
117112
</footer>

‎src/pages/about.astro

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import Layout from '../layouts/Layout.astro';
44

55
<Layout>
66
<main>
7-
<div class="container is-fluid has-text-justified has-text-black">
8-
<h2 class="title has-text-black">Qui sommes-nous ?</h2>
7+
<div class="container is-fluid has-text-justified">
8+
<h2 class="title">Qui sommes-nous ?</h2>
99

1010
<p>
1111
Lyon Tech Hub est un groupe informel constitué des membres des différentes communautés IT/tech lyonnaises.
@@ -18,7 +18,7 @@ import Layout from '../layouts/Layout.astro';
1818
Ils sont réunis par la volonté d'apprendre et d'échanger.
1919
</p>
2020

21-
<h2 class="title has-text-black">Rejoignez nous !</h2>
21+
<h2 class="title">Rejoignez nous !</h2>
2222
<h3 class="subtitle">sur Slack</h3>
2323
<p>Pour discuter avec les membres de nos communautés sur Slack, <b><a
2424
href="https://slack.lyontechhub.org/">inscrivez-vous</a></b> sur la page : <b><a
@@ -61,7 +61,7 @@ import Layout from '../layouts/Layout.astro';
6161
</ul>
6262
</p>
6363

64-
<h2 class="title has-text-black">Des questions ?</h2>
64+
<h2 class="title">Des questions ?</h2>
6565
<p> Contactez nous
6666
<ul>
6767
<li>Sur <b>X (Twitter) <a title="@lyontechhub" href="https://x.com/LyonTechHub">@lyontechhub</a></b></li>

‎src/pages/communities.astro

+13-13
Original file line numberDiff line numberDiff line change
@@ -8,41 +8,41 @@ const communities = getList();
88

99
<Layout>
1010
<main>
11-
<div class="container is-fluid has-background-white">
12-
<h1 class="title has-text-black">
11+
<div class="container is-fluid">
12+
<h1 class="title">
1313
{communities.length} communautés diverses et variées regroupées dans Lyon Tech Hub<br />
1414
<small><a href="/about">Par ici pour référencer la votre !</a></small>
1515
</h1>
1616
<div class="field">
17-
<label class="label has-text-black" for="filterCommunities">Rechercher</label>
17+
<label class="label" for="filterCommunities">Rechercher</label>
1818
<div class="control">
1919
<input type="text" id="filterCommunities" onkeyup="dynamicFilter('filterCommunities')" />
2020
</div>
2121
</div>
2222
<br />
2323
<br />
2424
<br />
25-
<div class="columns is-multiline communitiesList">
25+
<div class="grid is-col-min-12">
2626
{communities
2727
.map(
2828
(community) => (
29-
<div class="column is-half-tablet is-one-third-desktop filterable" data-key={community.name}>
30-
<div class="card has-background-white">
29+
<div class="cell filterable" data-key={community.name}>
30+
<div class="card">
31+
<header class="card-header">
32+
<a href={`/community/` + community.key}>
33+
<p class="card-header-title">{community.name}</p>
34+
</a>
35+
</header>
3136
<div class="card-image">
3237
<a href={`/community/` + community.key}>
38+
<figure class="image">
3339
<img src={`/imgs/communities/` + community.image}
3440
alt={community.name}
3541
onerror="this.onerror=null;this.src='/imgs/noLogo.png';"
3642
/>
43+
</figure>
3744
</a>
3845
</div>
39-
<div class="card-content">
40-
<div class="media">
41-
<div class="media-content">
42-
<p class="title is-4 has-text-black">{community.name}</p>
43-
</div>
44-
</div>
45-
</div>
4646
</div>
4747
</div>
4848
)

‎src/pages/community/[key].astro

+37-27
Original file line numberDiff line numberDiff line change
@@ -17,42 +17,52 @@ const { community } = Astro.props;
1717

1818
<Layout>
1919
<main>
20-
<h1 class="title has-text-black">
21-
<img src={"/imgs/communities/" + community.image}
22-
onerror="this.onerror=null;this.src='/imgs/noLogo.png';"
23-
/>
24-
{community.name}
25-
</h1>
26-
<div class="container is-fluid community"
27-
id="communityDetails"
28-
data-patterns-google-calendar={JSON.stringify(community.patternsGoogleCalendar)}>
29-
<div class="columns">
30-
<div class="column has-text-black">
31-
<p class="title has-text-black">En bref...</p>
20+
<div class="section">
21+
<div class="container">
22+
<div class="columns is-centered">
23+
<div class="colum is-half">
24+
<p class="title">
25+
<img src={"/imgs/communities/" + community.image}
26+
onerror="this.onerror=null;this.src='/imgs/noLogo.png';"
27+
class="image"
28+
style="max-height: 10em;"
29+
/>
30+
</p>
31+
<p class="subtitle">{community.name}</p>
32+
</div>
33+
</div>
34+
<div class="grid"
35+
id="communityDetails"
36+
data-patterns-google-calendar={JSON.stringify(community.patternsGoogleCalendar)}>
37+
<div class="cell">
38+
<div class="card">
39+
<div class="card-content">
40+
<p class="title">En bref...</p>
3241
<p>{community.shortDescription}</p>
33-
<ul class="socialLinks">
42+
<p>
3443
{community.socialLinks
3544
.map(
3645
(socialLink) => (
37-
<li>
38-
<a href={socialLink.url} target="_blank" class={"fa fa-2x fa-" + socialLink.icon} title={socialLink.tooltip}></a>
39-
</li>
46+
<a href={socialLink.url} target="_blank" class={"m-2 fa fa-2x fa-" + socialLink.icon} title={socialLink.tooltip}></a>
4047
)
4148
)
4249
}
43-
</ul>
44-
</div>
45-
<div class="column is-4"
46-
id="upcomingEvents"
47-
data-pane-title="A venir !"
48-
data-no-event-caption="Pas d'événements dans les 4 prochains mois.">
49-
</div>
50-
<div class="column is-4"
51-
id="pastEvents"
52-
data-pane-title="Ce que vous avez manqué..."
53-
data-no-event-caption="Pas d'événements durant les 4 derniers mois.">
50+
</p>
51+
</div>
5452
</div>
53+
</div>
54+
<div class="cell is-4"
55+
id="upcomingEvents"
56+
data-pane-title="A venir !"
57+
data-no-event-caption="Pas d'événements dans les 4 prochains mois.">
58+
</div>
59+
<div class="cell is-4"
60+
id="pastEvents"
61+
data-pane-title="Ce que vous avez manqué..."
62+
data-no-event-caption="Pas d'événements durant les 4 derniers mois.">
63+
</div>
5564
</div>
65+
</div>
5666
</div>
5767
</main>
5868
</Layout>

0 commit comments

Comments
 (0)