Improved: global view: mobile view (#5297)

* improved overlay + visible close button

* duplicate of line 2109

* delete #panel .close from frss.css

* set background colors in each theme

* fix Ansum and Mapco theme

* fix Nord theme

* frss.css

* only 1 scroll bar

* fix the closer background in some themes

* fix scrolling

* fix fix

app/views/index/global.phtml

@@ -85,6 +85,6 @@
 
 <div id="overlay">
 	<a class="close" href="#"><?= _i('close') ?></a>
+	<div id="panel"<?= FreshRSS_Context::$user_conf->display_posts ? '' : ' class="hide_posts"' ?>>
 </div>
-<div id="panel"<?= FreshRSS_Context::$user_conf->display_posts ? '' : ' class="hide_posts"' ?>>
 </div>

p/scripts/global_view.js

@@ -33,6 +33,7 @@ function load_panel(link) {
 
 		document.getElementById('overlay').classList.add('visible');
 		panel.classList.add('visible');
+		document.documentElement.classList.add('slider-active');
 
 		// Force the initial scroll to the top.
 		// Without it, if one scrolls down in a category (for instance)
@@ -70,6 +71,7 @@ function init_close_panel() {
 		panel.innerHTML = '';
 		panel.classList.remove('visible');
 		document.getElementById('overlay').classList.remove('visible');
+		document.documentElement.classList.remove('slider-active');
 		return false;
 	};
 	document.addEventListener('keydown', ev => {

p/themes/Alternative-Dark/adark.css

@@ -1050,7 +1050,7 @@ kbd {
 	}
 
 	.aside .toggle_aside,
-	#panel .close,
+	#overlay .close,
 	.dropdown-menu .toggle_aside,
 	#slider .toggle_aside {
 		background: var(--background-color-light);
@@ -1058,14 +1058,14 @@ kbd {
 	}
 
 	.aside .toggle_aside:hover,
-	#panel .close:hover,
+	#overlay .close:hover,
 	.dropdown-menu .toggle_aside:hover,
 	#slider .toggle_aside:hover {
 		background-color: var(--background-color-hover);
 	}
 
 	.aside .toggle_aside:hover .icon,
-	#panel .close:hover .icon,
+	#overlay .close:hover .icon,
 	.dropdown-menu .toggle_aside:hover .icon {
 		filter: brightness(2);
 	}

p/themes/Alternative-Dark/adark.rtl.css

@@ -1050,7 +1050,7 @@ kbd {
 	}
 
 	.aside .toggle_aside,
-	#panel .close,
+	#overlay .close,
 	.dropdown-menu .toggle_aside,
 	#slider .toggle_aside {
 		background: var(--background-color-light);
@@ -1058,14 +1058,14 @@ kbd {
 	}
 
 	.aside .toggle_aside:hover,
-	#panel .close:hover,
+	#overlay .close:hover,
 	.dropdown-menu .toggle_aside:hover,
 	#slider .toggle_aside:hover {
 		background-color: var(--background-color-hover);
 	}
 
 	.aside .toggle_aside:hover .icon,
-	#panel .close:hover .icon,
+	#overlay .close:hover .icon,
 	.dropdown-menu .toggle_aside:hover .icon {
 		filter: brightness(2);
 	}

p/themes/Ansum/_mobile.scss

@@ -20,7 +20,7 @@
 	}
 
 	.aside .toggle_aside,
-	#panel .close,
+	#overlay .close,
 	.dropdown-menu .toggle_aside,
 	#slider .toggle_aside {
 		background-color: variables.$main-first;
@@ -52,6 +52,13 @@
 		height: calc(100% - 8rem);
 	}
 
+	#panel {
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+	}
+
 	.post {
 		padding-left: 1rem;
 		padding-right: 1rem;

p/themes/Ansum/ansum.css

@@ -1188,19 +1188,19 @@ main.prompt {
 		padding: 0.5rem 1rem;
 	}
 	.aside .toggle_aside,
-#panel .close,
+#overlay .close,
 .dropdown-menu .toggle_aside,
 #slider .toggle_aside {
 		background-color: #ca7227;
 	}
 	.aside .toggle_aside:hover,
