Big bang/webgune berria (#18)
* 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
GitHub
185
front/src/views/ekintza/Ekintza.astro
Normal file
185
front/src/views/ekintza/Ekintza.astro
Normal file
@@ -0,0 +1,185 @@
|
||||
---
|
||||
import type { Ekintza } from "models/Ekintza";
|
||||
import Footer from "views/_components/Footer.astro";
|
||||
import Header from "views/_components/Header.astro";
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import MarkdownParser from "views/_components/MarkdownParser.astro";
|
||||
import ZigZagMarra from "views/_components/ZigZagMarra.astro";
|
||||
import dayjs from "dayjs";
|
||||
import { getUrl } from "models/Zikloa";
|
||||
import { getImageData } from "models/ImageMedia";
|
||||
|
||||
import "dayjs/locale/eu";
|
||||
dayjs.locale("eu");
|
||||
|
||||
interface Props {
|
||||
ekintza: Ekintza;
|
||||
}
|
||||
|
||||
const { ekintza } = Astro.props;
|
||||
|
||||
const irudia = ekintza.mainMedia ? getImageData(ekintza.mainMedia) : null;
|
||||
---
|
||||
|
||||
<Layout title={ekintza.izenburua}>
|
||||
<Header />
|
||||
|
||||
<main>
|
||||
<aside>
|
||||
{
|
||||
irudia && (
|
||||
<img
|
||||
class="irudia"
|
||||
alt={irudia.alt}
|
||||
src={irudia.src}
|
||||
width={irudia.width}
|
||||
height={irudia.height}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</aside>
|
||||
<article>
|
||||
<h1>{ekintza.izenburua}</h1>
|
||||
|
||||
<div class="zigzag-wrapper">
|
||||
<ZigZagMarra />
|
||||
</div>
|
||||
|
||||
<p class="hitzordua">
|
||||
{dayjs(ekintza.hitzordua).format("MMMM[k] D. H:mm")}
|
||||
</p>
|
||||
|
||||
{
|
||||
ekintza.zikloa && (
|
||||
<a class="zikloa" href={getUrl(ekintza.zikloa)}>
|
||||
{ekintza.zikloa.izena}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
<h2>{ekintza.titularra}</h2>
|
||||
|
||||
{
|
||||
ekintza.deskribapena && (
|
||||
<div class="deskribapena">
|
||||
<MarkdownParser content={ekintza.deskribapena} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</Layout>
|
||||
|
||||
<style lang="scss">
|
||||
@use "../../style/mixins/displayFonts.scss";
|
||||
@use "../../style/mixins/textFonts.scss";
|
||||
@use "../../style/mixins/grid12Columns.scss";
|
||||
@use "../../style/tools/toDVW.scss";
|
||||
@use "../../style/tools/mediaQueries.scss";
|
||||
|
||||
main {
|
||||
gap: var(--space-05-mobile);
|
||||
padding: var(--space-05-mobile);
|
||||
|
||||
@include grid12Columns.grid;
|
||||
@include mediaQueries.aboveTablet {
|
||||
padding: var(--space-07-desktop);
|
||||
}
|
||||
}
|
||||
|
||||
aside {
|
||||
grid-column: 3 / span 8;
|
||||
margin-bottom: var(--space-04-mobile);
|
||||
|
||||
@include mediaQueries.aboveTablet {
|
||||
grid-column: 1 / span 4;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.irudia {
|
||||
border-radius: 50%;
|
||||
aspect-ratio: 1;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
article {
|
||||
grid-column: 1 / -1;
|
||||
|
||||
@include mediaQueries.aboveTablet {
|
||||
grid-column: 5 / span 6;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: var(--space-04-mobile);
|
||||
|
||||
color: var(--gorria);
|
||||
|
||||
@include displayFonts.display2;
|
||||
@include mediaQueries.aboveTablet {
|
||||
margin-bottom: var(--space-04-desktop);
|
||||
}
|
||||
}
|
||||
|
||||
.zigzag-wrapper {
|
||||
margin-bottom: var(--space-04-mobile);
|
||||
|
||||
@include mediaQueries.aboveTablet {
|
||||
margin-bottom: var(--space-04-desktop);
|
||||
}
|
||||
}
|
||||
|
||||
.hitzordua {
|
||||
color: var(--gorria);
|
||||
text-transform: capitalize;
|
||||
@include displayFonts.display3;
|
||||
}
|
||||
|
||||
.zikloa {
|
||||
display: inline-block;
|
||||
padding: var(--space-02-mobile) var(--space-03-mobile);
|
||||
margin-top: var(--space-04-mobile);
|
||||
|
||||
color: var(--marroia);
|
||||
text-decoration: none;
|
||||
border-radius: var(--space-05-mobile);
|
||||
border: #{toDVW.toMobileDVW(1)} solid var(--marroia);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@include textFonts.captionFont;
|
||||
@include mediaQueries.aboveTablet {
|
||||
padding: var(--space-02-desktop) var(--space-04-desktop);
|
||||
margin-top: var(--space-05-desktop);
|
||||
|
||||
border-radius: var(--space-06-desktop);
|
||||
border: #{toDVW.toDesktopDVW(1)} solid var(--marroia);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: var(--space-04-mobile);
|
||||
|
||||
color: var(--marroia);
|
||||
|
||||
@include displayFonts.display4;
|
||||
@include mediaQueries.aboveTablet {
|
||||
margin-top: var(--space-05-desktop);
|
||||
}
|
||||
}
|
||||
|
||||
.deskribapena {
|
||||
margin-top: var(--space-04-mobile);
|
||||
|
||||
@include mediaQueries.aboveTablet {
|
||||
margin-top: var(--space-05-desktop);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user