adjust padding/margin/gutters on vocab-home page main content to matc…

…h concept page
NatLibFi · Jan 29, 2025 · cbc41bf · cbc41bf
1 parent c4a4a67
commit cbc41bf
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 6 deletions.
diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css
@@ -717,13 +717,20 @@ body {
   .main-content-section {
     background-color: var(--vocab-bg);
     margin-bottom: .2rem;
+    padding-left: 3.5rem;
+    padding-right: 3.5rem;
   }
 
   #concept-heading, #vocab-heading {
     margin-top: 2rem;
     padding-bottom: 2.5rem;
   }
 
+  #vocab-heading, .vocab-statistics, #vocab-download-links {
+    margin-left: -.75rem;
+    margin-right: -.75rem;
+  }
+
   .property {
     border-top: 1px solid var(--vocab-table-border);
     padding: .5rem 0;

diff --git a/resource/js/concept-mappings.js b/resource/js/concept-mappings.js
@@ -60,12 +60,12 @@ const conceptMappingsApp = Vue.createApp({
   template: `
     <div v-load-concept-page="loadMappings">
       <template v-if="loading">
-        <div class="main-content-section px-5 py-4">
+        <div class="main-content-section py-4">
           <i class="fa-solid fa-spinner fa-spin-pulse"></i>
         </div>
       </template>
       <template v-else-if="hasMappings">
-        <div class="main-content-section px-5 py-4">
+        <div class="main-content-section py-4">
           <concept-mappings :mappings="mappings" :customLabels="customLabels"></concept-mappings>
         </div>
       </template>

diff --git a/src/view/concept-card.inc.twig b/src/view/concept-card.inc.twig
@@ -1,6 +1,6 @@
 <div class="col-md-8" id="main-content">
 
-    <div class="main-content-section px-5 py-4">
+    <div class="main-content-section py-4">
 
       {% if visible_breadcrumbs and visible_breadcrumbs[0]|length > 1 %}
       <nav class="row" id="concept-breadcrumbs" aria-label='{{ "Breadcrumbs" | trans }}'>

diff --git a/src/view/vocab-info.inc.twig b/src/view/vocab-info.inc.twig
@@ -1,5 +1,5 @@
 <div class="col-md-8" id="main-content">
-  <div class="main-content-section px-5 py-4">
+  <div class="main-content-section py-4">
     <h1 id="vocab-heading">{{ "Vocabulary information" | trans }}</h1>
 
     {% set vocabInfo = vocab.info(request.contentLang) %}
@@ -10,7 +10,7 @@
     {% else %}
 
     {% for key, values in vocabInfo %}
-    <div class="row property g-0">
+    <div class="row property">
       <div class="col-lg-4 ps-0 property-label"><h2>{{ key | trans }}</h2></div>
       <div class="col-lg-8 gx-0 gx-lg-4 align-self-center property-value">
         <ul class="align-bottom">
@@ -45,7 +45,7 @@
     {% endif %}
 
     {% if vocab.config.dataURLs %}
-    <div class="row g-0 py-3">
+    <div class="row py-3" id="vocab-download-links">
       <div class="col-sm-12 px-0 property-label" id="download-links">
         <h2><i class="fa-solid fa-download"></i> {{ "Download this vocabulary:" | trans }}</h2>
         <ul class="d-inline">