Add animations for citations and descendants tree

src/assets/css/tailwind.css

@@ -24,8 +24,8 @@
     --color-secondary: 14, 165, 233;
     --color-secondary-content: 255, 255, 255;
 
-    --color-base-background: 17,24,39;
-    --color-base-foreground: 15, 23, 42;
+    --color-base-background: 23,23,23;
+    --color-base-foreground: 38,38,38;
     --color-base-200: 30, 41, 59;
     --color-base-300: 30, 41, 59;
     --color-base-content: 255, 255, 255;

src/components/Animation/AnimationOpacity.global.vue

@@ -0,0 +1,15 @@
+<template>
+  <transition
+    enter-active-class="duration-500 ease-out origin-top"
+    enter-from-class="transform opacity-0 scale-y-0"
+    enter-to-class="opacity-100 scale-y-100"
+    leave-active-class="duration-200 ease-in origin-top"
+    leave-from-class="opacity-100 scale-y-100"
+    leave-to-class="transform opacity-0 scale-y-0"
+  >
+    <slot />
+  </transition>
+</template>
+
+<script setup>
+</script>

src/components/TreeView.vue

@@ -18,27 +18,31 @@
       class="pb-4"
       :list="taxonomy.nomenclatural_synonyms"
     />
-    <ul
-      v-if="descendants.length"
-      class="tree"
-    >
-      <template 
-        v-for="item in descendants"
-        :key="item.otu_id"
+    <AnimationOpacity>
+      <ul
+        v-if="descendants.length"
+        class="tree"
       >
-        <TreeView
-          v-if="isTreeVisible"
-          :taxonomy="item"
-        />
-      </template>
-    </ul>
+        <template 
+          v-for="item in descendants"
+          :key="item.otu_id"
+        >
+          <AnimationOpacity>
+            <TreeView
+              v-if="isTreeVisible"
+              :taxonomy="item"
+            />
+          </AnimationOpacity>
+        </template>
+      </ul>
+    </AnimationOpacity>
   </li>
 </template>
 
 <script setup>
 import TreeView from '@/components/TreeView.vue'
 import SynonymList from './SynonymList.vue'
-import OtuService from '@/modules/otus/services/OtuService';
+import OtuService from '@/modules/otus/services/OtuService'
 import { ref, watch } from 'vue'
 
 const props = defineProps({

src/modules/otus/components/Citation/CitationList.vue

@@ -5,21 +5,46 @@
         Nomenclature citations
       </h1>
     </VCardHeader>
-    <ul class="text-sm">
+
+    <div class="text-sm">
+      <CitationRow
+        v-for="citation in citationList.start"
+        :key="citation.id"
+        :citation="citation"
+      />
+
+      <CitationRowShowMore
+        v-if="!showAll && citationList.middle.length"
+        :count="citationList.middle.length"
+        @click="showAll = true"
+      />
+      <AnimationOpacity>
+        <div v-if="showAll">
+          <CitationRow
+            v-for="citation in citationList.middle"
+            :key="citation.id"
+            :citation="citation"
+          />
+        </div>
+      </AnimationOpacity>
+
       <CitationRow
-        v-for="citation in citations"
+        v-for="citation in citationList.last"
         :key="citation.id"
         :citation="citation"
-        class="flex justify-start border-b p-3 px-4 last:border-b-0 dark:border-b-slate-700"
+        class="last:border-b-0"
       />
-    </ul>
+    </div>
   </VCard>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
-import CitationRow from './CitationRow.vue'
+import { ref, watch, computed } from 'vue'
 import OtuService from '../../services/OtuService'
+import CitationRow from './CitationRow.vue'
+import CitationRowShowMore from './CitationRowShowMore.vue'
+
+const MAX_CITATIONS = 5
 
 const props = defineProps({
   otuId: {
@@ -28,7 +53,20 @@ const props = defineProps({
   }
 })
 
+const showAll = ref(false)
 const citations = ref([])
+const citationList = computed(() => {
+  const copyArr = citations.value.slice()
+
+  const start = copyArr.splice(0, MAX_CITATIONS)
+  const last = copyArr.splice(-MAX_CITATIONS)
+  const middle = copyArr
+  return {
+    start,
+    middle,
+    last
+  }
+})
 
 watch(() => props.otuId, async () => {
   if (!props.otuId) { return }

src/modules/otus/components/Citation/CitationRow.vue

@@ -1,5 +1,13 @@
 <template>
-  <li>
+  <div
+    class="
+      flex
+      justify-start
+      border-b
+      p-3
+      px-4
+      dark:border-b-slate-700"
+  >
     <div 
       class="h-5 w-5 text-secondary-color opacity-60 mr-2 cursor-pointer"
       @click="isExpanded = !isExpanded"
@@ -28,7 +36,7 @@
         v-html="citation.citation_source_body"
       />
     </div>
-  </li>
+  </div>
 </template>
 
 <script setup>

src/modules/otus/components/Citation/CitationRowShowMore.vue

@@ -0,0 +1,31 @@
+<template>
+  <div
+    class="
+      flex
+      justify-start
+      border-b
+      p-3
+      px-4
+      last:border-b-0
+      dark:border-b-slate-700"
+  >
+    <div 
+      class="h-5 w-5 text-secondary-color opacity-60 mr-2 cursor-pointer"
+      @click="isExpanded = !isExpanded"
+    >
+      <IconPlusCircle
+        class="h-5 w-5"
+      />
+    </div>
+    <span>... Show all ... ({{ count }})</span>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  count: {
+    type: Number,
+    required: true
+  }
+})
+</script>

src/modules/otus/components/Descendants.vue

@@ -7,10 +7,12 @@
     </VCardHeader>
     <VCardContent class="text-sm">
       <ul class="tree ml-2">
-        <TreeView
-          v-if="taxonomy && (taxonomy.nomenclatural_synonyms.length || taxonomy.descendants.length)"
-          :taxonomy="taxonomy" 
-        />
+        <AnimationOpacity>
+          <TreeView
+            v-if="taxonomy && (taxonomy.nomenclatural_synonyms.length || taxonomy.descendants.length)"
+            :taxonomy="taxonomy" 
+          />
+        </AnimationOpacity>
       </ul>
     </VCardContent>
   </VCard>