Material Design 3

SubJunk · Sep 7, 2024 · 9ae6dcb · 9ae6dcb
1 parent 92782d2
commit 9ae6dcb
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 107 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -53,10 +53,8 @@
           <ol>
             <li *ngFor="let comic of collection.allCollectionComics; trackBy: trackByItemId">
               <div class="popover"><div>{{comic.series}} #{{comic.issue}}</div></div>
-              <button (click)="toggleExpandComic(comic, true)" mat-button>
-                <img
-                  [src]="'assets/covers/' + comic.image + '.jpg'"
-                >
+              <button (click)="toggleExpandComic(comic, true)">
+                <img [src]="'assets/covers/' + comic.image + '.jpg'">
               </button>
             </li>
           </ol>
@@ -119,26 +117,46 @@
         </span>
         <ol class="pagination" *ngIf="!isMobile">
           <li>
-            <div class="popover previous-collection-title" *ngIf="prevCollectionFirstComic"><div>{{prevCollection.title}}</div></div>
-            <button (click)="toggleExpandComic(prevCollectionFirstComic)" class="button-previous-collection" mat-button [disabled]="!prevCollectionFirstComic">
+            <button
+              (click)="toggleExpandComic(prevCollectionFirstComic)"
+              class="button-previous-collection"
+              mat-mini-fab
+              [disabled]="!prevCollectionFirstComic"
+              matTooltip="{{ prevCollection?.title }}"
+            >
               <mat-icon>arrow_backward</mat-icon>
             </button>
           </li><!--
           --><li>
-            <div class="popover previous-comic-title" *ngIf="prevComic"><div>{{prevComic.series}} #{{prevComic.issue}}</div></div>
-            <button (click)="toggleExpandComic(prevComic)" class="button-previous-comic" mat-button [disabled]="!prevComic">
+            <button
+              (click)="toggleExpandComic(prevComic)"
+              class="button-previous-comic"
+              mat-mini-fab
+              [disabled]="!prevComic"
+              matTooltip="{{prevComic?.series}} #{{prevComic?.issue}}"
+            >
               <mat-icon>chevron_left</mat-icon>
             </button>
           </li><!--
           --><li>
-            <div class="popover next-comic-title" *ngIf="nextComic"><div>{{nextComic.series}} #{{nextComic.issue}}</div></div>
-            <button (click)="toggleExpandComic(nextComic)" class="button-next-comic" mat-button [disabled]="!nextComic">
+            <button
+              (click)="toggleExpandComic(nextComic)"
+              class="button-next-comic"
+              mat-mini-fab
+              [disabled]="!nextComic"
+              matTooltip="{{nextComic?.series}} #{{nextComic?.issue}}"
+            >
               <mat-icon>chevron_right</mat-icon>
             </button>
           </li><!--
           --><li>
-            <div class="popover next-collection-title" *ngIf="nextCollectionFirstComic"><div>{{nextCollection.title}}</div></div>
-            <button (click)="toggleExpandComic(nextCollectionFirstComic)" class="button-next-collection" mat-button [disabled]="!nextCollectionFirstComic">
+            <button
+              (click)="toggleExpandComic(nextCollectionFirstComic)"
+              class="button-next-collection"
+              mat-mini-fab
+              [disabled]="!nextCollectionFirstComic"
+              matTooltip="{{nextCollection?.title}}"
+            >
               <mat-icon>arrow_forward</mat-icon>
             </button>
           </li>
@@ -166,7 +184,7 @@
           <ol>
             <li *ngFor="let collectionComic of expandedComic.collection.allCollectionComics; trackBy: trackByItemId">
               <div class="popover"><div>{{collectionComic.series}} #{{collectionComic.issue}}</div></div>
-              <button (click)="toggleExpandComic(collectionComic)" mat-button>
+              <button (click)="toggleExpandComic(collectionComic)">
                 <img
                   [ngClass]="{current: collectionComic.id === expandedComicId}"
                   [src]="'assets/covers/' + collectionComic.image + '.jpg'"
@@ -182,7 +200,7 @@
           <ol>
             <li *ngFor="let collectionComic of expandedComic.collection.allCollectionComics; trackBy: trackByItemId">
               <div class="popover"><div>{{collectionComic.series}} #{{collectionComic.issue}}</div></div>
