4
0
Эх сурвалжийг харах

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
Patrick Crandol 7 жил өмнө
parent
commit
478d3e6611

+ 2 - 2
README.fr.md

@@ -192,13 +192,13 @@ Tout client supportant une API de type Fever ; Sélection :
 * [php-http-304](https://alexandre.alapetite.fr/doc-alex/php-http-304/)
 * [jQuery](https://jquery.com/)
 * [lib_opml](https://github.com/marienfressinaud/lib_opml)
-* [jQuery Plugin Sticky-Kit](https://leafo.net/sticky-kit/)
 * [keyboard_shortcuts](http://www.openjs.com/scripts/events/keyboard_shortcuts/)
 * [flotr2](http://www.humblesoftware.com/flotr2)
 
-## Uniquement pour certaines options
+## Uniquement pour certaines options ou configurations
 * [bcrypt.js](https://github.com/dcodeIO/bcrypt.js)
 * [phpQuery](https://github.com/phpquery/phpquery)
+* [simple-scrollbar](https://github.com/buzinas/simple-scrollbar)
 
 ## Si les fonctions natives ne sont pas disponibles
 * [Services_JSON](https://pear.php.net/pepr/pepr-proposal-show.php?id=198)

+ 3 - 3
README.md

@@ -64,7 +64,7 @@ FreshRSS comes with absolutely no warranty.
 
 More detailed information about installation and server configuration can be found in [our documentation](https://freshrss.github.io/FreshRSS/en/admins/02_Installation.html).
 
-## Automated install 
+## Automated install
 * [![Docker](https://www.docker.com/sites/default/files/horizontal.png)](./Docker/)
 * [![YunoHost](https://install-app.yunohost.org/install-with-yunohost.png)](https://install-app.yunohost.org/?app=freshrss)
 * [![Cloudron](https://cloudron.io/img/button.svg)](https://cloudron.io/button.html?app=org.freshrss.cloudronapp)
@@ -199,13 +199,13 @@ Supported clients are:
 * [php-http-304](https://alexandre.alapetite.fr/doc-alex/php-http-304/)
 * [jQuery](https://jquery.com/)
 * [lib_opml](https://github.com/marienfressinaud/lib_opml)
-* [jQuery Plugin Sticky-Kit](https://leafo.net/sticky-kit/)
 * [keyboard_shortcuts](http://www.openjs.com/scripts/events/keyboard_shortcuts/)
 * [flotr2](http://www.humblesoftware.com/flotr2)
 
-## Only for some options
+## Only for some options or configurations
 * [bcrypt.js](https://github.com/dcodeIO/bcrypt.js)
 * [phpQuery](https://github.com/phpquery/phpquery)
+* [simple-scrollbar](https://github.com/buzinas/simple-scrollbar)
 
 ## If native functions are not available
 * [Services_JSON](https://pear.php.net/pepr/pepr-proposal-show.php?id=198)

+ 2 - 1
app/layout/aside_feed.phtml

@@ -21,7 +21,7 @@
 
 	<form id="mark-read-aside" method="post">
 	<input type="hidden" name="_csrf" value="<?php echo FreshRSS_Auth::csrfToken(); ?>" />
-	<ul class="tree">
+	<ul id="sidebar" class="tree">
 		<li class="tree-folder category all<?php echo FreshRSS_Context::isCurrentGet('a') ? ' active' : ''; ?>">
 			<div class="tree-folder-title">
 				<?php echo _i('all'); ?> <a class="title" data-unread="<?php echo format_number(FreshRSS_Context::$total_unread); ?>" href="<?php echo _url('index', 'index'); ?>"><?php echo _t('index.menu.main_stream'); ?></a>
@@ -92,6 +92,7 @@
 				}
 			}
 		?>
+		<li class="tree-bottom"></li>
 	</ul>
 	</form>
 </div>

+ 0 - 9
p/scripts/jquery.sticky-kit.min.js

@@ -1,9 +0,0 @@
-/*
- Sticky-kit v1.1.2 | WTFPL | Leaf Corcoran 2015 | http://leafo.net
-*/
-(function(){var b,f;b=this.jQuery||window.jQuery;f=b(window);b.fn.stick_in_parent=function(d){var A,w,J,n,B,K,p,q,k,E,t;null==d&&(d={});t=d.sticky_class;B=d.inner_scrolling;E=d.recalc_every;k=d.parent;q=d.offset_top;p=d.spacer;w=d.bottoming;null==q&&(q=0);null==k&&(k=void 0);null==B&&(B=!0);null==t&&(t="is_stuck");A=b(document);null==w&&(w=!0);J=function(a,d,n,C,F,u,r,G){var v,H,m,D,I,c,g,x,y,z,h,l;if(!a.data("sticky_kit")){a.data("sticky_kit",!0);I=A.height();g=a.parent();null!=k&&(g=g.closest(k));
-if(!g.length)throw"failed to find stick parent";v=m=!1;(h=null!=p?p&&a.closest(p):b("<div />"))&&h.css("position",a.css("position"));x=function(){var c,f,e;if(!G&&(I=A.height(),c=parseInt(g.css("border-top-width"),10),f=parseInt(g.css("padding-top"),10),d=parseInt(g.css("padding-bottom"),10),n=g.offset().top+c+f,C=g.height(),m&&(v=m=!1,null==p&&(a.insertAfter(h),h.detach()),a.css({position:"",top:"",width:"",bottom:""}).removeClass(t),e=!0),F=a.offset().top-(parseInt(a.css("margin-top"),10)||0)-q,
-u=a.outerHeight(!0),r=a.css("float"),h&&h.css({width:a.outerWidth(!0),height:u,display:a.css("display"),"vertical-align":a.css("vertical-align"),"float":r}),e))return l()};x();if(u!==C)return D=void 0,c=q,z=E,l=function(){var b,l,e,k;if(!G&&(e=!1,null!=z&&(--z,0>=z&&(z=E,x(),e=!0)),e||A.height()===I||x(),e=f.scrollTop(),null!=D&&(l=e-D),D=e,m?(w&&(k=e+u+c>C+n,v&&!k&&(v=!1,a.css({position:"fixed",bottom:"",top:c}).trigger("sticky_kit:unbottom"))),e<F&&(m=!1,c=q,null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),
-h.detach()),b={position:"",width:"",top:""},a.css(b).removeClass(t).trigger("sticky_kit:unstick")),B&&(b=f.height(),u+q>b&&!v&&(c-=l,c=Math.max(b-u,c),c=Math.min(q,c),m&&a.css({top:c+"px"})))):e>F&&(m=!0,b={position:"fixed",top:c},b.width="border-box"===a.css("box-sizing")?a.outerWidth()+"px":a.width()+"px",a.css(b).addClass(t),null==p&&(a.after(h),"left"!==r&&"right"!==r||h.append(a)),a.trigger("sticky_kit:stick")),m&&w&&(null==k&&(k=e+u+c>C+n),!v&&k)))return v=!0,"static"===g.css("position")&&g.css({position:"relative"}),
-a.css({position:"absolute",bottom:d,top:"auto"}).trigger("sticky_kit:bottom")},y=function(){x();return l()},H=function(){G=!0;f.off("touchmove",l);f.off("scroll",l);f.off("resize",y);b(document.body).off("sticky_kit:recalc",y);a.off("sticky_kit:detach",H);a.removeData("sticky_kit");a.css({position:"",bottom:"",top:"",width:""});g.position("position","");if(m)return null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),h.remove()),a.removeClass(t)},f.on("touchmove",l),f.on("scroll",l),f.on("resize",
-y),b(document.body).on("sticky_kit:recalc",y),a.on("sticky_kit:detach",H),setTimeout(l,0)}};n=0;for(K=this.length;n<K;n++)d=this[n],J(b(d));return this}}).call(this);

+ 78 - 38
p/scripts/main.js

@@ -1,5 +1,5 @@
 "use strict";
-/* globals $, jQuery, context, i18n, shortcut, shortcuts, url */
+/* globals $, jQuery, context, i18n, shortcut, shortcuts, SimpleScrollbar, url */
 /* jshint strict:global */
 
 var $stream = null,
@@ -245,7 +245,6 @@ function toggleContent(new_active, old_active, skipping) {
 
 	if (context.does_lazyload && !skipping) {
 		new_active.find('img[data-original], iframe[data-original]').each(function () {
-			this.onload = function () { $(document.body).trigger("sticky_kit:recalc"); };
 			this.setAttribute('src', this.getAttribute('data-original'));
 			this.removeAttribute('data-original');
 		});
@@ -536,19 +535,6 @@ function inject_script(name) {
 	document.head.appendChild(script);
 }
 
-function init_sticky_column() {
-	if (!window.$ || !window.$.fn.stick_in_parent) {
-		if (window.console) {
-			console.log('FreshRSS waiting for Sticky-kit…');
-		}
-		window.setTimeout(init_sticky_column, 200);
-		return;
-	}
-	if ($('.toggle_aside').css('display') === 'none') {
-		$('#aside_feed .tree').stick_in_parent({parent:'#aside_feed'});
-	}
-}
-
 function init_column_categories() {
 	if (context.current_view !== 'normal') {
 		return;
@@ -564,38 +550,39 @@ function init_column_categories() {
 				this.alt = '▽';
 			}
 		});
-		$(this).parent().next(".tree-folder-items").slideToggle(300 , function() { $(document.body).trigger("sticky_kit:recalc"); });
+		$(this).parent().next(".tree-folder-items").slideToggle(300, function () {
+			if (useJsScrollbar && sidebar && typeof(Event) === 'function') { //Refresh JS scrollbar
+				sidebar.querySelector('.ss-content').dispatchEvent(new Event('scroll'));
+			}
+		});
 		return false;
 	});
+
 	$('#aside_feed').on('click', '.tree-folder-items .feed .dropdown-toggle', function () {
-		if ($(this).nextAll('.dropdown-menu').length === 0) {
-			var itemId = $(this).closest('.item').attr('id'),
-				templateId = itemId.substring(0, 2) === 't_' ? 'tag_config_template' : 'feed_config_template',
-				id = itemId.substr(2),
-				feed_web = $(this).data('fweb'),
-				template = $('#' + templateId)
-					.html().replace(/------/g, id).replace('http://example.net/', feed_web);
+		var itemId = $(this).closest('.item').attr('id'),
+			templateId = itemId.substring(0, 2) === 't_' ? 'tag_config_template' : 'feed_config_template',
+			id = itemId.substr(2),
+			feed_web = $(this).data('fweb'),
+			template = $('#' + templateId)
+				.html().replace(/------/g, id).replace('http://example.net/', feed_web);
+		if ($(this).next('.dropdown-menu').length === 0) {
 			$(this).attr('href', '#dropdown-' + id).prev('.dropdown-target').attr('id', 'dropdown-' + id).parent()
 				.append(template).find('button.confirm').removeAttr('disabled');
-			$('.tree-folder-items .dropdown-close a').click(function(){
-				$('.tree').removeClass('treepadding');
-				$(document.body).trigger("sticky_kit:recalc");
-			});
+		} else {
+			if ($(this).next('.dropdown-menu').css('display') === 'none') {
+				id = $(this).closest('.item').attr('id').substr(2);
+				$(this).attr('href', '#dropdown-' + id);
+			} else {
+				$(this).attr('href', "#close");
+			}
 		}
 	});
-
-	$('.tree-folder-items .dropdown-toggle').click(function(){
-		$('.tree').addClass('treepadding');
-		$(document.body).trigger("sticky_kit:recalc");
-	});
-
-	init_sticky_column();
 }
 
 function init_shortcuts() {
 	if (!(window.shortcut && window.shortcuts)) {
 		if (window.console) {
-			console.log('FreshRSS waiting for sortcut.js…');
+			console.log('FreshRSS waiting for shortcut.js…');
 		}
 		window.setTimeout(init_shortcuts, 200);
 		return;
@@ -854,8 +841,10 @@ function init_stream(divStream) {
 	}
 }
 
+var $nav_entries = null;
+
 function init_nav_entries() {
-	var $nav_entries = $('#nav_entries');
+	$nav_entries = $('#nav_entries');
 	$nav_entries.find('.previous_entry').click(function () {
 		prev_entry();
 		return false;
@@ -1193,7 +1182,6 @@ function load_more_posts() {
 		$('#load_more').removeClass('loading');
 		$('#bigMarkAsRead').removeAttr('disabled');
 		load_more = false;
-		$(document.body).trigger('sticky_kit:recalc');
 	});
 }
 
@@ -1286,7 +1274,59 @@ function init_crypto_form() {
 }
 //</crypto form (Web login)>
 
+var sidebar = document.getElementById('sidebar');
+var useJsScrollbar = true;
+try {
+	/*jshint -W018 */
+	useJsScrollbar = sidebar && !CSS.supports('scrollbar-color: auto') &&
+		!(parseInt(getComputedStyle(sidebar, '::-webkit-scrollbar').width) < sidebar.offsetWidth);
+	/*jshint +W018 */
+} catch (ex) {
+}
+if (useJsScrollbar) {
+	inject_script('simple-scrollbar.min.js');
+}
+
+function sticky_recalc() {
+	var h = 0;
+	if ($nav_entries && $nav_entries.length > 0) {
+		h = $(window).height() - sidebar.getBoundingClientRect().top - $nav_entries.height();
+	} else {
+		h = $(window).height() - sidebar.getBoundingClientRect().top;
+	}
+	if (h > 0) {
+		$(sidebar).height(h);
+	}
+}
+
+function init_simple_scrollbar() {
+	if (!window.SimpleScrollbar) {
+		if (window.console) {
+			console.log('FreshRSS waiting for simple-scrollbar…');
+		}
+		window.setTimeout(init_simple_scrollbar, 100);
+	} else {
+		SimpleScrollbar.initEl(sidebar);
+	}
+}
 
+var scrollTimeout;
+function init_sticky_sidebar(){
+	if (!sidebar) {
+		return;
+	}
+	if (useJsScrollbar) {
+		init_simple_scrollbar();
+	}
+	$(window).scroll(function () {
+		if (scrollTimeout) {
+			clearTimeout(scrollTimeout);
+			scrollTimeout = null;
+		}
+		scrollTimeout = setTimeout(sticky_recalc, 200);
+	});
+	window.onresize = sticky_recalc;
+}
 
 function init_confirm_action() {
 	$('body').on('click', '.confirm', function () {
@@ -1536,7 +1576,6 @@ function init_beforeDOM() {
 		return;
 	}
 	if (['normal', 'reader', 'global'].indexOf(context.current_view) >= 0) {
-		inject_script('jquery.sticky-kit.min.js');
 		init_normal();
 	}
 }
@@ -1554,6 +1593,7 @@ function init_afterDOM() {
 	$stream = $('#stream');
 	if ($stream.length > 0) {
 		init_load_more($stream);
+		init_sticky_sidebar();
 		init_posts();
 		init_nav_entries();
 		init_dynamic_tags();

Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 1 - 0
p/scripts/simple-scrollbar.min.js


+ 26 - 0
p/themes/BlueLagoon/BlueLagoon.css

@@ -564,6 +564,32 @@ a.btn {
 	color: #0090FF
 }
 
+/*=== Scrollbar */
+
+@supports (scrollbar-width: thin) {
+	#sidebar {
+		scrollbar-color: rgba(255, 255, 255, 0.05) rgba(0, 0, 0, 0.0);
+	}
+	#sidebar:hover {
+		scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.0);
+	}
+}
+.ss-scroll {
+	background: rgba(255, 255, 255, 0.1);
+}
+.ss-container:hover .ss-scroll,
+.ss-container:active .ss-scroll {
+	background: rgba(255, 255, 255, 0.3);
+}
+@supports not (scrollbar-width: thin) {
+	#sidebar::-webkit-scrollbar-thumb {
+		background: rgba(255, 255, 255, 0.1);
+	}
+	#sidebar:hover::-webkit-scrollbar-thumb {
+		background: rgba(255, 255, 255, 0.3);
+	}
+}
+
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */

+ 25 - 0
p/themes/Dark/dark.css

@@ -502,6 +502,31 @@ a.btn {
 	color: #888;
 }
 
+/*=== Scrollbar */
+@supports (scrollbar-width: thin) {
+	#sidebar {
+		scrollbar-color: rgba(255, 255, 255, 0.05) rgba(0, 0, 0, 0.0);
+	}
+	#sidebar:hover {
+		scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.0);
+	}
+}
+.ss-scroll {
+	background: rgba(255, 255, 255, 0.1);
+}
+.ss-container:hover .ss-scroll,
+.ss-container:active .ss-scroll {
+	background: rgba(255, 255, 255, 0.3);
+}
+@supports not (scrollbar-width: thin) {
+	#sidebar::-webkit-scrollbar-thumb {
+		background: rgba(255, 255, 255, 0.1);
+	}
+	#sidebar:hover::-webkit-scrollbar-thumb {
+		background: rgba(255, 255, 255, 0.3);
+	}
+}
+
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */

+ 25 - 0
p/themes/Flat/flat.css

@@ -505,6 +505,31 @@ a.btn {
 	color: #fff;
 }
 
+/*=== Scrollbar */
+@supports (scrollbar-width: thin) {
+	#sidebar {
+		scrollbar-color: rgba(255, 255, 255, 0.05) rgba(0, 0, 0, 0.0);
+	}
+	#sidebar:hover {
+		scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.0);
+	}
+}
+.ss-scroll {
+	background: rgba(255, 255, 255, 0.1);
+}
+.ss-container:hover .ss-scroll,
+.ss-container:active .ss-scroll {
+	background: rgba(255, 255, 255, 0.3);
+}
+@supports not (scrollbar-width: thin) {
+	#sidebar::-webkit-scrollbar-thumb {
+		background: rgba(255, 255, 255, 0.1);
+	}
+	#sidebar:hover::-webkit-scrollbar-thumb {
+		background: rgba(255, 255, 255, 0.3);
+	}
+}
+
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */

+ 25 - 0
p/themes/Screwdriver/screwdriver.css

@@ -559,6 +559,31 @@ a.btn {
 .tree-folder-items > .item.active > a {
 }
 
+/*=== Scrollbar */
+@supports (scrollbar-width: thin) {
+	#sidebar {
+		scrollbar-color: rgba(255, 255, 255, 0.05) rgba(0, 0, 0, 0.0);
+	}
+	#sidebar:hover {
+		scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.0);
+	}
+}
+.ss-scroll {
+	background: rgba(255, 255, 255, 0.1);
+}
+.ss-container:hover .ss-scroll,
+.ss-container:active .ss-scroll {
+	background: rgba(255, 255, 255, 0.3);
+}
+@supports not (scrollbar-width: thin) {
+	#sidebar::-webkit-scrollbar-thumb {
+		background: rgba(255, 255, 255, 0.1);
+	}
+	#sidebar:hover::-webkit-scrollbar-thumb {
+		background: rgba(255, 255, 255, 0.3);
+	}
+}
+
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */

+ 26 - 0
p/themes/Swage/swage.css

@@ -529,6 +529,32 @@ text-decoration: none;
 color: #FCFCFC;
 }
 
+@supports (scrollbar-width: thin) {
+ #sidebar {
+scrollbar-color: rgba(255, 255, 255, 0.05) rgba(0, 0, 0, 0.0);
+}
+#sidebar:hover {
+scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.0);
+}
+}
+
+.ss-scroll {
+background: rgba(255, 255, 255, 0.1);
+}
+.ss-container:hover .ss-scroll,
+.ss-container:active .ss-scroll {
+background: rgba(255, 255, 255, 0.3);
+}
+
+@supports not (scrollbar-width: thin) {
+#sidebar::-webkit-scrollbar-thumb {
+background: rgba(255, 255, 255, 0.1);
+}
+#sidebar:hover::-webkit-scrollbar-thumb {
+background: rgba(255, 255, 255, 0.3);
+}
+}
+
 .header > .item {
 vertical-align: middle;
 }

+ 32 - 6
p/themes/Swage/swage.scss

@@ -351,7 +351,7 @@ form {
 			> a {
 				min-width: initial;
 				white-space: nowrap;
-			} 
+			}
 			&:hover {
 				background: $color_nav;
 				color: $color_light;
@@ -603,6 +603,32 @@ form {
 	}
 }
 
+@supports (scrollbar-width: thin) {
+	#sidebar {
+		scrollbar-color: rgba(255, 255, 255, 0.05) rgba(0, 0, 0, 0.0);
+	}
+	#sidebar:hover {
+		scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.0);
+	}
+}
+
+.ss-scroll {
+	background: rgba(255, 255, 255, 0.1);
+}
+.ss-container:hover .ss-scroll,
+.ss-container:active .ss-scroll {
+	background: rgba(255, 255, 255, 0.3);
+}
+
+@supports not (scrollbar-width: thin) {
+	#sidebar::-webkit-scrollbar-thumb {
+		background: rgba(255, 255, 255, 0.1);
+	}
+	#sidebar:hover::-webkit-scrollbar-thumb {
+		background: rgba(255, 255, 255, 0.3);
+	}
+}
+
 .header {
 	> .item {
 		vertical-align: middle;
@@ -918,7 +944,7 @@ form {
 	#global {
 		height: 0;
 	}
-	
+
 	.header {
 		height: 55px;
 		background: $color_aside;
@@ -936,7 +962,7 @@ form {
 		color: $color_light;
 		padding-left: 5px;
 	}
-	
+
 	input {
 		border-left: 5px solid;
 		border-right: 1px darken( $color_light, 10%);
@@ -984,7 +1010,7 @@ form {
 	.dropdown-header, .dropdown-menu > .item {
 		padding: 12px;
 	}
-	
+
 	#new-article {
 		width: 100%;
 		bottom: initial;
@@ -1207,5 +1233,5 @@ button.as-link {
 			background: inital;
 		}
 	}
-	
-}
+
+}

+ 92 - 7
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 {

Энэ ялгаанд хэт олон файл өөрчлөгдсөн тул зарим файлыг харуулаагүй болно