-#panel .close:hover,
+#overlay .close:hover,
 .dropdown-menu .toggle_aside:hover,
 #slider .toggle_aside:hover {
 		background-color: #b7641d;
 	}
 	.aside .toggle_aside .icon,
-#panel .close .icon,
+#overlay .close .icon,
 .dropdown-menu .toggle_aside .icon,
 #slider .toggle_aside .icon {
 		filter: grayscale(100%) brightness(2.5);
@@ -1216,6 +1216,12 @@ main.prompt {
 	#global {
 		height: calc(100% - 8rem);
 	}
+	#panel {
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+	}
 	.post {
 		padding-left: 1rem;
 		padding-right: 1rem;

p/themes/Ansum/ansum.rtl.css

@@ -1188,19 +1188,19 @@ main.prompt {
 		padding: 0.5rem 1rem;
 	}
 	.aside .toggle_aside,
-#panel .close,
+#overlay .close,
 .dropdown-menu .toggle_aside,
 #slider .toggle_aside {
 		background-color: #ca7227;
 	}
 	.aside .toggle_aside:hover,
-#panel .close:hover,
+#overlay .close:hover,
 .dropdown-menu .toggle_aside:hover,
 #slider .toggle_aside:hover {
 		background-color: #b7641d;
 	}
 	.aside .toggle_aside .icon,
-#panel .close .icon,
+#overlay .close .icon,
 .dropdown-menu .toggle_aside .icon,
 #slider .toggle_aside .icon {
 		filter: grayscale(100%) brightness(2.5);
@@ -1216,6 +1216,12 @@ main.prompt {
 	#global {
 		height: calc(100% - 8rem);
 	}
