Fix mobile view and rework (s)css to use PrimeVue theming or inline PrimeFlex classes

package.json

@@ -2,6 +2,7 @@
   "name": "sudosos-frontend-vue3",
   "version": "0.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check build-only",
@@ -17,8 +18,8 @@
     "@sudosos/sudosos-client": "github:GEWIS/sudosos-client",
     "@sudosos/sudosos-frontend-common": "github:GEWIS/sudosos-frontend-common",
     "@vee-validate/yup": "^4.11.1",
-    "jwt-decode": "^3.1.2",
-    "marked": "^9.1.5",
+    "jwt-decode": "^4.0.0",
+    "marked": "^11.1.1",
     "pinia": "^2.1.3",
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
@@ -34,22 +35,22 @@
   "devDependencies": {
     "@intlify/eslint-plugin-vue-i18n": "^2.0.0",
     "@rushstack/eslint-patch": "^1.2.0",
-    "@tsconfig/node18": "^2.0.1",
+    "@tsconfig/node18": "^18.2.2",
     "@types/lodash": "^4.14.198",
-    "@types/node": "^18.16.17",
+    "@types/node": "^18.19.4",
     "@types/uuid": "^9.0.2",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vue/eslint-config-prettier": "^7.1.0",
-    "@vue/eslint-config-typescript": "^11.0.3",
-    "@vue/tsconfig": "^0.4.0",
+    "@vitejs/plugin-vue": "^5.0.2",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/tsconfig": "^0.5.1",
     "eslint": "^8.50.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-vue": "^9.11.0",
     "lodash": "^4.17.21",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.8",
-    "typescript": "~5.0.4",
-    "vite": "^4.3.9",
+    "prettier": "^3.1.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10",
     "vue-tsc": "^1.6.5"
   }
 }

src/App.vue

@@ -5,6 +5,6 @@ import Toast from "primevue/toast";
 </script>
 
 <template>
-  <Toast />
-  <RouterView />
+  <Toast /> 
+  <RouterView/>
 </template>

src/components/AddContainerDialogComponent.vue

@@ -6,13 +6,13 @@
           @update:visible="closeDialog"
           ref="addContainer"
           @show="addListenerOnDialogueOverlay(addContainer)"
+          class="w-auto flex w-9"
   >
-    <div class="dialog">
       <form @submit="handleCreateContainer">
-        <div class="row">
-          <h6>{{ $t("c_containerEditModal.Name") }}</h6>
-          <div class="input-container">
-            <InputText class="flex-child" :class="{'p-invalid': errors.name}" v-bind="name"/>
+        <div class="field grid">
+          <label class="col-12 mb-2 md:col-2 md:mb-0">{{ $t("c_containerEditModal.Name") }}</label>
+          <div class="col-12 md:col-10">
+            <InputText :class="{'p-invalid': errors.name}" v-bind="name"/>
             <small
                 v-if="errors.name"
                 class="p-error"
@@ -22,11 +22,10 @@
             <br v-else>
           </div>
         </div>
-        <div class="row">
-          <h6>{{ $t("c_containerEditModal.owner") }}</h6>
-          <div class="input-container">
+        <div class="field grid">
+          <label class="col-12 mb-2 md:col-2 md:mb-0">{{ $t("c_containerEditModal.owner") }}</label>
+          <div class="col-12 md:col-10">
             <Dropdown
-                class="flex-child"
                 :options="organsList"
                 optionLabel="firstName"
                 v-bind="selectedOwner"
@@ -42,17 +41,18 @@
             <br v-else>
             </div>
         </div>
-        <div class="row">
-          <h6>{{ $t("c_containerEditModal.Public") }}</h6>
-          <Checkbox class="flex-child" :binary="true" v-bind="isPublic"/>
-          <span class="error-text">{{ errors.isPublic }}</span>
+        <div class="field grid">
+          <label class="col-12 mb-2 md:col-2 md:mb-0">{{ $t("c_containerEditModal.Public") }}</label>
+          <div class="col-12 md:col-10">
+            <Checkbox class="flex-child" :binary="true" v-bind="isPublic" />
+            <span class="error-text">{{ errors.isPublic }}</span>
+          </div>
         </div>
-        <div class="row" id="actions">
+        <div class="flex flex-row justify-content-end gap-2">
           <Button outlined @click="closeDialog">{{ $t("c_containerEditModal.cancel") }}</Button>
           <Button type="submit">{{ $t("c_containerEditModal.save") }}</Button>
         </div>
       </form>
-    </div>
   </Dialog>
 </template>
 
