feat: add more news button

clicepfl · Mar 17, 2024 · 348fbb0 · 348fbb0
1 parent 4805b7f
commit 348fbb0
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 6 deletions.
diff --git a/app/src/locales.ts b/app/src/locales.ts
@@ -19,6 +19,7 @@ interface Translations {
   partners: string;
   association: string;
   news: string;
+  moreNews: string;
   error404: string;
   error404desc: string;
 }
@@ -38,6 +39,7 @@ const translations: { [key in Locale]: Translations & OptionsOperators } = {
     partners: "partners",
     association: "association",
     news: "news",
+    moreNews: "more news",
     error404: "error 404",
     error404desc: "this page does not exist!",
     capitalize: (s) => s.replace(/^(\s*\w)/, (s) => s.toUpperCase()),
@@ -53,6 +55,7 @@ const translations: { [key in Locale]: Translations & OptionsOperators } = {
     partners: "partenaires",
     association: "association",
     news: "news",
+    moreNews: "plus de news",
     error404: "erreur 404",
     error404desc: "cette page n'existe pas!",
     capitalize: (s) => s.replace(/^(\s*\w)/, (s) => s.toUpperCase()),

diff --git a/app/src/pages/index.tsx b/app/src/pages/index.tsx
@@ -1,12 +1,13 @@
 import Decoration from "@/assets/decoration.svg";
 import PreviewImage from "@/assets/galleryPreview.png";
 import AssociationDescription from "@/components/AssociationDescription";
+import Button from "@/components/Button";
 import DirectusImage from "@/components/DirectusImage";
 import MembersList from "@/components/MembersList";
 import NewsCard from "@/components/NewsCard";
 import PartnersList from "@/components/PartnersList";
 import { directus, populateLayoutProps } from "@/directus";
-import { getTranslation, queryTranslations } from "@/locales";
+import { getTranslation, queryTranslations, translate } from "@/locales";
 import styles from "@/styles/Homepage.module.scss";
 import {
   Association,
@@ -45,6 +46,11 @@ export default function Home(
             <NewsCard key={(n as any).id} news={n} />
           ))}
         </div>
+        <Button
+          text={translate("moreNews", router.locale)}
+          size="small"
+          onClick={() => router.push("/news")}
+        />
       </div>
 
       <PartnersList partners={props.partners} />

diff --git a/app/src/styles/Button.module.scss b/app/src/styles/Button.module.scss
@@ -2,8 +2,11 @@
 
 .button {
   border-radius: 3rem;
-  padding: 0.7rem;
+  padding: 1rem;
   margin: 1rem;
+  cursor: pointer;
+
+  font-size: 1rem;
 
   color: variables.$text-color;
   background-color: variables.$glass-color;

diff --git a/app/src/styles/Homepage.module.scss b/app/src/styles/Homepage.module.scss
@@ -52,18 +52,21 @@
 .news {
   @extend .glass;
 
+  display: flex;
+  flex-direction: column;
+
   width: 100%;
-  overflow: scroll;
+  overflow: hidden;
 
   padding: 2em;
 
+  align-items: center;
+
   .newsList {
     margin: 2%;
     gap: 2em;
-    width: fit-content;
     display: grid;
-    grid-template-columns: repeat(3, 50rem);
-    padding-right: 5rem;
+    grid-template-columns: repeat(3, 1fr);
   }
 }