Added New Viewport Config

spaces/nuxt.config.ts

@@ -16,8 +16,8 @@ export default defineNuxtConfig({
         "nuxt-editorjs",
         '@nuxtjs/fontaine',
         '@nuxtjs/google-fonts',
-        '@vite-pwa/nuxt'
+        '@vite-pwa/nuxt',
-
+        'nuxt-viewport'
 
     ],
     routeRules: {

spaces/package.json

@@ -22,6 +22,7 @@
     "@fullcalendar/core": "^6.1.10",
     "@fullcalendar/daygrid": "^6.1.10",
     "@fullcalendar/interaction": "^6.1.10",
+    "@fullcalendar/list": "^6.1.10",
     "@fullcalendar/resource": "^6.1.10",
     "@fullcalendar/resource-timeline": "^6.1.10",
     "@fullcalendar/vue3": "^6.1.10",
@@ -37,6 +38,7 @@
     "buffer": "^6.0.3",
     "jsprintmanager": "^6.0.3",
     "nuxt-editorjs": "^1.0.4",
+    "nuxt-viewport": "^2.0.6",
     "papaparse": "^5.4.1",
     "pinia": "^2.1.7",
     "uuidv4": "^6.2.13"

spaces/pages/planningBoard.vue

@@ -4,6 +4,14 @@ import dayGridPlugin from '@fullcalendar/daygrid'
 import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
 import deLocale from '@fullcalendar/core/locales/de'
 import interactionPlugin from '@fullcalendar/interaction'
+import listPlugin from '@fullcalendar/list';
+
+
+const viewport = useViewport()
+
+watch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
+  console.log('Breakpoint updated:', oldBreakpoint, '->', newBreakpoint)
+})
 
 const supabase = useSupabaseClient()
 
@@ -37,9 +45,15 @@ const createEvent = async () => {
 
 
 }
+const calendarOptionsList = reactive({
+  locale: deLocale,
+  plugins: [listPlugin],
+  initialView: "listWeek",
+  initialEvents: events,
+  nowIndicator: true
+})
 
-
+const calendarOptionsTimeline = reactive({
-const calendarOptions = reactive({
   schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives",
   locale: deLocale,
   plugins: [resourceTimelinePlugin, interactionPlugin],
@@ -140,12 +154,21 @@ const calendarOptions = reactive({
 
       </UCard>
     </UModal>
+
+    <div v-if="viewport.isLessThan('tablet')">
       <FullCalendar
-      :options="calendarOptions"
+        :options="calendarOptionsList"
       />
     </div>
+    <div v-else>
+      <FullCalendar
+          :options="calendarOptionsTimeline"
+      />
+    </div>
+
+
+  </div>
 </template>
 
 <style scoped>
-
 </style>

spaces/pages/tasks.vue

@@ -112,9 +112,20 @@
             </USelectMenu>-->
     </div>
 
+    <div v-if="viewport.isLessThan('tablet')" class="scrollList">
+      <a
+        v-for="task in tasks.filter(item => item.categorie != 'Erledigt')"
+      >
+        <UCard class="listItem">
+          <template #header>
+            <UBadge>{{task.categorie}}</UBadge> {{task.name}}
+          </template>
+          {{task.description}}
 
-
+        </UCard>
-
+      </a>
+    </div>
+    <div v-else>
 
       <div id="taskCatList">
         <div id="catNew">
@@ -180,6 +191,7 @@
 
         </div>
       </div>
+    </div>
   </UPage>
 </template>
 
@@ -189,6 +201,12 @@ definePageMeta({
   middleware: "auth",
 })
 
+const viewport = useViewport()
+
+watch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
+  console.log('Breakpoint updated:', oldBreakpoint, '->', newBreakpoint)
+})
+
 const toast = useToast()
 const supabase = useSupabaseClient()
 const {tasks} = storeToRefs(useDataStore())