Settings: User queries - layout upgrade (#3827)

* draft

* deleted the out commeted code

* improved alert messages

* Update queries.phtml

* Theme base-theme/template.css

* fixed theme: Origin

* Fixed: Theme Adark

* Fixed: Theme Ansum

* Fix: Theme BlueLagoon

* Fix: Theme Dark

* Fix: Theme Flat

* Fix: Theme Mapco

* Fix: Theme Mapco (SCSS)

* Fix: Theme Origine-compact

* Fix: Theme Pafat

* Fix: Theme Screwdriver

* Fix: Theme Swage

* Lint CSS, RTL, and i18n

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

app/i18n/he/admin.php

@@ -134,7 +134,7 @@ return array(
 		'feed_per_category' => 'הזנות על פי קטגוריה',
 		'idle' => 'הזנות שלא עודכנו',
 		'main' => 'סטטיסטיקות ראשיות',
-		'main_stream' => 'הזנה ראשית',		
+		'main_stream' => 'הזנה ראשית',
 		'no_idle' => 'אין הזנות מובטלות!',
 		'number_entries' => '%d מאמרים',
 		'percent_of_total' => '%% מסך הכל',

app/views/configure/queries.phtml

@@ -11,51 +11,47 @@
 
 		<?php foreach ($this->queries as $key => $query) { ?>
 		<div class="form-group" id="query-group-<?= $key ?>" draggable="true">
-			<label class="group-name" for="queries_<?= $key ?>_name">
-				<?= _t('conf.query.number', $key + 1) ?>
-			</label>
-
-			<div class="group-controls">
-				<?= $query->getName() ?>
-				<a class="configure open-slider" href="<?= _url('configure', 'query', 'id', $key) ?>"><?= _i('configure') ?></a>
-				<input type="hidden" id="queries_<?= $key ?>_name" name="queries[<?= $key ?>][name]" value="<?= $query->getName() ?>"/>
-				<input type="hidden" id="queries_<?= $key ?>_url" name="queries[<?= $key ?>][url]" value="<?= $query->getUrl() ?>"/>
-				<input type="hidden" id="queries_<?= $key ?>_search" name="queries[<?= $key ?>][search]" value="<?= urlencode($query->getSearch()) ?>"/>
-				<input type="hidden" id="queries_<?= $key ?>_state" name="queries[<?= $key ?>][state]" value="<?= $query->getState() ?>"/>
-				<input type="hidden" id="queries_<?= $key ?>_order" name="queries[<?= $key ?>][order]" value="<?= $query->getOrder() ?>"/>
-				<input type="hidden" id="queries_<?= $key ?>_get" name="queries[<?= $key ?>][get]" value="<?= $query->getGet() ?>"/>
-
+			<div class="box">
+				<div class="box-title">
+					<a class="configure open-slider" href="<?= _url('configure', 'query', 'id', $key) ?>"><?= _i('configure') ?></a><?= $query->getName() ?>
+					<input type="hidden" id="queries_<?= $key ?>_name" name="queries[<?= $key ?>][name]" value="<?= $query->getName() ?>"/>
+					<input type="hidden" id="queries_<?= $key ?>_url" name="queries[<?= $key ?>][url]" value="<?= $query->getUrl() ?>"/>
+					<input type="hidden" id="queries_<?= $key ?>_search" name="queries[<?= $key ?>][search]" value="<?= urlencode($query->getSearch()) ?>"/>
+					<input type="hidden" id="queries_<?= $key ?>_state" name="queries[<?= $key ?>][state]" value="<?= $query->getState() ?>"/>
+					<input type="hidden" id="queries_<?= $key ?>_order" name="queries[<?= $key ?>][order]" value="<?= $query->getOrder() ?>"/>
+					<input type="hidden" id="queries_<?= $key ?>_get" name="queries[<?= $key ?>][get]" value="<?= $query->getGet() ?>"/>
+				</div>
 				<?php if (!$query->hasParameters()) { ?>
-				<div class="alert alert-warn">
-					<div class="alert-head"><?= _t('conf.query.no_filter') ?></div>
+				<div class="box-content">
+					<div class="alert alert-warn">
+						<div class="alert-head"><?= _t('conf.query.no_filter') ?></div>
+					</div>
 				</div>
 				<?php } elseif ($query->isDeprecated()) { ?>
-				<div class="alert alert-error">
-					<div class="alert-head"><?= _t('conf.query.deprecated') ?></div>
+				<div class="box-content">
+					<div class="alert alert-error">
+						<div class="alert-head"><?= _t('conf.query.deprecated') ?></div>
+					</div>
 				</div>
 				<?php } else { ?>
-				<div class="alert alert-success">
-					<div class="alert-head"><?= _t('conf.query.filter') ?></div>
+					<ul class="box-content">
+					<?php if ($query->hasSearch()) { ?>
+					<li class="item"><?= _t('conf.query.search', htmlspecialchars($query->getSearch()->getRawInput(), ENT_NOQUOTES, 'UTF-8')) ?></li>
+					<?php } ?>
 
-					<ul>
-						<?php if ($query->hasSearch()) { ?>
-						<li class="item"><?= _t('conf.query.search', htmlspecialchars($query->getSearch()->getRawInput(), ENT_NOQUOTES, 'UTF-8')) ?></li>
-						<?php } ?>
+					<?php if ($query->getState()) { ?>
+					<li class="item"><?= _t('conf.query.state_' . $query->getState()) ?></li>
+					<?php } ?>
 
-						<?php if ($query->getState()) { ?>
-						<li class="item"><?= _t('conf.query.state_' . $query->getState()) ?></li>
-						<?php } ?>
+					<?php if ($query->getOrder()) { ?>
+					<li class="item"><?= _t('conf.query.order_' . strtolower($query->getOrder())) ?></li>
+					<?php } ?>
 
-						<?php if ($query->getOrder()) { ?>
-						<li class="item"><?= _t('conf.query.order_' . strtolower($query->getOrder())) ?></li>
-						<?php } ?>
-
-						<?php if ($query->getGet()) { ?>
-						<li class="item"><?= _t('conf.query.get_' . $query->getGetType(), $query->getGetName()) ?></li>
-						<?php } ?>
+					<?php if ($query->getGet()) { ?>
+					<li class="item"><?= _t('conf.query.get_' . $query->getGetType(), $query->getGetName()) ?></li>
+					<?php } ?>
+					<?php } ?>
 					</ul>
-				</div>
-				<?php } ?>
 			</div>
 		</div>
 		<?php } ?>

cli/i18n/ignore/en-us.php

@@ -86,9 +86,6 @@ return array(
 	'admin.stats.idle',
 	'admin.stats.main',
 	'admin.stats.main_stream',
-	'admin.stats.menu.idle',
-	'admin.stats.menu.main',
-	'admin.stats.menu.repartition',
 	'admin.stats.no_idle',
 	'admin.stats.number_entries',
 	'admin.stats.percent_of_total',
@@ -762,6 +759,9 @@ return array(
 	'sub.menu.add',
 	'sub.menu.import_export',
 	'sub.menu.label_management',
+	'sub.menu.stats.idle',
+	'sub.menu.stats.main',
+	'sub.menu.stats.repartition',
 	'sub.menu.subscription_management',
 	'sub.menu.subscription_tools',
 	'sub.tag.name',

p/themes/Alternative-Dark/adark.css

@@ -459,13 +459,17 @@ a.btn {
 	border-radius: 5px 5px 0 0;
 }
 
+.box .box-title .configure {
+	margin-right: 4px;
+}
+
 .box .box-content {
+	padding-left: 30px;
 	min-height: 2.5em;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }

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

@@ -459,13 +459,17 @@ a.btn {
 	border-radius: 5px 5px 0 0;
 }
 
+.box .box-title .configure {
+	margin-left: 4px;
+}
+
 .box .box-content {
+	padding-right: 30px;
 	min-height: 2.5em;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }

p/themes/Ansum/_components.scss

@@ -221,10 +221,6 @@
 		// border-bottom: 1px solid #ddd;
 		border-radius: 2px 2px 0 0;
 
-		img {
-			margin-right: 0.75rem;
-		}
-
 		&:hover {
 			.configure {
 				background: url("icons/cog.svg") no-repeat 4px 4px;
@@ -269,12 +265,18 @@
 				}
 			}
 		}
+
+		.configure {
+			margin-right: 4px;
+		}
 	}
 
 	.box-content {
 		// max-height: 260px;
+		padding-left: 30px;
+
 		.item {
-			padding: 0.5rem 0.75rem;
+			padding: 0.5rem 0;
 			color: $main-font-color;
 			font-size: 1rem;
 			border-bottom: 1px solid $grey-light;

p/themes/Ansum/ansum.css

@@ -392,9 +392,6 @@ form th {
 	color: #363330;
 	border-radius: 2px 2px 0 0;
 }
-.box .box-title img {
-	margin-right: 0.75rem;
-}
 .box .box-title:hover .configure {
 	background: url("icons/cog.svg") no-repeat 4px 4px;
 	display: block;
@@ -428,8 +425,14 @@ form th {
 .box .box-title form .dropdown a.dropdown-toggle img {
 	display: none;
 }
+.box .box-title .configure {
+	margin-right: 4px;
+}
+.box .box-content {
+	padding-left: 30px;
+}
 .box .box-content .item {
-	padding: 0.5rem 0.75rem;
+	padding: 0.5rem 0;
 	color: #363330;
 	font-size: 1rem;
 	border-bottom: 1px solid #f5f0ec;

p/themes/Ansum/ansum.rtl.css

@@ -392,9 +392,6 @@ form th {
 	color: #363330;
 	border-radius: 2px 2px 0 0;
 }
-.box .box-title img {
-	margin-left: 0.75rem;
-}
 .box .box-title:hover .configure {
 	background: url("icons/cog.svg") no-repeat 4px 4px;
 	display: block;
@@ -428,8 +425,14 @@ form th {
 .box .box-title form .dropdown a.dropdown-toggle img {
 	display: none;
 }
+.box .box-title .configure {
+	margin-left: 4px;
+}
+.box .box-content {
+	padding-right: 30px;
+}
 .box .box-content .item {
-	padding: 0.5rem 0.75rem;
+	padding: 0.5rem 0;
 	color: #363330;
 	font-size: 1rem;
 	border-bottom: 1px solid #f5f0ec;

p/themes/BlueLagoon/BlueLagoon.css

@@ -537,12 +537,16 @@ a.btn {
 	font-weight: normal;
 }
 
+.box .box-title .configure {
+	margin-right: 4px;
+}
+
 .box .box-content {
+	padding-left: 30px;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }

p/themes/BlueLagoon/BlueLagoon.rtl.css

@@ -537,12 +537,16 @@ a.btn {
 	font-weight: normal;
 }
 
+.box .box-title .configure {
+	margin-left: 4px;
+}
+
 .box .box-content {
+	padding-right: 30px;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }

p/themes/Dark/dark.css

@@ -481,6 +481,10 @@ a.btn {
 	border-radius: 5px;
 }
 
+.box .icon {
+	filter: brightness(100%);
+}
+
 .box .box-title {
 	margin: 0;
 	padding: 5px 10px;
@@ -489,12 +493,16 @@ a.btn {
 	border-radius: 5px 5px 0 0;
 }
 
+.box .box-title .configure {
+	margin-right: 4px;
+}
+
 .box .box-content {
+	padding-left: 30px;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }

p/themes/Dark/dark.rtl.css

@@ -481,6 +481,10 @@ a.btn {
 	border-radius: 5px;
 }
 
+.box .icon {
+	filter: brightness(100%);
+}
+
 .box .box-title {
 	margin: 0;
 	padding: 5px 10px;
@@ -489,12 +493,16 @@ a.btn {
 	border-radius: 5px 5px 0 0;
 }
 
+.box .box-title .configure {
+	margin-left: 4px;
+}
+
 .box .box-content {
+	padding-right: 30px;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }

p/themes/Flat/flat.css

@@ -490,12 +490,16 @@ a.btn {
 	border-radius: 5px 5px 0 0;
 }
 
+.box .box-title .configure {
+	margin-right: 4px;
+}
+
 .box .box-content {
+	padding-left: 30px;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }

p/themes/Flat/flat.rtl.css

@@ -490,12 +490,16 @@ a.btn {
 	border-radius: 5px 5px 0 0;
 }
 
+.box .box-title .configure {
+	margin-left: 4px;
+}
+
 .box .box-content {
+	padding-right: 30px;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }

p/themes/Mapco/_components.scss

@@ -221,8 +221,8 @@
 		// border-bottom: 1px solid #ddd;
 		border-radius: 2px 2px 0 0;
 
-		img {
-			margin-right: 0.75rem;
+		.configure {
+			margin-right: 4px;
 		}
 
 		&:hover {
@@ -274,8 +274,10 @@
 
 	.box-content {
 		// max-height: 260px;
+		padding-left: 30px;
+
 		.item {
-			padding: 0.5rem 0.75rem;
+			padding: 0.5rem 0;
 			color: $main-font-color;
 			font-size: 1rem;
 			border-bottom: 1px solid $grey-light;

p/themes/Mapco/mapco.css

@@ -394,8 +394,8 @@ form th {
 	color: #303136;
 	border-radius: 2px 2px 0 0;
 }
-.box .box-title img {
-	margin-right: 0.75rem;
+.box .box-title .configure {
+	margin-right: 4px;
 }
 .box .box-title:hover .configure {
 	background: url("icons/cog.svg") no-repeat 4px 4px;
@@ -430,8 +430,11 @@ form th {
 .box .box-title form .dropdown a.dropdown-toggle img {
 	display: none;
 }
+.box .box-content {
+	padding-left: 30px;
+}
 .box .box-content .item {
-	padding: 0.5rem 0.75rem;
+	padding: 0.5rem 0;
 	color: #303136;
 	font-size: 1rem;
 	border-bottom: 1px solid #eff0f2;

p/themes/Mapco/mapco.rtl.css

@@ -394,8 +394,8 @@ form th {
 	color: #303136;
 	border-radius: 2px 2px 0 0;
 }
-.box .box-title img {
-	margin-left: 0.75rem;
+.box .box-title .configure {
+	margin-left: 4px;
 }
 .box .box-title:hover .configure {
 	background: url("icons/cog.svg") no-repeat 4px 4px;
@@ -430,8 +430,11 @@ form th {
 .box .box-title form .dropdown a.dropdown-toggle img {
 	display: none;
 }
+.box .box-content {
+	padding-right: 30px;
+}
 .box .box-content .item {
-	padding: 0.5rem 0.75rem;
+	padding: 0.5rem 0;
 	color: #303136;
 	font-size: 1rem;
 	border-bottom: 1px solid #eff0f2;

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

@@ -523,13 +523,17 @@ a.btn,
 	border-radius: 5px 5px 0 0;
 }
 
+.box .box-title .configure {
+	margin-right: 4px;
+}
+
 .box .box-content {
+	padding-left: 30px;
 	min-height: 2.5em;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }

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

@@ -523,13 +523,17 @@ a.btn,
 	border-radius: 5px 5px 0 0;
 }
 
+.box .box-title .configure {
+	margin-left: 4px;
+}
+
 .box .box-content {
+	padding-right: 30px;
 	min-height: 2.5em;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }

p/themes/Origine/origine.css

@@ -508,13 +508,17 @@ a.btn {
 	border-radius: 5px 5px 0 0;
 }
 
+.box .box-title .configure {
+	margin-right: 4px;
+}
+
 .box .box-content {
+	padding-left: 30px;
 	min-height: 2.5em;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }

p/themes/Origine/origine.rtl.css

@@ -508,13 +508,17 @@ a.btn {
 	border-radius: 5px 5px 0 0;
 }
 
+.box .box-title .configure {
+	margin-left: 4px;
+}
+
 .box .box-content {
+	padding-right: 30px;
 	min-height: 2.5em;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }

p/themes/Pafat/pafat.css

@@ -481,12 +481,16 @@ a.btn {
 	border-radius: 5px 5px 0 0;
 }
 
+.box .box-title .configure {
+	margin-right: 4px;
+}
+
 .box .box-content {
+	padding-left: 30px;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }

p/themes/Pafat/pafat.rtl.css

@@ -481,12 +481,16 @@ a.btn {
 	border-radius: 5px 5px 0 0;
 }
 
+.box .box-title .configure {
+	margin-left: 4px;
+}
+
 .box .box-content {
+	padding-right: 30px;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }

p/themes/Screwdriver/screwdriver.css

@@ -535,12 +535,16 @@ a.btn {
 	font-weight: normal;
 }
 
+.box .box-title .configure {
+	margin-right: 4px;
+}
+
 .box .box-content {
+	padding-left: 30px;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }

p/themes/Screwdriver/screwdriver.rtl.css

@@ -535,12 +535,16 @@ a.btn {
 	font-weight: normal;
 }
 
+.box .box-title .configure {
+	margin-left: 4px;
+}
+
 .box .box-content {
+	padding-right: 30px;
 	max-height: 260px;
 }
 
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }

p/themes/Swage/swage.css

@@ -461,11 +461,14 @@ form th {
 	color: #969696;
 	border-bottom: 1px solid #e3e3e3;
 }
+.box .box-title .configure {
+	margin-right: 4px;
+}
 .box .box-content {
+	padding-left: 30px;
 	max-height: 260px;
 }
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }

p/themes/Swage/swage.rtl.css

@@ -461,11 +461,14 @@ form th {
 	color: #969696;
 	border-bottom: 1px solid #e3e3e3;
 }
+.box .box-title .configure {
+	margin-left: 4px;
+}
 .box .box-content {
+	padding-right: 30px;
 	max-height: 260px;
 }
 .box .box-content .item {
-	padding: 0 10px;
 	font-size: 0.9rem;
 	line-height: 2.5em;
 }

p/themes/Swage/swage.scss

@@ -578,7 +578,13 @@ form {
 		border-bottom: 1px solid darken( $color_light, 10%);
 	}
 
+	.configure {
+		margin-right: 4px;
+	}
+
+
 	.box-content {
+		padding-left: 30px;
 		max-height: 260px;
 
 		.item {

p/themes/base-theme/template.css

@@ -484,11 +484,12 @@ a.btn {
 }
 
 .box .box-content {
+	padding: 8px 8px 8px 16px;
 	display: block;
 	overflow: auto;
 }
 
-.box .box-content .item {
+.box .box-content .item.feed {
 	display: block;
 }
 

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

@@ -484,11 +484,12 @@ a.btn {
 }
 
 .box .box-content {
+	padding: 8px 16px 8px 8px;
 	display: block;
 	overflow: auto;
 }
 
-.box .box-content .item {
+.box .box-content .item.feed {
 	display: block;
 }