style: add animation and align content

brown-ccv · Dec 6, 2024 · a52e5ee · a52e5ee
1 parent f3a3cd9
commit a52e5ee
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git a/components/base/Accordion.vue b/components/base/Accordion.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="column is-half">
+  <div>
     <div class="card" :class="{ 'not-expanded': !expanded }">
       <header class="card-header" @click="toggleCardState">
         <p class="card-header-title">
@@ -42,3 +42,38 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.card {
+  margin-bottom: 10px;
+  width: 100%;
+
+  .card-header {
+    cursor: pointer;
+
+    .icon {
+      transform: rotate(180deg);
+      transition: transform 150ms ease-out;
+    }
+  }
+
+  .card-content {
+    transition: all 150ms ease;
+  }
+}
+
+.card.not-expanded {
+  .card-header {
+    .icon {
+      transform: rotate(0deg);
+    }
+  }
+  .card-content {
+    transform: scaleY(0);
+    transform-origin: top;
+    opacity: 0;
+    height: 0;
+    padding: 0;
+  }
+}
+</style>
diff --git a/components/storage/ServiceSelection.vue b/components/storage/ServiceSelection.vue
@@ -10,7 +10,7 @@
           matchingServices[i] ? 'has-background-info' : 'has-background-light',
         ]"
       >
-        <div>
+        <div class="is-flex">
           <button
             class="button-nostyle"
             type="button"
@@ -30,7 +30,7 @@
                 ]"
             /></span>
           </button>
-          <Accordion title="{{humanize(s.name)}}">
+          <Accordion :title="humanize(s.name)">
             <div class="content" v-html="$md.render(s.description || '')"></div>
           </Accordion>
         </div>