Merge pull request #84 from swiss/feature/link-list-variations

feat(link-list-variations): add download list and link card list
swiss · Aug 29, 2024 · e79e849 · e79e849
2 parents b9486ba + 3209bdf
commit e79e849
Show file tree

Hide file tree

Showing 2 changed files with 191 additions and 21 deletions.
diff --git a/app/components/ch/components/DownloadItem.vue b/app/components/ch/components/DownloadItem.vue
@@ -1,21 +1,18 @@
 <template>
-  <a
-    class="download-item"
-    :href="url"
-    download
-  >
+  <a class="download-item" :href="url" download>
     <SvgIcon icon="Download" size="xl" class="download-item__icon" />
     <div>
-      <component
-        :is="tag"
-        class="download-item__title"
-      >
+      <component :is="tag" class="download-item__title">
         {{ title }}
       </component>
       <p v-if="description" class="download-item__description">
         {{ description }}
       </p>
-      <MetaInfo v-if="type || date" :metainfos="[type, date]" class="download-item__meta-info" />
+      <MetaInfo
+        v-if="type || date || size"
+        :metainfos="metaInfos"
+        class="download-item__meta-info"
+      />
     </div>
   </a>
 </template>
@@ -50,26 +47,37 @@ export default {
       type: String,
       required: true,
     },
+    size: {
+      type: String,
+      required: false,
+    },
     date: {
       type: String,
       required: true,
     },
     headingLevel: {
       type: String,
       default: 'h4',
-      validator: (prop) => [
-        'h2',
-        'h3',
-        'h4',
-        'h5',
-        'div'
-      ].includes(prop)
-    }
+      validator: (prop) => ['h2', 'h3', 'h4', 'h5', 'div'].includes(prop),
+    },
   },
   computed: {
-    tag () {
+    tag() {
       return this.headingLevel
-    }
-  }
+    },
+    metaInfos() {
+      const infos = []
+      if (this.type) {
+        infos.push(this.type)
+      }
+      if (this.date) {
+        infos.push(this.date)
+      }
+      if (this.size) {
+        infos.push(this.size)
+      }
+      return infos
+    },
+  },
 }
 </script>
diff --git a/app/pages/detailPageSimple.vue b/app/pages/detailPageSimple.vue
@@ -477,6 +477,168 @@
               </li>
             </ul>
 
+            <h2 class="h2">Studien</h2>
+            <div>
+              <ul class="list">
+                <li>
+                  <DownloadItem
+                    filename="dummy.pdf"
+                    title="Schlussbericht: Langzeitbeziehende in der Nothilfe"
+                    url="../static/documents/dummy.pdf"
+                    type="PDF"
+                    date="13.01.2022"
+                    headingLevel="h3"
+                    size="684 kB"
+                  />
+                </li>
+                <li>
+                  <DownloadItem
+                    filename="dummy.pdf"
+                    title="Schlussbericht: Langzeitbezug von Nothilfe durch weggewiesene Asylsuchende"
+                    url="../static/documents/dummy.pdf"
+                    type="PDF"
+                    date="13.01.2022"
+                    headingLevel="h3"
+                    size="529kB"
+                  />
+                </li>
+              </ul>
+            </div>
+
+            <h2 class="h2">Card link list</h2>
+            <div>
+              <ul class="list">
+                <li>
+                  <Card type="flat">
+                    <template v-slot:title>
+                      <h3>
+                        (Haager-) Übereinkommen vom 5. Oktober 1961 über die
+                        Zuständigkeit der Behörden und das anzuwendende Recht
+                        auf dem Gebiet des Schutzes von Minderjährigen
+                      </h3>
+                    </template>
+                    <template v-slot:footerInfo> (SR 0.211.231.01) </template>
+                    <template v-slot:footerAction>
+                      <Btn
+                        to="#"
+                        variant="outline"
+                        icon-pos="only"
+                        icon="ArrowRight"
+                        label="Mehr anschauen"
+                      />
+                    </template>
+                  </Card>
+                </li>
+                <li>
+                  <Card type="flat">
+                    <template v-slot:title>
+                      <h3>
+                        (Haager) Übereinkommen vom 19. Oktober 1996 über die
+                        Zuständigkeit, das anzuwendende Recht, die Anerkennung,
+                        Vollstreckung und Zusammenarbeit auf dem Gebiet der
+                        elterlichen Verantwortung und der Massnahmen zum Schutz
+                        von Kindern
+                      </h3>
+                    </template>
+                    <template v-slot:footerInfo> (SR 0.211.231.011) </template>
+                    <template v-slot:footerAction>
+                      <Btn
+                        to="#"
+                        variant="outline"
+                        icon-pos="only"
+                        icon="ArrowRight"
+                        label="Mehr anschauen"
+                      />
+                    </template>
+                  </Card>
+                </li>
+                <li>
+                  <Card type="flat">
+                    <template v-slot:title>
+                      <h3>
+                        Europäisches Übereinkommen vom 20. Mai 1980 über die
+                        Anerkennung und Vollstreckung von Entscheidungen über
+                        das Sorgerecht für Kinder und die Wiederherstellung des
+                        Sorgerechts
+                      </h3>
+                    </template>
+                    <template v-slot:footerInfo> (SR 0.211.230.01) </template>
+                    <template v-slot:footerAction>
+                      <Btn
+                        to="#"
+                        variant="outline"
+                        icon-pos="only"
+                        icon="ArrowRight"
+                        label="Mehr anschauen"
+                      />
+                    </template>
+                  </Card>
+                </li>
+                <li>
+                  <Card type="flat">
+                    <template v-slot:title>
+                      <h3>
+                        (Haager-) Übereinkommen vom 25. Oktober 1980 über die
+                        zivilrechtlichen Aspekte internationaler
+                        Kindesentführung
+                      </h3>
+                    </template>
+                    <template v-slot:footerInfo> (SR 0.211.230.02) </template>
+                    <template v-slot:footerAction>
+                      <Btn
+                        to="#"
+                        variant="outline"
+                        icon-pos="only"
+                        icon="ArrowRight"
+                        label="Mehr anschauen"
+                      />
+                    </template>
+                  </Card>
+                </li>
+                <li>
+                  <Card type="flat">
+                    <template v-slot:title>
+                      <h3>
+                        (Haager-) Übereinkommen vom 29. Mai 1993 über den Schutz
+                        von Kindern und die Zusammenarbeit auf dem Gebiet der
+                        internationalen Adoption
+                      </h3>
+                    </template>
+                    <template v-slot:footerInfo> (SR 0.211.221.311) </template>
+                    <template v-slot:footerAction>
+                      <Btn
+                        to="#"
+                        variant="outline"
+                        icon-pos="only"
+                        icon="ArrowRight"
+                        label="Mehr anschauen"
+                      />
+                    </template>
+                  </Card>
+                </li>
+                <li>
+                  <Card type="flat">
+                    <template v-slot:title>
+                      <h3>
+                        (Haager) Übereinkommen vom 13. Januar 2000 über den
+                        internationalen Schutz von Erwachsenen
+                      </h3>
+                    </template>
+                    <template v-slot:footerInfo> (SR 0.211.232.1) </template>
+                    <template v-slot:footerAction>
+                      <Btn
+                        to="#"
+                        variant="outline"
+                        icon-pos="only"
+                        icon="ArrowRight"
+                        label="Mehr anschauen"
+                      />
+                    </template>
+                  </Card>
+                </li>
+              </ul>
+            </div>
+
             <h2 class="h2">Datenmodellablage ansehen</h2>
             <p>
               Der Modellkatalog kann unter