From 478d3e6611e73974bd3b917c625bf0d099cbf123 Mon Sep 17 00:00:00 2001 From: Patrick Crandol Date: Wed, 12 Dec 2018 06:04:31 -0500 Subject: Decouple scrolling of feeds and articles (#2117) * Remove Sticky Kit Remove sticky-kit, as functionality is unsuitable for separate scrolling. * Remove sticky-kit load in main.js Further removing the sticky-kit kruft * Finish removal of references to Sticky-kit * CSS Changes to template for Independent Scrolling * Addition of JS and supporting CSS and html * More CSS fixes to establish expected behavior Should be able to scroll navbar without it being in sticky mode now. * Fix typo in main.js sortcut.js -> shortcut.js * Fix unexpected tree scrolling behavior * Change name of generic JS function * Improve sticky-aside * CSS changes in themes to accommodate independent Scroll In themes where .aside's width is not the standard 300px, .tree's width must be specified to be equal to .aside * Remove Sticky-Kit from README files * Updates to Sticky-Aside * Update Template to fix screwup * Make Recalculating height actually work * Let sidebar fill height if nav buttons aren't visible * Make accommodating for nav buttons actually work * update Swage theme for Independent Scroll feature * Integrate sticky_aside into main.js * Add Simple Scrollbar * Patch scrollbar color for themes with dark colored asides * Increase Visibility of scrollbar on Dark Themes * Improve async loading, events, and performance * CSS typo * Fix double scrollbar on mobile * Fix regression causing sticky to not be removed * No $ for non-jQuery variables * Fix strange condition + option for nice scrollbar * Initial attempt to use css sticky * Add stickyfill * make the correct element sticky * re-add incorrectly removed sidebar code * Continue fixing mistaken deletions * decrease frequency of recalc * use minified version of simple-scrollbar. * Load stickyfill instead of injecting * put recalc back where it belongs * re-remove script injector * remove padding bottom padding was causing the last item in the feed to be hidden under the nav buttons * Manual merge of css_scrollbar Add auto-detection of -webkit-scrollbar-thumb, otherwise fall back to simple-scrollbar.js * Fix Regression Sticky recalc is still needed when using css scrollbars * Replace method of closing dropdowns Changed from an overlay href to a javascript solution, for better compatibility * Remove Treepadding Treepadding was causing dropdown menus at the bottom of the tree to be obscured. * Undo unnecessary move of dropdown-target * Move Dropdown Handler to a sensibleish place * Fix light Scrollbar color not picking up on Firefox * Minor syntax * Minor Clarification of CSS/ patch BlueLagoon * Change logic for native WebKit scrollbar detection Fix https://github.com/FreshRSS/FreshRSS/pull/2117#issuecomment-444251419 Tested with Firefox 63, Firefox 65, Chrome 71, IE11, Edge 42 * Fixes for other views E.g. reader view * Cleaner way of generating hash for dropdowns * Make dropdown-toggle an actual toggle * Prepare for CSS Scrollbars Module Level 1 * Fix regression causing my labels dropdown not to appear * remove unneeded dropdown-close css rule * Re-apply some lost changes https://github.com/FreshRSS/FreshRSS/pull/2117/commits/3c509989e890b88852e52c67c1c5507d1e0bf28c * Add standard scrollbar compatibility E.g. Firefox 64+ * Make All dropdowns click-to-close * Remove BlueLagoon template * Try to fix Firefox https://github.com/FreshRSS/FreshRSS/pull/2117#discussion_r239539984 * Add CSS rules necessary for consistent function of scrollbar in Firefox * Use inheritance to determine width * Use overlay scrollbar where possible * Test Reduced Listener * Fix Firefox 62 And show subtle scrollbar even when not hovering * Add margin at bottom To allow opening the menus https://github.com/FreshRSS/FreshRSS/pull/2117#issuecomment-444571218 * Minor - tab correction * Spaces -> tabs * Remove unneeded inheritance * Fix indenting * Revert bad merge * Messy WIP to make dropdowns work * Style Cleanup * Break it down * Lets try a move-it move-it * Update p/scripts/main.js Co-Authored-By: pattems * Update p/themes/BlueLagoon/BlueLagoon.css Co-Authored-By: pattems * separate ALL THE THINGS * erroneous commas * and to or * removing double condition that doesn't do what I want * More breaking down * fix var * Fix variable name again * Remove magic number https://github.com/FreshRSS/FreshRSS/pull/2117#discussion_r240052598 * Suuuuper inelegant solution for dropdowns * lets try that again * Inelegant Fix For Dropdowns Now with 100% more working dropdowns * Make sidebar dropdowns work correctly? * Fix reversion * Make JS scrollbar always visible * Remove unneeded CSS Added early in this pull request, didn't get pulled out when it was obsolete * Fix CSS removal I missed * CSS comment update/consistency for dark themes * Clean Up Duplicate code * Make dropdowns properly hide Downside: Can no longer click on header/nav buttons to close * Strip unneeded if statement * jshint -W018 https://github.com/FreshRSS/FreshRSS/pull/2117#discussion_r240392851 * Half-reversion to old dropdown * make overlay href scale to sidebar width * remove init of nonexistent method * remove trailing tabs * move #close href where it belongs in index.phtml * Revert all changes to index.phtml * remove whitespace accidentally added in last commit * Move var's in init_column categories * Finish putting old style dropdowns back * Make CSS changes to use support statements * Cleanup Whitespace * re-add missing class * spaces -> tabs in main.js * tabs -> spaces css * Minor whitespace * Cleanup per @Alkarex * Second attempt to add bottom margin https://github.com/FreshRSS/FreshRSS/pull/2117#discussion_r240820901 * Fix error in IE11 * Simple-scrollbar color match for dark themes --- p/themes/base-theme/template.css | 99 +++++++++++++++++++++++++++++++++++++--- 1 file changed, 92 insertions(+), 7 deletions(-) (limited to 'p/themes/base-theme') diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css index fdc2f884e..60c4822ef 100644 --- a/p/themes/base-theme/template.css +++ b/p/themes/base-theme/template.css @@ -109,7 +109,7 @@ input[type="checkbox"] { min-height: 15px !important; } .dropdown-menu label > input[type="text"] { - with: 150px; + width: 150px; width: calc(99% - 5em); } .dropdown-menu input[type="checkbox"] { @@ -168,6 +168,13 @@ td.numeric { display: block; } +@supports (position: sticky) { + #mark-read-aside { + position: sticky; + top: 0; + } +} + /*=== Buttons */ .stick { display: inline-block; @@ -273,6 +280,7 @@ a.btn { left: 0; right: 0; display: block; z-index: -10; + cursor: default; } .separator { display: block; @@ -373,16 +381,90 @@ a.btn { cursor: grab; } +/*=== Scrollbar */ +.ss-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; +} + +.ss-content { + height: 100%; + width: calc(100% + 18px); + padding: 0 0 0 0; + position: relative; + overflow-y: scroll; + box-sizing: border-box; +} + +.ss-content.rtl { + width: calc(100% + 18px); + right: auto; +} + +.ss-scroll { + position: relative; + background: rgba(0, 0, 0, 0.1); + width: 9px; + border-radius: 4px; + top: 0; + z-index: 2; + cursor: pointer; + transition: opacity 0.25s linear; +} + +.ss-hidden { + display: none; +} + +.ss-container:hover .ss-scroll, +.ss-container:active .ss-scroll { + background: rgba(0, 0, 0, 0.3); +} + +.ss-grabbed { + -o-user-select: none; + -ms-user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; +} + +@supports (scrollbar-width: thin) { + #sidebar { + overflow-y: scroll; + scrollbar-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.05); + scrollbar-width: thin; + } + #sidebar:hover { + scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.05); + } +} + +@supports not (scrollbar-width: thin) { + #sidebar::-webkit-scrollbar { + background: rgba(0, 0, 0, 0.05); + width: 8px; + } + #sidebar::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.1); + border-radius: 5px; + display: unset; + } + #sidebar:hover::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.3); + } +} + /*=== Tree */ .tree { margin: 0; - padding: 0 0 2em 0; list-style: none; text-align: left; -} - -.treepadding { - padding: 0 0 15em 0; + overflow-x: hidden; } .tree-folder-items { @@ -412,6 +494,10 @@ a.btn { white-space: nowrap; text-overflow: ellipsis; } +.tree-bottom { + visibility: hidden; + margin-bottom: 15em; +} /*=== STRUCTURE */ /*===============*/ @@ -914,7 +1000,6 @@ pre.enclosure-description { } .aside:target { width: 90%; - overflow: auto; } .flux_header .item.website { -- cgit v1.2.3