Book Reader Redesign with e-ink focus (#1246)
* Refactored the drawer into offcanvas component. Had to write some hacks to emulate how bootstrap's javascript implementation works as ngBootstrap doesn't have a component yet. * Cleaned up some of the code * Rewrote drawer to align it with the new design * First pass, refactored table of content into it's own component * Refactored all of the settings logic into a separate component. Everything is broken. * More settings on on reactive form * More code cleanup on settings * Misc fixes around the drawer code. Fixed a bug where range sliders were inheriting background color of normal text inputs * Fixed dark mode with book reader. We now clear the theme from the main app so book reader is self-contained. Styles for dark mode are injected into the reading-section. Styles that were previously in scss are now only for the actual menu system. * Cleaned up drawer styling on header * Removed an ngIf statement for click to paginate * Tweaked the accent style to have smaller font size and adjusted style on light mode. Cleaned up some clearTimeout code in a further effort to streamline codebase. * Refactored Dark mode into a basic theme. Currently styles are hardcoded. * Patched book theme in from themes branch * Patched in the backend for Book Theme (not tested yet) * Fixed a bug in seeding code for book themes. Started integration of themes into the reader settings * Everything except managing themes is working. Themes are a bit shakey, having second thoughts if we should have them or not. * Reverted the ability to do custom user book themes. Code is stable with system themes. * Stablize the Styles (#1128) * Fixed a bug where adding multiple series to reading list would throw an error on UI, but it was successful. * When a series has a reading list, we now show the connection on Series detail. * Removed all baseurl code from UI and not-connected component since we no longer use it. * Fixed tag badges not showing a border. Added last read time to the series detail page * Fixed up error interceptor to remove no-connection code * Changed implementation for series detail. Book libraries will never send chapters back. Volume 0 volumes will not be sent in volumes ever. Fixed up more renaming logic on books to send more accurate representations to the UI. * Cleaned up the selected tab and tab display logic * Fixed a bad where statement in reading lists for series * Fixed up tab logic again * Fixed a small margin on search backdrop * Made badge expander button smaller to align with badges * Fixed a few UIs due to .form-group and .form-row being removed * Updated Theme component page to help with style testing * Added more components to theme tester * Cleaned up some styling * Fixed opacity on search item hover * Bump versions by dotnet-bump-version. * Tweaked the accordion styles for light mode * Set dark book theme as default. Refactored resetSettings to be much cleaner * Started the refactor to allow book themes to affect global css variables * Fixed some issues with my css variable declarations * Fixed a close model state update * Lots of work, but dark mode on the book reader is basically done. We have to code the themes much like the site themes * Some black theme enhancements * Started working on column layout in book reader. * Cleaned up the CSS on Reader Settings * Hooked up reading direction * Got column and double column layout working * Implemented some basic virtual paging and hooked in book color theme and layout mode into user preferences. * Migration wrote, can edit page layout and color theme on book reader. Removed book dark mode since no longer needed. Fixed a bug on login/register forms where when input is focused, text is white and not black. * When loading book reader, apply column layout. * Lots of work around 2 column layout, working on images not splitting. Still not working, committing so i can merge develop in and validate code with new manga reader. * Fixed images being split into 2 BUT regression on each page boundary, total reading height is smaller and smaller * Fixed some rendering bugs where toggling column layouts would shrink images on screen constantly. Fixed a bug where bottom bar wouldn't render on column layout in some conditions (this might need to be reworked) * Started progress on progress work * Updated .NET to 6.0.4 * Fixed a bug where DataContextModelSnapshot was being removed on build thus new migrations were broken. * Tweaked the code around progress saving so that we don't loose track of last scroll element on page load * Trying to restore progress, but stuck * Extra merge stuff * Fixed a bug where volumes that are a range fail to generate series detail * No gutters on whole app. Book reader backend now applies the image class automatically at the backend. * Added wiki documentation into invite user flow and register admin user to help users understand email isn't required and they can host their own service. * Removed bottom padding * Refactored the document height to be set and removed on nav service, so the book reader and manga reader aren't broken. * Fixed the height of the action bar to simplify logic and keep the code cleaner. Refactored book service image scoping to be much more streamlined and efficient * Fixed the height of action bar to 62px and adjusted code to use the hardcoded px. (code commented) * Removed commented out code from fixed action bar height * Progress restoration seems to be working * Code cleanup * Ensure the bottom action bar is at the bottom of the viewport on small pages * Fixed book fonts not setting properly and added OpenDyslexic font. * Fixed up some font issues * Updated drawer so all sections are open by default * Switched some LINQ to use MinBy * When navigating between pages and column layout, adjust the shift for the user. * Removed some debug code * Blacklist .qpkg folders and don't scan Recently-Snapshot or recycle folders. * Renamed the scale width to be scoped to kavita to avoid conflicts. * Refactored ngx-sliders out to use normal range instead. Changed up the preferences to separate image and book settinngs into own accordion. * updated user preferences for new migration options (not committed yet) * Removed some debug code * Remove console.logs * Migration committed, let's release this to users. * A lot of crazy code just to ensure that when you close drawer the toggle reflectst that state.
This commit is contained in:
Joseph Milazzo
GitHub
parent
641e0a71e9
commit
2723a6cd10
79 changed files with 3708 additions and 1190 deletions
|
|
@ -4,12 +4,16 @@
|
|||
}
|
||||
|
||||
.accordion-item {
|
||||
background-color: var(--accordion-body-bg-color); //$dark-card-color;
|
||||
background-color: var(--accordion-body-bg-color);
|
||||
color: var(--accordion-body-text-color);
|
||||
border-color: var(--accordion-body-border-color);
|
||||
|
||||
div[role="tabpanel"] {
|
||||
background-color: var(--accordion-header-bg-color);
|
||||
|
||||
.accordion-body {
|
||||
background-color: var(--accordion-active-body-bg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
input, .form-control {
|
||||
input:not([type="range"]), .form-control {
|
||||
background-color: var(--input-bg-color);
|
||||
color: var(--input-text-color);
|
||||
border-color: var(--input-border-color);
|
||||
|
|
@ -23,3 +23,11 @@ input, .form-control {
|
|||
color: var(--input-placeholder-color);
|
||||
}
|
||||
}
|
||||
|
||||
.form-range::-webkit-slider-thumb:active {
|
||||
background-color: var(--input-range-active-color);
|
||||
}
|
||||
|
||||
.form-range::-webkit-slider-thumb {
|
||||
background-color: var(--input-range-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@
|
|||
--toast-info-bg-color: #2F96B4;
|
||||
--toast-warning-bg-color: #F89406;
|
||||
|
||||
/* Checkboxes */
|
||||
/* Checkboxes/Switch */
|
||||
--checkbox-checked-bg-color: var(--primary-color);
|
||||
--checkbox-border-color: var(--input-focused-border-color);
|
||||
--checkbox-focus-border-color: var(--primary-color);
|
||||
|
|
@ -150,14 +150,15 @@
|
|||
|
||||
/* Accordion */
|
||||
--accordion-header-text-color: rgba(74, 198, 148, 0.9);
|
||||
--accordion-header-bg-color: rgba(52, 60, 70, 0.5); /* This is a good accent color */
|
||||
--accordion-body-bg-color: rgba(22,27,34,0.5);
|
||||
--accordion-header-bg-color: rgba(52, 60, 70, 0.5);
|
||||
--accordion-body-bg-color: #292929;
|
||||
--accordion-body-border-color: rgba(239, 239, 239, 0.125);
|
||||
--accordion-body-text-color: var(--body-text-color);
|
||||
--accordion-header-collapsed-text-color: rgba(74, 198, 148, 0.9);
|
||||
--accordion-header-collapsed-bg-color: rgba(22,27,34,0.5);
|
||||
--accordion-header-collapsed-bg-color: #292929;
|
||||
--accordion-button-focus-border-color: unset;
|
||||
--accordion-button-focus-box-shadow: unset;
|
||||
--accordion-active-body-bg-color: #292929;
|
||||
|
||||
/* Breadcrumb */
|
||||
--breadcrumb-bg-color: #292d32;
|
||||
|
|
@ -190,6 +191,8 @@
|
|||
|
||||
/* Slider */
|
||||
--slider-text-color: white;
|
||||
--input-range-color: var(--primary-color);
|
||||
--input-range-active-color: var(--primary-color-darker-shade);
|
||||
|
||||
/* Manga Reader */
|
||||
--manga-reader-overlay-filter: blur(10px);
|
||||
|
|
@ -210,7 +213,9 @@
|
|||
--carousel-hover-header-text-decoration: none;
|
||||
|
||||
/** Drawer */
|
||||
--drawer-background-color: black;
|
||||
--drawer-background-color: black; // TODO: Remove this for bg
|
||||
--drawer-bg-color: #292929;
|
||||
--drawer-text-color: white;
|
||||
|
||||
/** Event Widget */
|
||||
--event-widget-bg-color: rgb(1, 4, 9);
|
||||
|
|
|
|||
|
|
@ -2,12 +2,14 @@
|
|||
--color-scheme: light;
|
||||
--primary-color: black;
|
||||
--primary-color-dark-shade: #3B9E76;
|
||||
--primary-color-darker-shade: #338A67;
|
||||
--primary-color-darkest-shade: #25624A;
|
||||
--error-color: #ff4136;
|
||||
--bs-body-bg: #fff;
|
||||
--bs-body-bg: #fff;
|
||||
--body-text-color: black;
|
||||
--btn-icon-filter: invert(1) grayscale(100%) brightness(200%);
|
||||
|
||||
|
||||
|
||||
/* Navbar */
|
||||
--navbar-bg-color: black;
|
||||
--navbar-text-color: white;
|
||||
|
|
@ -20,6 +22,8 @@
|
|||
--input-bg-readonly-color: unset;
|
||||
--input-placeholder-color: #aeaeae;
|
||||
--input-border-color: #ccc;
|
||||
--input-range-color: var(--primary-color);
|
||||
--input-range-active-color: var(--primary-color-darker-shade);
|
||||
|
||||
/* Buttons */
|
||||
--btn-primary-text-color: black;
|
||||
|
|
@ -50,7 +54,7 @@
|
|||
--nav-tab-text-color: var(--body-text-color);
|
||||
--nav-tab-bg-color: black;
|
||||
--nav-tab-hover-border-color: black;
|
||||
|
||||
|
||||
/* Checkboxes */
|
||||
--checkbox-checked-bg-color: var(--primary-color);
|
||||
--checkbox-bg-color: white;
|
||||
|
|
@ -126,7 +130,7 @@
|
|||
--dropdown-item-hover-bg-color: var(--primary-color);
|
||||
--dropdown-overlay-color: rgba(0,0,0,0.5);
|
||||
--dropdown-item-bg-color: white;
|
||||
|
||||
|
||||
/* Manga Reader */
|
||||
--manga-reader-overlay-filter: none;
|
||||
--manga-reader-overlay-bg-color: rgba(0,0,0,0.5);
|
||||
|
|
@ -134,7 +138,7 @@
|
|||
--manga-reader-bg-color: black;
|
||||
--manga-reader-next-highlight-bg-color: transparent;
|
||||
--manga-reader-prev-highlight-bg-color: transparent;
|
||||
|
||||
|
||||
/* Radios */
|
||||
--radio-accent-color: var(--primary-color);
|
||||
--radio-hover-accent-color: var(--primary-color-dark-shade);
|
||||
|
|
@ -145,7 +149,9 @@
|
|||
--carousel-hover-header-text-decoration: none;
|
||||
|
||||
/** Drawer */
|
||||
--drawer-background-color: white;
|
||||
--drawer-background-color: white; // TODO: Remove this for bg
|
||||
--drawer-bg-color: white;
|
||||
--drawer-text-color: black;
|
||||
|
||||
/* Pagination */
|
||||
--pagination-active-link-border-color: var(--primary-color);
|
||||
|
|
@ -163,7 +169,7 @@
|
|||
--event-widget-text-color: black;
|
||||
--event-widget-item-border-color: lightgrey;
|
||||
--event-widget-border-color: lightgrey;
|
||||
|
||||
|
||||
/* Popover */
|
||||
--popover-body-bg-color: var(--navbar-bg-color);
|
||||
--popover-body-text-color: var(--navbar-text-color);
|
||||
|
|
@ -172,4 +178,4 @@
|
|||
--popover-bg-color: lightgrey;
|
||||
--popover-border-color: lightgrey;
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,24 +3,28 @@
|
|||
--color-scheme: light;
|
||||
--primary-color: #4ac694;
|
||||
--primary-color-dark-shade: #3B9E76;
|
||||
--primary-color-darker-shade: #338A67;
|
||||
--primary-color-darkest-shade: #25624A;
|
||||
--error-color: #ff4136;
|
||||
--bs-body-bg: #fff;
|
||||
--bs-body-bg: #fff;
|
||||
--body-text-color: #333;
|
||||
--btn-icon-filter: invert(1) grayscale(100%) brightness(200%);
|
||||
|
||||
--btn-icon-filter: none;
|
||||
|
||||
/* Navbar */
|
||||
--navbar-bg-color: black;
|
||||
--navbar-text-color: white;
|
||||
--navbar-fa-icon-color: white;
|
||||
--navbar-btn-hover-outline-color: rgba(255, 255, 255, 1);
|
||||
|
||||
|
||||
/* Inputs */
|
||||
--input-bg-color: #fff;
|
||||
--input-focused-border-color: #ccc;
|
||||
--input-bg-readonly-color: unset;
|
||||
--input-placeholder-color: #aeaeae;
|
||||
--input-border-color: #ccc;
|
||||
|
||||
--input-range-color: var(--primary-color);
|
||||
--input-range-active-color: var(--primary-color-darker-shade);
|
||||
|
||||
/* Buttons */
|
||||
--btn-primary-text-color: black;
|
||||
--btn-primary-bg-color: white;
|
||||
|
|
@ -69,30 +73,31 @@
|
|||
--side-nav-active-bg-color: rgba(0,0,0,0.5);
|
||||
--side-nav-item-active-text-color: white;
|
||||
--side-nav-overlay-color: rgba(0,0,0,0.5);
|
||||
|
||||
|
||||
|
||||
|
||||
/* Checkboxes */
|
||||
--checkbox-checked-bg-color: var(--primary-color);
|
||||
--checkbox-bg-color: white;
|
||||
--checkbox-border-color: var(--primary-color);
|
||||
--checkbox-focus-border-color: var(--input-border-color);
|
||||
|
||||
|
||||
/* Tagbadge */
|
||||
--tagbadge-bg-color: #c9c9c9;
|
||||
|
||||
|
||||
/* Toasts */
|
||||
--toast-success-bg-color: rgba(74, 198, 148, 0.9);
|
||||
--toast-error-bg-color: #BD362F;
|
||||
--toast-info-bg-color: #2F96B4;
|
||||
--toast-warning-bg-color: #F89406;
|
||||
|
||||
|
||||
/* Rating star */
|
||||
--ratingstar-star-empty: #b0c4de;
|
||||
--ratingstar-star-filled: var(--primary-color);
|
||||
|
||||
|
||||
/* Global */
|
||||
--accent-bg-color: rgba(206, 206, 206, 0.5);
|
||||
--accent-text-color: black;
|
||||
--accent-bg-color: rgba(206, 206, 206, 0.5); // Drawer had: var(--bs-body-bg)
|
||||
--accent-text-color: grey;
|
||||
--accent-text-size: 0.8rem;
|
||||
--hr-color: rgba(239, 239, 239, 0.125);
|
||||
--grid-breakpoints-xs: $grid-breakpoint-xs;
|
||||
--grid-breakpoints-sm: $grid-breakpoint-sm;
|
||||
|
|
@ -102,7 +107,7 @@
|
|||
--body-font-family: "EBGaramond", "Helvetica Neue", sans-serif;
|
||||
--brand-font-family: "Spartan", sans-serif;
|
||||
--text-muted-color: #aaa;
|
||||
|
||||
|
||||
/* Breadcrumb */
|
||||
--breadcrumb-bg-color: #eaeaea;
|
||||
--breadcrumb-item-text-color: var(--body-text-color);
|
||||
|
|
@ -113,7 +118,7 @@
|
|||
--card-progress-bar-color: var(--primary-color);
|
||||
--card-overlay-bg-color: rgba(0, 0, 0, 0);
|
||||
--card-overlay-hover-bg-color: rgba(0, 0, 0, 0.2);
|
||||
|
||||
|
||||
/* List items */
|
||||
--list-group-item-text-color: var(--body-text-color);
|
||||
--list-group-item-bg-color: white;
|
||||
|
|
@ -121,13 +126,13 @@
|
|||
--list-group-hover-bg-color: #eaeaea;
|
||||
--list-group-item-border-color: rgba(239, 239, 239, 0.125);
|
||||
--list-group-active-border-color: none;
|
||||
|
||||
|
||||
/* Dropdown */
|
||||
--dropdown-item-hover-text-color: white;
|
||||
--dropdown-item-hover-bg-color: var(--primary-color);
|
||||
--dropdown-overlay-color: rgba(0,0,0,0.5);
|
||||
--dropdown-item-bg-color: white;
|
||||
|
||||
|
||||
/* Manga Reader */
|
||||
--manga-reader-overlay-filter: blur(10px);
|
||||
--manga-reader-overlay-bg-color: rgba(0,0,0,0.5);
|
||||
|
|
@ -135,7 +140,7 @@
|
|||
--manga-reader-bg-color: black;
|
||||
--manga-reader-next-highlight-bg-color: rgba(65, 225, 100, 0.5);
|
||||
--manga-reader-prev-highlight-bg-color: rgba(65, 105, 225, 0.5);
|
||||
|
||||
|
||||
/* Radios */
|
||||
--radio-accent-color: var(--primary-color);
|
||||
--radio-hover-accent-color: var(--primary-color-dark-shade);
|
||||
|
|
@ -146,7 +151,9 @@
|
|||
--carousel-hover-header-text-decoration: underline;
|
||||
|
||||
/** Drawer */
|
||||
--drawer-background-color: white;
|
||||
--drawer-background-color: white; // TODO: Use bg
|
||||
--drawer-bg-color: white;
|
||||
--drawer-text-color: black;
|
||||
|
||||
/* Pagination */
|
||||
--pagination-active-link-border-color: var(--primary-color);
|
||||
|
|
@ -172,4 +179,17 @@
|
|||
--popover-arrow-color: lightgrey;
|
||||
--popover-bg-color: lightgrey;
|
||||
--popover-border-color: lightgrey;
|
||||
}
|
||||
|
||||
/* Accordion */
|
||||
--accordion-header-text-color: rgba(74, 198, 148, 0.9);
|
||||
--accordion-header-bg-color: var(--bs-body-bg);
|
||||
--accordion-body-bg-color: var(--bs-body-bg);
|
||||
--accordion-active-body-bg-color: var(--bs-body-bg);
|
||||
--accordion-body-border-color: rgba(239, 239, 239, 0.125);
|
||||
--accordion-body-text-color: var(--body-text-color);
|
||||
--accordion-header-collapsed-text-color: var(--body-text-color);
|
||||
--accordion-header-collapsed-bg-color: var(--bs-body-bg);
|
||||
--accordion-button-focus-border-color: rgba(74, 198, 148, 0.9);
|
||||
--accordion-button-focus-box-shadow: unset;
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ hr {
|
|||
background-color: var(--accent-bg-color) !important;
|
||||
color: var(--accent-text-color) !important;
|
||||
box-shadow: inset 0px 0px 8px 1px var(--accent-bg-color) !important;
|
||||
font-size: var(--accent-text-size) !important;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue