commits for facets-styling

README.md

@@ -3,3 +3,23 @@ Islandora 8 base theme
 Use starter theme to override the base theme
 
 [islandora_starter_theme](https://github.com/Born-Digital-US/islandora_starter_theme)
+
+## CSS
+Comes with precomiled SCSS files. 
+
+### To compile:
+You will need nodejs, npm, gulp, gulp-cli, sass installed.
+```
+$ cd codebase/web/themes/contrib/islandora_starter_theme
+$ npm install
+$ gulp styles
+```
+
+Last compiled with the following versions:
+```
+~/islandora_starter_theme# nodejs --version
+v10.19.0
+~/islandora_starter_theme# gulp --version
+CLI version: 2.3.0
+Local version: 4.0.2
+```

scss/_color.scss

@@ -330,7 +330,8 @@ h2, .h2 {
 // facets
 .block-config-provider--facets-summary,
 [class*="block-facet--"] {
-  .block__title {
+  .block__title,
+  h3 {
     background-color: $body-background-color;
     border-bottom-color: $border-color;
     color: $text-color;

scss/_typography.scss

@@ -53,7 +53,8 @@ $h4-font-size: $base-font-size * 1.5;
 $h5-font-size: $base-font-size * 1.25;
 $h6-font-size: $base-font-size * 1.125;
 
-.block__title {
+.block__title,
+.block-facet--links h3 {
   font-size: $h5-font-size;
 }
 

scss/components/_search-results.scss

@@ -105,14 +105,6 @@
       }
     }
   }
-
-  &__results {
-    @media #{$wide} {
-      display: grid;
-      grid-gap: $global-padding-percent;
-      grid-template-columns: 1fr 3fr;
-    }
-  }
 }
 
 .search-results__header {
@@ -320,15 +312,25 @@ body[class*="-pages"] {
 }
 
 // facets
-.block-config-provider--facets-summary,
-.block-facet--links {
-  .block__title {
-    border-bottom: $border-width $border-style;
-    font-weight: $font-weight-bold;
-    padding-bottom:S ($large - $medium);
+.view-footer {
+  .block-config-provider--facets-summary,
+  .block-facet--links {
+    display: block;
+
+    .block__title,
+    h3 {
+      border-bottom-width: $border-width;
+      border-bottom-style: $border-style;
+      font-weight: $font-weight-bold;
+      padding-bottom: ($large - $medium);
+    }
   }
 }
 
+.view-solr-search-content .view-footer {
+  text-align: left;
+}
+
 .block-config-provider--facets-summary {
   ul {
     margin: 0;
@@ -360,42 +362,6 @@ body[class*="-pages"] {
   }
 }
 
-.search-results__facets--mobile {
-  overflow-x: hidden;
-
-  summary {
-    margin-bottom: 0;
-    padding-left: 0;
-    display: flex;
-    justify-content: space-between;
-    border-width: 0;
-    border-bottom-width: $border-width;
-    border-bottom-style: $border-style;
-
-    &:after {
-      content: "+";
-      float: right;
-    }
-  }
-
-  &[open] {
-    border-bottom-width: $border-width;
-    border-bottom-style: $border-style;
-
-    summary:after {
-      content: "\2013";
-    }
-  }
-
-  .facet-item a {
-    border-bottom-width: 0;
-  }
-}
-
-.search-results__facets--wide {
-  display: none;
-}
-
 // Bottom search pager
 .bottom_pager {
   margin-bottom: 0;
@@ -463,6 +429,29 @@ body[class*="-pages"] {
       grid-template-columns: repeat(auto-fill, minmax(19.75rem, 1fr));
     }
   }
+   .view-solr-search-content {
+    display: grid;
+    grid-gap: 0 $global-padding-percent;
+    grid-template-columns: 1fr 3fr;
+
+    .view-header {
+      grid-column: 1 / span 2;
+    }
+
+    .search-results__header {
+      grid-column: 1 / span 2;
+    }
+
+    .view-content {
+      grid-column: 2;
+    }
+
+    .view-footer {
+      grid-column: 1;
+      grid-row: 3;
+      padding: 0;
+    }
+  }
 }
 
 @media #{$wide} {
@@ -477,13 +466,6 @@ body[class*="-pages"] {
     }
   }
 
-  .search-results__facets--wide {
-    display: block;
-  }
-
-  .search-results__facets--mobile {
-    display: none;
-  }
 }
 
 .view-footer {
@@ -494,3 +476,6 @@ body[class*="-pages"] {
     display: inline-block;
   }
 }
+
+// Prevent contextual menu links from breaking grid layouts
+.contextual, div[data-contextual-id] {position:absolute;z-index:500;top:6px;right:0;}

templates/views/views-view-unformatted--solr_search_content--block_1.html.twig

@@ -19,19 +19,6 @@
 
 {% if title %}
   <h3 class="view-title">{{ title }}</h3>
-{% endif %}
-{% if facets %}
-<aside class="search-results__facets">
-  <div class="search-results__facets--wide">
-    {{ facets }}
-  </div>
-  <details class="search-results__facets--mobile">
-    <summary class="h5">Refine Search</summary>
-    <div>
-      {{ facets }}
-    </div>
-  </details>
-</aside>
 {% endif %}
   <section class="search-results__rows">
     <div class="search-results__content">

templates/views/views-view-unformatted--solr_search_content--page_1.html.twig

@@ -18,19 +18,6 @@
 <div class="search-results__results {{ additional_classes }}">
 {% if title %}
   <h3 class="view-title">{{ title }}</h3>
-{% endif %}
-{% if facets %}
-  <aside class="search-results__facets">
-    <div class="search-results__facets--wide">
-      {{ facets }}
-    </div>
-    <details class="search-results__facets--mobile">
-      <summary class="h5">Refine Search</summary>
-      <div>
-        {{ facets }}
-      </div>
-    </details>
-  </aside>
 {% endif %}
   <section class="search-results__rows">
     <div class="search-results__content">