Merge pull request #1754 from NatLibFi/issue1683-responsive-css-vocab…

…-home Responsive layout for the vocabulary home page + layout adjustments
NatLibFi · Jan 29, 2025 · 53aa787 · 53aa787
2 parents 210559f + cbc41bf
commit 53aa787
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 13 deletions.
diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css
@@ -347,13 +347,18 @@ body {
 
   #main-container {
     font-size: 16px;
+    padding-top: 2.75rem;
   }
 
   #main-container h1 {
     font-family: var(--font-family-heading);
     font-weight: bold;
   }
 
+  #main-container-row {
+    --bs-gutter-x: 2.25rem;
+  }
+
   /***** Main container frontpage & frontpage one vocab *****/
   #background.frontpage, #background.frontpage-one-vocab {
     background-color: var(--main-bg-1);
@@ -723,13 +728,20 @@ body {
   .main-content-section {
     background-color: var(--vocab-bg);
     margin-bottom: .2rem;
+    padding-left: 3.5rem;
+    padding-right: 3.5rem;
   }
 
-  #concept-heading {
+  #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/base-template.twig b/src/view/base-template.twig
@@ -93,12 +93,12 @@
     </div>
     {% endif %}
   </header>
-  <main id="main-container" class="{% if request.vocabid == '' or global_search %} frontpage{% elseif concept_uri != '' %} termpage{% elseif request.vocab != '' %} vocabpage{% if list_style %} {{ list_style }}{% endif %}{% endif %} py-5">
+  <main id="main-container" class="{% if request.vocabid == '' or global_search %} frontpage{% elseif concept_uri != '' %} termpage{% elseif request.vocab != '' %} vocabpage{% if list_style %} {{ list_style }}{% endif %}{% endif %}">
     <div class="container">
       <noscript>
         <strong>We're sorry but Skosmos doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
       </noscript>
-      <div class="row" tabindex="-1">
+      <div id="main-container-row" class="row" tabindex="-1">
       {% block content %}
       {% endblock %}
       </div>

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,6 +1,6 @@
 <div class="col-md-8" id="main-content">
-  <div class="main-content-section px-5 py-4">
-    <h1 class="pt-3 pb-5">{{ "Vocabulary information" | trans }}</h1>
+  <div class="main-content-section py-4">
+    <h1 id="vocab-heading">{{ "Vocabulary information" | trans }}</h1>
 
     {% set vocabInfo = vocab.info(request.contentLang) %}
     {% if not vocabInfo %}
@@ -10,9 +10,9 @@
     {% else %}
 
     {% for key, values in vocabInfo %}
-    <div class="row property g-0">
-      <div class="col-sm-4 px-0 property-label"><h2>{{ key | trans }}</h2></div>
-      <div class="col-sm-8 align-self-center property-value">
+    <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">
           {% for val in values %}
           <li>
@@ -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">

diff --git a/src/view/vocab-search.twig b/src/view/vocab-search.twig
@@ -4,7 +4,7 @@
 {% block url %}{{ BaseHref }}{{ request.langurl }}{% endblock %}
 
 {% block content %}
-<main class="searchpage py-5" id="main-container" >
+<main class="searchpage" id="main-container">
   <div class="container">
     <div class="row">
       {% include "search-results-filter.inc.twig" %}