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
2024-12-02 16:37:34 +01:00
parent f8419749f2
commit 645e0923ee
90 changed files with 4854 additions and 1551 deletions
--- a/front/src/views/components/EkintzaSnippetList/EkintzaSnippetList.module.scss
+++ b/front/src/views/components/EkintzaSnippetList/EkintzaSnippetList.module.scss
@@ -0,0 +1,73 @@
+@import '../../../styles/tools/mixins/font.scss';
+@import '../../../styles/tools/mediaQueries.scss';
+
+.card {
+  position: relative;
+
+  @media #{$fromTablet} {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+    gap: var(--size-base);
+  }
+}
+
+.ekintzaInformation {
+  display: flex;
+  flex-direction: column;
+}
+
+.ekintzaCardList {
+  padding-top: var(--size-base);
+  padding-bottom: var(--size-base);
+  display: grid;
+  gap: var(--size-large);
+}
+
+.cardHeadline {
+  @include largeFont;
+  font-weight: var(--font-weight-regular);
+
+  order: 3;
+}
+
+.kartela {
+  height: 9rem;
+  width: auto;
+  justify-self: end;
+}
+
+.cardLink {
+  margin-bottom: var(--size-base);
+
+  font-family: 'Abril Fatface', sans-serif;
+  @include gargantuanFont;
+
+  order: 2;
+  transition: color 0.4s ease;
+
+  &:hover {
+    color: var(--color-morea);
+  }
+
+  &::after {
+    position: absolute;
+    content: '';
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  &:focus-visible {
+    &::after {
+      outline: 2px solid var(--color-morea);
+    }
+  }
+}
+
+.cardHitzordua {
+  @include largeFont;
+
+  order: 1;
+}
--- a/front/src/views/components/EkintzaSnippetList/EkintzaSnippetList.tsx
+++ b/front/src/views/components/EkintzaSnippetList/EkintzaSnippetList.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import { Link } from 'gatsby';
+
+import { EkintzaContent } from '../../../domain/ekintza/EkintzaContent';
+import { formatAbbreviatedDate } from '../../../utilities/dateUtils';
+import * as styles from './EkintzaSnippetList.module.scss';
+
+interface Props {
+  ekintzak: EkintzaContent[];
+}
+
+export const EkintzaSnippetList: React.FC<Props> = ({ ekintzak }) => {
+  return (
+    <ul className={styles.ekintzaCardList}>
+      {ekintzak.map(ekintza => (
+        <li className={styles.card} key={ekintza.slug}>
+          <div className={styles.ekintzaInformation}>
+            <Link
+              to={`/bizi/ekintzak/${ekintza.slug}`}
+              className={styles.cardLink}
+            >
+              {ekintza.izenburua}
+            </Link>
+
+            {ekintza.titularra && (
+              <ReactMarkdown className={styles.cardHeadline}>
+                {ekintza.titularra}
+              </ReactMarkdown>
+            )}
+
+            <p className={styles.cardHitzordua}>
+              {formatAbbreviatedDate(ekintza.hitzordua)}
+            </p>
+          </div>
+
+          {ekintza.kartela && (
+            <img
+              className={styles.kartela}
+              src={ekintza.kartela.formats.small.url}
+              alt={ekintza.kartela.alternativeText}
+              height={ekintza.kartela.formats.small.height}
+              width={ekintza.kartela.formats.small.width}
+            ></img>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+};
--- a/front/src/views/components/EkintzaSnippetList/index.ts
+++ b/front/src/views/components/EkintzaSnippetList/index.ts
@@ -0,0 +1 @@
+export { EkintzaSnippetList } from './EkintzaSnippetList';
				`@@ -0,0 +1 @@`
				`export { EkintzaSnippetList } from './EkintzaSnippetList';`