From ef073d1c87f3359d04459663a9d15d4c420db27a Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 15 Mar 2022 10:35:21 +0100
Subject: [PATCH] Responsive monitor

---
 src/pages/Dashboard/Dashboard.vue | 78 ++++++++++++++++++++++++++++++-
 1 file changed, 77 insertions(+), 1 deletion(-)

diff --git a/src/pages/Dashboard/Dashboard.vue b/src/pages/Dashboard/Dashboard.vue
index 353def709..0b525c9ee 100644
--- a/src/pages/Dashboard/Dashboard.vue
+++ b/src/pages/Dashboard/Dashboard.vue
@@ -1,6 +1,82 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+const slide = ref('style');
+</script>
 <template>
     <q-page class="q-pa-md">
-        <q-card class="q-pa-md"> Dashboard page.. </q-card>
+        <q-banner
+            v-if="$q.screen.gt.xs"
+            inline-actions
+            rounded
+            class="bg-orange text-white q-mb-lg"
+        >
+            You have lost connection to the internet. This app is offline.
+            <template #action>
+                <q-btn flat label="Turn ON Wifi" />
+                <q-btn flat label="Dismiss" />
+            </template>
+        </q-banner>
+
+        <div class="row items-start wrap q-col-gutter-md q-mb-lg">
+            <div class="col-12 col-md">
+                <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
+                <q-carousel
+                    v-model="slide"
+                    transition-prev="scale"
+                    transition-next="scale"
+                    swipeable
+                    animated
+                    control-color="white"
+                    navigation
+                    padding
+                    arrows
+                    height="300px"
+                    class="bg-orange-3 text-white shadow-1 rounded-borders"
+                >
+                    <q-carousel-slide name="style" class="column no-wrap flex-center">
+                        <q-icon name="style" size="56px" />
+                        <div class="q-mt-md text-center">{{ lorem }}</div>
+                    </q-carousel-slide>
+                    <q-carousel-slide name="tv" class="column no-wrap flex-center">
+                        <q-icon name="live_tv" size="56px" />
+                        <div class="q-mt-md text-center">{{ lorem }}</div>
+                    </q-carousel-slide>
+                    <q-carousel-slide name="layers" class="column no-wrap flex-center">
+                        <q-icon name="layers" size="56px" />
+                        <div class="q-mt-md text-center">{{ lorem }}</div>
+                    </q-carousel-slide>
+                    <q-carousel-slide name="map" class="column no-wrap flex-center">
+                        <q-icon name="terrain" size="56px" />
+                        <div class="q-mt-md text-center">{{ lorem }}</div>
+                    </q-carousel-slide>
+                </q-carousel>
+            </div>
+            <div class="col-12 col-md">
+                <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
+                <q-card class="q-pa-md">Dashboard page..</q-card>
+            </div>
+            <div class="col-12 col-md">
+                <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
+                <q-card class="q-pa-md">Dashboard page..</q-card>
+            </div>
+        </div>
+        <div class="row items-start q-col-gutter-md q-mb-lg">
+            <div class="col-12 col-md">
+                <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
+                <q-card class="q-pa-md">Dashboard page..</q-card>
+            </div>
+            <div class="col-12 col-md">
+                <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
+                <q-card class="q-pa-md">Dashboard page..</q-card>
+            </div>
+        </div>
+
+        <div class="row items-start q-col-gutter-md q-mb-lg">
+            <div class="col">
+                <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
+                <q-card class="q-pa-md">Dashboard page..</q-card>
+            </div>
+        </div>
     </q-page>
 </template>