Update image viewer

wbbaker · Aug 23, 2022 · 0018aad · 0018aad
1 parent 6f9eca9
commit 0018aad
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 10 deletions.
diff --git a/config/style/theme.css b/config/style/theme.css
@@ -1,4 +1,3 @@
-
 :root {
   --color-primary: 137, 167, 65;
   --color-primary-content: 255, 255, 255;
@@ -26,4 +25,3 @@
   --color-base-300: 30, 41, 59;
   --color-base-content: 255, 255, 255;
 }
-
diff --git a/src/components/ImageViewer/ImageToolbar.vue b/src/components/ImageViewer/ImageToolbar.vue
@@ -3,12 +3,9 @@
     <div>
       <slot />
     </div>
-    <button
-      type="button"
-      class="p-2 cursor-pointer opacity-50 text-base-content"
-    >
-      <IconClose />
-    </button>
+    <div>
+      <slot name="right" />
+    </div>
   </div>
 </template>
 

diff --git a/src/components/ImageViewer/ImageViewer.global.vue b/src/components/ImageViewer/ImageViewer.global.vue
@@ -1,7 +1,6 @@
 <template>
   <div 
     class="fixed z-[10000] h-full overflow-y-hidden overflow-x-hidden w-full top-0 left-0 flex flex-col items-center justify-center backdrop-blur-md bg-base-foreground"
-    @click="emit('close')"
   >
     <div 
       class="min-w-96 dark:bg-slate-900 rounded-lg shadow-sm mb-24"
@@ -72,6 +71,9 @@
         :current-image="index"
         :total-images="images.length"
       />
+      <template #right>
+        <ImageViewerClose @click="emit('close')" />
+      </template>
     </ImageToolbar>
   </div>
 </template>
@@ -86,6 +88,7 @@ import ControlNextImage from './ControlImageNext.vue'
 import ControlPreviousImage from './ControlImagePrevious.vue'
 import GalleryThumbnailList from '@/components/Gallery/GalleryThumbnailList.vue'
 import ImageToolbar from './ImageToolbar.vue'
+import ImageViewerClose from './ImageViewerClose.vue'
 
 const props = defineProps({
   index: {

diff --git a/src/components/ImageViewer/ImageViewerClose.vue b/src/components/ImageViewer/ImageViewerClose.vue
@@ -0,0 +1,11 @@
+<template>
+  <button
+    type="button"
+    class="p-2 cursor-pointer opacity-50 text-base-content"
+  >
+    <IconClose />
+  </button>
+</template>
+
+<script setup>
+</script>
diff --git a/src/modules/otus/components/Citation/CitationList.vue b/src/modules/otus/components/Citation/CitationList.vue
@@ -44,7 +44,7 @@ import OtuService from '../../services/OtuService'
 import CitationRow from './CitationRow.vue'
 import CitationRowShowMore from './CitationRowShowMore.vue'
 
-const MAX_CITATIONS = 5
+const MAX_CITATIONS = 3
 
 const props = defineProps({
   otuId: {