-              <button (click)="toggleExpandComic(collectionComic)" mat-button>
+              <button (click)="toggleExpandComic(collectionComic)">
                 <img
                   [ngClass]="{current: collectionComic.id === expandedComicId}"
                   [src]="'assets/covers/' + collectionComic.image + '.jpg'"
@@ -194,38 +212,66 @@
       </div>
       <ol class="pagination mobile" *ngIf="isMobile">
         <li>
-          <div class="popover open-marvel-unlimited"><div>Open in Marvel Unlimited</div></div>
-          <button (click)="openMarvelUnlimited(expandedComic.link)" class="button-open-marvel-unlimited" mat-button [disabled]="!expandedComic.link">
+          <button
+            (click)="openMarvelUnlimited(expandedComic.link)"
+            class="button-open-marvel-unlimited"
+            mat-mini-fab
+            [disabled]="!expandedComic.link"
+            matTooltip="Open in Marvel Unlimited"
+          >
             <mat-icon>library_books</mat-icon>
           </button>
         </li><!--
         --><li>
-          <div class="popover previous-collection-title" *ngIf="prevCollectionFirstComic"><div>{{prevCollection.title}}</div></div>
-          <button (click)="toggleExpandComic(prevCollectionFirstComic)" class="button-previous-collection" mat-button [disabled]="!prevCollectionFirstComic">
+          <button
+            (click)="toggleExpandComic(prevCollectionFirstComic)"
+            class="button-previous-collection"
+            mat-mini-fab
+            [disabled]="!prevCollectionFirstComic"
+            matTooltip="{{ prevCollection?.title }}"
+          >
             <mat-icon>arrow_backward</mat-icon>
           </button>
         </li><!--
         --><li>
-          <div class="popover previous-comic-title" *ngIf="prevComic"><div>{{prevComic.series}} #{{prevComic.issue}}</div></div>
-          <button (click)="toggleExpandComic(prevComic)" class="button-previous-comic" mat-button [disabled]="!prevComic">
+          <button
+            (click)="toggleExpandComic(prevComic)"
+            class="button-previous-comic"
+            mat-mini-fab
+            [disabled]="!prevComic"
+            matTooltip="{{prevComic?.series}} #{{prevComic?.issue}}"
+          >
             <mat-icon>chevron_left</mat-icon>
           </button>
         </li><!--
         --><li>
-          <div class="popover next-comic-title" *ngIf="nextComic"><div>{{nextComic.series}} #{{nextComic.issue}}</div></div>
-          <button (click)="toggleExpandComic(nextComic)" class="button-next-comic" mat-button [disabled]="!nextComic">
+          <button
+            (click)="toggleExpandComic(nextComic)"
+            class="button-next-comic"
+            mat-mini-fab
+            [disabled]="!nextComic"
+            matTooltip="{{nextComic?.series}} #{{nextComic?.issue}}"
+          >
             <mat-icon>chevron_right</mat-icon>
           </button>
         </li><!--
         --><li>
-          <div class="popover next-collection-title" *ngIf="nextCollectionFirstComic"><div>{{nextCollection.title}}</div></div>
-          <button (click)="toggleExpandComic(nextCollectionFirstComic)" class="button-next-collection" mat-button [disabled]="!nextCollectionFirstComic">
+          <button
+            (click)="toggleExpandComic(nextCollectionFirstComic)"
+            class="button-next-collection"
+            mat-mini-fab
+            [disabled]="!nextCollectionFirstComic"
+            matTooltip="{{nextCollection?.title}}"
+          >
             <mat-icon>arrow_forward</mat-icon>
           </button>
         </li><!--
         --><li>
-          <button (click)="toggleExpandComic()" mat-button>
-            <div class="popover"><div>Close this panel</div></div>
+          <button
+            (click)="toggleExpandComic()"
+            mat-mini-fab
+            matTooltip="Close this panel"
+          >
             <mat-icon>close</mat-icon>
           </button>
         </li>

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
+import { MatTooltip } from '@angular/material/tooltip';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -30,5 +31,8 @@ import { ApiInteractions } from './api-interactions';
         MatButtonModule,
         MatDialogModule,
         MatIconModule,
-        MatMenuModule], providers: [ApiInteractions, provideHttpClient(withInterceptorsFromDi())] })
+        MatMenuModule,
+        MatTooltip,
+    ],
+    providers: [ApiInteractions, provideHttpClient(withInterceptorsFromDi())] })
 export class AppModule { }