+	#panel {
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+	}
 	.post {
 		padding-right: 1rem;
 		padding-left: 1rem;

p/themes/BlueLagoon/BlueLagoon.css

@@ -1104,7 +1104,7 @@ a.btn {
 	}
 
 	.aside .toggle_aside,
-	#panel .close,
+	#overlay .close,
 	.dropdown-menu .toggle_aside,
 	#slider .toggle_aside {
 		background: #171717;

p/themes/BlueLagoon/BlueLagoon.rtl.css

@@ -1104,7 +1104,7 @@ a.btn {
 	}
 
 	.aside .toggle_aside,
-	#panel .close,
+	#overlay .close,
 	.dropdown-menu .toggle_aside,
 	#slider .toggle_aside {
 		background: #171717;

p/themes/Dark/dark.css

@@ -609,7 +609,7 @@ kbd {
 
 @media (max-width: 840px) {
 	.aside .toggle_aside,
-	#panel .close,
+	#overlay .close,
 	.dropdown-menu .toggle_aside {
 		background-color: var(--dark-background-color1);
 		border-bottom: 1px solid var(--dark-border-color3);

p/themes/Dark/dark.rtl.css

@@ -609,7 +609,7 @@ kbd {
 
 @media (max-width: 840px) {
 	.aside .toggle_aside,
-	#panel .close,
+	#overlay .close,
 	.dropdown-menu .toggle_aside {
 		background-color: var(--dark-background-color1);
 		border-bottom: 1px solid var(--dark-border-color3);

p/themes/Flat/flat.css

@@ -947,7 +947,7 @@ a.btn {
 	}
 
 	.aside .toggle_aside,
-	#panel .close,
+	#overlay .close,
 	.dropdown-menu .toggle_aside {
 		background: #2c3e50;
 	}

p/themes/Flat/flat.rtl.css

@@ -947,7 +947,7 @@ a.btn {
 	}
 
 	.aside .toggle_aside,
-	#panel .close,
+	#overlay .close,
 	.dropdown-menu .toggle_aside {
 		background: #2c3e50;
 	}

p/themes/Mapco/_mobile.scss

@@ -20,7 +20,7 @@
 	}
 
 	.aside .toggle_aside,
-	#panel .close,
+	#overlay .close,
 	.dropdown-menu .toggle_aside,
 	#slider .toggle_aside {
 		background-color: variables.$main-first;
@@ -53,6 +53,13 @@
 		height: calc(100% - 8rem);
 	}
 
+	#panel {
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+	}
+
 	main.prompt {
 		max-width: 100%;
 		min-width: auto;

p/themes/Mapco/mapco.css

@@ -1202,19 +1202,19 @@ main.prompt {
 		padding: 0.5rem 1rem;
 	}
 	.aside .toggle_aside,
-#panel .close,
+#overlay .close,
 .dropdown-menu .toggle_aside,
 #slider .toggle_aside {
 		background-color: #36c;
 	}
 	.aside .toggle_aside:hover,
-#panel .close:hover,
+#overlay .close:hover,
 .dropdown-menu .toggle_aside:hover,
 #slider .toggle_aside:hover {
 		background-color: #25c;
 	}
 	.aside .toggle_aside .icon,
-#panel .close .icon,
+#overlay .close .icon,
 .dropdown-menu .toggle_aside .icon,
 #slider .toggle_aside .icon {
 		filter: grayscale(100%) brightness(2.5);
@@ -1230,6 +1230,12 @@ main.prompt {
 	#global {
 		height: calc(100% - 8rem);
 	}
+	#panel {
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+	}
 	main.prompt {
 		max-width: 100%;
 		min-width: auto;

p/themes/Mapco/mapco.rtl.css

@@ -1202,19 +1202,19 @@ main.prompt {
 		padding: 0.5rem 1rem;
 	}
 	.aside .toggle_aside,
-#panel .close,
+#overlay .close,
 .dropdown-menu .toggle_aside,
 #slider .toggle_aside {
 		background-color: #36c;
 	}
 	.aside .toggle_aside:hover,
-#panel .close:hover,
+#overlay .close:hover,
 .dropdown-menu .toggle_aside:hover,
 #slider .toggle_aside:hover {
 		background-color: #25c;
 	}
 	.aside .toggle_aside .icon,
-#panel .close .icon,
+#overlay .close .icon,
 .dropdown-menu .toggle_aside .icon,
 #slider .toggle_aside .icon {
 		filter: grayscale(100%) brightness(2.5);
@@ -1230,6 +1230,12 @@ main.prompt {
 	#global {
 		height: calc(100% - 8rem);
 	}
+	#panel {
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+	}
 	main.prompt {
 		max-width: 100%;
 		min-width: auto;

p/themes/Nord/nord.css

@@ -1019,6 +1019,10 @@ option {
 		position: relative;
 	}
 
+	#overlay {
+		background-color: var(--accent-bg);
+	}
+
 	.notification {
 		top: 0;
 		left: 0;
@@ -1029,19 +1033,6 @@ option {
 		width: 100%;
 	}
 
-	#panel {
-		top: 25px; bottom: 30px;
-		left: 0; right: 0;
-	}
-
-	#panel .close {
-		top: 0; right: 0;
-		left: auto; bottom: auto;
-		display: inline-block;
-		width: 30px;
-		height: 30px;
-	}
-
 	#slider.active {
 		left: 0;
 		top: 50px;

p/themes/Nord/nord.rtl.css

@@ -1019,6 +1019,10 @@ option {
 		position: relative;
 	}
 
+	#overlay {
+		background-color: var(--accent-bg);
+	}
+
 	.notification {
 		top: 0;
 		right: 0;
@@ -1029,19 +1033,6 @@ option {
 		width: 100%;
 	}
 
-	#panel {
-		top: 25px; bottom: 30px;
-		right: 0; left: 0;
-	}
-
-	#panel .close {
-		top: 0; left: 0;
-		right: auto; bottom: auto;
-		display: inline-block;
-		width: 30px;
-		height: 30px;
-	}
-
 	#slider.active {
 		right: 0;
 		top: 50px;

