Skip to content

Commit

Permalink
Changes:
Browse files Browse the repository at this point in the history
- 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
  • Loading branch information
SubJunk committed Sep 9, 2024
1 parent 9ae6dcb commit f40fc83
Show file tree
Hide file tree
Showing 7 changed files with 234 additions and 75 deletions.
10 changes: 7 additions & 3 deletions angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "less"
"style": "scss"
}
},
"root": "",
Expand All @@ -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",
Expand All @@ -27,7 +28,8 @@
"src/assets"
],
"styles": [
"src/styles.less"
"src/m3-theme.scss",
"src/styles.scss"
],
"scripts": [],
"allowedCommonJsDependencies": [
Expand Down Expand Up @@ -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",
Expand All @@ -103,7 +106,8 @@
"src/assets"
],
"styles": [
"src/styles.less"
"src/m3-theme.scss",
"src/styles.scss"
],
"scripts": []
}
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
"@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",
Expand Down
51 changes: 30 additions & 21 deletions src/app/app.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -29,31 +29,47 @@
</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)">
<button
(click)="toggleExpandComic(comic, true)"
matTooltip="{{comic.series}} #{{comic.issue}}"
>
<img [src]="'assets/covers/' + comic.image + '.jpg'">
</button>
</li>
Expand Down Expand Up @@ -88,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'"
Expand Down Expand Up @@ -163,15 +178,11 @@
</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">
Expand All @@ -182,8 +193,7 @@
<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>
<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}"
Expand All @@ -198,8 +208,7 @@
<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>
<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}"
Expand Down
2 changes: 1 addition & 1 deletion src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<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>
<body class="mat-app-background">
<app-root></app-root>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<!-- Matomo -->
Expand Down
151 changes: 151 additions & 0 deletions src/m3-theme.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
// This file was generated by running 'ng generate @angular/material:m3-theme'.
// Proceed with caution if making changes to this file.

@use 'sass:map';
@use '@angular/material' as mat;

// Note: Color palettes are generated from primary: #e62429
$_palettes: (
primary: (
0: #000000,
10: #410003,
20: #690007,
25: #7d000a,
30: #93000e,
35: #a90012,
40: #c00016,
50: #e72529,
60: #ff544c,
70: #ff897f,
80: #ffb4ac,
90: #ffdad6,
95: #ffedea,
98: #fff8f7,
99: #fffbff,
100: #ffffff,
),
secondary: (
0: #000000,
10: #410003,
20: #680007,
25: #790f11,
30: #891c1b,
35: #9a2825,
40: #aa342f,
50: #cb4d45,
60: #ed655c,
70: #ff897f,
80: #ffb4ac,
90: #ffdad6,
95: #ffedea,
98: #fff8f7,
99: #fffbff,
100: #ffffff,
),
tertiary: (
0: #000000,
10: #2c1600,
20: #492900,
25: #593200,
30: #683c00,
35: #794700,
40: #895100,
50: #ac6701,
60: #cb8022,
70: #ea9a3c,
80: #ffb86d,
90: #ffdcbd,
95: #ffeee0,
98: #fff8f4,
99: #fffbff,
100: #ffffff,
),
neutral: (
0: #000000,
10: #291715,
20: #402b29,
25: #4c3634,
30: #58413f,
35: #644d4a,
40: #715856,
50: #8b716e,
60: #a78a87,
70: #c2a4a1,
80: #dfbfbc,
90: #fcdbd7,
95: #ffedea,
98: hsl(216, 8%, 80%), // customised for background color
99: #fffbff,
100: #ffffff,
4: #190a08,
6: hsl(216, 8%, 25%), // customised for background color
12: #2d1b19,
17: #392523,
22: #44302d,
24: #493432,
87: #f4d3cf,
92: #ffe2de,
94: #ffe9e6,
96: #fff0ef,
),
neutral-variant: (
0: #000000,
10: #2c1513,
20: #442927,
25: #503431,
30: #5d3f3c,
35: #6a4b47,
40: #775653,
50: #926f6b,
60: #ad8884,
70: #caa29e,
80: #e7bdb8,
90: #ffdad6,
95: #ffedea,
98: #fff8f7,
99: #fffbff,
100: #ffffff,
),
error: (
0: #000000,
10: #410002,
20: #690005,
25: #7e0007,
30: #93000a,
35: #a80710,
40: #ba1a1a,
50: #de3730,
60: #ff5449,
70: #ff897d,
80: #ffb4ab,
90: #ffdad6,
95: #ffedea,
98: #fff8f7,
99: #fffbff,
100: #ffffff,
),
);

$_rest: (
secondary: map.get($_palettes, secondary),
neutral: map.get($_palettes, neutral),
neutral-variant: map.get($_palettes, neutral-variant),
error: map.get($_palettes, error),
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);

$light-theme: mat.define-theme((
color: (
theme-type: light,
primary: $_primary,
tertiary: $_tertiary,
),
));
$dark-theme: mat.define-theme((
color: (
theme-type: dark,
primary: $_primary,
tertiary: $_tertiary,
),
));
Loading

0 comments on commit f40fc83

Please sign in to comment.