From c2beaa30e3961b252b8e0ee613f2c0901c3e3978 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 5 Jan 2023 21:38:45 +0100
Subject: [PATCH] appv2: switch to <dl> to display antifeatures

---
 app/src/views/app/AppInstall.vue | 30 ++++++++++++++----------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index 4551ae08..98edf56c 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -80,18 +80,18 @@
         <h2>{{ $t('app.install.notifs.pre.warning') }}</h2>
 
         <template v-if="app.antifeatures">
-          <strong v-t="'app.antifeatures'" class="d-block mb-1" />
-          <ul class="antifeatures">
-            <li v-for="antifeature in app.antifeatures" :key="antifeature.id">
-              <icon :iname="antifeature.icon" class="md mr-1" />
-              {{ antifeature.title }}
-              <explain-what
-                :id="antifeature.id"
-                :title="antifeature.title"
-                :content="antifeature.description"
-              />
-            </li>
-          </ul>
+          <strong v-t="'app.antifeatures'" class="d-block mb-2" />
+          <dl class="antifeatures">
+            <div v-for="antifeature in app.antifeatures" :key="antifeature.id">
+              <dt class="d-inline">
+                <icon :iname="antifeature.icon" class="md mr-1" />
+                {{ antifeature.title }}:
+              </dt>
+              <dd class="d-inline">
+                {{ antifeature.description }}
+              </dd>
+            </div>
+          </dl>
         </template>
 
         <p v-if="app.quality.state === 'lowquality'" v-t="'app.install.problems.lowquality'" />
@@ -342,10 +342,8 @@ export default {
 
 <style lang="scss" scoped>
 .antifeatures {
-  padding-left: 1rem;
-
-  li {
-    list-style: none;
+  dt::before {
+    content: "• ";
   }
 }
 </style>