LM-150 Add collapse animation

package.json

@@ -18,6 +18,7 @@
     "register-service-worker": "^1.7.1",
     "vite-plugin-require": "^1.1.10",
     "vue": "^3.0.0",
+    "vue-collapsed": "^1.2.6",
     "vue-markdown-render": "^2.0.1",
     "vue-number-animation": "^1.1.2",
     "vue-router": "^4.0.0-0",

src/components/about-row.vue

@@ -1,52 +1,54 @@
 <template>
   <div class="about-row">
     <h3>{{ props.title }}</h3>
-    <vue-markdown
-      v-if="props.markdown"
-      class="about-row__markdown"
-      :source="expanded ? mdFullText : mdAbstract"
-    />
-    <p v-else>
-      {{ expanded ? props.plain.fullText : props.plain.abstract }}
-    </p>
+    <div class="about-row__markdown">
+      <vue-markdown
+        v-if="props.markdown"
+        class="about-row__markdown__content"
+        :source="mdAbstract"
+      />
+      <Collapse :when="isExpanded">
+        <vue-markdown
+          v-if="props.markdown"
+          class="about-row__markdown__content"
+          :source="mdExplenation"
+        />
+      </Collapse>
+    </div>
+
     <atoms-expand-button class="about-text__expand-button" @expand="expand" @collapse="collapse" />
   </div>
 </template>
 
 <script setup lang="ts">
-import VueMarkdown from 'vue-markdown-render'
 import { defineComponent } from 'vue'
+import { Collapse } from 'vue-collapsed'
+import VueMarkdown from 'vue-markdown-render'
 import { useMarkdownImport } from '~/composables/use-requires'
 
 const requireMarkdown = useMarkdownImport()
 
-interface TextWithAbstract {
-  abstract: string,
-  fullText: string,
-}
-
 const props = defineProps<{
   title: string,
   markdown?: string,
-  plain?: TextWithAbstract,
 }>()
 
 const md = props.markdown ? requireMarkdown(props.markdown) : ''
 const mdAbstract = md.split('\n\n')[0]
-const mdFullText = md.split('\n\n').join(' ')
+const mdExplenation = md.split('\n\n').slice(1).join(' ')
 </script>
 
 <script lang="ts">
 export default defineComponent({
   data () {
-    return { expanded: false }
+    return { isExpanded: false }
   },
   methods: {
     expand () {
-      this.expanded = true
+      this.isExpanded = true
     },
     collapse () {
-      this.expanded = false
+      this.isExpanded = false
     }
   }
 })
@@ -77,7 +79,26 @@ export default defineComponent({
     }
   }
 
