From 6b7b38db54c4108ed7ba798093ae89e89ab96638 Mon Sep 17 00:00:00 2001
From: Teromene <teromene@teromene.fr>
Date: Tue, 2 Aug 2016 22:16:43 +0200
Subject: [PATCH] Improved new style.

---
 css/style.css     | 65 +++++++++++++++++++++++++++++++++++++++++++++++
 index.php         | 11 ++++----
 lib/HTMLUtils.php |  3 +++
 3 files changed, 74 insertions(+), 5 deletions(-)

diff --git a/css/style.css b/css/style.css
index e378f57..4ad2a3e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -58,6 +58,20 @@ section {
 
 }
 
+
+section:last-of-type {
+
+	opacity: 0.5;
+
+}
+
+section:last-of-type:hover {
+
+	opacity: 1;
+
+}
+
+
 section > h2 {
 
 	font-size: 200%;
@@ -90,6 +104,13 @@ button {
 
 }
 
+button.small {
+
+	width: auto;
+	line-height: 1.2em;
+
+}
+
 .description {
 
 	margin: 10px;
@@ -128,3 +149,47 @@ input[type="text"] {
 	padding-left: 4px;
 
 }
+
+form {
+
+	display: none;
+
+}
+
+h5 {
+
+	display: none;
+
+}
+
+.showmore-box {
+
+	display: none;
+
+}
+
+.showmore, .showless {
+
+	color: #888888;
+
+}
+
+.showmore-box:checked ~ .showmore {
+
+	display: none;
+
+}
+
+.showmore-box:not(:checked) ~ .showless {
+
+	display: none;
+
+}
+
+
+
+.showmore-box:checked ~ form, .showmore-box:checked ~ h5 {
+
+	display: block;
+
+}
diff --git a/index.php b/index.php
index d81b8c5..57cb12f 100644
--- a/index.php
+++ b/index.php
@@ -182,11 +182,12 @@ $formats = Format::searchInformation();
 				$inactiveBridges .= HTMLUtils::displayBridgeCard($bridgeName, $formats, false) . PHP_EOL;
 			}
 		}
-		echo '<hr />' . $inactiveBridges;
+		echo $inactiveBridges;
 	?>
-    <footer>
-		<?= $activeFoundBridgeCount; ?>/<?= count($bridgeList) ?> active bridges (<a href="?show_inactive=1">Show inactive</a>)<br />
-        <a href="https://github.com/sebsauvage/rss-bridge">RSS-Bridge alpha 0.2 ~ Public Domain</a>
-    </footer>
+    <section>
+        <a href="https://github.com/sebsauvage/rss-bridge">RSS-Bridge alpha 0.2 ~ Public Domain</a><br />
+		<?= $activeFoundBridgeCount; ?>/<?= count($bridgeList) ?> active bridges. <br />
+		<a href="?show_inactive=1"><button class="small">Show inactive bridges</button></a><br />
+    </section>
     </body>
 </html>
diff --git a/lib/HTMLUtils.php b/lib/HTMLUtils.php
index ce08efa..349da14 100644
--- a/lib/HTMLUtils.php
+++ b/lib/HTMLUtils.php
@@ -35,6 +35,8 @@ class HTMLUtils {
 			<p class="description">
 				{$description}
 			</p>
+			<input type="checkbox" class="showmore-box" id="showmore-{$bridgeName}" />
+			<label class="showmore" for="showmore-{$bridgeName}">Show more</label>
 CARD;
 
 		// If we don't have any parameter for the bridge, we print a generic form to load it.
@@ -141,6 +143,7 @@ CARD;
 
 		}
 
+		$card .= '<label class="showless" for="showmore-' . $bridgeName . '">Show less</label>';
 		$card .= '<p class="maintainer">'.$bridgeElement->maintainer.'</p>';
 		$card .= '</section>';