wip

lost-university · Feb 3, 2024 · 4c3e127 · 4c3e127
1 parent a52c0b7
commit 4c3e127
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 124 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,9 +1,9 @@
 <template>
-  <Navigation />
   <div class="p-2">
+    <Navigation />
     <router-view />
+    <PageFooter />
   </div>
-  <PageFooter />
 </template>
 
 <script lang="ts">

diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
@@ -19,7 +19,11 @@
         aria-expanded="false"
         @click="onBurgerClick"
       >
-        <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
+        <font-awesome-icon
+          :icon="['fa', 'bars']"
+          size="2x"
+          class="peer"
+        />
       </button>
     </div>
     <div
@@ -32,9 +36,13 @@
       >
         <div>
           <button
-            class="peer bg-green-200 p-4"
+            class="p-4 peer hover:cursor-auto"
             v-text="category.title"
           />
+          <font-awesome-icon
+            :icon="['fa', 'chevron-down']"
+            class="peer"
+          />
           <div class="hidden rounded shadow-2xl bg-white flex-col peer-hover:flex hover:flex fixed z-10">
             <a
               class="p-2 hover:bg-gray-100 rounded"

diff --git a/src/components/PageFooter.vue b/src/components/PageFooter.vue
@@ -1,80 +1,53 @@
 <template>
-  <footer class="section rab-footer">
-    <div class="pt-5 divider" />
-    <div class="columns">
-      <div class="column is-11">
-        <p>
-          © 2023
-          <a
-            class="contributor-link"
-            href="https://github.com/jeremystucki"
-            target="_blank"
-            rel="noopener noreferrer"
-          >Jeremy Stucki</a>,
-          <a
-            class="contributor-link"
-            href="https://github.com/unkelhoebbi"
-            target="_blank"
-            rel="noopener noreferrer"
-          >Gregor Stuber</a>,
-          <a
-            class="contributor-link"
-            href="https://github.com/joshuabeny1999"
-            target="_blank"
-            rel="noopener noreferrer"
-          >Joshua Hürzeler</a>,
-          <a
-            class="contributor-link"
-            href="https://github.com/Mafii"
-            target="_blank"
-            rel="noopener noreferrer"
-          >Mathias Fischler</a>,
-          <a
-            class="contributor-link"
-            href="https://github.com/lzkndg"
-            target="_blank"
-            rel="noopener noreferrer"
-          >Luzia Kündig</a>,
-          <a
-            class="contributor-link"
-            href="https://github.com/StefanieJaeger"
-            target="_blank"
-            rel="noopener noreferrer"
-          >Stefanie Jäger</a>,
-          <a
-            class="contributor-link"
-            href="https://github.com/Venyla"
-            target="_blank"
-            rel="noopener noreferrer"
-          >Vina Zahnd</a>,
-          <a
-            class="contributor-link"
-            href="https://github.com/CHLinusch"
-            target="_blank"
-            rel="noopener noreferrer"
-          >Linus Flury</a>
-        </p>
-      </div>
-      <div class="column is-1 ml-auto">
+  <hr>
+  <footer class="flex items-center p-4 justify-between">
+    <div class="text-sm">
+      <span>© 2023 </span>
+      <span
+        v-for="(contributor, index) in contributors"
+        :key="contributor.githubHandle"
+      >
         <a
-          class="mr-4 is-inline-block"
-          href="https://github.com/lost-university"
-        >
-          <font-awesome-icon
-            :icon="['fab', 'github']"
-            size="2x"
-            class="social"
-          />
-        </a>
-      </div>
+          :href="'https://github.com/' + contributor.githubHandle"
+          class="hover:text-purple-800"
+          target="_blank"
+          rel="noopener noreferrer"
+        >{{ contributor.name }}</a>
+        <span>{{ index != contributors.length - 1 ? ', ' : '' }}</span>
+      </span>
     </div>
+    <a
+      class="hover:text-purple-800"
+      href="https://github.com/lost-university"
+    >
+      <font-awesome-icon
+        :icon="['fab', 'github']"
+        size="2x"
+      />
+    </a>
   </footer>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import type { Contributor } from "../helpers/types";
 
 export default defineComponent({
   name: 'PageFooter',
+  props: {
+    contributors: {
+      type: Array<Contributor>,
+      default: () => [
+        { name: "Jeremy Stucki", githubHandle: "jeremystucki" },
+        { name: "Gregor Stuber", githubHandle: "unkelhoebbi" },
+        { name: "Joshua Hürzeler", githubHandle: "joshuabeny1999" },
+        { name: "Mathias Fischler", githubHandle: "Mafii" },
+        { name: "Luzia Kündig", githubHandle: "lzkndg" },
+        { name: "Stefanie Jäger", githubHandle: "StefanieJaeger" },
+        { name: "Vina Zahnd", githubHandle: "Venyla" },
+        { name: "Linus Flury", githubHandle: "CHLinusch" },
+      ],
+    },
+  },
 });
 </script>