-  h3, p, .about-row__markdown {
+  .about-row__markdown {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+
+    margin: 0;
+    width: 90%;
+
+    @media #{$desk}, #{$big} {
+      width: 33%;
+      text-align: start;
+    }
+  }
+
+  .about-row__markdown__content {
+    margin: 0;
+  }
+
+  h3 {
     width: 90%;
 
     @media #{$desk}, #{$big} {
@@ -95,3 +116,13 @@ export default defineComponent({
   }
 }
 </style>
+
+<style lang="scss">
+.about-row__markdown__content {
+  margin: 0;
+
+  p {
+    margin: 0;
+  }
+}
+</style>

src/components/description-column.vue

@@ -1,17 +1,28 @@
 <template>
   <div class="description-column">
     <h3>{{ title }}</h3>
-    <vue-markdown
-      class="description-column__markdown"
-      :class="{ expanded }"
-      :source="expanded ? mdFullText : mdAbstract"
-    />
+
+    <div class="description-column__markdown">
+      <vue-markdown
+        v-if="props.markdown"
+        class="description-column__markdown__content"
+        :source="mdAbstract"
+      />
+      <Collapse :when="isExpanded">
+        <vue-markdown
+          v-if="props.markdown"
+          class="description-column__markdown__content"
+          :source="mdExplenation"
+        />
+      </Collapse>
+    </div>
     <atoms-expand-link @expand="expand" @collapse="collapse" />
   </div>
 </template>
 
 <script setup lang="ts">
 import VueMarkdown from 'vue-markdown-render'
+import { Collapse } from 'vue-collapsed'
 import { defineComponent } from 'vue'
 import { useMarkdownImport } from '~/composables/use-requires'
 
@@ -24,20 +35,20 @@ const props = defineProps<{
 
 const md = props.markdown ? requireMarkdown(props.markdown) : ''
 const mdAbstract = md.split('\n\n')[0]
-const mdFullText = md.split('\n\n').join(' ')
+const mdExplenation = md.split('\n\n').slice(1).join(' ')
 </script>
 
 <script lang="ts">
 export default defineComponent({
   data () {
-    return { expanded: false }
+    return { isExpanded: false }
   },
   methods: {
     expand () {
-      this.expanded = true
+      this.isExpanded = true
     },
     collapse () {
-      this.expanded = false
+      this.isExpanded = false
     }
   }
 })

src/components/instructions-row.vue

@@ -10,7 +10,20 @@
         </atoms-lightbox>
       </template>
       <template v-else>
-        <vue-markdown class="manual-row__markdown" :source="expanded ? mdFullText : mdAbstract" />
+        <div class="manual-row__markdown">
+          <vue-markdown
+            v-if="props.markdown"
+            class="manual-row__markdown__content"
+            :source="mdAbstract"
+          />
+          <Collapse :when="isExpanded">
+            <vue-markdown
+              v-if="props.markdown"
+              class="manual-row__markdown__content"
+              :source="mdExplenation"
+            />
+          </Collapse>
+        </div>
         <atoms-expand-link
           class="manual-row__expand-button"
           @expand="expand"
@@ -23,6 +36,7 @@
 
 <script setup lang="ts">
 import VueMarkdown from 'vue-markdown-render'
+import { Collapse } from 'vue-collapsed'
 import { defineComponent } from 'vue'
 import { useMarkdownImport } from '~/composables/use-requires'
 
@@ -37,20 +51,20 @@ const props = defineProps<{
 
 const md = requireMarkdown(props.markdown)
 const mdAbstract = md.split('\n\n')[0]
-const mdFullText = md.split('\n\n').join(' ')
+const mdExplenation = md.split('\n\n').slice(1).join(' ')
 </script>
 
 <script lang="ts">
 export default defineComponent({
   data () {
-    return { expanded: false }
+    return { isExpanded: false }
   },
   methods: {
     expand () {
-      this.expanded = true
+      this.isExpanded = true
     },
     collapse () {
-      this.expanded = false
+      this.isExpanded = false
     }
   }
 })

yarn.lock

@@ -980,10 +980,10 @@
   dependencies:
     mime "^3.0.0"
 
-"@esbuild/darwin-x64@0.17.14":
+"@esbuild/darwin-arm64@0.17.14":
   version "0.17.14"
-  resolved "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.14.tgz"
-  integrity sha512-zN0U8RWfrDttdFNkHqFYZtOH8hdi22z0pFm0aIJPsNC4QQZv7je8DWCX5iA4Zx6tRhS0CCc0XC2m7wKsbWEo5g==
+  resolved "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.14.tgz"
+  integrity sha512-eoSjEuDsU1ROwgBH/c+fZzuSyJUVXQTOIN9xuLs9dE/9HbV/A5IqdXHU1p2OfIMwBwOYJ9SFVGGldxeRCUJFyw==
 
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.3.0":
   version "4.4.0"
@@ -13128,6 +13128,11 @@ vue-bundle-renderer@^1.0.2:
   dependencies:
     ufo "^1.1.1"
 
+vue-collapsed@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.npmjs.org/vue-collapsed/-/vue-collapsed-1.2.6.tgz"
+  integrity sha512-FNrq1l66JLSeod1VDczxMGlv8RAoPvh72qpA79rE8JFwrpuiEzIDo7GTwJoBmHpLI+t6betINy5kxW95AgebwQ==
+
 vue-devtools-stub@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmjs.org/vue-devtools-stub/-/vue-devtools-stub-0.1.0.tgz"