Merge pull request #152 from brown-ccv/feat-accordion-storage-tool

feat: match storage tools detail dropdown to MultipleChoice
brown-ccv · Oct 3, 2024 · b809b95 · b809b95
2 parents 5110510 + 6d73b3f
commit b809b95
Showing 1 changed file with 35 additions and 55 deletions.
diff --git a/components/storage/ServiceSelection.vue b/components/storage/ServiceSelection.vue
@@ -10,60 +10,45 @@
           matchingServices[i] ? 'has-background-info' : 'has-background-light',
         ]"
       >
-        <button
-          class="button-nostyle"
-          type="button"
-          :disabled="!matchingServices[i]"
-          @click="change(i)"
-        >
-          <span class="icon is-size-2"
-            ><i
-              :class="[
-                'mdi',
-                selectedServices[i] ||
-                (selectedServices[i] === null && matchingServices[i])
-                  ? 'mdi-checkbox-marked'
-                  : matchingServices[i]
-                  ? 'mdi-checkbox-blank'
-                  : 'mdi-checkbox-blank-off',
-              ]"
-          /></span>
-        </button>
-        <p class="is-size-5 has-text-bold">{{ humanize(s.name) }}</p>
-        <span class="icon is-clickable" @click="toggleShowModal(s)"
-          ><i class="mdi mdi-information"
-        /></span>
+        <div>
+          <button
+            class="button-nostyle"
+            type="button"
+            :disabled="!matchingServices[i]"
+            @click="change(i)"
+          >
+            <span class="icon is-size-2"
+              ><i
+                :class="[
+                  'mdi',
+                  selectedServices[i] ||
+                  (selectedServices[i] === null && matchingServices[i])
+                    ? 'mdi-checkbox-marked'
+                    : matchingServices[i]
+                    ? 'mdi-checkbox-blank'
+                    : 'mdi-checkbox-blank-off',
+                ]"
+            /></span>
+          </button>
+          <p class="is-size-5 has-text-bold">{{ humanize(s.name) }}</p>
+        </div>
+        <details v-if="s.description" class="service-details mb-4 ml-4">
+          <summary>
+            <span class="icon is-medium">
+              <i class="mdi mdi-information mdi-24px" />
+            </span>
+          </summary>
+          <div class="content" v-html="$md.render(s.description || '')"></div>
+        </details>
       </div>
-      <DModal
-        v-if="showModal"
-        variant="white"
-        accent="info"
-        width="large"
-        close-options="both"
-        close-button-text="Dismiss"
-        @close="showModal = !showModal"
-      >
-        <template #content>
-          <div class="content">
-            <h2 class="title">
-              {{ humanize(modalData.service) }}
-            </h2>
-            <p v-html="$md.render(modalData.description || '')" />
-          </div>
-        </template>
-      </DModal>
     </div>
   </div>
 </template>
 
 <script>
-import DModal from '@/components/base/DModal.vue';
 import { humanize } from '@/utils';
 
 export default {
-  components: {
-    DModal,
-  },
   props: {
     services: {
       type: Array,
@@ -78,20 +63,10 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      showModal: false,
-      modalData: '',
-    };
-  },
   methods: {
     change(id) {
       this.$emit('service', { id });
     },
-    toggleShowModal(data) {
-      this.modalData = data;
-      this.showModal = true;
-    },
     humanize,
   },
 };
@@ -132,4 +107,9 @@ export default {
   font-weight: bold;
   font-size: 1.1rem;
 }
+
+.service-details {
+  cursor: pointer;
+  max-width: 50ch;
+}
 </style>