image display problem resolved in carousel, little changes in dropout

michalm17 · Apr 15, 2022 · a184bd9 · a184bd9
1 parent 068cc24
commit a184bd9
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/src/components/GalleryCarouselC.vue b/src/components/GalleryCarouselC.vue
@@ -5,6 +5,7 @@
         1 of 3
 
         <q-carousel
+          :height="windowHeight"
           swipeable
           animated
           :autoplay="autoplay"
@@ -15,6 +16,7 @@
         >
           <q-carousel-slide
             :name="1"
+            class="flex flex-center"
             img-src="https://www.printsandfineart.co.uk/previews/none/none/none/800/12-18-I/16-22-I/GM4577.jpg"
           />
           <q-carousel-slide
@@ -91,6 +93,9 @@
 import { ref } from "vue";
 
 export default {
+  created() {
+    this.windowHeight = window.innerHeight + "px";
+  },
   setup() {
     return {
       slide: ref(1),

diff --git a/src/components/GalleryLayoutC.vue b/src/components/GalleryLayoutC.vue
@@ -12,6 +12,9 @@
           <q-btn-dropdown stretch flat label="Artists">
             <q-list>
               <q-item-label header>Artist 1</q-item-label>
+              <q-item-section
+                ><q-item-label caption>born/died </q-item-label>
+              </q-item-section>
               <q-item
                 v-for="n in 3"
                 :key="`x.${n}`"
@@ -21,13 +24,15 @@
               >
                 <q-item-section>
                   <q-item-label>Photos</q-item-label>
-                  <q-item-label caption>born/died </q-item-label>
                 </q-item-section>
               </q-item>
 
               <q-separator inset spaced />
 
               <q-item-label header>Artist 2</q-item-label>
+              <q-item-section
+                ><q-item-label caption>born/died </q-item-label>
+              </q-item-section>
               <q-item
                 v-for="n in 3"
                 :key="`x.${n}`"
@@ -37,7 +42,6 @@
               >
                 <q-item-section>
                   <q-item-label>Photos</q-item-label>
-                  <q-item-label caption>born/died </q-item-label>
                 </q-item-section>
               </q-item>
             </q-list>
@@ -47,9 +51,7 @@
 
       <q-page-container>
         <q-page class="q-pa-md">
-          <p v-for="n in 15" :key="n">
-            <GalleryCarouselC />
-          </p>
+          <GalleryCarouselC />
         </q-page>
       </q-page-container>
     </q-layout>