better template & styling for the concept mappings component

NatLibFi · Nov 21, 2023 · 3a8a243 · 3a8a243
1 parent 66449e9
commit 3a8a243
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 20 deletions.
diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css
@@ -376,7 +376,7 @@ body {
     font-weight: bold;
   }
 
-  #sidebar, #main-content {
+  #sidebar {
     background-color: var(--vocab-bg);
   }
 
@@ -494,7 +494,8 @@ body {
   }
 
   .main-content-section {
-    border-bottom: 2px solid var(--main-bg-2);
+    background-color: var(--vocab-bg);
+    margin-bottom: 3px;
   }
 
   #concept-heading {

diff --git a/resource/js/concept-mappings.js b/resource/js/concept-mappings.js
@@ -60,20 +60,17 @@ conceptMappingsApp.component('concept-mappings', {
   props: ['mappings'],
   inject: ['content_lang'],
   template: `
-    <table>
-      <tr v-for="mapping in Object.entries(mappings)">
-        <td :title="mapping[1][0].description">{{ mapping[0]}}</td>
-        <td>
-          <template v-for="m in mapping[1]">
-            <a :href="m.hrefLink">{{ m.prefLabel }}</a>
-            <span v-if="m.lang !== this.content_lang"> ({{ m.lang }})</span><br>
-          </template>
-        </td>
-        <td>
-          <template v-for="m in mapping[1]">{{ m.vocabName }}<br></template>
-        </td>
-      </tr>
-    </table>
+    <div class="row prop-mapping" v-for="mapping in Object.entries(mappings)">
+      <div class="col-sm-4 px-0 property-label" :title="mapping[1][0].description"><h2>{{ mapping[0] }}</h2></div>
+      <div class="col-sm-8">
+        <div class="row mb-2" v-for="m in mapping[1]">
+          <div class="col-sm-4">
+            <a :href="m.hrefLink">{{ m.prefLabel }}</a><span v-if="m.lang && m.lang !== this.content_lang"> ({{ m.lang }})</span>
+          </div>
+          <div class="col-sm-8">{{ m.vocabName }}</div>
+        </div>
+      </div>
+    </div>
   `
 })
 

diff --git a/src/view/concept-card.inc b/src/view/concept-card.inc
@@ -67,11 +67,10 @@
           </ul>
         </div>
       </div>
-
+    </div>
+    <!-- appendix / concept mapping properties -->
+    <div id="concept-mappings" class="main-content-section p-5">
     </div>
 
   </div>
-  <!-- appendix / concept mapping properties -->
-  <div id="concept-mappings">
-  </div>
 </div>