WIP: Add icons to safelist

client/src/components/mediacenter/OverviewCard.vue

@@ -6,11 +6,11 @@ export interface Props {
   description: string,
   call2Action: string,
   link: string,
-  iconUrl: string
+  icon: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  iconUrl: ''
+  icon: ''
 })
 
 </script>
@@ -19,7 +19,7 @@ const props = withDefaults(defineProps<Props>(), {
   <div class="bg-white p-8 flex justify-between">
     <div>
       <h3 class="mb-4">{{title}}</h3>
-      <p class="mb-4">Finde alle Ressourcen der Handlungsfelder wie Lernmedien, Links und andere nützliche Informationen.</p>
+      <p class="mb-4">{{description}}</p>
       <router-link
         to="/mediacenter/overview"
         class="inline-flex items-center font-normal"
@@ -29,8 +29,8 @@ const props = withDefaults(defineProps<Props>(), {
       </router-link>
     </div>
     <div
-      v-if="iconUrl"
-      :class="[`bg-[url('${iconUrl}')]`]"
+      v-if="icon"
+      :class="[`bg-${icon}`]"
       class="bg-contain bg-no-repeat bg-right w-2/6 -mr-8">
     </div>
   </div>

client/src/views/MediaMainView.vue

@@ -16,8 +16,17 @@ log.debug('MediaMainView created');
       title="Handlungsfelder"
       call2-action="Anschauen"
       link="/mediacenter/some"
-      description="Finde blablalba"
-      icon-url="/static/icons/icon-handlungsfelder-overview.svg">
+      description="Finde alle Ressourcen der Handlungsfelder wie Lernmedien, Links und andere nützliche Informationen."
+      icon="handlungsfelder-overview"
+      class="mb-6">
+    </OverviewCard>
+    <OverviewCard
+      title="Lernmedien"
+      call2-action="Anschauen"
+      link="/mediacenter/some"
+      description="Finde eine vollständige Liste der Bücher und anderen Medien, auf die im Kurs verwiesen wird."
+      icon="lernmedien-overview"
+      class="mb-6">
     </OverviewCard>
   </div>
 </template>

client/tailwind.config.js

@@ -20,6 +20,8 @@ module.exports = {
         '9xl': '96rem',
       },
       backgroundImage: {
+        'handlungsfelder-overview': "url('/static/icons/icon-handlungsfelder-overview.svg')",
+        'lernmedien-overview': "url('/static/icons/icon-lernmedien-overview.svg')",
       }
     },
     colors: colors,
@@ -27,6 +29,9 @@ module.exports = {
   safelist: [
     { pattern: /bg-(blue|sky|green|red|orange|yellow|stone|gray|slate)-(200|300|400|500|600|700|800|900)/, },
     'it-icon',
+    'bg-handlungsfelder-overview',
+    'bg-lernmedien-overview',
+
   ],
   plugins: [
     require('@tailwindcss/typography'),

server/vbv_lernwelt/static/icons/icon-handlungsfelder-overview.svg

@@ -0,0 +1,3 @@
+<svg width="238" height="161" viewBox="0 0 238 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M238 159.685H75.0557C72.4808 159.685 70.3932 157.602 70.3932 155.031V15.1844C70.3932 12.6602 72.4413 10.6094 74.9767 10.6094H98.4012C98.9017 10.6094 99.3034 11.0103 99.3034 11.5099V22.9803C99.3034 26.3787 102.063 29.1395 105.474 29.1395H145.823C149.228 29.1395 151.994 26.3853 151.994 22.9803V10.6094H135.622C135.622 5.4756 131.454 1.3147 126.31 1.3147C121.167 1.3147 116.999 5.4756 116.999 10.6094H107.199C107.16 13.8106 97.0644 24.8669 85.9086 24.5711C84.7825 24.5382 83.9988 25.7411 83.9988 26.8717V146.657H177.605C179.422 146.657 180.897 145.185 180.897 143.37V15.1909C180.897 12.6602 178.843 10.6094 176.307 10.6094H167.305V109.347C167.305 117.38 148.701 115.434 148.701 115.434C148.701 115.434 151.612 132.603 140.726 132.603H96.2939C83.3468 132.603 70.4854 134.681 58.1969 138.763L52.9483 140.504C40.6664 144.586 27.7984 146.664 14.8514 146.664H0.923096" stroke="#41B5FA" stroke-width="4" stroke-linejoin="round"/>
+</svg>

server/vbv_lernwelt/static/icons/icon-lernmedien-overview.svg

@@ -0,0 +1,3 @@
+<svg width="266" height="165" viewBox="0 0 266 165" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 163H128.393C128.393 163 123.147 151.308 108.221 149.272C92.2381 147.095 48.8567 151.662 48.8567 151.662L49.6843 44.144C49.6843 44.144 95.3045 38.6114 109.233 39.6441C121.455 40.5515 132.775 48.6808 133.07 56.2421C133.366 63.8033 133.277 147.214 133.277 147.214C133.277 147.214 137.659 135.927 150.154 125.68C163.565 114.689 180.907 109.392 180.907 109.392V2C180.907 2 147.73 8.27771 136.336 33.2631C126.849 54.0733 145.89 31.2271 165.449 25.1781C183.545 19.5791 198.235 20.6561 198.235 20.6561C198.235 20.6561 198.486 114.445 198.486 128.314C152.178 129.634 133.942 155.129 136.225 154.118C142.233 151.463 152.799 145.059 175.439 142.765C198.582 140.419 215.924 141.932 215.924 141.932V39.3122H206.584L207.079 152.835C207.079 152.835 172.927 152.06 159.87 153.838C144.834 155.889 138.93 163 138.93 163H266" stroke="#FBBA20" stroke-width="4" stroke-linejoin="round"/>
+</svg>