Custom Theme Support (#1077)

* Started the migration to bootstrap 5. Introduced a breakpoint system that bootstrap reflects for our screens.

* sr only migrated

* mr/ml -> me/ms

* pl/pr -> ps/pe

* btn-block

* removed input-group-append

* Added form-label to all labels

* Added some style overrides for inputs

* Replaced form-group with mb-3

* Ignore journal files

* Update media to d-flex/flex-grow-1

* Fixed reading list detail page

* For develop builds, don't inline critical styles

* Fixed some downstream security issues

* Fixed a layout issue in series detail

* Fixed issue with btn-light not having background color. Updated layout for series detail metadata

* Cleaned up nav search

* Laid out the organization for custom theme components. Update _inputs.scss with variable overrides and depending on theme, it will just work.

* Lots of theming work

* Added inputs to the theme page

* Login and input placeholder changes

- Fixed login screen centering issue on all devices
- Changed the format of the login screen
- Change the input placeholder color

* Added checkbox styles

* Refactored tagbadges and removed some ngdeep selectors

* Added nav bar component and refactored some styles into event widget

* Cleaned nav events again and made dedicated popover body

* Finished pagination component

* Fixed up some styles with buttons

* refactored dropdown component

* Update accordion component

* Refactored breadcrumbs and rating star. Fixed a missing style for cards

* Fixed some styling issues on person badge, added modal component, and some global styles

* Finished moving everything within dark to component files

* Fixed up filter buttons, move card styles into a component theme, fixed slider style

* Refactored library card and grouped typeahead

* Updated normal typeahead component and reduced amount of ngdeep selector

* Refactored grid breakpoints to be available by css variable, but it's hardcoded into the app

* Ensure breakpoints are defined per theme

* Fixed up some styling overrides and customization for nav links and alt button

* Removed some deep styles, moved css out of splash container and brough back labels for login page

* Finished css variable refactor

* Refactored all the theme variable definitions into files for each theme.

* Added back bootstrap overrides

* Added a note about bootstrap theme colors being not-possible to swap out at runtime

* Cleaned up some dead code

* Implemented the ability to set a custom theme on the site. Cleaned up misc code throughout.

* Additional changes

- Fixed nav where "kavita" was not hiding correctly on small viewports
- Fixed search bar to make the behavior more consistent
- Fixed accordion buttons
- Changed accordion buttons to be more responsive
- Added radio button colors
- Fixed radios on theme test page
- Changed login and reset password card layouts to be more consistent.
- Added primary color shade for when darker shading is needed.

* Built a basic site, allow the user to apply different themes, refactored nav service code out.

* Implemented the ability update a user's theme

* Added unit tests for Scan and Get Content in SiteThemeService.

* Fixed a bug in the login code and Pref code which wasn't joining on SiteTheme table. Wrote Unit tests and the UI component to manage current theme.

* Implemented scan so that it manages custom themes with unit tests

* Component updates

- Repositioning style ordering
- Adding indicator override
- Adding select styles

* SignlaR integration, some fixes when creating custom entities, one single migration. Just login functionality left.

* More ui updated

- Added .no-hover to prevent hover on elements where not needed
- Changed all selects I could find to appropriate class
- Changed up nav tabs to work more like bootstrap tabs than pills
- Added padding to top of some containers to make styles consistent
- Added ability to change navbar fontawesome icon colors
- removed some unecessary inline styling
- Changed radio button to appropriate class
- Toned down primate color, a bit too bright for dark theme.
- Added ability to change button fontawesome icon color

* nav-tab fix for series-detail

* Added themes folder to gitignore

* Adding card overlay

* Fixing up light theme

* Everything is done. Only bug is that color-scheme isn't being set properly from css variable.

* Checkboxes have pointer by default. Confirm/Confirm email use default (dark) theme by default

* Fixed an error where color-scheme wasn't reflecting correctly on themes on first load

* Fixed user preferences not available on login

* Changing dual radios to switches and color tweaks

* disabled primary APCA fix

* button APCA fixes

* Fixed some timing issues with first load and image service

* Fixed swiper issues from upgrade

* Changed themes to be scss files again and adjusted Seed code

* Migrated carousel to css variables. Fixed a broken animation for search.

* Cleaned up some backend smells

* Fixed white border outline on nav tabs, added some variables for header

* Nav bar has been css variable-ified

* Added some basic eink stuff to make the app useable

Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>

UI/Web/src/app/carousel/carousel-reel/carousel-reel.component.html

@@ -1,9 +1,9 @@
 <div class="carousel-container" *ngIf="items.length > 0">
     <div>
         <h2 style="display: inline-block;"><a href="javascript:void(0)" (click)="sectionClicked($event)" class="section-title">{{title}}</a></h2>
-        <div class="float-right">
-            <button class="btn btn-icon" [disabled]="isBeginning" (click)="prevPage()"><i class="fa fa-angle-left" aria-hidden="true"></i><span class="sr-only">Previous Items</span></button>
-            <button class="btn btn-icon" [disabled]="isEnd" (click)="nextPage()"><i class="fa fa-angle-right" aria-hidden="true"></i><span class="sr-only">Next Items</span></button>
+        <div class="float-end">
+            <button class="btn btn-icon" [disabled]="isBeginning" (click)="prevPage()"><i class="fa fa-angle-left" aria-hidden="true"></i><span class="visually-hidden">Previous Items</span></button>
+            <button class="btn btn-icon" [disabled]="isEnd" (click)="nextPage()"><i class="fa fa-angle-right" aria-hidden="true"></i><span class="visually-hidden">Next Items</span></button>
         </div>
     </div>
     <div>

UI/Web/src/app/carousel/carousel-reel/carousel-reel.component.scss

@@ -8,41 +8,20 @@
     flex-direction: column;
 }
 
