Update site to use Modus Bootstrap v2 CSS (#323)

* Update site to use Modus Bootstrap v2 * CSS fix * Update site to use Modus Bootstrap v2 * Update docs.scss * fix git merge issues * update responsive cards * fixes * Fixes * Remove jQuery * Fix small icon button * Button Icon CSS Fixes * Update docs.scss
trimble-oss · Oct 30, 2023 · 5c5f145 · 5c5f145
1 parent 2c81082
commit 5c5f145
Show file tree

Hide file tree

Showing 46 changed files with 480 additions and 386 deletions.
diff --git a/.cspell.json b/.cspell.json
@@ -1,11 +1,14 @@
 {
   "version": "0.2",
   "words": [
+    "basehref",
     "blombard",
+    "ccircle",
     "codelyzer",
     "codeql",
     "coliff",
     "cpath",
+    "csvg",
     "Delivr",
     "devkit",
     "doesn",
@@ -59,10 +62,7 @@
     "Xhref",
     "xlink"
   ],
-  "flagWords": [
-    "teh",
-    "whitelist"
-  ],
+  "flagWords": ["teh", "whitelist"],
   "ignorePaths": [
     ".cspell.json",
     "**/node_modules/**",

diff --git a/.gitignore b/.gitignore
@@ -10,3 +10,5 @@
 _site-data.json
 
 Thumbs.db
+
+docs/-*
diff --git a/app-components/preview/app-components.js b/app-components/preview/app-components.js
diff --git a/app-components/src/app/_data/site-data.ts b/app-components/src/app/_data/site-data.ts
@@ -884,8 +884,12 @@ export const siteData = [
       {
         "name": "calendar-cancel",
         "displayName": "Calendar Cancel",
-        "tags": [],
-        "categories": [],
+        "tags": [
+          "delete"
+        ],
+        "categories": [
+          "Applications"
+        ],
         "deprecated": false,
         "useInstead": ""
       },
@@ -907,8 +911,12 @@ export const siteData = [
       {
         "name": "calendar-clock",
         "displayName": "Calendar Clock",
-        "tags": [],
-        "categories": [],
+        "tags": [
+          "time"
+        ],
+        "categories": [
+          "Applications"
+        ],
         "deprecated": false,
         "useInstead": ""
       },
@@ -963,8 +971,12 @@ export const siteData = [
       {
         "name": "calendar-plus",
         "displayName": "Calendar Plus",
-        "tags": [],
-        "categories": [],
+        "tags": [
+          "add"
+        ],
+        "categories": [
+          "Applications"
+        ],
         "deprecated": false,
         "useInstead": ""
       },
@@ -2107,7 +2119,8 @@ export const siteData = [
         "name": "delivery-truck",
         "displayName": "Delivery Truck",
         "tags": [
-          "vehicle"
+          "vehicle",
+          "transport"
         ],
         "categories": [
           "Objects & Shapes"
@@ -2119,10 +2132,11 @@ export const siteData = [
         "name": "delivery-truck-allocate",
         "displayName": "Delivery Truck Allocate",
         "tags": [
-          "van",
+          "arrow",
           "lorry",
-          "truck",
-          "arrow"
+          "transport",
+          "van",
+          "vehicle"
         ],
         "categories": [
           "Objects & Shapes"
@@ -2134,7 +2148,9 @@ export const siteData = [
         "name": "delivery-truck-motion",
         "displayName": "Delivery Truck Motion",
         "tags": [
-          "vehicle"
+          "lorry",
+          "vehicle",
+          "transport"
         ],
         "categories": [
           "Objects & Shapes"
@@ -7708,8 +7724,12 @@ export const siteData = [
       {
         "name": "calendar-cancel",
         "displayName": "Calendar Cancel",
-        "tags": [],
-        "categories": [],
+        "tags": [
+          "delete"
+        ],
+        "categories": [
+          "Applications"
+        ],
         "deprecated": false,
         "useInstead": ""
       },
@@ -7731,8 +7751,12 @@ export const siteData = [
       {
         "name": "calendar-clock",
         "displayName": "Calendar Clock",
-        "tags": [],
-        "categories": [],
+        "tags": [
+          "time"
+        ],
+        "categories": [
+          "Applications"
+        ],
         "deprecated": false,
         "useInstead": ""
       },
@@ -7787,8 +7811,12 @@ export const siteData = [
       {
         "name": "calendar-plus",
         "displayName": "Calendar Plus",
-        "tags": [],
-        "categories": [],
+        "tags": [
+          "add"
+        ],
+        "categories": [
+          "Applications"
+        ],
         "deprecated": false,
         "useInstead": ""
       },
@@ -8931,7 +8959,8 @@ export const siteData = [
         "name": "delivery-truck",
         "displayName": "Delivery Truck",
         "tags": [
-          "vehicle"
+          "vehicle",
+          "transport"
         ],
         "categories": [
           "Objects & Shapes"
@@ -8943,10 +8972,11 @@ export const siteData = [
         "name": "delivery-truck-allocate",
         "displayName": "Delivery Truck Allocate",
         "tags": [
-          "van",
+          "arrow",
           "lorry",
-          "truck",
-          "arrow"
+          "transport",
+          "van",
+          "vehicle"
         ],
         "categories": [
           "Objects & Shapes"
@@ -8958,7 +8988,9 @@ export const siteData = [
         "name": "delivery-truck-motion",
         "displayName": "Delivery Truck Motion",
         "tags": [
-          "vehicle"
+          "lorry",
+          "vehicle",
+          "transport"
         ],
         "categories": [
           "Objects & Shapes"
@@ -13957,7 +13989,8 @@ export const siteData = [
         "name": "geocode",
         "displayName": "Geocode",
         "tags": [
-          "earth"
+          "earth",
+          "globe"
         ],
         "categories": [],
         "deprecated": false,
@@ -14176,7 +14209,9 @@ export const siteData = [
       {
         "name": "paper-plane",
         "displayName": "Paper Plane",
-        "tags": [],
+        "tags": [
+          "send"
+        ],
         "categories": [],
         "deprecated": false,
         "useInstead": ""
@@ -14202,7 +14237,9 @@ export const siteData = [
       {
         "name": "poi",
         "displayName": "Poi",
-        "tags": [],
+        "tags": [
+          "marker"
+        ],
         "categories": [],
         "deprecated": false,
         "useInstead": ""

diff --git a/app-components/src/app/search/search.component.html b/app-components/src/app/search/search.component.html
@@ -1,23 +1,12 @@
 <div class="position-relative">
-  <div class="input-with-icon-left">
-    <input
-      class="form-control form-control-lg"
-      placeholder="Search all Modus Icons"
-      type="search"
-      autocomplete="off"
-      [(ngModel)]="searchString"
-      (input)="search()" />
-    <div class="input-icon">
-      <img
-        [src]="assetpath + 'modus-solid/svg/search.svg'"
-        class="opacity-75"
-        alt
-        height="22"
-        width="22" />
+  <div class="form-control-with-icon" role="search">
+    <input class="form-control form-control-lg" 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"
+  <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">
     <ng-container *ngIf="searchResults.length === 0 && searchString.length > 1">
       <div class="list-group-item justify-content-center">
@@ -27,23 +16,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"
-        *ngFor="let item of searchResults"
-        [href]="basehref + '/' + item.setName + '/' + item.name + '/'">
-        <svg
-          class="modus-icons mr-2"
-          fill="currentColor"
-          width="1.2em"
-          height="1.2em">
-          <use
-            [attr.xlink:href]="
+      <a class="list-group-item text-decoration-none text-dark 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">
+          <use [attr.xlink:href]="
               assetpath + item.setName + '/sprites/modus-icons.svg#' + item.name
             "></use>
         </svg>
-        <h5 class="mr-2 mb-0">{{ item.displayName }}</h5>
-        <label class="mb-0 mr-4">{{ item.tags }}</label>
-        <label class="mb-0 ml-auto text-secondary">{{
+        <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">{{
           item.setDisplayName
         }}</label>
       </a>