p/themes/Origine/origine.css

@@ -1110,7 +1110,7 @@ a.btn-attention:hover {
 	}
 
 	.aside .toggle_aside,
-	#panel .close,
+	#overlay .close,
 	.dropdown-menu .toggle_aside,
 	#slider .toggle_aside {
 		background-color: var(--background-color-light-shadowed);
@@ -1150,6 +1150,10 @@ a.btn-attention:hover {
 		margin-bottom: 3rem;
 	}
 
+	#overlay {
+		background-color: var(--background-color-light);
+	}
+
 	.form-group.form-actions {
 		margin-left: -15px;
 		margin-right: -15px;

p/themes/Origine/origine.rtl.css

@@ -1110,7 +1110,7 @@ a.btn-attention:hover {
 	}
 
 	.aside .toggle_aside,
-	#panel .close,
+	#overlay .close,
 	.dropdown-menu .toggle_aside,
 	#slider .toggle_aside {
 		background-color: var(--background-color-light-shadowed);
@@ -1150,6 +1150,10 @@ a.btn-attention:hover {
 		margin-bottom: 3rem;
 	}
 
+	#overlay {
+		background-color: var(--background-color-light);
+	}
+
 	.form-group.form-actions {
 		margin-right: -15px;
 		margin-left: -15px;

p/themes/Pafat/pafat.css

@@ -1059,7 +1059,7 @@ a.signin {
 	}
 
 	.aside .toggle_aside,
-	#panel .close,
+	#overlay .close,
 	.dropdown-menu .toggle_aside {
 		background-color: var(--background-color-grey);
 		border-bottom: 1px solid var(--border-color-grey-light);
@@ -1110,4 +1110,8 @@ a.signin {
 		padding-left: 15px;
 		padding-right: 15px;
 	}
+
+	#overlay {
+		background-color: var(--background-color-grey);
+	}
 }

p/themes/Pafat/pafat.rtl.css

@@ -1059,7 +1059,7 @@ a.signin {
 	}
 
 	.aside .toggle_aside,
-	#panel .close,
+	#overlay .close,
 	.dropdown-menu .toggle_aside {
 		background-color: var(--background-color-grey);
 		border-bottom: 1px solid var(--border-color-grey-light);
@@ -1110,4 +1110,8 @@ a.signin {
 		padding-right: 15px;
 		padding-left: 15px;
 	}
+
+	#overlay {
+		background-color: var(--background-color-grey);
+	}
 }

p/themes/Screwdriver/screwdriver.css

@@ -1078,7 +1078,7 @@ a.btn {
 	}
 
 	.aside .toggle_aside,
