Improve design of .box

See https://github.com/marienfressinaud/FreshRSS/issues/646

9 files changed, 223 insertions, 44 deletions

diff --git a/app/layout/aside_feed.phtml b/app/layout/aside_feed.phtml
index c72710c2d..c028c4918 100644
--- a/app/layout/aside_feed.phtml
+++ b/app/layout/aside_feed.phtml
@@ -57,20 +57,4 @@
 	<li class="item<?php echo Minz_Request::actionName() == 'categorize' ? ' active' : ''; ?>">
 		<a href="<?php echo _url('configure', 'categorize'); ?>"><?php echo _t('categories_management'); ?></a>
 	</li>
-
-	<li class="separator"></li>
-
-	<?php if (!empty($this->feeds)) { ?>
-	<?php foreach ($this->feeds as $feed) { ?>
-	<?php $nbEntries = $feed->nbEntries(); ?>
-	<li class="item<?php echo (isset($this->flux) && $this->flux->id() == $feed->id()) ? ' active' : ''; ?><?php echo $feed->inError() ? ' error' : ''; ?><?php echo $nbEntries == 0 ? ' empty' : ''; ?>">
-		<a href="<?php echo _url('configure', 'feed', 'id', $feed->id()); ?>">
-			<img class="favicon" src="<?php echo $feed->favicon(); ?>" alt="✇" />
-			<?php echo $feed->name(); ?>
-		</a>
-	</li>
-	<?php } ?>
-	<?php } else { ?>
-	<li class="item disable"><?php echo _t('no_rss_feed'); ?></li>
-	<?php } ?>
 </ul>
diff --git a/app/views/configure/categorize.phtml b/app/views/configure/categorize.phtml
index b9d04ddb8..8f77f9724 100644
--- a/app/views/configure/categorize.phtml
+++ b/app/views/configure/categorize.phtml
@@ -12,12 +12,12 @@
 	<div class="box">
 		<div class="box-title"><label for="new-category"><?php echo _t('add_category'); ?></label></div>
 
-		<div class="box-content">
+		<ul class="box-content box-content-centered">
 			<form action="<?php echo _url('category', 'create'); ?>" method="post">
-				<input type="text" id="new-category" name="new-category" placeholder="<?php echo _t('new_category'); ?>" />
-				<input type="submit" value="<?php echo _t('submit'); ?>" />
+				<li class="item"><input type="text" id="new-category" name="new-category" placeholder="<?php echo _t('new_category'); ?>" /></li>
+				<li class="item"><button class="btn btn-important" type="submit"><?php echo _t('submit'); ?></button></li>
 			</form>
-		</div>
+		</ul>
 	</div>
 
 	<form id="controller-category" method="post" style="display: none;"></form>
@@ -27,10 +27,9 @@
 			$feeds = $cat->feeds();
 	?>
 	<div class="box">
-		<div class="box-title stick">
+		<div class="box-title">
 			<form action="<?php echo _url('category', 'update', 'id', $cat->id()); ?>" method="post">
 				<input type="text" name="name" value="<?php echo $cat->name(); ?>" />
-				<button class="btn" type="submit">✓</button>
 
 				<div class="dropdown">
 					<div id="dropdown-cat-<?php echo $cat->id(); ?>" class="dropdown-target"></div>
@@ -39,6 +38,10 @@
 					<ul class="dropdown-menu">
 						<li class="dropdown-close"><a href="#close">❌</a></li>
 
+						<li class="item"><a href="<?php echo _url('index', 'index', 'get', 'c_' . $cat->id()); ?>"><?php echo _t('filter'); ?></a></li>
+
+						<li class="separator"></li>
+
 						<?php if (!empty($feeds)) { ?>
 						<li class="item">
 							<button class="as-link confirm"
@@ -69,15 +72,14 @@
 						$error = $feed->inError() ? ' error' : '';
 						$empty = $feed->nbEntries() == 0 ? ' empty' : '';
 			?>
-			<li id="f_<?php echo $feed->id(); ?>" class="item<?php echo $error, $empty; ?>">
-				<a href="<?php echo _url('configure', 'feed', 'id', $feed->id()); ?>"><?php echo _i('configure'); ?></a>
+			<li class="item<?php echo $error, $empty; ?>">
+				<a class="configure" href="<?php echo _url('configure', 'feed', 'id', $feed->id()); ?>"><?php echo _i('configure'); ?></a>
 				<img class="favicon" src="<?php echo $feed->favicon(); ?>" alt="✇" /> <?php echo $feed->name(); ?>
 			</li>
-			<?php
-					}
+			<?php 	}
 				} else {
 			?>
-			<li>Empty</li>
+			<li class="item"><?php echo _t('category_empty'); ?></li>
 			<?php } ?>
 		</ul>
 	</div>
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index 10f6e655b..f3790614e 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -435,6 +435,35 @@ a.btn {
 	font-size: 0;
 }
 
+/*=== Boxes */
+.box {
+	border: 1px solid #000;
+	border-radius: 5px;
+}
+.box .box-title {
+	margin: 0;
+	padding: 5px 10px;
+	background: #26303F;
+	border-bottom: 1px solid #000;
+	border-radius: 5px 5px 0 0;
+}
+.box .box-content {
+	max-height: 260px;
+}
+
+.box .box-content .item {
+	padding: 0 10px;
+	font-size: 0.9rem;
+	line-height: 2.5em;
+}
+
+.box .box-content .item .configure {
+	visibility: hidden;
+}
+.box .box-content .item:hover .configure {
+	visibility: visible;
+}
+
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index 484cee9f3..d0ac46fd5 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -438,6 +438,36 @@ a.btn {
 	background: url("loader.gif") center center no-repeat #34495e;
 }
 
