Laba bizi atala sortzen du (#17)
* feat: laba bizi backenda sortzen du * chore: Strapi bertsioa igotzen du * chore: gatsbyn tipo berriak sortzen ditu * feat: izena aldatzen du * refactor: extract interface * feat: ekintzaren bista sortzen du * feat: zikloa Gatsbyn sortzen du * chore: erabiltzaile izena aldatzen du * feat: bizi atala sortzen du * feat: bizi atalean ekintza eta zikloak erakusten ditu * fix: focus visible erabiltzen du * chore: ekintzak sartzen ditu * feat: semantika hobetzen du * feat: titularra erakusten du * feat: colorea aldaten du * feat: izenbururako hoverra konpontzen du * feat: dastatu laba fonteak aldatzen ditu * feat: partially active sartzen du esteketan * refactor: cubic bezier kentzen du * database * chore: irudiak databasetik ezabatzen ditu * feat: Strapi bertsioa igotzen du * feat: cloudinary konfiguratzen du * feat: kartelak erakusten ditu * chore: ziklo antiespezista sortzen du * chore: zikloa aldatzen du * chore: tortura ekintza sortzen du * feat: ekintza layout sortzen du * feat: maketazioa konpontzen du * chore: Strapi bertsioa eguneratzen du * refactor: naming * feat: gainburua sortzen du * feat: maketazio dohikuntzak * feat: ekintza zerrenda sortzen du * feat: maketazioa hobetzen du (agian) * feat: blur kentzen du * fix: preview-a konpontzen du * feat: hitzordua sartzen du * fix: datak konpontzen ditu * feat: irudiak handitzen ditu * feat: draft and publish kentzen du * feat: strapi bertsioa igotzen du * chore: querya aldatzen du * feat: zikloa maketatzen du * feat: zikloak bizin erakusten ditu * feat: maketazioa aldatzen du * refactor: fragmentuak sortzen ditu * refactor: fragmentua erabilten du * feat: zikloa erakusten du * chore: edukiak sartzen ditu * feat: gainburua dohitzen du * feat: strapi bertsioa igotzen du * feat: liburutegiak igotzen ditu * fix: build-a konpontzen du * fix: mugikor maketazioa konpontzen du * fix: mugikor maketazioa hobetzen du * chore: start sript-a aldatzen du * chore: konfigurazioa aldatzen du * chore: Strapi bertsioa igotzen du * chore: netlify deployments kentzen du * chore: browserslist eguneratzen du * Revert "chore: netlify deployments kentzen du" This reverts commit 166fb859036ad311d1e49430d7222999071d5cb2. * chore: warning-ak ekiditen ditu * feat: focus-a konpontzen du * feat: kartela konpontzen du * feat: pasa diren zikloak ezkutatzen ditu * feat: ekintzak ezkutatzen ditu produkzioan
This commit is contained in:
Aitor Urrutia
GitHub
89
front/src/views/Bizi/Bizi.module.scss
Normal file
89
front/src/views/Bizi/Bizi.module.scss
Normal file
@@ -0,0 +1,89 @@
|
||||
@import '../../styles/tools/mixins/font.scss';
|
||||
@import '../../styles/tools/mediaQueries.scss';
|
||||
|
||||
.wrapper {
|
||||
padding-left: var(--size-small);
|
||||
padding-right: var(--size-small);
|
||||
padding-top: var(--size-huge);
|
||||
margin-bottom: var(--size-huge);
|
||||
|
||||
@media #{$fromDesktop} {
|
||||
display: grid;
|
||||
grid-template-columns: 4fr 2fr;
|
||||
gap: var(--size-huge);
|
||||
|
||||
padding-left: var(--size-huge);
|
||||
padding-right: var(--size-huge);
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
@media #{$fromDesktop} {
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
& > .title {
|
||||
transform: translateY(-200%);
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: 'Abril Fatface', sans-serif;
|
||||
font-size: clamp(2rem, 4.2dvw, 5rem);
|
||||
color: var(--color-grisa-3);
|
||||
|
||||
z-index: 10;
|
||||
mix-blend-mode: difference;
|
||||
|
||||
@media #{$fromDesktop} {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
transition: transform 0.3s ease-in-out;
|
||||
transform: translateX(-50%) rotate(-90deg) translateX(-50%)
|
||||
translateY(-120%);
|
||||
}
|
||||
}
|
||||
|
||||
.zikloaCardList {
|
||||
padding: var(--size-base);
|
||||
display: grid;
|
||||
gap: var(--size-large);
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cardLink {
|
||||
font-family: 'Abril Fatface', sans-serif;
|
||||
@include largeFont;
|
||||
|
||||
transition: color 0.4s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-morea);
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.deskribapena {
|
||||
@include baseFont;
|
||||
font-weight: var(--font-weight-regular);
|
||||
}
|
||||
|
||||
.cardHitzordua {
|
||||
@include baseFont;
|
||||
}
|
||||
77
front/src/views/Bizi/Bizi.tsx
Normal file
77
front/src/views/Bizi/Bizi.tsx
Normal file
@@ -0,0 +1,77 @@
|
||||
import React from 'react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
|
||||
import { Link } from 'gatsby';
|
||||
|
||||
import { BiziContent } from '../../domain/bizi/BiziContent';
|
||||
import { EkintzaContent } from '../../domain/ekintza/EkintzaContent';
|
||||
import {
|
||||
getLastEkintza,
|
||||
ZikloaContent,
|
||||
} from '../../domain/zikloa/ZikloaContent';
|
||||
import { formatAbbreviatedDay } from '../../utilities/dateUtils';
|
||||
import { EkintzaSnippetList } from '../components/EkintzaSnippetList/EkintzaSnippetList';
|
||||
import { Hero } from '../components/Hero';
|
||||
import { Layout } from '../components/Layout';
|
||||
import { Oina } from '../components/Oina';
|
||||
import * as styles from './Bizi.module.scss';
|
||||
|
||||
interface Props {
|
||||
content: BiziContent;
|
||||
ekintzak: EkintzaContent[];
|
||||
zikloak: ZikloaContent[];
|
||||
}
|
||||
|
||||
export const Bizi: React.FC<Props> = ({ content, ekintzak, zikloak }) => {
|
||||
const { izenburua, deskribapena } = content;
|
||||
|
||||
const ekintzakToShow = ekintzak.filter(
|
||||
ekintza => new Date(ekintza.hitzordua) >= new Date(),
|
||||
);
|
||||
const zikloakToShow = zikloak.filter(
|
||||
zikloa => new Date(getLastEkintza(zikloa)) >= new Date(),
|
||||
);
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<Hero izenburua={izenburua} deskribapena={deskribapena} atala="bizi" />
|
||||
|
||||
<main className={styles.wrapper} id="edukia">
|
||||
<section className={styles.section}>
|
||||
<h2 className={styles.title}>ekintzak</h2>
|
||||
<EkintzaSnippetList ekintzak={ekintzakToShow} />
|
||||
</section>
|
||||
|
||||
{zikloakToShow.length > 0 && (
|
||||
<section className={styles.section}>
|
||||
<h2 className={styles.title}>zikloak</h2>
|
||||
<ul className={styles.zikloaCardList}>
|
||||
{zikloakToShow.map(zikloa => (
|
||||
<li className={styles.card} key={zikloa.slug}>
|
||||
<p className={styles.cardHitzordua}>
|
||||
{formatAbbreviatedDay(getLastEkintza(zikloa))} arte
|
||||
</p>
|
||||
|
||||
<Link
|
||||
className={styles.cardLink}
|
||||
to={`/bizi/zikloak/${zikloa.slug}`}
|
||||
>
|
||||
{zikloa.izena}
|
||||
</Link>
|
||||
|
||||
{zikloa.deskribapena && (
|
||||
<ReactMarkdown className={styles.deskribapena}>
|
||||
{zikloa.deskribapena}
|
||||
</ReactMarkdown>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
)}
|
||||
</main>
|
||||
|
||||
<Oina />
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
1
front/src/views/Bizi/index.ts
Normal file
1
front/src/views/Bizi/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { Bizi } from './Bizi';
|
||||
Reference in New Issue
Block a user