-	#panel .close,
+	#overlay .close,
 	.dropdown-menu .toggle_aside {
 		background: #171717;
 		border-radius: 0 8px 0 8px;

p/themes/Screwdriver/screwdriver.rtl.css

@@ -1078,7 +1078,7 @@ a.btn {
 	}
 
 	.aside .toggle_aside,
-	#panel .close,
+	#overlay .close,
 	.dropdown-menu .toggle_aside {
 		background: #171717;
 		border-radius: 8px 0 8px 0;

p/themes/Swage/swage.css

@@ -865,6 +865,9 @@ form th {
 #overlay {
 	z-index: 100;
 }
+#overlay .close .icon {
+	filter: brightness(3);
+}
 
 #panel {
 	z-index: 100;
@@ -1014,7 +1017,7 @@ a.signin {
 	.nav_menu .item.search input {
 		width: 100%;
 	}
-	#panel .close,
+	#overlay .close,
 .dropdown-menu .toggle_aside {
 		background-color: var(--color-background-aside);
 		display: block;
@@ -1023,7 +1026,7 @@ a.signin {
 		text-align: center;
 		padding-right: 10px;
 	}
-	#panel .close:hover,
+	#overlay .close:hover,
 .dropdown-menu .toggle_aside:hover {
 		background-color: var(--color-background-nav);
 	}
@@ -1184,4 +1187,6 @@ button.as-link {
 
 #slider label {
 	min-height: initial;
-}
+}
+
+/*# sourceMappingURL=swage.css.map */

p/themes/Swage/swage.rtl.css

@@ -865,6 +865,9 @@ form th {
 #overlay {
 	z-index: 100;
 }
+#overlay .close .icon {
+	filter: brightness(3);
+}
 
 #panel {
 	z-index: 100;
@@ -1014,7 +1017,7 @@ a.signin {
 	.nav_menu .item.search input {
 		width: 100%;
 	}
-	#panel .close,
+	#overlay .close,
 .dropdown-menu .toggle_aside {
 		background-color: var(--color-background-aside);
 		display: block;
@@ -1023,7 +1026,7 @@ a.signin {
 		text-align: center;
 		padding-left: 10px;
 	}
-	#panel .close:hover,
+	#overlay .close:hover,
 .dropdown-menu .toggle_aside:hover {
 		background-color: var(--color-background-nav);
 	}
@@ -1184,4 +1187,4 @@ button.as-link {
 
 #slider label {
 	min-height: initial;
-}
+}

p/themes/Swage/swage.scss

@@ -1111,6 +1111,10 @@ form {
 
 #overlay {
 	z-index: 100;
+
+	.close .icon {
+		filter: brightness(3);
+	}
 }
 
 #panel {
@@ -1304,7 +1308,7 @@ a.signin {
 		}
 	}
 
-	#panel .close,
+	#overlay .close,
 	.dropdown-menu .toggle_aside {
 		background-color: var(--color-background-aside);
 		display: block;

p/themes/base-theme/base.css

@@ -732,7 +732,7 @@ a.btn {
 	}
 
 	.aside .toggle_aside,
-	#panel .close,
+	#overlay .close,
 	.dropdown-menu .toggle_aside,
 	#slider .toggle_aside {
 		background: #fff;
@@ -740,7 +740,7 @@ a.btn {
 	}
 
 	.aside .toggle_aside:hover,
-	#panel .close:hover,
+	#overlay .close:hover,
 	.dropdown-menu .toggle_aside:hover,
 	#slider .toggle_aside:hover {
 		background-color: #ddd;

p/themes/base-theme/base.rtl.css

@@ -732,7 +732,7 @@ a.btn {
 	}
 
 	.aside .toggle_aside,
-	#panel .close,
+	#overlay .close,
 	.dropdown-menu .toggle_aside,
 	#slider .toggle_aside {
 		background: #fff;
@@ -740,7 +740,7 @@ a.btn {
 	}
 
 	.aside .toggle_aside:hover,
-	#panel .close:hover,
+	#overlay .close:hover,
 	.dropdown-menu .toggle_aside:hover,
 	#slider .toggle_aside:hover {
 		background-color: #ddd;

p/themes/base-theme/frss.css

@@ -1148,8 +1148,8 @@ input[type="search"] {
 }
 
 .aside .toggle_aside:hover,
-#panel .close:hover,
 #slider .toggle_aside:hover,
+#overlay .close:hover,
 .dropdown-menu .toggle_aside:hover {
 	background-color: var(--frss-darken-background-hover-transparent);
 }
@@ -1664,14 +1664,14 @@ a.website:hover .favicon {
 	text-align: left;
 }
 
-#global > #panel {
+#global #panel {
 	bottom: 99vh;
 	display: block;
 	transition: visibility .3s, bottom .3s;
 	visibility: hidden;
 }
 
-#global > #panel.visible {
+#global #panel.visible {
 	bottom: 2%;
 	visibility: visible;
 }
@@ -1707,10 +1707,6 @@ a.website:hover .favicon {
 	display: block;
 }
 
