91 responsive changes

frontend/src/components/RenameModules.vue

@@ -3,7 +3,7 @@ import moduleStore from "../store/moduleStore.ts";
 import { createIndividualFeed } from "../api/createFeed.ts";
 import router from "../router";
 import tokenStore from "../store/tokenStore.ts";
-import { computed, ref } from "vue";
+import { Ref, computed, inject, ref } from "vue";
 import ModuleTemplateDialog from "./ModuleTemplateDialog.vue";
 import { onlyWhitespace } from "../helpers/strings.ts";
 import { useI18n } from "vue-i18n";
@@ -18,6 +18,7 @@ const tableData = ref(
     };
   }),
 );
+const mobilePage = inject("mobilePage") as Ref<boolean>;
 
 const columns = computed(() => [
   { field: "Course", header: t("moduleInformation.course") },
@@ -33,95 +34,102 @@ async function finalStep() {
 </script>
 
 <template>
-  <div class="flex flex-column">
-    <div class="flex align-items-center justify-content-center h-4rem m-2">
+  <div class="flex flex-column align-items-center">
+    <div class="flex align-items-center justify-content-center m-2 gap-2">
       <h3>{{ $t("renameModules.subTitle") }}</h3>
-      <ModuleTemplateDialog />
+      <ModuleTemplateDialog class=""/>
     </div>
-    <div class="card flex align-items-center justify-content-center m-2">
-      <DataTable
-        :value="tableData"
-        edit-mode="cell"
-        table-class="editable-cells-table"
-        responsive-layout="scroll"
-      >
-        <template #header>
-          <div class="flex align-items-center justify-content-end">
-            {{ $t("renameModules.enableAllNotifications") }}
-            <InputSwitch
-              class="mx-4"
-              :model-value="
-                tableData.reduce(
-                  (acc, curr) => acc && curr.Module.reminder,
-                  true,
-                )
-              "
-              @update:model-value="
-                tableData.forEach((module) => (module.Module.reminder = $event))
-              "
-            />
-          </div>
-        </template>
-        <Column
-          v-for="col of columns"
-          :key="col.field"
-          :field="col.field"
-          :header="col.header"
-          :class="col.field === 'Reminder' ? 'text-center' : ''"
+    <div class="w-full lg:w-8 flex flex-column">
+      <div class="card flex align-items-center justify-content-center my-2">
+        <DataTable
+          :value="tableData"
+          edit-mode="cell"
+          table-class="editable-cells-table"
+          responsive-layout="scroll"
+          :size="mobilePage ? 'small' : 'large'"
+          class="w-full"
         >
-          <!-- Text Body -->
-          <template #body="{ data, field }">
-            <template v-if="field === 'Module'">
-              {{
-                onlyWhitespace(data[field].userDefinedName)
-                  ? data[field].name
-                  : data[field].userDefinedName
-              }}
-            </template>
-            <template v-else-if="field === 'Reminder'">
-              <Button
-                :icon="data.Module.reminder ? 'pi pi-bell' : 'pi pi-times'"
-                :severity="data.Module.reminder ? 'warning' : 'secondary'"
-                rounded
-                outlined
-                class="small-button"
-                @click="data.Module.reminder = !data.Module.reminder"
-              ></Button>
-            </template>
-            <template v-else>
-              {{ data[field] }}
-            </template>
-          </template>
-          <!-- Editor Body -->
-          <template #editor="{ data, field }">
-            <template v-if="field === 'Module'">
-              <InputText
-                v-model="data[field].userDefinedName"
-                class="w-full"
-                autofocus
+          <template #header>
+            <div class="flex align-items-center justify-content-end flex-wrap gap-2 px-2">
+              {{ $t("renameModules.enableAllNotifications") }}
+              <InputSwitch
+                :model-value="
+                  tableData.reduce(
+                    (acc, curr) => acc && curr.Module.reminder,
+                    true,
+                  )
+                "
+                @update:model-value="
+                  tableData.forEach((module) => (module.Module.reminder = $event))
+                "
               />
-            </template>
-            <template v-else-if="field === 'Reminder'">
-              <Button
-                :icon="data.Module.reminder ? 'pi pi-bell' : 'pi pi-times'"
-                :severity="data.Module.reminder ? 'warning' : 'secondary'"
-                rounded
-                outlined
-                class="small-button"
-                @click="data.Module.reminder = !data.Module.reminder"
-              ></Button>
-            </template>
-            <template v-else>
-              <div>{{ data[field] }}</div>
-            </template>
+            </div>
           </template>
-        </Column>
-      </DataTable>
-    </div>
+          <Column
+            v-for="col of columns"
+            :key="col.field"
+            :field="col.field"
+            :header="col.header"
+            :class="col.field === 'Reminder' ? 'text-center' : ''"
+          >
+            <!-- Text Body -->
+            <template #body="{ data, field }">
+              <template v-if="field === 'Module'">
+                {{
+                  onlyWhitespace(data[field].userDefinedName)
+                    ? data[field].name
+                    : data[field].userDefinedName
+                }}
+              </template>
+              <template v-else-if="field === 'Reminder'">
+                <Button
+                  :icon="data.Module.reminder ? 'pi pi-bell' : 'pi pi-times'"
+                  :severity="data.Module.reminder ? 'warning' : 'secondary'"
+                  rounded
+                  outlined
+                  class="small-button"
+                  @click="data.Module.reminder = !data.Module.reminder"
+                ></Button>
+              </template>
+              <template v-else>
+                {{ data[field] }}
+              </template>
+            </template>
+            <!-- Editor Body -->
+            <template #editor="{ data, field }">
+              <template v-if="field === 'Module'">
+                <InputText
+                  v-model="data[field].userDefinedName"
+                  class="w-full"
+                  autofocus
+                />
+              </template>
+              <template v-else-if="field === 'Reminder'">
+                <Button
+                  :icon="data.Module.reminder ? 'pi pi-bell' : 'pi pi-times'"
+                  :severity="data.Module.reminder ? 'warning' : 'secondary'"
+                  rounded
+                  outlined
+                  class="small-button"
+                  @click="data.Module.reminder = !data.Module.reminder"
+                ></Button>
+              </template>
+              <template v-else>
+                <div>{{ data[field] }}</div>
+              </template>
+            </template>
+          </Column>
+        </DataTable>
+      </div>
 
-    <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <Button @click="finalStep()">{{ $t("renameModules.nextStep") }}</Button>
-    </div>
+      <Button
+        :disabled="store.isEmpty()"
+        class="col-12 md:col-4 mb-3 align-self-end"
+        @click="finalStep()"
+        icon="pi pi-save"
+        :label="$t('renameModules.nextStep')"
+      />
+    </div>  
   </div>
 </template>