ng18 (#1263)

* Update yarn * temp * temp 2 * ng update @angular/material@18 * ng update @angular/material@18 * Specify Node 20 * Update other deps * Set Node version with nvmrc * Material Design 3 * Changes: - Refactored tooltips from custom impl to AM, removed custom impl - Use system preference dark/light mode - Generated and added AM theme instead of using a default one - Customised some colors to get nicer background colors - Use SASS instead of LESS
SubJunk · Sep 12, 2024 · a10afa2 · a10afa2
1 parent 76ddba0
commit a10afa2
Show file tree

Hide file tree

Showing 12 changed files with 3,762 additions and 4,055 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v20.17.0
diff --git a/.yarn/releases/yarn-4.3.1.cjs b/.yarn/releases/yarn-4.3.1.cjs
diff --git a/.yarn/releases/yarn-4.4.1.cjs b/.yarn/releases/yarn-4.4.1.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -4,4 +4,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.3.1.cjs
+yarnPath: .yarn/releases/yarn-4.4.1.cjs
diff --git a/angular.json b/angular.json
@@ -7,7 +7,7 @@
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
-          "style": "less"
+          "style": "scss"
         }
       },
       "root": "",
@@ -19,6 +19,7 @@
           "options": {
             "outputPath": "dist/timeline-tools",
             "index": "src/index.html",
+            "inlineStyleLanguage": "scss",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
@@ -27,7 +28,8 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.less"
+              "src/m3-theme.scss",
+              "src/styles.scss"
             ],
             "scripts": [],
             "allowedCommonJsDependencies": [
@@ -94,6 +96,7 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
+            "inlineStyleLanguage": "scss",
             "main": "src/test.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
@@ -103,7 +106,8 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.less"
+              "src/m3-theme.scss",
+              "src/styles.scss"
             ],
             "scripts": []
           }

diff --git a/package.json b/package.json
@@ -1,11 +1,13 @@
 {
   "name": "timeline-tools",
   "version": "0.0.0",
+  "engines": {
+    "node": "20"
+  },
+  "packageManager": "[email protected]",
   "scripts": {
     "dev": "ng serve -o",
     "ng": "ng",
-    "heroku-prebuild": "npm install -g @angular/cli http-server",
-    "heroku-postbuild": "ng build --configuration production && cp dist/timeline-tools/* .",
     "serve": "ng serve",
     "start": "http-server",
     "startprod": "ng serve -o --configuration production",
@@ -24,16 +26,16 @@
     }
   },
   "dependencies": {
-    "@angular/animations": "17.3.11",
-    "@angular/cdk": "^17.0.5",
-    "@angular/common": "17.3.11",
-    "@angular/compiler": "17.3.11",
-    "@angular/core": "17.3.11",
-    "@angular/forms": "17.3.11",
-    "@angular/material": "^17.0.5",
-    "@angular/platform-browser": "17.3.11",
-    "@angular/platform-browser-dynamic": "17.3.11",
-    "@angular/router": "17.3.11",
+    "@angular/animations": "18.2.3",
+    "@angular/cdk": "^18.2.3",
+    "@angular/common": "18.2.3",
+    "@angular/compiler": "18.2.3",
+    "@angular/core": "18.2.3",
+    "@angular/forms": "18.2.3",
+    "@angular/material": "^18.2.3",
+    "@angular/platform-browser": "18.2.3",
+    "@angular/platform-browser-dynamic": "18.2.3",
+    "@angular/router": "18.2.3",
     "lodash-es": "4.17.21",
     "moment": "2.30.1",
     "normalize.css": "8.0.1",
@@ -42,17 +44,18 @@
     "timers": "0.1.1",
     "ts-md5": "1.3.1",
     "tslib": "2.6.3",
-    "zone.js": "^0.14.3"
+    "zone.js": "^0.14.10"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.10",
-    "@angular-eslint/builder": "17.5.2",
-    "@angular-eslint/eslint-plugin": "17.5.2",
-    "@angular-eslint/eslint-plugin-template": "17.5.2",
-    "@angular-eslint/template-parser": "17.5.2",
-    "@angular/cli": "17.3.8",
-    "@angular/compiler-cli": "17.3.11",
-    "@angular/language-service": "17.3.11",
+    "@angular-devkit/build-angular": "^18.2.3",
+    "@angular-eslint/builder": "^18.3.0",
+    "@angular-eslint/eslint-plugin": "^18.3.0",
+    "@angular-eslint/eslint-plugin-template": "^18.3.0",
+    "@angular-eslint/schematics": "^18.3.0",
+    "@angular-eslint/template-parser": "^18.3.0",
+    "@angular/cli": "^18.2.3",
+    "@angular/compiler-cli": "18.2.3",
+    "@angular/language-service": "18.2.3",
     "@playwright/test": "1.45.1",
     "@types/jasmine": "5.1.4",
     "@types/jquery": "3.5.30",
@@ -73,6 +76,5 @@
     "ts-node": "10.9.2",
     "tsconfig-paths": "4.2.0",
     "typescript": "5.4.5"
-  },
-  "packageManager": "[email protected]"
+  }
 }
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -29,34 +29,48 @@
         </button>
         <ol class="pagination">
           <li>
-            <div class="popover over previous-collection-title" *ngIf="uniqueCollections[i - 1]"><div>{{uniqueCollections[i - 1].title}}</div></div>
-            <button (click)="toggleExpandCollection(uniqueCollections[i - 1])" class="button-previous-collection" mat-button [disabled]="!uniqueCollections[i - 1]">
+            <button
+              (click)="toggleExpandCollection(uniqueCollections[i - 1])"
+              class="button-previous-collection"
+              mat-button
+              [disabled]="!uniqueCollections[i - 1]"
+              matTooltip="{{uniqueCollections[i - 1]?.title}}"
+            >
               <mat-icon>arrow_backward</mat-icon>
             </button>
           </li><!--
           --><li>