-.section-title {
-    font-size: 1.6rem;
-    font-weight: 400;
-    margin-left: 10px;
-    color: black;
-
-    :hover {
-        text-decoration: underline;
-    }
-
-    :active {
-        text-decoration: underline;
-    }
-
-    :focus {
-        text-decoration: underline;
-    }
-}
-
-::ng-deep .bg-light {
+.carousel-container {
     .section-title {
-        color: black !important;
-    }
-    
-}
-// These are needed due to nested css within another component
-::ng-deep .bg-dark {
-    .section-title {
-        color: #efefef !important;
+        font-size: 1.6rem;
+        font-weight: 400;
+        margin-left: 10px;
+        color: var(--carousel-header-text-color);
+        text-decoration: var(--carousel-header-text-decoration);
+
+        &:hover, &:focus, &:active {
+            text-decoration: var(--carousel-hover-header-text-decoration);
+        }
     }
 }
-
-::ng-deep .swiper-slide {
-    width: auto !important;
-}
+
 
 ::ng-deep .swiper-slide {
     width: auto !important;

UI/Web/src/app/carousel/carousel-reel/carousel-reel.component.ts

@@ -1,7 +1,6 @@
 import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
 import { SwiperComponent } from 'swiper/angular';
-//import Swiper from 'swiper';
-//import { SwiperEvents, Swiper } from 'swiper/types';
+import { Swiper, SwiperEvents } from 'swiper/types';
 
 @Component({
   selector: 'app-carousel-reel',
@@ -15,18 +14,17 @@ export class CarouselReelComponent implements OnInit {
   @Input() title = '';
   @Output() sectionClick = new EventEmitter<string>();
 
-  @ViewChild('swiper', { static: false }) swiper?: SwiperComponent;
+  swiper: Swiper | undefined;
 
 
-  //swiper!: Swiper;
   trackByIdentity: (index: number, item: any) => string;
 
   get isEnd() {
-    return this.swiper?.swiperRef.isEnd;
+    return this.swiper?.isEnd;
   }
 
   get isBeginning() {
-    return this.swiper?.swiperRef.isBeginning;
+    return this.swiper?.isBeginning;
   }
 
   constructor() { 
@@ -36,14 +34,16 @@ export class CarouselReelComponent implements OnInit {
   ngOnInit(): void {}
 
   nextPage() {
+    if (this.isEnd) return;
     if (this.swiper) {
-      this.swiper.swiperRef.setProgress(this.swiper.swiperRef.progress + 0.25, 600);
+      this.swiper.setProgress(this.swiper.progress + 0.25, 600);
     }
   }
 
   prevPage() {
+    if (this.isBeginning) return;
     if (this.swiper) {
-      this.swiper.swiperRef.setProgress(this.swiper.swiperRef.progress - 0.25, 600);
+      this.swiper.setProgress(this.swiper.progress - 0.25, 600);
     }
   }
 
@@ -51,14 +51,7 @@ export class CarouselReelComponent implements OnInit {
     this.sectionClick.emit(this.title);
   }
 
-  // onSwiper(eventParams: Parameters<SwiperEvents['init']>) {
-  //   console.log('swiper: ', eventParams);
-  //   [this.swiper] = eventParams;
-  // }
-
-  // onSwiper(params: Swiper) {
-  //   // const [swiper] = params;
-  //   // console.log(swiper);
-  //   // return params;
-  // }
+  onSwiper(eventParams: Parameters<SwiperEvents['init']>) {
+    [this.swiper] = eventParams;
+  }
 }