Card: Remove html property, use slot instead

Vanilla-OS · May 12, 2024 · 3daba53 · 3daba53
1 parent 0b1008e
commit 3daba53
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 13 deletions.
diff --git a/src/components/Card.vue b/src/components/Card.vue
@@ -40,7 +40,6 @@ interface CardItemI {
         color?: string;
     }[];
     btn?: string;
-    html?: string;
     footerActions?: CardFooterAction[];
 }
 

diff --git a/src/components/CardContent.vue b/src/components/CardContent.vue
@@ -1,11 +1,6 @@
 <template>
     <div class="card-content">
         <div class="flexList">
-            <div
-                v-if="item.html"
-                class="text text--rich"
-                v-html="item.html"
-            ></div>
             <badges :items="item.badges" />
             <btn
                 v-if="item.type === 'adv' && item.btn"

diff --git a/src/views/Brand.vue b/src/views/Brand.vue
@@ -52,7 +52,11 @@
             <h3>Fonts</h3>
         </div>
         <div class="flexGrid flexGrid--2">
-            <card v-for="(item, index) in fonts" :key="index" :item="item" />
+            <card v-for="(item, index) in fonts" :key="index" :item="item">
+                <div class="text text--rich">
+                    <span :class="['font', item.class]">{{ item.name }}</span>
+                </div>
+            </card>
         </div>
     </div>
 </template>
@@ -250,7 +254,8 @@ export default defineComponent({
             ],
             fonts: [
                 {
-                    html: '<span class="font font--outfit">Outfit</span>',
+                    name: 'Outfit',
+                    class: 'font--outfit',
                     footerActions: [
                         {
                             title: 'Download',
@@ -263,7 +268,8 @@ export default defineComponent({
                     ],
                 },
                 {
-                    html: '<span class="font font--pacifico">Pacifico</span>',
+                    name: 'Pacifico',
+                    class: 'font--pacifico',
                     footerActions: [
                         {
                             title: 'Download',

diff --git a/src/views/get-involved/Funding.vue b/src/views/get-involved/Funding.vue
@@ -1,7 +1,12 @@
 <template>
     <div class="flexList">
         <div class="flexGrid anim--fadeIn">
-            <card v-for="(item, index) in getInvolvedItems" :key="index" :item="item" :class="item.extraClasses" />
+            <card v-for="(item, index) in getInvolvedItems" :key="index" :item="item" :class="item.extraClasses">
+                <div v-if="item.bankTransferDetails" class="text text--rich">
+                    <pre><code>{{ item.bankTransferDetails.join('\n') }}</code></pre>
+                </div>
+                <badges :items="item.badges" />
+            </card>
         </div>
         <div class="spacer"></div>
         <div class="text text--rich">
@@ -26,9 +31,11 @@ export default defineComponent({
                     iconPack: 'mdi',
                     title: 'Bank Transfer',
                     description: 'Bank Transfer is the most direct and least taxed way to support Vanilla OS. You can make a one-time donation of any amount.',
-                    html: `<pre><code>Account Name: FABRICATORS S.R.L.
-IBAN: IT30S0326811200052945656640
-BIC/SWIFT: SELBIT2BXXX</code></pre>`,
+                    bankTransferDetails: [
+                        'Account Name: FABRICATORS S.R.L.',
+                        'IBAN: IT30S0326811200052945656640',
+                        'BIC/SWIFT: SELBIT2BXXX',
+                    ],
                     extraClasses: ['flexGrid-item--2'],
                     badges: [
                         {