diff --git a/src/index.html b/src/index.html
@@ -7,11 +7,13 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   </head>
   <body>
     <app-root></app-root>
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
     <!-- Matomo -->
     <script type="text/javascript">
       if (/\bHeadlessChrome\//.test(navigator.userAgent) !== true) {

diff --git a/src/styles.less b/src/styles.less
@@ -1,14 +1,14 @@
 /* You can add global styles to this file, and also import other style files */
 
 @import '~normalize.css';
-@import '@angular/material/prebuilt-themes/pink-bluegrey.css';
+@import '@angular/material/prebuilt-themes/azure-blue.css';
 
 :root {
   --month-width: 55px;
   --expanded-width: 900px;
   --expanded-width-panel-left: 200px;
   --cover-aspect-ratio: 1.55;
-  --expanded-cover-height: 310px;
+  --expanded-cover-height: 324px;
   --collection-cover-height: 250px;
   --collection-thumbnails-height: 97px;
   --initial-body-width: 4000px;
@@ -210,6 +210,10 @@ li:hover,
   width: calc(var(--collection-cover-height) / var(--cover-aspect-ratio));
   transition: width 0.4s;
   margin-right: 10px;
+
+  .pagination {
+    display: none;
+  }
 }
 
 @media (min-width: 769px) {
@@ -231,6 +235,24 @@ li:hover,
 
 .comic-container,
 .collection-container {
+  &.expanded {
+    .pagination {
+      list-style: none;
+      justify-content: space-around;
+      margin: 3px 0 10px 0;
+      display: flex;
+    }
+
+    @media (max-width: 768px) {
+      .pagination {
+        margin: 10px 0;
+      }
+    }
+
+    .pagination li {
+      display: table-cell;
+    }
+  }
   .marvel-unlimited-link,
   .right-aligned-button {
     float: right;
@@ -287,6 +309,13 @@ a.disabled {
   border: 3px #1A1C1C solid;
 }
 
+.collection-comics li button {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+
 .cover-thumbnail {
   display: block;
 }
@@ -477,9 +506,10 @@ button.cover-thumbnail {
 @media (min-width: 769px) {
   .expanded-panel {
     left: 0;
-    width: calc(var(--expanded-width) * 0.75);
+    width: calc(var(--expanded-width) * 0.745);
     background: inherit;
     margin-top: 10px;
+    margin-left: 5px;
   }
 }
 .collection-container,
@@ -494,7 +524,7 @@ button.cover-thumbnail {
   .expanded .expanded-panel.bottom {
     display: block;
     overflow-y: scroll;
-    height: calc(100% - 369px);
+    height: calc(100% - 397px);
   }
 }
 
@@ -610,81 +640,6 @@ button.cover-thumbnail {
   100% { transform: rotate(140deg); }
 }
 
-/**
- * Override Bootstrap styles
- */
-.pagination {
-  display: none;
-  cursor: default;
-  @media (min-width: 769px) {
-    margin: 0 0 8px calc(var(--month-width) * 0.05);
-    width: var(--expanded-width-panel-left);
-  }
-  @media (max-width: 768px) {
-    background-color: rgba(0, 0, 0, 0.5);
-    padding: 5px 0;
-    margin: 0;
-    position: absolute;
-    width: 100vw;
-    bottom: 0;
-  }
-}
-
-.pagination > li {
-  overflow: visible;
-  display: table-cell;
-  position: relative;
-}
-
-.pagination > li > a,
-.pagination > li > a:hover {
-  background-color: unset;
-  border: none;
-  width: 47px;
-  color: unset;
-}
-
-.pagination > li > a:hover {
-  color: #000;
-}
-
-.expanded .pagination {
-  display: table;
-}
-
-.tooltip.show {
-  opacity: 1;
-}
-
-.tooltip.show .arrow::before {
-  border-bottom-color: #222;
-}
-
-.selected {
-  color: #080 !important;
-}
-
 .unselected {
   display: none !important;
 }
-
-/**
- * Override Angular Material
- */
-
-.collection-comics ol button {
-  min-height: unset;
-  padding: unset;
-  height: 101px !important;
-}
-
-.pagination button {
-  @media (min-width: 769px) {
-    min-width: unset;
-  }
-  @media (max-width: 768px) {
-    width: 100%;
-    display: table-cell;
-  }
-  padding: 0 13px;
-}