Move Search to Navbar

Part 1 of switching the Search input to match the new styleguide
trimble-oss · Oct 31, 2023 · 456cc6b · 456cc6b
1 parent 2a7caeb
commit 456cc6b
Show file tree

Hide file tree

Showing 17 changed files with 69 additions and 69 deletions.
diff --git a/app-components/preview/app-components.js b/app-components/preview/app-components.js
diff --git a/app-components/src/app/search/search.component.html b/app-components/src/app/search/search.component.html
@@ -1,13 +1,12 @@
-<div class="position-relative">
-  <div class="form-control-with-icon" role="search">
-    <input class="form-control form-control-lg" placeholder="Search all Modus Icons" type="search" autocomplete="off"
+<div class="position-relative d-none d-md-block">
+  <div class="form-control-with-icon mt-2" role="search">
+    <input class="form-control form-control-search" placeholder="Search all Modus Icons" type="search" autocomplete="off"
       [(ngModel)]="searchString" (input)="search()" />
     <div class="form-control-icon">
       <img [src]="assetpath + 'modus-solid/svg/search.svg'" class="opacity-75" alt height="22" width="22" />
     </div>
   </div>
-  <div style="top: 48px; max-height: 240px; overflow-y: auto; z-index: 1000"
-    class="list-group list-group-borderless bg-white position-absolute shadow justify-content-start w-100">
+  <div class="list-group list-group-search-results list-group-borderless bg-white position-absolute shadow justify-content-start w-100">
     <ng-container *ngIf="searchResults.length === 0 && searchString.length > 1">
       <div class="list-group-item justify-content-center">
         <h5 class="mb-0 text-gray-4">
@@ -16,16 +15,16 @@ <h5 class="mb-0 text-gray-4">
       </div>
     </ng-container>
     <ng-container *ngIf="searchResults.length > 0">
-      <a class="list-group-item text-decoration-none text-dark d-flex align-items-center"
+      <a class="list-group-item text-decoration-none d-flex align-items-center"
         *ngFor="let item of searchResults" [href]="basehref + '/' + item.setName + '/' + item.name + '/'">
-        <svg class="modus-icons me-2" fill="currentColor" width="1.2em" height="1.2em">
+        <svg class="modus-icons me-2" fill="currentColor" width="24" height="24">
           <use [attr.xlink:href]="
               assetpath + item.setName + '/sprites/modus-icons.svg#' + item.name
             "></use>
         </svg>
