review(feature-info): css improvements

Geoportail-Luxembourg · Dec 9, 2024 · 6ca91ac · 6ca91ac
1 parent f361476
commit 6ca91ac
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 11 deletions.
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -489,18 +489,21 @@
   .lux-poi-title {
     @apply text-title-xl mt-[22px] mb-[11px];
   }
-  .lux-poi-feature {
+  .lux-feature-info {
     @apply bg-white bg-opacity-50 m-[5px] p-[10px];
   }
-  .lux-poi-feature h4 {
+  .lux-feature-info h4 {
     @apply my-[11px] text-[20px];
   }
-  .lux-poi-feature label {
+  .lux-feature-info label {
     @apply font-bold mb-[5px];
   }
-  .lux-poi-feature a {
+  .lux-feature-info a {
     @apply text-black underline;
   }
+  .lux-feature-info-export {
+    @apply lux-btn m-2;
+  }
 
   .lux-solarkataster-button {
     @apply bg-solarkataster w-[200px] h-[100px] bg-[length:196px_96px] bg-no-repeat;

diff --git a/src/components/info/feature-info.vue b/src/components/info/feature-info.vue
@@ -75,7 +75,8 @@ function onExport(payload: { feature: FeatureJSON; format: ExportFormat }) {
     <a ng-if="ctrl.isDownloadable" class="btn btn-default"  href="{{ctrl.getDownloadMeasurementUrl()}}?document_id={{ctrl.previewDocumentId}}" target="_blank" translate>Télécharger</a>
   </div>
   </ngeo-modal> -->
-  <div v-if="content && content.length" class="absolute">
+  <!-- absolute is needed here to make y overflow scroll on long content -->
+  <div v-if="content && content.length" class="absolute w-11/12">
     <component
       v-for="(layers, index) in content"
       :key="index"

diff --git a/src/components/info/templates/default-template.vue b/src/components/info/templates/default-template.vue
@@ -68,7 +68,7 @@ function isAudioLink(attributeEntry: AttributeEntry) {
       <div
         v-for="feature in layers.features"
         :key="feature.id"
-        class="lux-poi-feature"
+        class="lux-feature-info"
       >
         <h4 v-if="feature.attributes.label">
           {{ t(feature.attributes.label) }}
@@ -81,7 +81,7 @@ function isAudioLink(attributeEntry: AttributeEntry) {
             )"
             :key="attributeEntry.key"
           >
-            <span
+            <div
               v-if="
                 !isEmptyString(attributeEntry.value) &&
                 showAttributesByLang(
@@ -128,21 +128,21 @@ function isAudioLink(attributeEntry: AttributeEntry) {
                 :src="getTrustedUrl(attributeEntry.value)"
                 title="water level graph"
               ></iframe>
-            </span>
+            </div>
           </div>
         </div>
         <div class="query-profile" v-if="layers.has_profile">
           <profile-feature-info :feature="feature" />
         </div>
         <div v-if="layers.has_profile">
           <button
-            class="lux-btn"
+            class="lux-feature-info-export"
             @click="$emit('export', { feature, format: 'kml' })"
           >
             {{ t('Exporter KMl') }}
           </button>
-          &nbsp;<button
-            class="lux-btn"
+          <button
+            class="lux-feature-info-export"
             @click="$emit('export', { feature, format: 'gpx' })"
           >
             {{ t('Exporter GPX') }}