better support for mobile screen resolution

sorted things out in the homework list and sidebar for "better" mobile support.
TheBlackbird14 · May 28, 2024 · faf6eee · faf6eee
1 parent 89d0aa7
commit faf6eee
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 10 deletions.
diff --git a/src/components/homeworkHeader.vue b/src/components/homeworkHeader.vue
@@ -17,10 +17,9 @@ const props = defineProps({
   }
 })
 
-const sidebarVisible = ref(false)
+const mobileWidth = ref(window.screen.width <= 700)
 
 function reload() {
-  sidebarVisible.value = false
   emit('reload')
 }
 </script>
@@ -32,7 +31,7 @@ function reload() {
         <img
           src="/src/assets/UntisHomeworkLogo.png"
           alt="logo"
-          class="rounded-3 img-fluid"
+          class="rounded-3 img-fluid logo"
           width="80"
         />
       </router-link>
@@ -41,9 +40,12 @@ function reload() {
       <h1>{{ props.title }}</h1>
     </div>
     <div v-if="props.button" class="p-2 col-sm-2">
-      <button class="btn btn-success btn-lg">
+      <button v-if="!mobileWidth" class="btn btn-success btn-lg">
         <router-link to="/new">Hausaufgabe erstellen</router-link>
       </button>
+      <button v-else class="btn btn-success btn-lg">
+        <router-link to="/new">+</router-link>
+      </button>
     </div>
 
     <div class="p-2 me-1">
@@ -56,11 +58,10 @@ function reload() {
     tabindex="-1"
     id="sidebar"
     aria-labelledby="sidebar"
-    :class="{ show: sidebarVisible }"
     data-bs-backdrop="true"
     data-bs-scroll="true"
   >
-    <Sidebar @toggle="sidebarVisible = !sidebarVisible" @reload="reload"></Sidebar>
+    <Sidebar @reload="reload"></Sidebar>
   </div>
 </template>
 
@@ -88,4 +89,17 @@ a {
 .offcanvas {
   background-color: var(--background-color-primary);
 }
+
+@media screen and (max-width: 542px) {
+  .offcanvas {
+    width: 100%;
+  }
+}
+
+@media screen and (max-width: 370px) {
+  .logo {
+    visibility: hidden;
+  }
+}
+
 </style>
diff --git a/src/components/homeworkListItem.vue b/src/components/homeworkListItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { PropType } from 'vue'
+import {type PropType, ref} from 'vue'
 import type { homework } from '@/scripts/types/homework.interface'
 import { computed } from 'vue'
 import apiService from '@/scripts/api.service'
@@ -13,6 +13,8 @@ const props = defineProps({
 
 const emit = defineEmits(['update', 'delete'])
 
+const mobileWidth = ref(window.screen.width <= 700)
+
 const divClass = computed(() => {
   const tomorrow = new Date()
   tomorrow.setDate(tomorrow.getDate() + 1)
@@ -84,14 +86,24 @@ function deleteHomework() {
 <template>
   <div
     class="d-flex justify-content-between align-items-center mb-3 align-middle list-item"
-    :class="divClass"
+    :class="[ divClass, {'flex-column': mobileWidth}]"
   >
-    <div class="p-2 col-sm-2">
+    <div v-if="mobileWidth" class="d-flex flex-row justify-content-between align-items-center align-middle">
+      <div class="p-2 col-sm-2">
+        <h1>{{ homeworkEntry.subject }}</h1>
+      </div>
+      <div class="p-2 col-sm-2">
+        <h1>{{ homeworkEntry.teacher }}</h1>
+      </div>
+    </div>
+
+    <div v-if="!mobileWidth" class="p-2 col-sm-2">
       <h1>{{ homeworkEntry.subject }}</h1>
     </div>
-    <div class="p-2 col-sm-2">
+    <div v-if="!mobileWidth" class="p-2 col-sm-2">
       <h2>{{ homeworkEntry.teacher }}</h2>
     </div>
+
     <div class="p-2 flex-lg-grow-1">
       <p class="fs-6">{{ homeworkEntry.text }}</p>
     </div>