+/*=== Boxes */
+.box {
+	border: 1px solid #ddd;
+	border-radius: 5px;
+}
+.box .box-title {
+	margin: 0;
+	padding: 5px 10px;
+	background: #ecf0f1;
+	color: #333;
+	border-bottom: 1px solid #ddd;
+	border-radius: 5px 5px 0 0;
+}
+.box .box-content {
+	max-height: 260px;
+}
+
+.box .box-content .item {
+	padding: 0 10px;
+	font-size: 0.9rem;
+	line-height: 2.5em;
+}
+
+.box .box-content .item .configure {
+	visibility: hidden;
+}
+.box .box-content .item:hover .configure {
+	visibility: visible;
+}
+
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 08fc08379..e3ae85075 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -467,6 +467,36 @@ a.btn {
 	font-size: 0;
 }
 
+/*=== Boxes */
+.box {
+	background: #fff;
+	border-radius: 5px;
+	box-shadow: 0 0 3px #bbb;
+}
+.box .box-title {
+	margin: 0;
+	padding: 5px 10px;
+	background: #f6f6f6;
+	border-bottom: 1px solid #ddd;
+	border-radius: 5px 5px 0 0;
+}
+.box .box-content {
+	max-height: 260px;
+}
+
+.box .box-content .item {
+	padding: 0 10px;
+	font-size: 0.9rem;
+	line-height: 2.5em;
+}
+
+.box .box-content .item .configure {
+	visibility: hidden;
+}
+.box .box-content .item:hover .configure {
+	visibility: visible;
+}
+
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index a35ac861d..28b17e15f 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -491,6 +491,35 @@ a.btn {
 	font-size: 0;
 }
 
+/*=== Boxes */
+.box {
+	border: 1px solid #aaa;
+	border-radius: 5px;
+}
+.box .box-title {
+	margin: 0;
+	padding: 5px 10px;
+	background: #f6f6f6;
+	border-bottom: 1px solid #aaa;
+	border-radius: 5px 5px 0 0;
+}
+.box .box-content {
+	max-height: 260px;
+}
+
+.box .box-content .item {
+	padding: 0 10px;
+	font-size: 0.9rem;
+	line-height: 2.5em;
+}
+
+.box .box-content .item .configure {
+	visibility: hidden;
+}
+.box .box-content .item:hover .configure {
+	visibility: visible;
+}
+
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index 37fa18e10..6206504d1 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -497,6 +497,40 @@ a.btn {
 	font-size: 0;
 }
 
+/*=== Boxes */
+.box {
+	background: #EDE7DE;
+	border-radius: 4px 4px 0 0;
+}
+.box .box-title {
+	margin: 0;
+	padding: 5px 10px;
+	background: linear-gradient(0deg, #EDE7DE 0%, #fff 100%) #171717;
+	background: -webkit-linear-gradient(bottom, #EDE7DE 0%, #fff 100%);
+	box-shadow: 0px -1px #fff inset,0 -2px #ccc inset;
+	color: #888;
+	text-shadow: 0 1px #ccc;
+	border-radius: 4px 4px 0 0;
+	font-size: 1.1rem;
+	font-weight: normal;
+}
+.box .box-content {
+	max-height: 260px;
+}
+
+.box .box-content .item {
+	padding: 0 10px;
+	font-size: 0.9rem;
+	line-height: 2.5em;
+}
+
+.box .box-content .item .configure {
+	visibility: hidden;
+}
+.box .box-content .item:hover .configure {
+	visibility: visible;
+}
+
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css
index ccfab10df..3f6ae956d 100644
--- a/p/themes/base-theme/base.css
+++ b/p/themes/base-theme/base.css
@@ -329,6 +329,30 @@ a.btn {
 	font-size: 0;
 }
 
+/*=== Boxes */
+.box {
+}
+.box .box-title {
+	margin: 0;
+	padding: 5px 10px;
+}
+.box .box-content {
+	max-height: 260px;
+}
+
+.box .box-content .item {
+	padding: 0 10px;
+	font-size: 0.9rem;
+	line-height: 2.5em;
+}
+
+.box .box-content .item .configure {
+	visibility: hidden;
+}
+.box .box-content .item:hover .configure {
+	visibility: visible;
+}
+
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index 792eac299..a5a29ab23 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -280,6 +280,40 @@ a.btn {
 	width: 100px;
 }
 
+/*=== Boxes */
+.box {
+	display: inline-block;
+	width: 20rem;
+	max-width: 95%;
+	margin: 20px 10px;
+	border: 1px solid #ccc;
+	vertical-align: top;
+}
+.box .box-title {
+	font-size: 1.2rem;
+	font-weight: bold;
+	text-align: center;
+}
+.box .box-title form {
+	margin: 0;
+}
+.box .box-content {
+	display: block;
+	overflow: auto;
+}
+.box .box-content .item {
+	display: block;
+}
+
+.box .box-content-centered {
+	padding: 30px 5px;
+	text-align: center;
+}
+.box .box-content-centered .btn {
+	margin: 20px 0 0;
+}
+
+
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */
@@ -585,23 +619,6 @@ br + br + br {
 }
 /* TODO </delete */
 
-.box {
-	display: inline-block;
-	width: 19em;
-	max-width: 95%;
-	margin: 20px 10px;
-	border: 1px solid #ccc;
-	vertical-align: top;
-}
-.box .box-content {
-	display: block;
-	overflow: auto;
-}
-.box .box-content .item {
-	width: 19em;
-	max-width: 90%;
-}
-
 /*=== Panel */
 #overlay {
 	display: none;