fix spacing between sections on collections - part of #356

asulibraries · Sep 30, 2021 · dbac8c3 · dbac8c3
1 parent 29764cd
commit dbac8c3
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 55 deletions.
diff --git a/web/themes/custom/asulib_barrio/css/style.css b/web/themes/custom/asulib_barrio/css/style.css
diff --git a/web/themes/custom/asulib_barrio/css/style.min.css b/web/themes/custom/asulib_barrio/css/style.min.css
diff --git a/web/themes/custom/asulib_barrio/scss/components/page.scss b/web/themes/custom/asulib_barrio/scss/components/page.scss
@@ -3,6 +3,53 @@
  * Styles for Bootstrap Barrio page.
  */
 
+.repo-item, .node--type-collection.node--view-mode-full {
+  h2 {
+    padding: 1.5rem 1rem;
+    background: $gray-2;
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 1.75rem;
+  }
+  h3 {
+    font-size: 1.25rem;
+    margin-bottom: 1rem;
+    font-weight: bold;
+  }
+  .field--name-field-rich-description {
+    margin-bottom: $spacer;
+  }
+  .content-section {
+    margin-bottom: ($spacer * 2);
+  }
+}
+.node--type-collection .col-md-12 {
+//   padding-top: 0;
+  padding-left: 0;
+  padding-right: 0;
+//   padding-bottom: 0;
+}
+
+.small-margin-bottom {
+    margin-bottom: $small-padding;
+}
+.xs-margin-bottom {
+    margin-bottom: $xs-padding;
+}
+.large-margin-bottom {
+    margin-bottom: $large-padding;
+}
+.small-margin {
+    margin-top: $small-padding;
+    margin-bottom: $small-padding;
+}
+.small-margin-top {
+    margin-top: $small-padding;
+}
+.xs-margin-top {
+    margin-top: $xs-padding;
+}
+
 .small-padding-bottom {
     padding-bottom: $small-padding;
 }

diff --git a/web/themes/custom/asulib_barrio/scss/style.scss b/web/themes/custom/asulib_barrio/scss/style.scss
@@ -92,27 +92,6 @@ body {
 /* remove padding from inside some views on repo item displays */
 .file-container .views-row { padding: 0; }
 
-.repo-item, .node--type-collection.node--view-mode-full {
-  h2 {
-    padding: 1.5rem 1rem;
-    background: $gray-2;
-    font-size: 1.5rem;
-    font-weight: bold;
-    margin-bottom: 1.75rem;
-  }
-  h3 {
-    font-size: 1.25rem;
-    margin-bottom: 1rem;
-    font-weight: bold;
-  }
-  .field--name-field-rich-description {
-    margin-bottom: $spacer;
-  }
-  .content-section {
-    margin-bottom: ($spacer * 2);
-  }
-}
-
 // .main-content a {
 //   border-bottom: 1px dotted $maroon;
 // }
@@ -135,9 +114,6 @@ img { width: 100%; }
 .node__content.container {
   padding: 0;
 }
-.node--type-collection .col-md-12 {
-  padding: 0;
-}
 
 .file-container {
   margin-bottom: 1rem;

diff --git a/web/themes/custom/asulib_barrio/templates/content/node--collection--full.html.twig b/web/themes/custom/asulib_barrio/templates/content/node--collection--full.html.twig
@@ -101,13 +101,18 @@
             <div class="col-md-12 xs-padding-bottom">
                 {{ drupal_block('about_this_collection_block') }}
             </div>
-            <h2 class="xs-padding-top">{{ 'Latest additions'|t }}</h2>
-            {{ drupal_block('latest_additions_to_collection_block') }}
+            <h2 class="xs-margin-top">{{ 'Latest additions'|t }}</h2>
+            <div class="col-md-12 xs-padding-bottom">
+                {{ drupal_block('latest_additions_to_collection_block') }}
+            </div>
         {% else %}
-            <h2>{{ 'Included in this collection'|t }}</h2>
-            {{ drupal_view('collections', 'sub_collections', node.id) }}
+            <h2 class="xs-margin-top">{{ 'Included in this collection'|t }}</h2>
+            <div class="col-md-12 xs-padding-bottom">
+                {{ drupal_view('collections', 'sub_collections', node.id) }}
+            </div>
         {% endif %}
-        <br/>
-        {{ content.field_preferred_citation }}
+        <div class="xs-padding-top">
+            {{ content.field_preferred_citation }}
+        </div>
     </div>
 </article>