91 responsive changes

frontend/src/view/AdditionalModules.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { defineAsyncComponent, ref, Ref} from "vue";
+import { defineAsyncComponent, inject, ref, Ref} from "vue";
 import { Module } from "../model/module.ts";
 import { fetchAllModules } from "../api/fetchCourse.ts";
 import moduleStore from "../store/moduleStore.ts";
@@ -22,6 +22,7 @@ if (store.isEmpty()) {
   router.replace("/");
 }
 
+const mobilePage = inject("mobilePage") as Ref<boolean>;
 const modules: Ref<Module[]> = ref([]);
 const filters = ref({
   course: {
@@ -58,16 +59,17 @@ async function showInfo(module: Module) {
     module = data;
   });
   dialog.open(ModuleInformation, {
+    class: "w-full m-0",
     props: {
-      style: {
-        width: "50vw",
+        style: {
+          width: "80vw",
+        },
+        breakpoints: {
+          "992px": "100vw",
+          "640px": "100vw",
+        },
+        modal: true,
       },
-      breakpoints: {
-        "960px": "75vw",
-        "640px": "90vw",
-      },
-      modal: true,
-    },
     data: {
       module: module,
     },
@@ -94,6 +96,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
     <div class="m-2 lg:w-10 w-full">
       <DynamicDialog />
       <DataTable
+        id="dt-responsive-table"
         v-model:filters="filters"
         :selection="store.getAllModules()"
         :value="modules"
@@ -116,6 +119,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
         :show-gridlines="true"
         :striped-rows="true"
         :select-all="false"
+        :size="mobilePage ? 'small' : 'large'"
         @row-select="selectModule"
         @row-unselect="unselectModule"
       >

frontend/src/view/CourseSelection.vue

@@ -54,7 +54,7 @@ async function getModules() {
 <template>
   <div 
     class="flex flex-column align-items-center transition-all transition-duration-500 transition-ease-in-out mt-0"
-    :class="{'md:mt-8': modules.length === 0}"
+    :class="{'md:mt-8': selectedCourse.name === ''}"
   >
     <div class="flex align-items-center justify-content-center gap-2 mx-2">
       <h3 class="text-4xl">
@@ -95,6 +95,7 @@ async function getModules() {
     </div>
     <ModuleSelection
       :modules="modules"
+      :selected-course="selectedCourse.name"
       class="lg:w-8"
     />
   </div>