Skip to content

feat: remove calendar buttons, add month, fix burger menu and update design #158

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
carolinedplm wants to merge 5 commits into
base: dev
Choose a base branch
from
Open

feat: remove calendar buttons, add month, fix burger menu and update design #158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4f1cdea
feat: remove calendar buttons and update design
carolinedplm May 9, 2025
8dde98c
fix build
carolinedplm Jan 26, 2026
eaae9c3
typo
carolinedplm Jan 26, 2026
7432fc8
missing
carolinedplm Jan 26, 2026
a5b405a
better alignment for month
carolinedplm Jan 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
417 changes: 413 additions & 4 deletions public/css/main.css
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions public/js/communityEvents.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<div class="card">
<div class="lth-card">
<div class="card-content">
<p class="title">{{ paneTitle }}</p>
<p class="lth-card-title">{{ paneTitle }}</p>
{{#if noEvent}}
<p class="title is-6">
<p class="lth-card-title is-6">
{{ noEventCaption }}
</p>
{{/if}}
Expand Down
31 changes: 26 additions & 5 deletions public/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,12 @@ const loadCommunities = () =>
.then((response) => response.text())
.then((body) => JSON.parse(body));

const refreshCurrentMonth = (calendar) =>{
let dateRangeStart = calendar.getDate();
const monthNames = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
document.querySelector('#calendarDate').textContent = monthNames[dateRangeStart.getMonth()] + ' ' + dateRangeStart.getFullYear();
}

const loadCalendar = async () => {
const communities = await loadCommunities();
const communitiesCalendars =
Expand Down Expand Up @@ -129,6 +135,7 @@ const loadCalendar = async () => {
],
});

refreshCurrentMonth(calendar);
fetch(calendarICSUrl)
.then((response) => response.text())
.then((raw) => listVEventComponents(raw).map(toEvent))
Expand All @@ -153,24 +160,38 @@ const loadCalendar = async () => {
}
}

function formatWithLink(text, url) {
return url ? "<a class='calendar-popup-text' href='" + url + "'>" + text + "</a>" : text;
}

return {
calendarId: calendarId,
id: item.id,
title: title,
body: item.description,
title: formatWithLink(title, item.url),
body: formatWithLink(item.description + " " + (item.url ?? ""), item.url),
start: item.startDate,
end: item.endDate,
location: item.location,
raw: { url: item.url },
isReadOnly: true,
}
})
);
})
;

document.querySelector('#calendarToday').onclick = () => { calendar.today(); };
document.querySelector('#calendarNext').onclick = () => { calendar.next(); };
document.querySelector('#calendarPrevious').onclick = () => { calendar.prev(); };
document.querySelector('#calendarToday').onclick = () => {
calendar.today();
refreshCurrentMonth(calendar);
};
document.querySelector('#calendarNext').onclick = () => {
calendar.next();
refreshCurrentMonth(calendar);
};
document.querySelector('#calendarPrevious').onclick = () => {
calendar.prev();
refreshCurrentMonth(calendar);
};

};

Expand Down
168 changes: 85 additions & 83 deletions src/layouts/Layout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,14 @@
interface Props {
}

// const { title } = Astro.props;
const currentPath = Astro.url.pathname;