-        <h5 class="me-2 mb-0">{{ item.displayName }}</h5>
-        <label class="mb-0 me-4">{{ item.tags }}</label>
-        <label class="mb-0 ms-auto text-secondary">{{
+        <h5 class="me-2 mb-0 small">{{ item.displayName }}</h5>
+        <label class="mb-0 me-4 fw-normal small opacity-50">{{ item.tags }}</label>
+        <label class="mb-0 ms-auto text-secondary opacity-75 small">{{
           item.setDisplayName
         }}</label>
       </a>

diff --git a/app-components/src/app/search/search.component.scss b/app-components/src/app/search/search.component.scss
@@ -0,0 +1,6 @@
+.list-group-search-results {
+  max-height: 240px;
+  overflow-y: auto;
+  top: 32px;
+  z-index: 1000;
+}
diff --git a/docs/assets/js/app-components.js b/docs/assets/js/app-components.js
diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
@@ -162,6 +162,8 @@ main {
 
 nav.navbar button.btn-icon-only {
   padding: 11px 8px !important;
+  padding-top: 9px !important;
+  padding-bottom: 11px !important;
 }
 
 nav.navbar button i {
@@ -184,33 +186,8 @@ input[type="search"]::-webkit-search-cancel-button {
   outline: auto;
 }
 
-[data-bs-theme="dark"] .chip-outline:not(.error):hover,
-[data-bs-theme="dark"] .chip-outline:not(.error).hover {
-  background-color: #cbcdd61f !important;
-}
-
-[data-bs-theme="dark"] .chip-outline:not(:disabled):not(.disabled):not(.error):active,
-[data-bs-theme="dark"] .chip-outline:not(:disabled):not(.disabled):not(.error).active {
-  background-color: rgba(0,79,131,.5) !important;
-}
-
-[data-bs-theme="dark"] .btn-primary:not(:disabled):not(.disabled):hover {
-  background-color: #217cbb !important;
-  border-color: #217cbb !important;
-}
-
-[data-bs-theme="dark"] .btn-primary:not(:disabled):not(.disabled):active,
-[data-bs-theme="dark"] .btn-primary:not(:disabled):not(.disabled).active {
-  background-color: #004f83 !important;
-  border-color: #004f83 !important;
-}
-
-[data-bs-theme="dark"] .text-primary {
-  color: #0063a3;
-}
-
 .btn.btn-icon-only i {
-  top: 1px;
+  top: 2px;
 }
 
 .btn-sm.btn-icon-only i {
@@ -231,3 +208,24 @@ input[type="search"]::-webkit-search-cancel-button {
 .icon-demo-examples a.text-decoration-none:focus-visible {
   outline: none;
 }
+
+a.btn img {
+  margin-top: -2px;
+}
+
+.btn-secondary.hover:not(.active),
+.btn-secondary.hover:not(:active) {
+  background-color: #7d808d !important;
+}
+
+.navbar .form-control-search {
+  max-width: 380px;
+  width: 375px;
+}
+
+@media screen and (min-width: 992px) {
+  .navbar .form-control-search {
+    max-width: 640px;
+    width: 545px;
+  }
+}
diff --git a/docs/layouts/_default/home.html b/docs/layouts/_default/home.html
@@ -7,18 +7,14 @@
 <body class="home">
   {{ partialCached "skippy" . }}
   {{ partialCached "navbar" . }}
+
+  {{ $external := resources.Get "js/app-components.js" }}
+  {{ $appComponentsJs := slice $external | resources.Concat "js/app-components.js" | resources.Minify | resources.Fingerprint }}
+  <script src="{{ $appComponentsJs.RelPermalink }}" async fetchpriority="high"></script>
+
   {{ partialCached "home/hero" . }}
   <main class="container mt-4" id="content">
 
-    <div class="row row-site-search">
-      <div class="col-12 col-sm-6 mb-4 mx-auto">
-        <site-search></site-search>
-        {{ $external := resources.Get "js/app-components.js" }}
-        {{ $appComponentsJs := slice $external | resources.Concat "js/app-components.js" | resources.Minify | resources.Fingerprint }}
-        <script src="{{ $appComponentsJs.RelPermalink }}" defer></script>
-      </div>
-    </div>
-
       <div class="row align-items-center">
         <div class="col-12 col-sm-6">
           <h2 class="fw-bold">Modus Icons</h2>

diff --git a/docs/layouts/modus-outlined/single.html b/docs/layouts/modus-outlined/single.html
@@ -105,7 +105,7 @@ <h2>Examples</h2>
           <i class="modus-icons notranslate" aria-hidden="true">{{ $ligature }}</i>
           <span class="visually-hidden">Button</span>
         </button>
-        <button type="button" class="btn btn-icon-only btn-text-dark">
+        <button type="button" class="btn btn-icon-only">
           <i class="modus-icons notranslate" aria-hidden="true">{{ $ligature }}</i>
           <span class="visually-hidden">Button</span>
         </button>

diff --git a/docs/layouts/modus-solid/single.html b/docs/layouts/modus-solid/single.html
@@ -105,7 +105,7 @@ <h2>Examples</h2>
           <i class="modus-icons notranslate" aria-hidden="true">{{ $ligature }}</i>
           <span class="visually-hidden">Button</span>
         </button>
-        <button type="button" class="btn btn-icon-only btn-text-dark">
+        <button type="button" class="btn btn-icon-only">
           <i class="modus-icons notranslate" aria-hidden="true">{{ $ligature }}</i>
           <span class="visually-hidden">Button</span>
         </button>

diff --git a/docs/layouts/partials/icons-modus-outlined.html b/docs/layouts/partials/icons-modus-outlined.html
@@ -1,4 +1,4 @@
-<div class="my-5">
+<div class="my-4">
   {{- partial "icons-search" . }}
   <div class="row">
     <div class="col-12 border-bottom mb-4"></div>
@@ -7,6 +7,6 @@
     <icon-set-list setName="modus-outlined"></icon-set-list>
     {{ $external := resources.Get "js/app-components.js" }}
     {{ $appComponentsJs := slice $external | resources.Concat "js/app-components.js" | resources.Minify | resources.Fingerprint }}
-    <script src="{{ $appComponentsJs.RelPermalink }}" defer fetchpriority="high"></script>
+    <script src="{{ $appComponentsJs.RelPermalink }}" async fetchpriority="high"></script>
     </div>
 </div>
diff --git a/docs/layouts/partials/icons-modus-solid.html b/docs/layouts/partials/icons-modus-solid.html
@@ -1,4 +1,4 @@
-<div class="my-5">
+<div class="my-4">
   {{- partial "icons-search" . }}
   <div class="row">
     <div class="col-12 border-bottom mb-4">
@@ -8,6 +8,6 @@
   <icon-set-list setName="modus-solid"></icon-set-list>
   {{ $external := resources.Get "js/app-components.js" }}
   {{ $appComponentsJs := slice $external | resources.Concat "js/app-components.js" | resources.Minify | resources.Fingerprint }}
-  <script src="{{ $appComponentsJs.RelPermalink }}" defer fetchpriority="high"></script>
+  <script src="{{ $appComponentsJs.RelPermalink }}" async fetchpriority="high"></script>
 </div>
 </div>
diff --git a/docs/layouts/partials/icons-search.html b/docs/layouts/partials/icons-search.html
@@ -5,8 +5,8 @@ <h2 id="icons" class="mt-2 display-3 fw-bold d-inline-block">
     </h2>
     <div class="d-inline-block">
       <button type="button" class="btn btn-sm bg-transparent border-0 ms-1 pt-0 px-0" data-bs-toggle="dropdown"
-        aria-expanded="false">
-        <img src="/modus-solid/svg/caret-down.svg" class="opacity-75" alt height="32" width="32">
+        aria-expanded="false" aria-label="View all icon sets">
+        <img src="/modus-solid/svg/caret-down.svg" class="opacity-75" alt height="24" width="24">
       </button>
       <div class="dropdown-menu dropdown-menu-icons">
         {{ $currentPage := . }}

diff --git a/docs/layouts/partials/icons-transportation.html b/docs/layouts/partials/icons-transportation.html
@@ -1,4 +1,4 @@
-<div class="my-5">
+<div class="my-4">
   {{- partial "icons-search" . }}
   <div class="row">
     <div class="col-12 border-bottom mb-4">
@@ -19,6 +19,6 @@
   <icon-set-list setName="transportation" categories="false"></icon-set-list>
   {{ $external := resources.Get "js/app-components.js" }}
   {{ $appComponentsJs := slice $external | resources.Concat "js/app-components.js" | resources.Minify | resources.Fingerprint }}
-  <script src="{{ $appComponentsJs.RelPermalink }}" defer fetchpriority="high"></script>
+  <script src="{{ $appComponentsJs.RelPermalink }}" async fetchpriority="high"></script>
   </div>
 </div>
diff --git a/docs/layouts/partials/navbar.html b/docs/layouts/partials/navbar.html
@@ -10,6 +10,9 @@
     <div class="d-flex flew-row ms-auto ms-sm-0">
       <ul class="navbar-nav d-none d-md-inline-flex flex-lg-row">
       </ul>
+
+      <site-search class="ms-auto"></site-search>
+
       {{ partial "theme-toggle" . }}
 
       <div class="dropdown">

diff --git a/docs/layouts/partials/set-nav-search.html b/docs/layouts/partials/set-nav-search.html
@@ -1,7 +1,7 @@
 <div class="row">
-  <div class="col-12 col-md-6">
+  <div class="col-12">
   <nav aria-label="breadcrumb">
-    <ol class="breadcrumb my-4 p-0">
+    <ol class="breadcrumb mt-4 p-0">
       <li class="breadcrumb-item"><a href="/">Home</a></li>
       <li class="breadcrumb-item active" aria-current="page">
         <span class="text-capitalize">
@@ -10,7 +10,4 @@
     </ol>
   </nav>
   </div>
-  <div class="col-12 col-md-6 mt-sm-2">
-    <site-search class="ms-auto"></site-search>
-  </div>
 </div>
diff --git a/docs/layouts/partials/single-nav-search.html b/docs/layouts/partials/single-nav-search.html
@@ -13,7 +13,6 @@
   </nav>
   </div>
   <div class="col-12 col-md-6 mt-sm-2">
-    <site-search class="ms-auto w-50"></site-search>
     {{ $external := resources.Get "js/app-components.js" }}
     {{ $appComponentsJs := slice $external | resources.Concat "js/app-components.js" | resources.Minify | resources.Fingerprint }}
     <script src="{{ $appComponentsJs.RelPermalink }}" defer fetchpriority="high"></script>

diff --git a/docs/layouts/transportation/single.html b/docs/layouts/transportation/single.html
@@ -97,7 +97,7 @@ <h2>Examples</h2>
           <i class="modus-icons notranslate" aria-hidden="true">{{ $ligature }}</i>
           <span class="visually-hidden">Button</span>
         </button>
-        <button type="button" class="btn btn-icon-only btn-text-dark">
+        <button type="button" class="btn btn-icon-only">
           <i class="modus-icons notranslate" aria-hidden="true">{{ $ligature }}</i>
           <span class="visually-hidden">Button</span>
         </button>

diff --git a/postcss.config.js b/postcss.config.js
@@ -27,11 +27,13 @@ module.exports = {
         'bs-tooltip-top',
         'btn-clipboard',
         'btn-danger',
+        'btn-icon-only',
         'btn-outline-secondary',
         'btn-outline-primary',
         'btn-outline-secondary',
         'btn-primary',
         'btn-secondary',
+        'btn-sm',
         'btn-to-top',
         'btn',
         'card-body',
@@ -135,20 +137,20 @@ module.exports = {
         'mb-3',
         'mb-4',
         'mb-5',
-        'message',
+        'me-1',
+        'me-2',
+        'me-3',
         'message-primary',
+        'message',
         'modus-icons',
         'moon',
-        'mr-1',
-        'mr-2',
-        'mr-3',
         'ms-auto',
-        'mt-auto',
         'mt-0',
         'mt-2',
         'mt-3',
         'mt-4',
         'mt-5',
+        'mt-auto',
         'mt-md-5',
         'mt-sm-3',
         'mt-sm-4',