-            <div class="popover over next-collection-title" *ngIf="uniqueCollections[i + 1]"><div>{{uniqueCollections[i + 1].title}}</div></div>
-            <button (click)="toggleExpandCollection(uniqueCollections[i + 1])" class="button-next-collection" mat-button [disabled]="!uniqueCollections[i + 1]">
+            <button
+              (click)="toggleExpandCollection(uniqueCollections[i + 1])"
+              class="button-next-collection"
+              mat-button
+              [disabled]="!uniqueCollections[i + 1]"
+              matTooltip="{{uniqueCollections[i + 1]?.title}}"
+            >
               <mat-icon>arrow_forward</mat-icon>
             </button>
           </li>
         </ol>
       </div>
       <div class="expanded-panel" *ngIf="collection.id === expandedCollectionId">
-        <button (click)="toggleExpandCollection()" class="right-aligned-button" mat-mini-fab>
-          <div class="popover"><div>Close this panel</div></div>
+        <button
+          (click)="toggleExpandCollection()"
+          class="right-aligned-button"
+          mat-mini-fab
+          matTooltip="Close this panel"
+        >
           <mat-icon>close</mat-icon>
         </button>
         <div class="title">{{collection.title}}</div>
         <div class="date">{{collection.yearPublished}} / {{collection.monthPublished}}</div>
         <div class="collection-comics">
           <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)"
+                matTooltip="{{comic.series}} #{{comic.issue}}"
+              >
+                <img [src]="'assets/covers/' + comic.image + '.jpg'">
               </button>
             </li>
           </ol>
@@ -90,10 +104,9 @@
 <ol class="comics-container">
   <li *ngFor="let comic of (isShowReadingOrder ? comicsInReadingOrder : comics); trackBy: trackByItemId" class="comic-container" [ngStyle]="comic.containerStyles">
     <div class="scroll-anchor" id="scroll-anchor-{{comic.idSanitized}}"></div>
-    <div class="popover"><div>#{{comic.issue}}</div></div>
     <div class="comic" [ngStyle]="comic.styles" [ngClass]="getComicClasses(comic)">
       <div class="panel-left">
-        <button (click)="toggleExpandComic(comic)" class="cover-thumbnail" id="expand-{{comic.idSanitized}}">
+        <button (click)="toggleExpandComic(comic)" class="cover-thumbnail" id="expand-{{comic.idSanitized}}" matTooltip="#{{comic.issue}}">
           <img
             *ngIf="comic.visible"
             [src]="'assets/covers/' + comic.image + '.jpg'"
@@ -119,41 +132,57 @@
         </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>
         </ol>
       </div>
       <div class="expanded-panel">
-        <button *ngIf="!isMobile" (click)="toggleExpandComic()" class="right-aligned-button" mat-mini-fab>
-          <div class="popover"><div>Close this panel</div></div>
+        <button *ngIf="!isMobile" (click)="toggleExpandComic()" class="right-aligned-button" mat-mini-fab matTooltip="Close this panel">
           <mat-icon>close</mat-icon>
         </button>
-        <a *ngIf="!isMobile" [ngClass]="{disabled: !expandedComic.link}" class="marvel-unlimited-link" [href]="expandedComic.link">
-          <div class="popover"><div>Open in Marvel Unlimited</div></div>
-        </a>
-        <button *ngIf="!isMobile" (click)="scrollToComic(expandedComic.id)" class="right-aligned-button" mat-mini-fab>
-          <div class="popover"><div>Scroll to this comic</div></div>
+        <a *ngIf="!isMobile" [ngClass]="{disabled: !expandedComic.link}" class="marvel-unlimited-link" [href]="expandedComic.link" matTooltip="Open in Marvel Unlimited"></a>
+        <button *ngIf="!isMobile" (click)="scrollToComic(expandedComic.id)" class="right-aligned-button" mat-mini-fab matTooltip="Scroll to this comic">
           <mat-icon>near_me</mat-icon>
         </button>
         <div class="series">
@@ -164,9 +193,8 @@
         <div class="collection-comics" *ngIf="!isMobile">
           <div class="collection-title">{{expandedComic.collection.title}}:</div>
           <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>
+            <li *ngFor="let collectionComic of expandedComic.collection.allCollectionComics; trackBy: trackByItemId" matTooltip="{{collectionComic.series}} #{{collectionComic.issue}}">
+              <button (click)="toggleExpandComic(collectionComic)">
                 <img
                   [ngClass]="{current: collectionComic.id === expandedComicId}"
                   [src]="'assets/covers/' + collectionComic.image + '.jpg'"
@@ -180,9 +208,8 @@
         <div class="collection-comics">
           <div class="collection-title">{{expandedComic.collection.title}}:</div>
           <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>
+            <li *ngFor="let collectionComic of expandedComic.collection.allCollectionComics; trackBy: trackByItemId" matTooltip="{{collectionComic.series}} #{{collectionComic.issue}}">
+              <button (click)="toggleExpandComic(collectionComic)">
                 <img
                   [ngClass]="{current: collectionComic.id === expandedComicId}"
                   [src]="'assets/covers/' + collectionComic.image + '.jpg'"
@@ -194,38 +221,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>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,4 +4,4 @@ enableGlobalCache: false

		nodeLinker: node-modules

		yarnPath: .yarn/releases/yarn-4.3.1.cjs
		yarnPath: .yarn/releases/yarn-4.4.1.cjs