updates to the landing page

JohanGrims · Sep 15, 2024 · 5b27e97 · 5b27e97
1 parent adbdebb
commit 5b27e97
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 57 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -5,63 +5,86 @@ import "./App.css";
 import { db } from "./firebase";
 
 function App() {
-  const { activeVotes, expiredVotes } = useLoaderData();
+  const { activeVotes, expiredVotes, scheduledVotes } = useLoaderData();
 
   return (
-    <div className="waldorf-vote-landing-page">
-      <header className="waldorf-header">
-        <div className="waldorf-logo-container">
-          <img src={"/WSP.png"} className="waldorf-logo" alt="Logo" />
-        </div>
-        <h1>Wahlen</h1>
-        <p className="waldorf-description">
-          WaldorfWahlen ist eine Webanwendung, die es der Waldorfschule Potsdam
-          ermöglicht, Projektwahlen für ihre Schülerinnen und Schüler
-          durchzuführen. Die Anwendung basiert auf dem Vite-Framework in
-          Verbindung mit ReactJS für das Frontend und Firebase für das Backend
-          und die Datenbank.
-        </p>
-      </header>
+    <div className="mdui-prose">
+      <p />
+      <div style={{ display: "flex", justifyContent: "center" }}>
+        <img src="/WSP.png" alt="Logo" className="waldorf-logo" />
+      </div>
+      <p />
+      <h1>WaldorfWahlen</h1>
+      <mdui-list>
+        {activeVotes.length < 1 && (
+          <mdui-list-item disabled>Keine aktiven Wahlen</mdui-list-item>
+        )}
+        {activeVotes.map((vote) => (
+          <mdui-list-item
+            key={vote.id}
+            href={`/v/${vote.id}`}
+            rounded
+            end-icon="arrow_forward"
+          >
+            {vote.title}
+          </mdui-list-item>
+        ))}
+        <mdui-collapse>
+          <mdui-collapse-item value="scheduled-votes">
+            <mdui-list-item
+              rounded
+              icon="scheduled"
+              end-icon="expand_more"
+              slot="header"
+            >
+              <mdui-list-item-content>Geplante Wahlen</mdui-list-item-content>
+            </mdui-list-item>
+            <div style={{ padding: "0 1rem" }}>
+              <>
+                {scheduledVotes.length === 0 && (
+                  <mdui-list-item disabled>Keine Wahlen</mdui-list-item>
+                )}
+                {scheduledVotes.map((e) => (
+                  <mdui-list-item
+                    rounded
+                    href={`/v/${e.id}`}
+                    end-icon="arrow_forward"
+                  >
+                    {e.title}
+                  </mdui-list-item>
+                ))}
+              </>
+            </div>
+          </mdui-collapse-item>
 
-      <main className="waldorf-main-content">
-        <section className="waldorf-section">
-          <h3 className="waldorf-section-title">Aktiv</h3>
-          <div className="waldorf-vote-list">
-            {activeVotes.map((vote) => (
-              <div key={vote.id} className="waldorf-vote-card">
-                <a href={`/v/${vote.id}`} className="waldorf-link">
-                  {vote.title}
-                </a>
-              </div>
-            ))}
-            {activeVotes.length < 1 && (
-              <div className="waldorf-no-votes">Keine aktiven Wahlen</div>
-            )}
-          </div>
-        </section>
-
-        <section className="waldorf-section">
-          <h3 className="waldorf-section-title">Beendet</h3>
-          <div className="waldorf-vote-list">
-            {expiredVotes.map((vote) => (
-              <div key={vote.id} className="waldorf-vote-card">
-                <a href={`/r/${vote.id}`} className="waldorf-link">
-                  {vote.title}
-                </a>
-              </div>
-            ))}
-            {expiredVotes.length < 1 && (
-              <div className="waldorf-no-votes">Keine beendeten Wahlen</div>
-            )}
-          </div>
-        </section>
-      </main>
-
-      <footer className="waldorf-footer">
-        <span className="waldorf-credits">
-          Developed by <a href="https://github.com/johangrims">@JohanGrims</a>
-        </span>
-      </footer>
+          <mdui-collapse-item value="expired-votes">
+            <mdui-list-item
+              rounded
+              icon="history"
+              end-icon="expand_more"
+              slot="header"
+            >
+              <mdui-list-item-content>Beendete Wahlen</mdui-list-item-content>
+            </mdui-list-item>
+            <div style={{ padding: "0 1rem" }}>
+              <>
+                {expiredVotes.length === 0 && (
+                  <mdui-list-item disabled>Keine Wahlen</mdui-list-item>
+                )}
+                {expiredVotes.map((e) => (
+                  <mdui-list-item
+                    rounded
+                    href={`/r/${e.id}`}
+                    end-icon="arrow_forward"
+                  >
+                    {e.title}
+                  </mdui-list-item>
+                ))}
+              </>
+            </div>
+          </mdui-collapse-item>
+        </mdui-collapse>
+      </mdui-list>
     </div>
   );
 }
@@ -72,6 +95,8 @@ export async function loader() {
   const votes = await getDocs(collection(db, "/votes"));
   const activeVotes = [];
   const expiredVotes = [];
+  const scheduledVotes = [];
+
   votes.docs.map((e) => {
     let data = e.data();
     console.log(data, e.id);
@@ -81,7 +106,9 @@ export async function loader() {
       } else {
         expiredVotes.push({ id: e.id, title: data.title });
       }
+      return;
     }
+    scheduledVotes.push({ id: e.id, title: data.title });
   });
-  return { activeVotes, expiredVotes };
+  return { activeVotes, expiredVotes, scheduledVotes };
 }
diff --git a/src/Vote.jsx b/src/Vote.jsx
@@ -155,7 +155,7 @@ export default function Vote() {
 
   return (
     <div className="container">
-      <mdui-card variant="filled" class="card">
+      <mdui-card variant="outlined" class="card">
         <div className="mdui-prose">
           <h1 className="vote-title">{title}</h1>
           <div className="time-label">

diff --git a/src/admin/navigation/DrawerList.jsx b/src/admin/navigation/DrawerList.jsx
@@ -179,7 +179,7 @@ export default function DrawerList() {
           <mdui-collapse-item value="expired-votes">
             <mdui-list-item
               rounded
-              icon="restore"
+              icon="history"
               end-icon="expand_more"
               slot="header"
             >