diff --git a/src/components/Semester.vue b/src/components/Semester.vue
@@ -11,8 +11,8 @@
     @end="onDropEnd"
   >
     <template #header>
-      <div class="flex justify-between">
-        <span class="text-xl p-0.5">
+      <div class="flex justify-between w-full py-0.5 px-1">
+        <span class="text-xl">
           Semester {{ number }}
         </span>
         <button

diff --git a/src/helpers/types.ts b/src/helpers/types.ts
@@ -34,3 +34,8 @@ type ModuleCategory = {
   name: string,
   ects: number,
 };
+
+export type Contributor = {
+  name: string,
+  githubHandle: string,
+};
diff --git a/src/main.ts b/src/main.ts
@@ -4,10 +4,11 @@ import { createApp } from 'vue';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { library, type IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
-import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import { faBars, faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import App from './App.vue';
 import router from './router';
 
+library.add(faBars as IconDefinition);
 library.add(faChevronUp as IconDefinition);
 library.add(faChevronDown as IconDefinition);
 library.add(faGithub as IconDefinition);

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -1,10 +1,5 @@
 <template>
   <div>
-    <div>
-      <h1>
-        Plane deine Module
-      </h1>
-    </div>
     <div>
       <Transition>
         <div
@@ -42,57 +37,48 @@
     </div>
   </div>
   <div class="flex space-x-2 overflow-auto">
-    <div
+    <SemesterComponent
       v-for="semester in semesters"
       :key="semester.number"
-      class="bg-gray-300 rounded p-2 group/semester"
+      v-model:modules="semester.modules"
+      class="bg-gray-300 rounded p-2 group/semester w-64"
+      :number="semester.number"
+      :all-modules="modules"
+      @on-module-deleted="(moduleId: string) => onModuleDeleted(semester.number, moduleId)"
+      @on-add-module="addModule"
+      @on-remove-semester="removeSemester"
+      @on-drop-end="updateUrlFragment"
+    />
+    <button
+      class="add-semester-btn button is-dark is-fullwidth"
+      type="button"
+      @click="addSemester"
     >
-      <SemesterComponent
-        v-model:modules="semester.modules"
-        :number="semester.number"
-        :all-modules="modules"
-        @on-module-deleted="(moduleId: string) => onModuleDeleted(semester.number, moduleId)"
-        @on-add-module="addModule"
-        @on-remove-semester="removeSemester"
-        @on-drop-end="updateUrlFragment"
-      />
-    </div>
-    <div class="column add-semester">
-      <button
-        class="add-semester-btn button is-dark is-fullwidth"
-        type="button"
-        @click="addSemester"
-      >
-        +
-      </button>
-    </div>
+      +
+    </button>
   </div>
-  <div class="columns desktop-ml-6 desktop-mt-6">
-    <div class="column">
+  <div class="mt-4 flex">
+    <div>
       <article>
-        <h2 class="subtitle">
+        <span class="text-xl">
           Übersicht der ECTS Punkte
-        </h2>
-        <div class="is-flex is-align-content-space-evenly is-justify-content-left">
-          <label
-            class="is-flex is-flex-direction-column is-justify-content-center"
-            for="last-semester-select"
-          >
-            <p>Letztes erfolgreich abgeschlossenes Semester:</p>
+        </span>
+        <div class="my-2">
+          <label for="last-semester-select">
+            Letztes erfolgreich abgeschlossenes Semester:
           </label>
-          <div class="select pl-2">
-            <select
-              id="last-semester-select"
-              v-model="lastSemesterNumber"
+          <select
+            class="ml-2 px-3 py-2 rounded"
+            id="last-semester-select"
+            v-model="lastSemesterNumber"
+          >
+            <option
+              v-for="semester in semesters"
+              :key="semester.number"
             >
-              <option
-                v-for="semester in semesters"
-                :key="semester.number"
-              >
-                {{ semester.number }}
-              </option>
-            </select>
-          </div>
+              {{ semester.number }}
+            </option>
+          </select>
         </div>
         <table>
           <tbody>
@@ -129,9 +115,9 @@
         </table>
       </article>
     </div>
-    <div class="column">
+    <div>
       <article>
-        <h2 class="subtitle">
+        <h2 class="text-xl">
           Vertiefungen
         </h2>
         <div class="columns is-multiline mt-5">