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 <patrick@crandol.com>

* Update p/themes/BlueLagoon/BlueLagoon.css

Co-Authored-By: pattems <patrick@crandol.com>

*  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

1 files changed, 92 insertions, 7 deletions

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 {