adds config and templates for search block (#55)

* adds config and templates for search block

* adds styling changes for formatting a page and post using a hero block and adds styling for the search block

* updates search display in precontent

* removes block config from theme

* removes padding from node template

---------

Co-authored-by: “Kerry <“kmurphychi@gmail.com”>

assets/scss/custom/_footer.scss

@@ -2,7 +2,7 @@
 #footer {
   // Footer brand block placed first.
   #block-saplings-child-sitebranding-footer {
-    padding-left: 2rem;
+    padding-inline-start: 2rem;
   }
 
   ul.menu.menu--social.navbar-nav {
@@ -22,11 +22,11 @@
     .nav-link {
       padding: unset;
       position: relative;
-      margin-left: 1rem;
+      margin-inline-start: 1rem;
 
       @include media-breakpoint-down(md) {
-        margin-left: 0;
-        margin-right: 1rem;
+        margin-inline-start: 0;
+        margin-inline-end: 1rem;
       }
     }
 

assets/scss/custom/_overrides.scss

@@ -6,18 +6,23 @@
 
 // Make sure container fluid is edge to edge.
 .container-fluid {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
+  padding-inline-start: 0 !important;
+  padding-inline-end: 0 !important;
 
   .row {
-    margin-right: 0;
-    margin-left: 0;
+    margin-inline-end: 0;
+    margin-inline-start: 0;
   }
 }
 
 // Main menu.
 #block-saplings-child-mainnavigation {
   width: 100%;
+  display: flex;
+
+  @include media-breakpoint-up(lg) {
+    justify-content: end;
+  }
 }
 
 // Main menu align right.
@@ -28,7 +33,7 @@
 }
 
 // Unset align right on mobile.
-@include media-breakpoint-down(md) {
+@include media-breakpoint-down(lg) {
   .navbar-expand-lg .navbar-nav {
     flex-direction: column;
     justify-content: start;
@@ -88,3 +93,11 @@ lite-youtube {
   border: 1px solid #000;
   cursor: pointer;
 }
+
+.text-align-center {
+  text-align: center;
+}
+
+.text-align-right {
+  text-align: end;
+}

assets/scss/custom/_search.scss

@@ -0,0 +1,95 @@
+ #searchForm {
+   form {
+     display: flex;
+     width: 100%;
+
+     label {
+       display: none;
+     }
+
+     button.js-form-submit {
+       border-radius: 0 6.375rem 6.375rem 0;
+       height: 3.375rem;
+       font-size: 1.5rem;
+       line-height: 1.25;
+       letter-spacing: -0.01rem;
+     }
+
+     input {
+       border-color: #7e92ae;
+       border-radius: 1.6875rem 0 0 1.6875rem;
+       height: 3.375rem;
+       padding-inline-start: 1.875rem;
+     }
+
+     .form-type-textfield {
+       width: 100%;
+     }
+   }
+ }
+
+ #precontent {
+   form {
+     @include media-breakpoint-up(lg) {
+       display: flex;
+       width: 100%;
+
+       justify-content: center;
+       gap: 1rem;
+
+       label {
+         display: none;
+       }
+     }
+   }
+ }
+
+ .modal#searchForm {
+   .js-form-type-select {
+     display: none;
+   }
+
+   @include media-breakpoint-down(lg) {
+     display: block;
+     position: relative;
+     opacity: 1;
+
+     .modal-header {
+       display: none;
+     }
+
+     .modal-content {
+       background: none;
+       border: none;
+       box-shadow: none;
+     }
+
+     .modal-body {
+       padding: 0;
+     }
+
+     .modal-dialog {
+       margin: 0;
+       transform: none;
+       transition: none;
+     }
+   }
+
+   @include media-breakpoint-up(lg) {
+     top: 100px;
+   }
+ }
+
+ button.btn.search {
+   @include media-breakpoint-down(lg) {
+     display: none;
+   }
+ }
+
+ .gin--vertical-toolbar.user-logged-in {
+   .modal#searchForm {
+     @include media-breakpoint-up(lg) {
+       top: 160px;
+     }
+   }
+ }

config/optional/block.block.saplings_child_local_actions.yml

@@ -0,0 +1,17 @@
+langcode: en
+status: true
+dependencies:
+  theme:
+    - saplings_child
+id: saplings_child_local_actions
+theme: saplings_child
+region: header
+weight: -7
+provider: null
+plugin: local_actions_block
+settings:
+  id: local_actions_block
+  label: 'Primary admin actions'
+  label_display: '0'
+  provider: core
+visibility: {  }

config/optional/block.block.saplings_child_local_tasks.yml

@@ -6,14 +6,14 @@ dependencies:
 id: saplings_child_local_tasks
 theme: saplings_child
 region: header
-weight: 10
+weight: -8
 provider: null
 plugin: local_tasks_block
 settings:
   id: local_tasks_block
   label: Tabs
-  provider: core
   label_display: '0'
+  provider: core
   primary: true
   secondary: true
 visibility: {  }

config/optional/block.block.saplings_child_page_title.yml

@@ -2,14 +2,13 @@ langcode: en
 status: true
 dependencies:
   module:
-    - block_class
     - system
   theme:
     - saplings_child
 id: saplings_child_page_title
 theme: saplings_child
 region: content
-weight: -30
+weight: -7
 provider: null
 plugin: page_title_block
 settings:

config/optional/block.block.saplings_child_views_block__hero_block_1.yml

@@ -0,0 +1,24 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - views.view.hero
+  module:
+    - views
+  theme:
+    - saplings_child
+id: saplings_child_views_block__hero_block_1
+theme: saplings_child
+region: hero
+weight: -8
+provider: null
+plugin: 'views_block:hero-block_1'
+settings:
+  id: 'views_block:hero-block_1'
+  label: ''
+  label_display: '0'
+  provider: views
+  context_mapping: {  }
+  views_label: ''
+  items_per_page: none
+visibility: {  }

saplings_child.info.yml

@@ -11,9 +11,10 @@ regions:
   header: "Top Bar"
   highlighted: "Highlighted"
   help: "Help"
+  hero: "Hero"
+  pre_content: "Pre Content"
   content: "Content"
   sidebar_first: "Primary"
-  sidebar_second: "Secondary"
   footer: "Footer"
   page_top: "Page top"
   page_bottom: "Page bottom"

templates/overrides/block/block--search-block.html.twig

@@ -0,0 +1,31 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a branding block.
+ *
+ * Each branding element variable (logo, name, slogan) is only available if
+ * enabled in the block configuration.
+ *
+ * Available variables:
+ * - site_logo: Logo for site as defined in Appearance or theme settings.
+ * - site_name: Name for site as defined in Site information settings.
+ * - site_slogan: Slogan for site as defined in Site information settings.
+ *
+ * @ingroup templates
+ */
+#}
+<button type="button" aria-label="Search" aria-labelledby="Search" class="btn search" data-bs-toggle="modal" data-bs-target="#searchForm"><i class="bi bi-search" aria-hidden="true"></i></button>
+<div class="modal fade" id="searchForm" tabindex="-1" aria-labelledby="searchForm" aria-modal="true" role="dialog" data-bs-backdrop="false">
+  <div class="modal-dialog modal-xl">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        {% block content %}
+        {{ content }}
+        {% endblock %}
+      </div>
+    </div>
+  </div>
+</div>