@@ -119,72 +119,4 @@ const handleCreateContainer = handleSubmit(async (values) => {
 </script>
 
 <style scoped lang="scss">
-.dialog {
-  width: 50vw;
-  display: flex;
-  flex-direction: column;
-  padding-bottom: 1rem;
-
-  .row {
-    display: flex;
-    width: 100%;
-    padding-left: 1rem;
-    padding-right: 1rem;
-
-    h6 {
-      font-weight: 700!important;
-      font-family: Lato,Arial,sans-serif!important;
-      font-size: 1rem!important;
-      flex: 0 0 33.33333%;
-      max-width: 20%;
-    }
-
-    .flex-child {
-      font-family: Lato,Arial,sans-serif!important;
-      font-size: 1rem!important;
-
-      margin-bottom: 0.25rem;
-    }
-
-    img {
-      max-width: 10rem;
-      max-height: 10rem;
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  #actions {
-    display: flex;
-    justify-content: flex-end;
-    flex-direction: row;
-
-    .p-button {
-      margin: 0 0.2rem;
-    }
-  }
-}
-
-.input-container {
-  display: flex;
-  flex-direction: column;
-  width: 50%;
-}
-
-.p-invalid {
-  background-color: #fef0f0;
-}
-
-.p-error {
-  display: block;
-  font-size: 12px;
-  text-align: left;
-  line-height:18px;
-}
-
-.p-error > i {
-  font-size:12px;
-  margin-right: 3.6px;
-  line-height:12px;
-}
 </style>

src/components/CardComponent.vue

@@ -53,6 +53,6 @@ const handleClick = () => {
 };
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 </style>
 

src/components/ContainerCardComponent.vue

@@ -1,24 +1,40 @@
 <template>
-  <div class="container-overview">
-    <TabView :active-index=1>
-      <TabPanel :header="$t('containersOverview.Containers')" :disabled="true" />
+  <CardComponent :header="$t('containersOverview.Containers')" class="p-0">
+    <TabView :active-index=1 class="hidden md:block">
       <TabPanel v-for="container in containers" :key="container.id" :header="container.name">
-        <ScrollPanel style="height: 20rem;">
-          <ProductGridComponent :products="container.products" v-if="container.products.length !== 0"/>
-          <p v-if="container.products.length === 0">{{$t('c_containerComponent.no products')}}</p>
-        </ScrollPanel>
+        <ProductGridComponent :products="container.products" v-if="container.products.length !== 0"/>
+        <div v-if="container.products.length === 0">
+          {{$t('c_containerComponent.no products')}}
+        </div>
+      </TabPanel>
+      <TabPanel>
+        <template #header>
+
+            <span class="p-tabview-title createContainerButton">{{ $t('containersOverview.newContainer') }}</span>
+
+        </template>
       </TabPanel>
     </TabView>
+    <Accordion :activeIndex="0" class="block md:hidden w-full">
+      <AccordionTab v-for="container in containers" :key="container.id" :header="container.name">
+        <ProductGridComponent :products="container.products" v-if="container.products.length !== 0"/>
+        <div class="emptyProductsGrid" v-if="container.products.length === 0">
+          {{$t('c_containerComponent.no products')}}
+        </div>
+      </AccordionTab>
+    </Accordion>
+  </CardComponent>
 
-  </div>
 </template>
 <script setup lang="ts">
 import type { ContainerWithProductsResponse } from "@sudosos/sudosos-client";
 import { onMounted, ref } from "vue";
 import ProductGridComponent from "@/components/ProductGridComponent.vue";
 import TabView from 'primevue/tabview';
 import TabPanel from 'primevue/tabpanel';
-import ScrollPanel from "primevue/scrollpanel";
+import CardComponent from "./CardComponent.vue";
+import Accordion from "primevue/accordion";
+import AccordionTab from "primevue/accordiontab";
 const props = defineProps({
   data: {
     type: Array<ContainerWithProductsResponse>,
@@ -32,40 +48,5 @@ onMounted(()=>{
 const containers = ref();
 </script>
 <style scoped lang="scss">
-:deep(.p-datatable-thead) {
-  display: none;
-}
-
-:deep(.p-datatable-table){
-  border-collapse: separate;
-  border-spacing: 0 1rem;
-}
-
-:deep(.p-datatable .p-datatable-tbody > tr){
-  background-color: #f2f2f2;
-}
-
-:deep(.p-datatable .p-datatable-tbody > tr > td) {
-  padding: 0.25rem 1rem;
-  border: 1px solid #dee2e6;
-  border-radius: 4px;
-  font-size: 1rem;
-  font-family: Lato,Arial,sans-serif!important;
-}
-
-:deep(.p-datatable .p-datatable-tbody > tr > td:not(:first-child)) {
-  border-left: none; /* Remove the left border for all cells except the first child */
-}
-
-:deep(.p-datatable .p-datatable-tbody > tr > td:not(:last-child)) {
-  border-right: none; /* Remove the left border for all cells except the first child */
-}
 
-:deep(.p-disabled){
-  a {
-    color: white!important;
-    background-color: #d40000!important;
-    text-transform: uppercase;
-  }
-}
 </style>

src/components/CopyrightBanner.vue

@@ -15,9 +15,6 @@ import TermsOfServiceModal from './TermsOfServiceModal.vue';
 
 <style scoped>
 footer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
   width: 100%;
   padding: 0 1rem;
   height: 60px;