Swipe Issues (#1745)

* Updated theme support to be able to customize the tile color dynamically from a theme via --tile-color. In addition, --theme-color will update apple-mobile-web-app-status-bar-style as well as the non-apple variants

* Removed --manga-reader-bg-color as it wasn't used anywhere. Fixed double pagination on swipe.

* Cleaned up some dead threshold code for swipe.

* Started refactoring tests to use an abstract test class. Stopping because I should do on the .net 7 branch to avoid large merge conflicts. Tests need to be re-designed so they can run in parallel.

* Fixed a bug in reading lists where when deleting an item, order could be miscalculated.

* Started adding new information for stat service. Refactored time spent reading to be more accurate by taking average time against how much of the chapter the user has read.

* Hooked up total time reading at server stat level. Don't show fancy graphs on mobile.

* Added new stats for v0.7

* Added a test for Clearing want to read

* Fixed a few tests that weren't resetting state between runs

* Fixed some broken unit tests

* Ensure all Series queries sort by a case invariant string.

* Added more aggressive caching of images. This will result in a min delay on pages after a cover is changed.

* Fixed a bug where if during new word count calculation, new word count is zero, restoring the old count wasn't working.

* Cleaned up some of the code for getting time estimates

* Fixed a bug where triggering swipe right wasn't working when there was no scroll

* Delete the temp folder for creating a download after a full zip is created.

UI/Web/src/app/statistics/_components/server-stats/server-stats.component.html

@@ -17,16 +17,7 @@
             </div>
             <div class="vr d-none d-lg-block m-2"></div>
         </ng-container>
-    
-        <ng-container>
-            <div class="col-auto mb-2">
-                <app-icon-and-title label="Total Chapters" [clickable]="false" fontClasses="fa-regular fa-file-lines" title="Total Chapters">
-                    {{stats.chapterCount | compactNumber}} Chapters
-                </app-icon-and-title>
-            </div>
-            <div class="vr d-none d-lg-block m-2"></div>
-        </ng-container>
-    
+
         <ng-container>
             <div class="col-auto mb-2">
                 <app-icon-and-title label="Total Files" [clickable]="false" fontClasses="fa-regular fa-file" title="Total Files">
@@ -69,6 +60,15 @@
                     {{stats.totalPeople | compactNumber}} People
                 </app-icon-and-title>
             </div>
+            <div class="vr d-none d-lg-block m-2"></div>
+        </ng-container>
+
+        <ng-container>
+            <div class="col-auto mb-2">
+                <app-icon-and-title label="Total Read Time" [clickable]="false" fontClasses="fas fa-eye" title="Total Read Time">
+                    {{stats.totalReadingTime | compactNumber}} Hours
+                </app-icon-and-title>
+            </div>
         </ng-container>
     </div>
 
@@ -91,28 +91,33 @@
         </div>
     </div>
 
-    <div class="row g-0 pt-2 pb-2 ">
-        <app-top-readers></app-top-readers>
-    </div>
-
-    <div class="row g-0 pt-4 pb-2" style="height: 242px">
-        <div class="col-md-6 col-sm-12">
-            <app-file-breakdown-stats></app-file-breakdown-stats>
+    <ng-container *ngIf="breakpoint$ | async as bp">
+        <div class="row g-0 pt-2 pb-2" *ngIf="bp > Breakpoint.Mobile">
+            <app-top-readers></app-top-readers>
         </div>
-        <div class="col-md-6 col-sm-12">
-            <app-publication-status-stats></app-publication-status-stats>
-        </div>
-    </div>
-    <div class="row g-0 pt-4 pb-2 " style="height: 242px">
-        <div class="col-md-12 col-sm-12 mt-4 pt-2">
-            <app-read-by-day-and [isAdmin]="true"></app-read-by-day-and>
-        </div>
-    </div>
     
-    <div class="row g-0 pt-4 pb-2 " style="height: 242px">
-        <div class="col-md-12 col-sm-12 mt-4 pt-2">
-            <app-day-breakdown></app-day-breakdown>
+        <div class="row g-0 pt-4 pb-2" style="height: 242px"  *ngIf="bp > Breakpoint.Mobile">
+            <div class="col-md-6 col-sm-12">
+                <app-file-breakdown-stats></app-file-breakdown-stats>
+            </div>
+            <div class="col-md-6 col-sm-12">
+                <app-publication-status-stats></app-publication-status-stats>
+            </div>
         </div>
-    </div>
+
+        <div class="row g-0 pt-4 pb-2 " style="height: 242px" *ngIf="bp > Breakpoint.Mobile">
+            <div class="col-md-12 col-sm-12 mt-4 pt-2">
+                <app-read-by-day-and [isAdmin]="true"></app-read-by-day-and>
+            </div>
+        </div>
+        
+        <div class="row g-0 pt-4 pb-2 " style="height: 242px" *ngIf="bp > Breakpoint.Mobile">
+            <div class="col-md-12 col-sm-12 mt-4 pt-2">
+                <app-day-breakdown></app-day-breakdown>
+            </div>
+        </div>
+    </ng-container>
+
+    
     
 </div>