feat(feature-info): adapt style for default template

Geoportail-Luxembourg · Nov 18, 2024 · 3351158 · 3351158
1 parent d6e106f
commit 3351158
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 10 deletions.
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -488,6 +488,22 @@
   .lux-legend hr {
     @apply my-2;
   }
+
+  .lux-poi-title {
+    @apply text-title-xl mt-[22px] mb-[11px];
+  }
+  .lux-poi-feature {
+    @apply bg-white bg-opacity-50 m-[5px] p-[10px];
+  }
+  .lux-poi-feature h4 {
+    @apply my-[11px] text-[20px];
+  }
+  .lux-poi-feature label {
+    @apply font-bold mb-[5px];
+  }
+  .lux-poi-feature a {
+    @apply text-black underline;
+  }
 }
 
 .fa-solid {

diff --git a/src/components/info/templates/default-template.vue b/src/components/info/templates/default-template.vue
@@ -20,13 +20,13 @@ defineProps({
 const { t } = useTranslation()
 </script>
 <template>
-  <div class="row">
-    <div class="col-xs-12">
-      <h1>{{ t(`${layers.layerLabel}`) }}</h1>
+  <div class="flex flex-col">
+    <div>
+      <h1 class="lux-poi-title">{{ t(`${layers.layerLabel}`) }}</h1>
       <div
         v-for="feature in layers.features"
         :key="feature.id"
-        class="poi-feature"
+        class="lux-poi-feature"
       >
         <h4 v-if="feature.attributes.label">
           {{ t(`${feature.attributes.label}`) }}
@@ -114,12 +114,9 @@ const { t } = useTranslation()
         <!-- TODO: implement intepreting the URL (getFeatureInfoById)-->
         <div v-if="hasValidFID(feature)">
           <span
-            ><a
-              class="text-black underline"
-              :href="`?fid=${feature.fid}`"
-              target="_blank"
-              >{{ t('Lien direct vers cet objet') }}</a
-            ></span
+            ><a :href="`?fid=${feature.fid}`" target="_blank">{{
+              t('Lien direct vers cet objet')
+            }}</a></span
           >
         </div>
       </div>