Add/mobile feed configuration (#2938)

* Show subscription management button on mobile

* Show aside box-shadow on Origine only when opened

* Reduce padding of Origine posts on mobile

* Shrink stick component with long input

* Show Origine configure icons on mobile

* Show the slider full width on mobile

* Improve the look of forms on mobile

* Fix Ansum theme

* Fix BlueLagoon theme

* Fix Dark theme

* Fix Flat theme

* Fix Mapco theme

* Fix Origine-compact theme

* Fix Pafat theme

* Fix Screwdriver theme

* Fix Swage theme

* Fix Alternative-Dark theme

* Apply RTL script on themes

Co-authored-by: triatic <42704418+triatic@users.noreply.github.com>

app/layout/aside_feed.phtml

@@ -12,7 +12,7 @@
 	<a class="toggle_aside" href="#close"><?= _i('close') ?></a>
 
 	<?php if (FreshRSS_Auth::hasAccess()) { ?>
-	<div class="stick configure-feeds no-mobile">
+	<div class="stick configure-feeds">
 		<a id="btn-subscription" class="btn btn-important" href="<?= _url('subscription', 'index') ?>"><?= _t('index.menu.subscription') ?></a>
 		<a id="btn-importExport" class="btn btn-important" href="<?= _url('importExport', 'index') ?>"><?= _i('import') ?></a>
 	</div>

app/views/subscription/index.phtml

@@ -120,7 +120,9 @@
 </div>
 
 <?php $class = $this->displaySlider ? ' class="active"' : ''; ?>
-<a href="#" id="close-slider"<?= $class ?>></a>
+<a href="#" id="close-slider"<?= $class ?>>
+	<?= _i('close') ?>
+</a>
 <div id="slider"<?= $class ?>>
 <?php
 	if (isset($this->feed)) {

p/themes/Alternative-Dark/adark.css

@@ -1053,6 +1053,16 @@ a.btn {
 /*===========*/
 
 @media (max-width: 840px) {
+	.form-group .group-name {
+		padding-bottom: 0;
+		text-align: left;
+	}
+
+	.box .box-title .configure,
+	.box .box-content .item .configure {
+		visibility: visible;
+	}
+
 	.aside {
 		box-shadow: 3px 0 3px #aaa;
 		transition: width 200ms linear;
@@ -1123,4 +1133,9 @@ a.btn {
 	.notification a.close .icon {
 		display: none;
 	}
+
+	.post {
+		padding-left: 15px;
+		padding-right: 15px;
+	}
 }

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

@@ -1053,6 +1053,16 @@ a.btn {
 /*===========*/
 
 @media (max-width: 840px) {
+	.form-group .group-name {
+		padding-bottom: 0;
+		text-align: right;
+	}
+
+	.box .box-title .configure,
+	.box .box-content .item .configure {
+		visibility: visible;
+	}
+
 	.aside {
 		box-shadow: -3px 0 3px #aaa;
 		transition: width 200ms linear;
@@ -1123,4 +1133,9 @@ a.btn {
 	.notification a.close .icon {
 		display: none;
 	}
+
+	.post {
+		padding-right: 15px;
+		padding-left: 15px;
+	}
 }

p/themes/Alternative-Dark/template.css

@@ -215,10 +215,19 @@ td.numeric {
 
 /*=== Buttons */
 .stick {
-	display: inline-block;
+	display: inline-flex;
+	max-width: 100%;
 	white-space: nowrap;
 }
 
+.stick > input.long {
+	flex-shrink: 1;
+}
+
+.stick > .btn {
+	flex-shrink: 0;
+}
+
 .btn,
 a.btn {
 	display: inline-block;
@@ -1023,6 +1032,10 @@ br {
 	left: 0;
 }
 
+#close-slider img {
+	display: none;
+}
+
 /*=== SLIDESHOW */
 /*==============*/
 .slides {
@@ -1191,7 +1204,6 @@ pre.enclosure-description {
 
 @media (max-width: 840px) {
 	.header,
-	.aside .btn-important,
 	.flux_header .item.website span,
 	.item.date, .day .date,
 	.dropdown-menu > .no-mobile,
@@ -1199,6 +1211,18 @@ pre.enclosure-description {
 		display: none;
 	}
 
+	.form-group {
+		margin-bottom: 10px;
+	}
+
+	.form-group .group-name {
+		float: none;
+	}
+
+	.form-group .group-controls {
+		margin-left: 0;
+	}
+
 	.dropdown .dropdown-menu {
 		width: 100%;
 		border-radius: 0;
@@ -1234,6 +1258,10 @@ pre.enclosure-description {
 		width: 90%;
 	}
 
+	.aside_feed .configure-feeds {
+		margin-top: 10px;
+	}
+
 	.flux_header .item.website {
 		width: 40px;
 	}
@@ -1267,6 +1295,26 @@ pre.enclosure-description {
 		width: 30px;
 		height: 30px;
 	}
+
+	#slider.active {
+		left: 0;
+		top: 50px;
+	}
+
+	#close-slider img {
+		display: initial;
+	}
+
+	#close-slider.active {
+		background: #f6f6f6;
+		display: block;
+		width: 100%;
+		height: 50px;
+		z-index: 10;
+		text-align: center;
+		line-height: 50px;
+		border-bottom: 1px solid #ddd;
+	}
 }
 
 /*=== PRINTER */

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

@@ -215,10 +215,19 @@ td.numeric {
 
 /*=== Buttons */
 .stick {
-	display: inline-block;
+	display: inline-flex;
+	max-width: 100%;
 	white-space: nowrap;
 }
 
+.stick > input.long {
+	flex-shrink: 1;
+}
+
+.stick > .btn {
+	flex-shrink: 0;
+}
+
 .btn,
 a.btn {
 	display: inline-block;
@@ -1023,6 +1032,10 @@ br {
 	right: 0;
 }
 
+#close-slider img {
+	display: none;
+}
+
 /*=== SLIDESHOW */
 /*==============*/
 .slides {
@@ -1191,7 +1204,6 @@ pre.enclosure-description {
 
 @media (max-width: 840px) {
 	.header,
-	.aside .btn-important,
 	.flux_header .item.website span,
 	.item.date, .day .date,
 	.dropdown-menu > .no-mobile,
@@ -1199,6 +1211,18 @@ pre.enclosure-description {
 		display: none;
 	}
 
+	.form-group {
+		margin-bottom: 10px;
+	}
+
+	.form-group .group-name {
+		float: none;
+	}
+
+	.form-group .group-controls {
+		margin-right: 0;
+	}
+
 	.dropdown .dropdown-menu {
 		width: 100%;
 		border-radius: 0;
@@ -1234,6 +1258,10 @@ pre.enclosure-description {
 		width: 90%;
 	}
 
+	.aside_feed .configure-feeds {
+		margin-top: 10px;
+	}
+
 	.flux_header .item.website {
 		width: 40px;
 	}
@@ -1267,6 +1295,26 @@ pre.enclosure-description {
 		width: 30px;
 		height: 30px;
 	}
+
+	#slider.active {
+		right: 0;
+		top: 50px;
+	}
+
+	#close-slider img {
+		display: initial;
+	}
+
+	#close-slider.active {
+		background: #f6f6f6;
+		display: block;
+		width: 100%;
+		height: 50px;
+		z-index: 10;
+		text-align: center;
+		line-height: 50px;
+		border-bottom: 1px solid #ddd;
+	}
 }
 
 /*=== PRINTER */

p/themes/Ansum/_forms.scss

@@ -70,6 +70,7 @@ label {
 }
 
 textarea {
+	max-width: 100%;
 	width: 360px;
 	height: 100px;
 }

p/themes/Ansum/_mobile.scss

@@ -15,6 +15,7 @@
 			}
 
 			a {
+				box-sizing: border-box;
 				padding: 1rem 1rem 1rem 2.5rem;
 
 				background: url("../../themes/icons/logout.svg") no-repeat $sid-bg-dark 3% center;
@@ -36,6 +37,15 @@
 
 	}
 
+	.form-group .group-name {
+		text-align: left;
+	}
+
+	.box .box-title .configure,
+	.box .box-content .item .configure {
+		visibility: visible;
+	}
+
 	.aside {
 
 		@include transition(all, 0.2s, ease-in-out);
@@ -50,7 +60,8 @@
 	}
 
 	.aside .toggle_aside,
-	#panel .close {
+	#panel .close,
+	#close-slider.active {
 		background: $main-first-alt;
 		display: block;
 		width: 100%;
@@ -68,6 +79,12 @@
 			}
 
 			&.search {
+				display: block;
+
+				.stick {
+					display: flex;
+				}
+
 				input {
 					width: 90%;
 					height: 3.5rem;
@@ -85,18 +102,16 @@
 			}
 
 			&.configure {
-				width: 2.75rem;
-				top: 3.125rem;
-
-				.dropdown {
-					.btn {
-						padding: 1.125rem;
-					}
-				}
+				display: none;
 			}
 		}
 	}
 
+	.post {
+		padding-left: 1rem;
+		padding-right: 1rem;
+	}
+
 	.nav_menu {
 		.btn {
 			margin: 0;

p/themes/BlueLagoon/BlueLagoon.css

@@ -1244,6 +1244,16 @@ a.btn {
 /*===========*/
 
 @media screen and (max-width: 840px) {
+	.form-group .group-name {
+		padding-bottom: 0;
+		text-align: left;
+	}
+
+	.box .box-title .configure,
+	.box .box-content .item .configure {
+		visibility: visible;
+	}
+
 	.header {
 		display: table;
 	}
@@ -1274,11 +1284,6 @@ a.btn {
 		box-shadow: 0 1px rgba(255,255,255,0.08);
 	}
 
-	.aside .btn-important {
-		margin: 20px 0 0;
-		display: inline-block;
-	}
-
 	.aside.aside_feed {
 		padding: 0;
 	}
@@ -1333,6 +1338,16 @@ a.btn {
 	#nav_entries {
 		width: 100%;
 	}
+
+	.post {
+		padding-left: 15px;
+		padding-right: 15px;
+	}
+
+	#close-slider.active {
+		background: #171717;
+		box-shadow: 0 1px rgba(255,255,255,0.08)
+	}
 }
 
 @media (max-width: 700px) {
@@ -1348,8 +1363,4 @@ a.btn {
 	.nav_menu .search {
 		display: inline-block;
 	}
-
-	.aside .btn-important {
-		display: none;
-	}
 }

p/themes/BlueLagoon/BlueLagoon.rtl.css

@@ -1244,6 +1244,16 @@ a.btn {
 /*===========*/
 
 @media screen and (max-width: 840px) {
+	.form-group .group-name {
+		padding-bottom: 0;
+		text-align: right;
+	}
+
+	.box .box-title .configure,
+	.box .box-content .item .configure {
+		visibility: visible;
+	}
+
 	.header {
 		display: table;
 	}
@@ -1274,11 +1284,6 @@ a.btn {
 		box-shadow: 0 1px rgba(255,255,255,0.08);
 	}
 
-	.aside .btn-important {
-		margin: 20px 0 0;
-		display: inline-block;
-	}
-
 	.aside.aside_feed {
 		padding: 0;
 	}
@@ -1333,6 +1338,16 @@ a.btn {
 	#nav_entries {
 		width: 100%;
 	}
+
+	.post {
+		padding-right: 15px;
+		padding-left: 15px;
+	}
+
+	#close-slider.active {
+		background: #171717;
+		box-shadow: 0 1px rgba(255,255,255,0.08)
+	}
 }
 
 @media (max-width: 700px) {
@@ -1348,8 +1363,4 @@ a.btn {
 	.nav_menu .search {
 		display: inline-block;
 	}
-
-	.aside .btn-important {
-		display: none;
-	}
 }

p/themes/Dark/dark.css

@@ -1105,6 +1105,16 @@ a.btn {
 /*===========*/
 
 @media (max-width: 840px) {
+	.form-group .group-name {
+		padding-bottom: 0;
+		text-align: left;
+	}
+
+	.box .box-title .configure,
+	.box .box-content .item .configure {
+		visibility: visible;
+	}
+
 	.aside {
 		transition: width 200ms linear;
 	}
@@ -1177,4 +1187,14 @@ a.btn {
 	.notification a.close .icon {
 		display: none;
 	}
+
+	.post {
+		padding-left: 15px;
+		padding-right: 15px;
+	}
+
+	#close-slider.active {
+		background: #111;
+		border-bottom: 1px solid #333;
+	}
 }

p/themes/Dark/dark.rtl.css

@@ -1105,6 +1105,16 @@ a.btn {
 /*===========*/
 
 @media (max-width: 840px) {
+	.form-group .group-name {
+		padding-bottom: 0;
+		text-align: right;
+	}
+
+	.box .box-title .configure,
+	.box .box-content .item .configure {
+		visibility: visible;
+	}
+
 	.aside {
 		transition: width 200ms linear;
 	}
@@ -1177,4 +1187,14 @@ a.btn {
 	.notification a.close .icon {
 		display: none;
 	}
+
+	.post {
+		padding-right: 15px;
+		padding-left: 15px;
+	}
+
+	#close-slider.active {
+		background: #111;
+		border-bottom: 1px solid #333;
+	}
 }

p/themes/Flat/flat.css

@@ -509,6 +509,7 @@ a.btn {
 	visibility: hidden;
 }
 
+.box .box-title .configure .icon,
 .box .box-content .item .configure .icon {
 	vertical-align: middle;
 	background-color: #95a5a6;
@@ -1098,6 +1099,16 @@ a.btn {
 /*===========*/
 
 @media (max-width: 840px) {
+	.form-group .group-name {
+		padding-bottom: 0;
+		text-align: left;
+	}
+
+	.box .box-title .configure,
+	.box .box-content .item .configure {
+		visibility: visible;
+	}
+
 	.aside {
 		transition: width 200ms linear;
 	}
@@ -1167,4 +1178,13 @@ a.btn {
 	.notification a.close .icon {
 		display: none;
 	}
+
+	.post {
+		padding-left: 15px;
+		padding-right: 15px;
+	}
+
+	#close-slider.active {
+		background: #2c3e50;
+	}
 }

p/themes/Flat/flat.rtl.css

@@ -509,6 +509,7 @@ a.btn {
 	visibility: hidden;
 }
 
+.box .box-title .configure .icon,
 .box .box-content .item .configure .icon {
 	vertical-align: middle;
 	background-color: #95a5a6;
@@ -1098,6 +1099,16 @@ a.btn {
 /*===========*/
 
 @media (max-width: 840px) {
+	.form-group .group-name {
+		padding-bottom: 0;
+		text-align: right;
+	}
+
+	.box .box-title .configure,
+	.box .box-content .item .configure {
+		visibility: visible;
+	}
+
 	.aside {
 		transition: width 200ms linear;
 	}
@@ -1167,4 +1178,13 @@ a.btn {
 	.notification a.close .icon {
 		display: none;
 	}
+
+	.post {
+		padding-right: 15px;
+		padding-left: 15px;
+	}
+
+	#close-slider.active {
+		background: #2c3e50;
+	}
 }

p/themes/Mapco/_forms.scss

@@ -70,6 +70,7 @@ label {
 }
 
 textarea {
+	max-width: 100%;
 	width: 360px;
 	height: 100px;
 }

p/themes/Mapco/_mobile.scss

@@ -15,6 +15,7 @@
 			}
 
 			a {
+				box-sizing: border-box;
 				padding: 1rem 1rem 1rem 2.5rem;
 
 				background: url("../../themes/icons/logout.svg") no-repeat $sid-bg-dark 3% center;
@@ -35,6 +36,15 @@
 
 	}
 
+	.form-group .group-name {
+		text-align: left;
+	}
+
+	.box .box-title .configure,
+	.box .box-content .item .configure {
+		visibility: visible;
+	}
+
 	.aside {
 
 		@include transition(all, 0.2s, ease-in-out);
@@ -49,7 +59,8 @@
 	}
 
 	.aside .toggle_aside,
-	#panel .close {
+	#panel .close,
+	#close-slider.active {
 		background: $main-first-alt;
 		display: block;
 		width: 100%;
@@ -67,6 +78,12 @@
 			}
 
 			&.search {
+				display: block;
+
+				.stick {
+					display: flex;
+				}
+
 				input {
 					width: 90%;
 					height: 3.5rem;
@@ -84,18 +101,16 @@
 			}
 
 			&.configure {
-				width: 2.75rem;
-				top: 3.125rem;
-
-				.dropdown {
-					.btn {
-						padding: 1.125rem;
-					}
-				}
+				display: none;
 			}
 		}
 	}
 
+	.post {
+		padding-left: 1rem;
+		padding-right: 1rem;
+	}
+
 	.nav_menu {
 		.btn {
 			margin: 0;

p/themes/Origine-compact/origine-compact.css

@@ -1153,11 +1153,24 @@ a.btn,
 /*===========*/
 
 @media (max-width: 840px) {
+	.form-group .group-name {
+		padding-bottom: 0;
+		text-align: left;
+	}
+
+	.box .box-title .configure,
+	.box .box-content .item .configure {
+		visibility: visible;
+	}
+
 	.aside {
-		box-shadow: 3px 0 3px #aaa;
 		transition: width 200ms linear;
 	}
 
+	.aside:target {
+		box-shadow: 3px 0 3px #aaa;
+	}
+
 	.aside .toggle_aside,
 	#panel .close {
 		background: #f6f6f6;
@@ -1221,4 +1234,9 @@ a.btn,
 	.notification a.close .icon {
 		display: none;
 	}
+
+	.post {
+		padding-left: 15px;
+		padding-right: 15px;
+	}
 }

p/themes/Origine-compact/origine-compact.rtl.css

@@ -1153,11 +1153,24 @@ a.btn,
 /*===========*/
 
 @media (max-width: 840px) {
+	.form-group .group-name {
+		padding-bottom: 0;
+		text-align: right;
+	}
+
+	.box .box-title .configure,
+	.box .box-content .item .configure {
+		visibility: visible;
+	}
+
 	.aside {
-		box-shadow: -3px 0 3px #aaa;
 		transition: width 200ms linear;
 	}
 
+	.aside:target {
+		box-shadow: -3px 0 3px #aaa;
+	}
+
 	.aside .toggle_aside,
 	#panel .close {
 		background: #f6f6f6;
@@ -1221,4 +1234,9 @@ a.btn,
 	.notification a.close .icon {
 		display: none;
 	}
+
+	.post {
+		padding-right: 15px;
+		padding-left: 15px;
+	}
 }

p/themes/Origine/origine.css

@@ -1130,11 +1130,25 @@ a.btn {
 /*===========*/
 
 @media (max-width: 840px) {
+	.form-group .group-name {
+		padding-bottom: 0;
+
+		text-align: left;
+	}
+
+	.box .box-title .configure,
+	.box .box-content .item .configure {
+		visibility: visible;
+	}
+
 	.aside {
-		box-shadow: 3px 0 3px #aaa;
 		transition: width 200ms linear;
 	}
 
+	.aside:target {
+		box-shadow: 3px 0 3px #aaa;
+	}
+
 	.aside .toggle_aside,
 	#panel .close {
 		background: #f6f6f6;
@@ -1150,6 +1164,11 @@ a.btn {
 		padding: 0;
 	}
 
+	.post {
+		padding-left: 15px;
+		padding-right: 15px;
+	}
+
 	.nav_menu .btn {
 		margin: 5px 10px;
 	}

p/themes/Origine/origine.rtl.css

@@ -1130,11 +1130,25 @@ a.btn {
 /*===========*/
 
 @media (max-width: 840px) {
+	.form-group .group-name {
+		padding-bottom: 0;
+
+		text-align: right;
+	}
+
+	.box .box-title .configure,
+	.box .box-content .item .configure {
+		visibility: visible;
+	}
+
 	.aside {
-		box-shadow: -3px 0 3px #aaa;
 		transition: width 200ms linear;
 	}
 
+	.aside:target {
+		box-shadow: -3px 0 3px #aaa;
+	}
+
 	.aside .toggle_aside,
 	#panel .close {
 		background: #f6f6f6;
@@ -1150,6 +1164,11 @@ a.btn {
 		padding: 0;
 	}
 
+	.post {
+		padding-right: 15px;
+		padding-left: 15px;
+	}
+
 	.nav_menu .btn {
 		margin: 5px 10px;
 	}

p/themes/Pafat/pafat.css

@@ -106,7 +106,7 @@ form th {
 }
 
 .form-group .group-controls {
-	margin: 10px 0 10px 220px;
+	margin-bottom: 10px;
 	padding: 5px 0;
 	min-height: 25px;
 
@@ -1105,11 +1105,24 @@ a.btn {
 /*===========*/
 
 @media (max-width: 840px) {
+	.form-group .group-name {
+		padding-bottom: 0;
+		text-align: left;
+	}
+
+	.box .box-title .configure,
+	.box .box-content .item .configure {
+		visibility: visible;
+	}
+
 	.aside {
-		box-shadow: 3px 0 3px #aaa;
 		transition: width 200ms linear;
 	}
 
+	.aside:target {
+		box-shadow: 3px 0 3px #aaa;
+	}
+
 	.aside .toggle_aside,
 	#panel .close {
 		background: #f6f6f6;
@@ -1173,4 +1186,9 @@ a.btn {
 	.notification a.close .icon {
 		display: none;
 	}
+
+	.post {
+		padding-left: 15px;
+		padding-right: 15px;
+	}
 }

p/themes/Pafat/pafat.rtl.css

@@ -106,7 +106,7 @@ form th {
 }
 
 .form-group .group-controls {
-	margin: 10px 220px 10px 0;
+	margin-bottom: 10px;
 	padding: 5px 0;
 	min-height: 25px;
 
@@ -1105,11 +1105,24 @@ a.btn {
 /*===========*/
 
 @media (max-width: 840px) {
+	.form-group .group-name {
+		padding-bottom: 0;
+		text-align: right;
+	}
+
+	.box .box-title .configure,
+	.box .box-content .item .configure {
+		visibility: visible;
+	}
+
 	.aside {
-		box-shadow: -3px 0 3px #aaa;
 		transition: width 200ms linear;
 	}
 
+	.aside:target {
+		box-shadow: -3px 0 3px #aaa;
+	}
+
 	.aside .toggle_aside,
 	#panel .close {
 		background: #f6f6f6;
@@ -1173,4 +1186,9 @@ a.btn {
 	.notification a.close .icon {
 		display: none;
 	}
+
+	.post {
+		padding-right: 15px;
+		padding-left: 15px;
+	}
 }

p/themes/Screwdriver/screwdriver.css

@@ -1237,6 +1237,16 @@ a.btn {
 /*===========*/
 
 @media screen and (max-width: 840px) {
+	.form-group .group-name {
+		padding-bottom: 0;
+		text-align: left;
+	}
+
+	.box .box-title .configure,
+	.box .box-content .item .configure {
+		visibility: visible;
+	}
+
 	.header {
 		display: table;
 	}
@@ -1268,11 +1278,6 @@ a.btn {
 		text-align: center;
 	}
 
-	.aside .btn-important {
-		margin: 20px 0 0;
-		display: inline-block;
-	}
-
 	.aside.aside_feed {
 		padding: 0;
 	}
@@ -1327,6 +1332,16 @@ a.btn {
 	#nav_entries {
 		width: 100%;
 	}
+
+	.post {
+		padding-left: 15px;
+		padding-right: 15px;
+	}
+
+	#close-slider.active {
+		background: #171717;
+		box-shadow: 0 1px rgba(255,255,255,0.08)
+	}
 }
 
 @media (max-width: 700px) {
@@ -1342,8 +1357,4 @@ a.btn {
 	.nav_menu .search {
 		display: inline-block;
 	}
-
-	.aside .btn-important {
-		display: none;
-	}
 }

p/themes/Screwdriver/screwdriver.rtl.css

@@ -1237,6 +1237,16 @@ a.btn {
 /*===========*/
 
 @media screen and (max-width: 840px) {
+	.form-group .group-name {
+		padding-bottom: 0;
+		text-align: right;
+	}
+
+	.box .box-title .configure,
+	.box .box-content .item .configure {
+		visibility: visible;
+	}
+
 	.header {
 		display: table;
 	}
@@ -1268,11 +1278,6 @@ a.btn {
 		text-align: center;
 	}
 
-	.aside .btn-important {
-		margin: 20px 0 0;
-		display: inline-block;
-	}
-
 	.aside.aside_feed {
 		padding: 0;
 	}
@@ -1327,6 +1332,16 @@ a.btn {
 	#nav_entries {
 		width: 100%;
 	}
+
+	.post {
+		padding-right: 15px;
+		padding-left: 15px;
+	}
+
+	#close-slider.active {
+		background: #171717;
+		box-shadow: 0 1px rgba(255,255,255,0.08)
+	}
 }
 
 @media (max-width: 700px) {
@@ -1342,8 +1357,4 @@ a.btn {
 	.nav_menu .search {
 		display: inline-block;
 	}
-
-	.aside .btn-important {
-		display: none;
-	}
 }

p/themes/Swage/swage.scss

@@ -1149,6 +1149,16 @@ form {
 		display: none;
 	}
 
+	.form-group .group-name {
+		padding-bottom: 0;
+		text-align: left;
+	}
+
+	.box .box-title .configure,
+	.box .box-content .item .configure {
+		visibility: visible;
+	}
+
 	.dropdown-header, .dropdown-menu > .item {
 		padding: 12px;
 	}
@@ -1203,6 +1213,13 @@ form {
 			padding: 0;
 		}
 
+		&.aside_feed .configure-feeds {
+			display: flex;
+			margin-top: 0;
+			margin-left: auto;
+			margin-right: auto;
+		}
+
 		&:target {
 			width: 78%;
 			z-index: 1000;
@@ -1275,6 +1292,11 @@ form {
 		width: 100% !important;
 	}
 
+	.post {
+		padding-left: 15px;
+		padding-right: 15px;
+	}
+
 	div#stream {
 		margin-top: 0px;
 	}

p/themes/base-theme/template.css

@@ -219,10 +219,19 @@ td.numeric {
 
 /*=== Buttons */
 .stick {
-	display: inline-block;
+	display: inline-flex;
+	max-width: 100%;
 	white-space: nowrap;
 }
 
+.stick > input.long {
+	flex-shrink: 1;
+}
+
+.stick > .btn {
+	flex-shrink: 0;
+}
+
 .btn,
 a.btn {
 	display: inline-block;
@@ -1031,6 +1040,10 @@ br {
 	left: 0;
 }
 
+#close-slider img {
+	display: none;
+}
+
 /*=== SLIDESHOW */
 /*==============*/
 .slides {
@@ -1199,7 +1212,6 @@ input:checked + .slide-container .properties {
 
 @media (max-width: 840px) {
 	.header,
-	.aside .btn-important,
 	.flux_header .item.website span,
 	.item.date, .day .date,
 	.dropdown-menu > .no-mobile,
@@ -1207,6 +1219,18 @@ input:checked + .slide-container .properties {
 		display: none;
 	}
 
+	.form-group {
+		margin-bottom: 10px;
+	}
+
+	.form-group .group-name {
+		float: none;
+	}
+
+	.form-group .group-controls {
+		margin-left: 0;
+	}
+
 	.dropdown .dropdown-menu {
 		width: 100%;
 		border-radius: 0;
@@ -1242,6 +1266,10 @@ input:checked + .slide-container .properties {
 		width: 90%;
 	}
 
+	.aside_feed .configure-feeds {
+		margin-top: 10px;
+	}
+
 	.flux_header .item.website {
 		width: 40px;
 	}
@@ -1274,6 +1302,26 @@ input:checked + .slide-container .properties {
 		width: 30px;
 		height: 30px;
 	}
+
+	#slider.active {
+		left: 0;
+		top: 50px;
+	}
+
+	#close-slider img {
+		display: initial;
+	}
+
+	#close-slider.active {
+		background: #f6f6f6;
+		display: block;
+		width: 100%;
+		height: 50px;
+		z-index: 10;
+		text-align: center;
+		line-height: 50px;
+		border-bottom: 1px solid #ddd;
+	}
 }
 
 /*=== PRINTER */

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

@@ -219,10 +219,19 @@ td.numeric {
 
 /*=== Buttons */
 .stick {
-	display: inline-block;
+	display: inline-flex;
+	max-width: 100%;
 	white-space: nowrap;
 }
 
+.stick > input.long {
+	flex-shrink: 1;
+}
+
+.stick > .btn {
+	flex-shrink: 0;
+}
+
 .btn,
 a.btn {
 	display: inline-block;
@@ -1031,6 +1040,10 @@ br {
 	right: 0;
 }
 
+#close-slider img {
+	display: none;
+}
+
 /*=== SLIDESHOW */
 /*==============*/
 .slides {
@@ -1199,7 +1212,6 @@ input:checked + .slide-container .properties {
 
 @media (max-width: 840px) {
 	.header,
-	.aside .btn-important,
 	.flux_header .item.website span,
 	.item.date, .day .date,
 	.dropdown-menu > .no-mobile,
@@ -1207,6 +1219,18 @@ input:checked + .slide-container .properties {
 		display: none;
 	}
 
+	.form-group {
+		margin-bottom: 10px;
+	}
+
+	.form-group .group-name {
+		float: none;
+	}
+
+	.form-group .group-controls {
+		margin-right: 0;
+	}
+
 	.dropdown .dropdown-menu {
 		width: 100%;
 		border-radius: 0;
@@ -1242,6 +1266,10 @@ input:checked + .slide-container .properties {
 		width: 90%;
 	}
 
+	.aside_feed .configure-feeds {
+		margin-top: 10px;
+	}
+
 	.flux_header .item.website {
 		width: 40px;
 	}
@@ -1274,6 +1302,26 @@ input:checked + .slide-container .properties {
 		width: 30px;
 		height: 30px;
 	}
+
+	#slider.active {
+		right: 0;
+		top: 50px;
+	}
+
+	#close-slider img {
+		display: initial;
+	}
+
+	#close-slider.active {
+		background: #f6f6f6;
+		display: block;
+		width: 100%;
+		height: 50px;
+		z-index: 10;
+		text-align: center;
+		line-height: 50px;
+		border-bottom: 1px solid #ddd;
+	}
 }
 
 /*=== PRINTER */