Change styles and sort menu

CruGlobal · Feb 23, 2024 · 71589a3 · 71589a3
1 parent 2fdb69a
commit 71589a3
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 39 deletions.
diff --git a/src/app/components/resources/resources.component.html b/src/app/components/resources/resources.component.html
@@ -148,6 +148,7 @@ <h6 class="dropdown-header">OTHER</h6>
           </button>
         </div>
       </div>
+      <span class="sortLabel">Sort by |</span>
       <div class="btn-group btn-group-sm" ngbDropdown role="group">
         <button
           class="btn dropdown-toggle"
@@ -157,8 +158,9 @@ <h6 class="dropdown-header">OTHER</h6>
           aria-haspopup="true"
           aria-expanded="false"
           ngbDropdownToggle
+          style="font-style: italic"
         >
-          Sort
+          {{ sortOrder == 'tool' ? 'Tool Order' : 'Alphabetical' }}
         </button>
         <div
           class="dropdown-menu"
@@ -168,9 +170,7 @@ <h6 class="dropdown-header">OTHER</h6>
           <button
             (click)="updateSort('alphabetical')"
             class="filter-dropdown-button btn-sm"
-            [ngClass]="
-              sortOrder == 'alphabetical' ? 'bg-secondary text-light' : ''
-            "
+            [ngClass]="sortOrder != 'tool' ? 'bg-secondary text-light' : ''"
           >
             Alphabetical
           </button>

diff --git a/src/styles.css b/src/styles.css
@@ -63,28 +63,7 @@
   background-color: #009cdc;
   box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
 }
-.filter-dropdown-button {
-  cursor: pointer;
-  display: block;
-  width: 100%;
-  padding: 0.25rem 1rem;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  border-radius: 0.2rem;
-  clear: both;
-  font-weight: 400;
-  color: #212529;
-  text-align: inherit;
-  white-space: nowrap;
-  background-color: transparent;
-  border: 0;
-}
-.filter-dropdown-button:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-.filter-dropdown-button:active {
-  background-color: rgba(0, 0, 0, 0.1);
-}
+/* Filter Sort Bar */
 #filterSortBar {
   padding: 0 0 0 3px;
 }
@@ -97,6 +76,14 @@
   font-style: italic;
   color: #6c757d;
 }
+#filterSortBar .btn-group {
+  vertical-align: inherit;
+}
+#filterSortBar .dropdown-header {
+  padding: 0.3rem 0.5rem;
+  color: #000;
+}
+/* Filter/Sort Button (Within Dropdown Menu) */
 #filterSortBar .dropdown > button {
   font-size: 0.75rem;
   border: 0;
@@ -115,28 +102,43 @@
 #filterSortBar .dropdown > button:active {
   background-color: rgba(0, 0, 0, 0.1);
 }
-#filterSortBar .dropdown-header {
-  padding: 0.3rem 0.5rem;
-  color: #000;
+/* Filter/Sort NavBar Buttons */
+.filter-dropdown-button {
+  cursor: pointer;
+  display: block;
+  width: 100%;
+  padding: 0.25rem 1rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border-radius: 0.2rem;
+  clear: both;
+  font-weight: 400;
+  color: #212529;
+  text-align: inherit;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
 }
-#filterSortBar .btn-group {
-  vertical-align: inherit;
+.filter-dropdown-button:hover {
+  background-color: rgba(0, 0, 0, 0.05);
 }
-.card-header span.h4 i.fa {
-  visibility: hidden;
-  font-size: 15px;
-  margin-left: 5px;
-  vertical-align: middle !important;
+.filter-dropdown-button:active {
+  background-color: rgba(0, 0, 0, 0.1);
 }
+span.sortLabel {
+  font-size: 0.75rem;
+  color: #6c757d;
+  margin-left: 7px;
+}
+/* Tool Cards */
 .card-header.pointer:hover {
   cursor: pointer;
-}
-.card-header.pointer:hover span.h4 {
-  color: rgba(255, 255, 255, 0.75);
+  background-color: rgba(52, 58, 64, 0.9) !important;
 }
 .card-header.pointer:active span.h4 {
   color: rgba(255, 255, 255, 0.5);
 }
+/* Other */
 #filterBadge {
   translate: 0 -50%;
   top: 50%;