function isActive(href: string): boolean {
if (href === '/') {
return currentPath === '/' || currentPath === '';
}
return currentPath.startsWith(href);
}
---
<!DOCTYPE html>
<html lang="fr">
Expand All @@ -12,111 +19,106 @@ interface Props {
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lyon Tech Hub</title>
<link rel="icon" type="image/png" href="/imgs/logo/LyonTechHub-32-red.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"
integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw=="
crossorigin="anonymous" referrerpolicy="no-referrer"/>
<link href="/css/toastui-calendar.min.css" rel="stylesheet">
<link href="/css/main.css" rel="stylesheet">
<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>
<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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/versions/bulma-no-dark-mode.min.css">
<link href="/css/main.css" rel="stylesheet">
<script src="/js/ical.es5.min.cjs" is:inline></script>
<script src="/js/toastui-calendar.min.js" is:inline></script>
<script src="/js/main.js" is:inline></script>
<script>document.addEventListener('DOMContentLoaded', () => {
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
$navbarBurgers.forEach(el => {
el.addEventListener('click', () => {
const navBarElement = document.getElementById(el.dataset.target);
el.classList.toggle('is-active');
navBarElement?.classList.toggle('is-active');

});
});

});</script>
</head>
<body class="has-navbar-fixed-top has-navbar-fixed-bottom">
<div id="wrap">
<header>
<nav class="navbar is-fixed-top is-dark" role="navigation">
<nav class="navbar is-fixed-top lth-navbar" role="navigation">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="720 0 800 800"
class="LTHlogo"
role="img"
aria-label="Lyon tech hub logo"
width="640"
height="200"
>
<g fill="#eb0f0f">
<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"/>
<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"/>
<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"/>
<path d="M474.635 414.34L613.12 570.543l-27.6 17.924zm-179.587 0l-119.79 188.11-29.814-19.363z"/>
<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"/>
</g>
<text transform="translate(850 450)" fill="white" font-size="256">
<tspan x="0" y="0">LyonTechHub</tspan>
</text>
</svg>

<a class="navbar-item lth-brand" href="/">
<img src="/imgs/logo/LyonTechHub.svg" alt="Lyon Tech Hub" class="lth-logo" />
<div class="lth-brand-text">
<span class="lth-brand-title">Lyon Tech Hub</span>
<span class="lth-brand-subtitle">Hub des communautés tech lyonnaises</span>
</div>
</a>

<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false"
data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="/">
<span class="icon is-small"><i class="fa fa-home fa-lg"></i></span>
<span>Accueil</span>
</a>
<a class="navbar-item" href="/calendar">
<span class="icon is-small"><i class="fa fa-calendar fa-lg"></i></span>
<span>Calendrier</span>
</a>
<a class="navbar-item" href="/communities">
<span class="icon is-small"><i class="fa fa-comments fa-lg"></i></span>
<span>Communautés</span>
</a>
<a class="navbar-item" href="/conferences">
<span class="icon is-small"><i class="fa fa-comments fa-lg"></i></span>
<span>Conférences</span>
</a>
</div>
<div class="navbar-end">
<a class="navbar-item" href="/about">
<span class="icon is-small"><i class="fa fa-info-circle fa-lg"></i></span>
<span>A propos</span>
</a>

<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-end">
<a class={`navbar-item lth-nav-item ${isActive('/') ? 'is-active' : ''}`} href="/">
<span class="icon is-small"><i class="far fa-comment-dots"></i></span>
<span>Accueil</span>
</a>
<a class={`navbar-item lth-nav-item ${isActive('/calendar') ? 'is-active' : ''}`} href="/calendar">
<span class="icon is-small"><i class="far fa-calendar"></i></span>
<span>Calendrier</span>
</a>
<a class={`navbar-item lth-nav-item ${isActive('/communities') || isActive('/community') ? 'is-active' : ''}`} href="/communities">
<span class="icon is-small"><i class="far fa-user"></i></span>
<span>Communautés</span>
</a>
<a class={`navbar-item lth-nav-item ${isActive('/conferences') ? 'is-active' : ''}`} href="/conferences">
<span class="icon is-small"><i class="far fa-calendar-alt"></i></span>
<span>Conférences</span>
</a>
<a class={`navbar-item lth-nav-item ${isActive('/about') ? 'is-active' : ''}`} href="/about">
<span class="icon is-small"><i class="far fa-question-circle"></i></span>
<span>À propos</span>
</a>
</div>
</div>
</div>
</nav>
</header>
<section class="text-center mainContent">
<slot />
<slot/>
</section>
<div id="push">
</div>
</div>
<footer>
<nav class="navbar is-fixed-bottom is-dark" role="navigation">
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="/">Lyon Tech Hub</a>
<a class="navbar-item" href="/about">Rejoignez-nous</a>
</div>
<div class="navbar-end">
<a class="navbar-item" href="https://slack.lyontechhub.org/" title="Salle Slack">
<span class="icon is-medium"><i class="fab fa-slack fa-lg"></i></span>
</a>
<a class="navbar-item" href="mailto:contact@lyontechhub.org" title="Mail de contact">
<span class="icon is-medium"><i class="fa fa-envelope fa-lg"></i></span>
</a>
<a class="navbar-item" href="https://groups.google.com/forum/#!forum/lyontechhub" title="Liste de discussion">
Copy link
Copy Markdown
Contributor Author

@carolinedplm carolinedplm Jan 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lien plus bon

Copy link
Copy Markdown
Contributor Author

@carolinedplm carolinedplm Mar 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

enlever X et github

<span class="icon is-medium"><i class="fa fa-comments fa-lg"></i></span>
</a>
<a class="navbar-item" href="https://x.com/lyontechhub" title="X">
<span class="icon is-medium"><i class="fab fa-twitter fa-lg"></i></span>
</a>
<a class="navbar-item" href="https://github.com/lyontechhub" title="GitHub">
<span class="icon is-medium"><i class="fab fa-github fa-lg"></i></span>
</a>
</div>
<footer class="lth-footer">
<div class="lth-footer-content">
<div class="lth-footer-left">
<a href="/" class="lth-footer-brand">Lyon Tech Hub</a>
<div class="lth-footer-socials">
<a href="https://slack.lyontechhub.org/" title="Slack">
<i class="fab fa-slack"></i>
</a>
<a href="mailto:contact@lyontechhub.org" title="Email">
<i class="fa fa-envelope"></i>
</a>
<a href="https://x.com/lyontechhub" title="X">
<i class="fab fa-twitter"></i>
</a>
<a href="https://github.com/lyontechhub" title="GitHub">
<i class="fab fa-github"></i>
</a>
</div>
</div>
</div>
</nav>
<a href="/about" class="lth-footer-link">Rejoignez-nous</a>
</div>
</footer>
</body>
</html>
Loading