refactor: catalog settings (#37)

facioquo · Jun 27, 2023 · a348b71 · a348b71
1 parent 5154b77
commit a348b71
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 71 deletions.
diff --git a/sass/_site.scss b/sass/_site.scss
@@ -1,8 +1,8 @@
 @use "uswds-core" as *;
 
-// SITE STYLES
+/* SITE STYLES */
 
-// site mixin
+/* site mixin */
 @mixin site-style {
 
   h1 {
@@ -96,11 +96,6 @@
     max-width: 800px;
     margin: auto;
 
-    border: 5px;
-    border-style: solid;
-    border-radius: 1rem;
-    border-color: color($theme-color-base);
-
     @include at-media-max("mobile-lg") {
       @include u-padding(2);
     }

diff --git a/src/app/pages/card-catalog/catalog.component.html b/src/app/pages/card-catalog/catalog.component.html
@@ -22,8 +22,8 @@ <h1>Card catalog</h1>
         href="https://designsystem.digital.gov/components/card/" target="_blank">Card</a>
       component with “show more” card loading. Learn more about
       <a class="usa-link point" role="button" (click)="u.scrollToStart('info');"> this design pattern</a> or
-      <a class="usa-link point" role="button" (click)="u.scrollToStart('summary-box-key-information');">
-        change settings</a> at the bottom of this page.
+      <a class="usa-link point" role="button" (click)="u.scrollToStart('settings');">change settings</a>
+      at the bottom of this page.
     </p>
 
     <!-- CARDS in CARD GROUP
@@ -73,6 +73,9 @@ <h2 class="usa-card__heading">{{ card.title }}</h2>
   <!-- "Classic" pagination numbered index -->
   <!-- https://designsystem.digital.gov/components/pagination/ -->
   <div class="grid-container" *ngIf="classic">
+
+    <p class="text-center">Showing {{cardStart}}-{{cardEnd}} of {{totalCards}} cards</p>
+
     <nav aria-label="Pagination" class="usa-pagination">
       <ul class="usa-pagination__list">
         <li class="usa-pagination__item usa-pagination__arrow" *ngIf="pages>3 && page>3">
@@ -122,18 +125,64 @@ <h2 class="usa-card__heading">{{ card.title }}</h2>
         </li>
       </ul>
     </nav>
-    <p class="text-center">Showing {{cardStart}}-{{cardEnd}} of {{totalCards}} cards</p>
   </div>
 
 </section>
 
 
 <!-- INFO SECTION | About this design pattern -->
-<section id="info" class="usa-section usa-dark-background pattern-info-section">
+<section  class="usa-section usa-dark-background pattern-info-section">
 
   <div class="pattern-info-container">
 
-    <h2>About this pattern</h2>
+    <!-- page settings -->
+    <div class="usa-summary-box" role="region" aria-labelledby="summary-box-key-information" id="settings">
+      <div class="usa-summary-box__body">
+        <h3 class="usa-summary-box__heading" id="summary-box-key-information">
+          Catalog settings
+        </h3>
+        <div class="usa-summary-box__text">
+
+          <form class="usa-form">
+
+            <!-- total cards -->
+            <label class="usa-label" for="slider-total-cards">Total cards ({{totalCards}})</label>
+            <input id="slider-total-cards" name="total-cards" class="usa-range" type="range" min="6" max="{{maxCards}}"
+              step="6" [(ngModel)]="totalCards" aria-valuemin="6" attr.aria-valuemax="{{maxCards}}"
+              attr.aria-valuenow="{{totalCards}}" role="slider" (change)="changeTotalCards()" />
+
+            <!-- cards per pages -->
+            <label class="usa-label" for="slider-page-cards">Cards per page ({{pageSize}})</label>
+            <input id="slider-page-cards" name="page-cards" class="usa-range" type="range" min="6" max="{{pageMax}}"
+              step="6" [(ngModel)]="pageSize" aria-valuemin="6" attr.aria-valuemax="{{pageMax}}"
+              attr.aria-valuenow="{{pageSize}}" role="slider" (change)="resetCatalog()" />
+
+            <!-- enable auto-scroll -->
+            <div class="usa-checkbox">
+              <input class="usa-checkbox__input" id="enable-autoscroll" type="checkbox" name="auto-scroll"
+                [checked]="autoScroll" (change)="autoScroll = !autoScroll" />
+              <label class="usa-checkbox__label" for="enable-autoscroll">Auto-scroll when paging</label>
+            </div>
+
+            <!-- style -->
+            <label class="usa-label">Style</label>
+            <ul class="usa-button-group usa-button-group--segmented">
+              <li class="usa-button-group__item">
+                <button type="button" [ngClass]="!classic ? 'usa-button' : 'usa-button usa-button--outline'"
+                  (click)="classic=false;">Show more</button>
+              </li>
+              <li class="usa-button-group__item">
+                <button type="button" [ngClass]="classic ? 'usa-button' : 'usa-button usa-button--outline'"
+                  (click)="classic=true;">Classic</button>
+              </li>
+            </ul>
+          </form>
+
+        </div>
+      </div>
+    </div>
+
+    <h2 id="info">About this pattern</h2>
 
     <div class="features">
 
@@ -152,10 +201,11 @@ <h4>What we changed:</h4>
             href="https://web.dev/patterns/layout/aspect-ratio-image-card/">fixed aspect ratio</a> to ensure a
           consistent size.</li>
         <li>Card title and summary sections are fixed to 2 and 3 lines to ensure a consistent size. We limited the max
-          allowable raw text, so overflow is rare. Ellipses indicate overflows ...</li>
+          allowable raw text, so overflow is rare. Ellipses ... indicate overflows.</li>
         <li>Full card is clickable to maximize the click/touch target (we also removed the button).</li>
         <li>A hover shadow effect provides a haptic response to emphasize clickability.</li>
         <li>Images ease in on load to reduce the visual "pop" that occurs on late arrival.</li>
+        <li>Lazy load images so only nearby images download and render.</li>
       </ul>
 
       <h3>Pagination</h3>
@@ -171,17 +221,16 @@ <h4>What we changed:</h4>
       <ul class="usa-list">
         <li><strong>See more</strong> and <strong>Show all</strong> pagination adds next page(s) cards
           to the collection.</li>
-        <li>Lazy load images so only nearby images download and render.</li>
         <li>Optionally, auto-scroll to reposition page to new cards.</li>
       </ul>
 
       <h4>Use caution with large catalogs:</h4>
 
       <ul class="usa-list">
         <li><strong>Show all</strong> should not be used with large catalogs that impact page performance.</li>
-        <li>For large data collections, offload initial cards that exceed a max limit with each subsequent <strong>Show
-            more</strong> command. A <strong>See previous</strong> button can be used at the top of your catalog to
-          similarly restore.</li>
+        <li>If you decide to use with a large catalog, offload initial cards that exceed a max limit with each
+          subsequent <strong>Show more</strong>. A <strong>See previous</strong> button can be used at the top
+          of your catalog to similarly restore.</li>
       </ul>
 
     </div>
@@ -200,52 +249,5 @@ <h4>Use caution with large catalogs:</h4>
       </li>
     </ul>
 
-    <!-- page configuration -->
-    <div class="usa-summary-box" role="region" aria-labelledby="summary-box-key-information">
-      <div class="usa-summary-box__body">
-        <h3 class="usa-summary-box__heading" id="summary-box-key-information">
-          Page settings
-        </h3>
-        <div class="usa-summary-box__text">
-
-          <form class="usa-form">
-
-            <!-- total cards -->
-            <label class="usa-label" for="slider-total-cards">Total cards ({{totalCards}})</label>
-            <input id="slider-total-cards" name="total-cards" class="usa-range" type="range" min="6" max="{{maxCards}}"
-              step="6" [(ngModel)]="totalCards" aria-valuemin="6" attr.aria-valuemax="{{maxCards}}"
-              attr.aria-valuenow="{{totalCards}}" role="slider" (change)="changeTotalCards()" />
-
-            <!-- cards per pages -->
-            <label class="usa-label" for="slider-page-cards">Cards per page ({{pageSize}})</label>
-            <input id="slider-page-cards" name="page-cards" class="usa-range" type="range" min="6" max="{{pageMax}}"
-              step="6" [(ngModel)]="pageSize" aria-valuemin="6" attr.aria-valuemax="{{pageMax}}"
-              attr.aria-valuenow="{{pageSize}}" role="slider" (change)="resetCatalog()" />
-
-            <!-- enable auto-scroll -->
-            <div class="usa-checkbox">
-              <input class="usa-checkbox__input" id="enable-autoscroll" type="checkbox" name="auto-scroll"
-                [checked]="autoScroll" (change)="autoScroll = !autoScroll" />
-              <label class="usa-checkbox__label" for="enable-autoscroll">Auto-scroll when paging</label>
-            </div>
-
-            <!-- style -->
-            <label class="usa-label">Style</label>
-            <ul class="usa-button-group usa-button-group--segmented">
-              <li class="usa-button-group__item">
-                <button type="button" [ngClass]="!classic ? 'usa-button' : 'usa-button usa-button--outline'"
-                  (click)="classic=false;">Show more</button>
-              </li>
-              <li class="usa-button-group__item">
-                <button type="button" [ngClass]="classic ? 'usa-button' : 'usa-button usa-button--outline'"
-                  (click)="classic=true;">Classic</button>
-              </li>
-            </ul>
-          </form>
-
-        </div>
-      </div>
-    </div>
-
   </div>
 </section>
diff --git a/src/app/pages/card-catalog/catalog.component.scss b/src/app/pages/card-catalog/catalog.component.scss
@@ -92,6 +92,10 @@
   /* "see more" button groups at bottom of page */
   .usa-button-group {
     @include u-flex("justify-center");
+
+    /* match classic height */
+    margin-top: 1rem;
+    margin-bottom: calc(1rem - 8px);
   }
 
   /* classic pagination */

diff --git a/src/app/pages/card-catalog/catalog.component.ts b/src/app/pages/card-catalog/catalog.component.ts
@@ -115,22 +115,22 @@ export class CatalogComponent implements OnInit {
   }
 
 
-  // PAGINATION SETTINGS
+  // CATALOG SETTINGS
 
   changeTotalCards() {
     // maintain a rational page size
     this.pageMax = Math.min(180, this.totalCards);
     this.pageSize = Math.min(this.pageSize, this.pageMax);
-    this.resetCatalog();
+    this.resetCatalog(true);
   }
 
   updatePageCount() {
     this.pages = Math.ceil(this.totalCards / this.pageSize);
   }
 
-  resetCatalog() {
+  resetCatalog(skipScroll = false) {
     this.cards = [];
     this.updatePageCount();
-    this.showPage(1, false);
+    this.showPage(1, skipScroll);
   }
 }
diff --git a/src/app/pages/card-catalog/catalog.settings.scss b/src/app/pages/card-catalog/catalog.settings.scss
@@ -5,12 +5,22 @@
 @forward "usa-pagination";
 @forward "usa-icon";
 
-// page configuration
+/* page settings */
 .usa-summary-box {
 
-  margin-top: 50px !important;
-  background-color: color($theme-color-base-light);
+  @include u-margin-x(-6);
+  @include u-margin-top(-4);
+  @include u-margin-bottom(7);
+  @include u-padding-x(6);
+  @include u-padding-y(4);
+
+  @include at-media-max("mobile-lg") {
+    @include u-margin(-2);
+  }
+
+  background-color: color($theme-color-base-lighter);
   border: none;
+  border-radius: 1rem;
 
   .usa-summary-box__heading {
     color: unset;
@@ -38,6 +48,11 @@
 
     &::before {
       box-shadow: 0 0 0 1px color($theme-color-base);
+      background-color: color($theme-color-base-lightest);
     }
   }
+
+  .usa-button--outline {
+    background-color: color($theme-color-base-lightest);
+  }
 }