labasarea/laba-webgunea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Big bang/webgune berria (#18)

Browse Source 
* chore: netlify deployments plugina kentzen du

* chore: Strapi berria instalatzen du

* feat: astro instalatzen du

* chore: cypress instalatzen du

* feat: back eta front konektatzen ditu

* feat: server side rendering egiten du

* chore: Strapin enterprise edition flagak kentzen ditu

* feat: euskara sartzen du

* chore: Strapi bertsioa igotzen du

* feat: preview modua sortzen du ingurune bariableen bidez

* aurreko commitarekin doa

* fix: cypress konpontzen du

* chore: Strapi bertsioa igotzen du

* feat: ekintza back-ean sortzen du

* feat: zikloa eta erakundea sortzen ditu

* feat: erakundeen kudeaketa hobetzen du

* chore: pnpm erabiltzen du

* feat: Strapi bertsioa igotzen du

* ekintza sortzen du eta zerbitzuak eguneratzen ditu

* chore: graphql erabiltzen du populazioa ekiditeko

* chore: collection erabiltzen du ekintzetarako

* chore: bertsioak igotzen ditu

* chore: Astro bertsioa igotzen du

* chore: Strapi bertsioa igotzen du

* feat: home-a hasten du

* feat: zig zag separadorea sortzen du

* feat: zig zaga doitzen du

* feat: heroa doitzen du

* feat: agenda sortzen du

* feat: agenda eta izan labazkide atalak konektatzen ditu

* feat: home-aren edukia sortzen du

* chore: app.js sartzen du WTF

* feat: header-a sortzen du

* feat: card-a hobetzen du

* feat: footer-a sortzen du

* feat: ekintzen zerrenda erakusten du

* feat: zikloaren bista sortzen du

* fix: header-aren estekak konpontzen ditu

* chore: remove unused code

* chore: components directorioa kentzen du

* chore: typescript konfigurazioa hobetzen du

* chore: views path-a sortzen du

* feat: zikloaren deskribapena erakusten du

* feat: ekintzaren bista sortzen du

* feat: zig zag marra erakusten du

* ignore: comment

* feat: hitzordua erakusten du

* feat: zikloa erakusten du

* feat: Waveko erroreak errepasatzen ditu

* feat: Wave birpasatzen du

* feat: zerrendan irudia erakusten du

* feat: karga optimizatzen du

* feat: irudien formatuak kontuan hartzen ditu

* feat: zikloan ekintza irudiak erakusten ditu

* feat: ekintza zerrenda atontzen du

* feat: header-eko estekak markatzen ditu

* feat: irudi estela erakusten du

* feat: responsive-a hobetzen du

* feat: orri basikoa sortzen du

* feat: hasiera responsive egiten du

* feat: overflow konpontzen du

* feat: bug-a uzten du LOL

* feat: irudi estela mugikorrean aktibatzen du

* feat: orri basikoa eta ekintza mugikorrean jartzen ditu

* feat: mugikor menua sortzen du

* feat: mugikor menua amaitzen du

* feat: build estatikoa sortzen du

* feat: sitemap-a sortzen du

* feat: rss feed-a sortzen du

* chore: ingurune aldagaiak sortzen ditu

* chore: public-proxy komandoa sortzen du

* feat: irudiak webp formatuan jartzen ditu

* fix: irudiak erakusten ditu ekintzen zerrendan

* feat: ekintza zerrendaren irudia animatzen du

* refactor: extract functions

* fix: animazioa konpontzen du

* feat: irudi estela hobetzen du

* chore: prerender aldagaiak kentzen ditu

* chore: SASS warning-ak kentzen ditu

* feat: ziklo eta ekintzetan H1 ezartzen du

* feat: slideshow-a sortzen du

* feat: ekintzak hitzorduan oinarrituta filtratzen ditu

* feat: hitzorduen arabera filtratzen du eta moment kentzen du

* feat: titulua aldatzen du

* feat: menua eguneratzen du

* feat: parte hartun deskribapena sortzen du

* feat: Cloudinary konfiguratzen du

* fix: cloudinary konfigurazioa konpontzen du

* feat: erositako fonteak jartzen ditu
This commit is contained in:
Aitor Urrutia
2025-08-29 19:43:56 +02:00
committed by GitHub
parent 67110a4821
commit 93fb0c9b40
325 changed files with 23452 additions and 26547 deletions
Download Patch File Download Diff File Expand all files Collapse all files

281
front/src/views/_components/Header.astro Normal file
View File

@@ -0,0 +1,281 @@
---
import Logo from "../../assets/labaLogo.svg";
import Hamburger from "../../assets/hamburger.svg";
import Close from "../../assets/close.svg";
import ZigZagMarra from "./ZigZagMarra.astro";
interface Props {
isAbsolutePosition?: boolean;
}
const { isAbsolutePosition = false } = Astro.props;
const currentPath = Astro.url.pathname;
---
<header class={isAbsolutePosition ? "absolute-position" : ""}>
{
currentPath != "/" ? (
<a href="/">
<span class="visually-hidden">Laba</span>
<Logo class="logo" />
</a>
) : (
<address>
<p>Gazteluko plaza, 2</p>
<p>Iruñea</p>
</address>
)
}
<button class="mobile-only menu-button" id="ham-btn"><Hamburger /></button>
<nav class="desktop-only">
<h2>Menua</h2>
<ul>
<li><a href="/#agenda">Agenda</a></li>
<li><a href="/#izan-labazkide">Izan Labazkide</a></li>
<li><a href="/#parte-hartu">Parte hartu</a></li>
</ul>
</nav>
<nav class="desktop-only">
<h2>Jarrai gaitzazu!</h2>
<ul>
<li><a href="https://mastodon.eus/@labasarea">Mastodon</a></li>
<li><a href="https://www.instagram.com/labasarea/">Instagram</a></li>
<li><a href="https://twitter.com/labasarea/">X</a></li>
</ul>
</nav>
<address class="desktop-only">
<h2>Harremanetarako</h2>
<a href="mailto:info@laba.eus">info@laba.eus</a>
</address>
</header>
<dialog id="ham-dialog">
<button class="close-button" id="close-dialog"
><Close class="menu-button" /></button
>
<nav>
<h2>Menua</h2>
<ul>
<li><a href="/#agenda">Agenda</a></li>
<li><a href="/#izan-labazkide">Izan Labazkide</a></li>
<li><a href="/#parte-hartu">Parte hartu</a></li>
</ul>
</nav>
<nav>
<h2>Jarrai gaitzazu!</h2>
<ul>
<li><a href="https://mastodon.eus/@labasarea">Mastodon</a></li>
<li><a href="https://www.instagram.com/labasarea/">Instagram</a></li>
<li><a href="https://twitter.com/labasarea/">X</a></li>
</ul>
</nav>
<address>
<h2>Harremanetarako</h2>
<a href="mailto:info@laba.eus">info@laba.eus</a>
</address>
<ZigZagMarra />
{
currentPath === "/" ? (
<a class="dialog-footer" href="/">
<span class="visually-hidden">Laba</span>
<Logo class="logo" />
</a>
) : (
<address class="dialog-footer">
<p>Gazteluko plaza, 2</p>
<p>Iruñea</p>
</address>
)
}
</dialog>
<script is:inline>
const hamBtn = document.getElementById("ham-btn");
const dialog = document.getElementById("ham-dialog");
const closeBtn = document.getElementById("close-dialog");
hamBtn?.addEventListener("click", () => {
if (dialog) {
dialog.showModal();
// Esperar un tick para que el navegador "pinte" el open
requestAnimationFrame(() => {
dialog.classList.add("show");
});
document.body.classList.add("no-scroll");
}
});
closeBtn?.addEventListener("click", () => {
if (dialog) {
dialog.classList.remove("show");
dialog.classList.add("hide");
setTimeout(() => {
dialog.close();
dialog.classList.remove("hide");
}, 300);
document.body.classList.remove("no-scroll");
}
});
</script>
<style lang="scss">
@use "../../style/mixins/textFonts.scss";
@use "../../style/tools/mediaQueries.scss";
header {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: var(--space-05-mobile);
z-index: 15;
color: var(--gorria);
@include mediaQueries.aboveTablet {
display: grid;
grid-template-columns: 1fr 1.5fr 1fr 1fr;
padding: var(--space-07-desktop);
}
}
.absolute-position {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.desktop-only {
@include mediaQueries.belowTablet {
display: none;
}
}
.mobile-only {
@include mediaQueries.aboveTablet {
display: none;
}
}
.logo {
width: var(--space-08-mobile);
height: auto;
@include mediaQueries.aboveTablet {
width: var(--space-09-desktop);
}
}
button {
padding: 0;
color: var(--gorria);
border: none;
background-color: transparent;
}
.menu-button {
width: var(--space-06-mobile);
height: auto;
}
address {
font-style: normal;
}
h2 {
text-transform: uppercase;
@include textFonts.bodyFont;
}
ul {
display: flex;
gap: var(--space-03-mobile);
padding: 0;
list-style: none;
@include mediaQueries.aboveTablet {
gap: var(--space-03-desktop);
}
}
li {
&:not(:last-child) {
&::after {
content: ",";
}
}
}
a {
color: var(--gorria);
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
.close-button {
position: absolute;
right: var(--space-05-mobile);
top: var(--space-05-mobile);
}
dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100dvw;
height: 100dvh;
padding: var(--space-08-mobile) var(--space-05-mobile)
var(--space-05-mobile) var(--space-05-mobile);
color: var(--gorria);
border: none;
opacity: 0;
transform: translate(-50%, -70%); /* un poco más arriba */
transition: all 0.3s ease-out;
&.show {
display: grid;
grid-template-rows: auto auto auto auto 1fr;
gap: var(--space-05-mobile);
opacity: 1;
transform: translate(-50%, -50%); /* centrado */
}
&.hide {
opacity: 0;
transform: translate(-50%, -70%); /* se va hacia arriba */
}
&::backdrop {
background: var(--gorria);
}
&.hide::backdrop {
background: transparent;
}
}
.dialog-footer {
justify-self: center;
align-self: flex-end;
}
</style>