-#overlay .close img {
-	display: none;
-}
-
 /*=== Slider */
 html.slider-active {
 	overflow: hidden;
@@ -2111,7 +2107,7 @@ input:checked + .slide-container .properties {
 	}
 
 	.aside .toggle_aside,
-	#panel .close,
+	#overlay .close,
 	.dropdown-menu .toggle_aside,
 	#slider .toggle_aside {
 		padding: 1rem 0;
@@ -2121,6 +2117,10 @@ input:checked + .slide-container .properties {
 		text-align: center;
 	}
 
+	#overlay .close {
+		position: relative;
+	}
+
 	.form-group {
 		margin-bottom: 10px;
 	}
@@ -2228,14 +2228,12 @@ input:checked + .slide-container .properties {
 		display: none;
 	}
 
-	.aside .toggle_aside,
 	.configure .dropdown-header-close,
 	.nav-login {
 		display: block;
 	}
 
-	.nav_menu .toggle_aside,
-	#panel .close img {
+	.nav_menu .toggle_aside {
 		display: inline-block;
 	}
 
@@ -2313,16 +2311,10 @@ input:checked + .slide-container .properties {
 	}
 
 	#panel {
-		top: 25px; bottom: 30px;
+		top: 0; bottom: 0;
 		left: 0; right: 0;
-	}
-
-	#panel .close {
-		top: 0; right: 0;
-		left: auto; bottom: auto;
-		display: inline-block;
-		width: 30px;
-		height: 30px;
+		position: relative;
+		height: calc(100vh - 3.5rem);
 	}
 
 	#slider.active:target {

p/themes/base-theme/frss.rtl.css

@@ -1148,8 +1148,8 @@ input[type="search"] {
 }
 
 .aside .toggle_aside:hover,
-#panel .close:hover,
 #slider .toggle_aside:hover,
+#overlay .close:hover,
 .dropdown-menu .toggle_aside:hover {
 	background-color: var(--frss-darken-background-hover-transparent);
 }
@@ -1664,14 +1664,14 @@ a.website:hover .favicon {
 	text-align: right;
 }
 
-#global > #panel {
+#global #panel {
 	bottom: 99vh;
 	display: block;
 	transition: visibility .3s, bottom .3s;
 	visibility: hidden;
 }
 
-#global > #panel.visible {
+#global #panel.visible {
 	bottom: 2%;
 	visibility: visible;
 }
@@ -1707,10 +1707,6 @@ a.website:hover .favicon {
 	display: block;
 }
 
-#overlay .close img {
-	display: none;
-}
-
 /*=== Slider */
 html.slider-active {
 	overflow: hidden;
@@ -2111,7 +2107,7 @@ input:checked + .slide-container .properties {
 	}
 
 	.aside .toggle_aside,
-	#panel .close,
+	#overlay .close,
 	.dropdown-menu .toggle_aside,
 	#slider .toggle_aside {
 		padding: 1rem 0;
@@ -2121,6 +2117,10 @@ input:checked + .slide-container .properties {
 		text-align: center;
 	}
 
+	#overlay .close {
+		position: relative;
+	}
+
 	.form-group {
 		margin-bottom: 10px;
 	}
@@ -2228,14 +2228,12 @@ input:checked + .slide-container .properties {
 		display: none;
 	}
 
-	.aside .toggle_aside,
 	.configure .dropdown-header-close,
 	.nav-login {
 		display: block;
 	}
 
-	.nav_menu .toggle_aside,
-	#panel .close img {
+	.nav_menu .toggle_aside {
 		display: inline-block;
 	}
 
@@ -2313,16 +2311,10 @@ input:checked + .slide-container .properties {
 	}
 
 	#panel {
-		top: 25px; bottom: 30px;
+		top: 0; bottom: 0;
 		right: 0; left: 0;
-	}
-
-	#panel .close {
-		top: 0; left: 0;
-		right: auto; bottom: auto;
-		display: inline-block;
-		width: 30px;
-		height: 30px;
+		position: relative;
+		height: calc(100vh - 3.5rem);
 	}
 
 	#slider.active:target {