fix(map): fix detail pop-up/table & area description

OpenSILEX/opensilex-dev!1199
OpenSILEX · Mar 28, 2024 · 166fc84 · 166fc84
1 parent 9c614fe
commit 166fc84
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 20 deletions.
diff --git a/opensilex-front/front/src/components/geometry/AreaDetails.vue b/opensilex-front/front/src/components/geometry/AreaDetails.vue
@@ -8,7 +8,7 @@
           class="detail-element-header"
       ></opensilex-PageHeader>
 
-      <opensilex-PageActions :returnButton="true" :tabs="true">
+      <opensilex-PageActions :returnButton="false" :tabs="true">
         <template v-slot>
           <b-nav-item
               :active="isDetailsTab()"
@@ -32,7 +32,7 @@
 
       <opensilex-PageContent>
         <b-row v-if="isDetailsTab()">
-          <b-col sm="5">
+          <b-col sm="6">
             <opensilex-Card label="component.common.description">
               <template v-slot:rightHeader>
                 <div class="ml-3">
@@ -63,11 +63,11 @@
                     :value="nameType()"
                     label="component.area.details.rdfType"
                 ></opensilex-StringView>
-                <opensilex-StringView
+                <opensilex-TextView
                     v-if="area.description"
                     :value="area.description"
                     label="component.area.details.description"
-                ></opensilex-StringView>
+                ></opensilex-TextView>
                 <opensilex-GeometryCopy
                     :value="area.geometry"
                 ></opensilex-GeometryCopy>
@@ -113,7 +113,7 @@
       ></opensilex-ModalForm>
     </div>
   </div>
-  <div v-else>
+  <div v-else class="detail-pop-up">
     <!-- Name -->
     <template v-if="showName">
       {{ area.uri === uri ? "" : loadArea(uri) }}
@@ -331,14 +331,11 @@ export default class AreaDetails extends Vue {
 </script>
 
 <style lang="scss" scoped>
-.details-actions-row {
-  margin-top: -35px;
-  margin-left: -15px;
-  margin-right: 15px;
-}
 
-::v-deep .capitalize-first-letter {
-  display: block;
+.detail-pop-up{
+  padding-top: 2%;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
 }
 
 #show {
@@ -351,6 +348,8 @@ en:
   component:
     area:
       title: Area
+      add: Description of the area
+      update: Update Area
       delete: Delete area
       details:
         uri: URI
@@ -363,6 +362,8 @@ fr:
   component:
     area:
       title: Zone
+      add: Description de la zone
+      update: Mise à jour de la zone
       delete: Supprimer la zone
       details:
         uri: URI

diff --git a/opensilex-front/front/src/components/geometry/AreaForm.vue b/opensilex-front/front/src/components/geometry/AreaForm.vue
@@ -53,6 +53,7 @@
         helpMessage="AreaForm.description-help"
         label="AreaForm.description"
         placeholder="AreaForm.description-placeholder"
+        @keydown.native.enter.stop
     ></opensilex-TextAreaForm>
   </b-form>
 </template>

diff --git a/opensilex-front/front/src/components/geometry/DisplayInformationAboutItem.vue b/opensilex-front/front/src/components/geometry/DisplayInformationAboutItem.vue
@@ -1,20 +1,20 @@
 <template>
   <div v-if="item">
-    <div v-if="item.properties.nature === 'Area'">
+    <div v-if="item.properties.nature === 'Areas'">
       <opensilex-AreaDetails
           :showName="showName"
           :experiment="experiment"
           :uri="item.properties.uri"
           :withBasicProperties="false"
       />
     </div>
-    <div v-if="item.properties.nature === 'Device'">
+    <div v-if="item.properties.nature === 'Devices'">
       <opensilex-DeviceDetailsMap
           :selected="item.properties"
           :showName="showName"
       />
     </div>
-    <div v-if="(item.properties.nature === 'ScientificObjects') && detailsSO">
+    <div v-if="(item.properties.nature === 'Scientific Objects') && detailsSO">
       <template v-if="withBasicProperties">
         <opensilex-ScientificObjectDetailMap
             v-if="item.properties.OS"
@@ -65,4 +65,10 @@ p {
   font-size: 115%;
   margin-top: 1em;
 }
+
+::v-deep .field-view-title{
+  min-width: auto;
+  padding-right: 1rem;
+}
+
 </style>
diff --git a/opensilex-front/front/src/components/geometry/MapView.vue b/opensilex-front/front/src/components/geometry/MapView.vue
@@ -2366,7 +2366,6 @@ p {
   box-shadow: 0 0.25em 0.5em transparentize(#000000, 0.8);
   border-radius: 5px;
   text-indent: 2px;
-  max-width: 75%;
 }
 
 ::v-deep .b-table-details .card {

diff --git a/opensilex-front/front/src/components/scientificObjects/ScientificObjectDetailMap.vue b/opensilex-front/front/src/components/scientificObjects/ScientificObjectDetailMap.vue
@@ -101,10 +101,6 @@ ol, ul, dl {
   cursor: pointer;
 }
 
-.field-view-title {
-  min-width: 120px;
-}
-
 #vl-overlay-detailItem > div > div > div > div > div > span.static-field-line {
   display: block !important;
 }