Theme selection redesign

I made a CSS3 gallery to select the theme. Now you can see the theme before applying it.
Comments are welcome.

See #571

7 files changed, 115 insertions, 11 deletions

diff --git a/app/views/configure/display.phtml b/app/views/configure/display.phtml
index 69205fa93..39582249e 100644
--- a/app/views/configure/display.phtml
+++ b/app/views/configure/display.phtml
@@ -21,17 +21,29 @@
 		<div class="form-group">
 			<label class="group-name" for="theme"><?php echo _t('theme'); ?></label>
 			<div class="group-controls">
-				<select name="theme" id="theme" required=""><?php
-					$found = false;
-					foreach ($this->themes as $theme) {
-						?><option value="<?php echo $theme['id']; ?>"<?php if (FreshRSS_Context::$conf->theme === $theme['id']) { echo ' selected="selected"'; $found = true; } ?>><?php
-							echo $theme['name'] . ' — ' . _t('by') . ' ' . $theme['author'];
-						?></option><?php
-					}
-					if (!$found) {
-						?><option selected="selected"></option><?php
-					}
-				?></select>
+				<ul class="slides">
+					<?php $slides = count($this->themes); $i = 1; ?>
+					<?php foreach($this->themes as $theme) { ?>
+						<input type="radio" name="theme" id="img-<?php echo $i ?>" <?php if (FreshRSS_Context::$conf->theme === $theme['id']) {echo "checked";}?> value="<?php echo $theme['id'] ?>"/>
+						<li class="slide-container">
+							<div class="slide">
+								<img src="<?php echo Minz_Url::display('/themes/' . $theme['id'] . '/thumbs/original.png')?>"/>
+							</div>
+							<div class="nav">
+								<?php if ($i !== 1) {?>
+									<label for="img-<?php echo $i - 1 ?>" class="prev">&#x2039;</label>
+								<?php } ?>
+								<?php if ($i !== $slides) {?>
+									<label for="img-<?php echo $i + 1 ?>" class="next">&#x203a;</label>
+								<?php } ?>
+							</div>
+							<div class="properties">
+								<?php echo $theme['name'] . ' — ' . _t('by') . ' ' . $theme['author']?>
+							</div>
+						</li>
+						<?php $i++ ?>
+					<?php } ?>
+				</ul>
 			</div>
 		</div>
 
diff --git a/p/themes/Dark/thumbs/original.png b/p/themes/Dark/thumbs/original.png
new file mode 100644
index 000000000..fd574319f
--- /dev/null
+++ b/p/themes/Dark/thumbs/original.png
diff --git a/p/themes/Flat/thumbs/original.png b/p/themes/Flat/thumbs/original.png
new file mode 100644
index 000000000..b9cafa9c8
--- /dev/null
+++ b/p/themes/Flat/thumbs/original.png
diff --git a/p/themes/Origine/thumbs/original.png b/p/themes/Origine/thumbs/original.png
new file mode 100644
index 000000000..d26d4fbed
--- /dev/null
+++ b/p/themes/Origine/thumbs/original.png
diff --git a/p/themes/Pafat/thumbs/original.png b/p/themes/Pafat/thumbs/original.png
new file mode 100644
index 000000000..fe05f7260
--- /dev/null
+++ b/p/themes/Pafat/thumbs/original.png
diff --git a/p/themes/Screwdriver/thumbs/original.png b/p/themes/Screwdriver/thumbs/original.png
new file mode 100644
index 000000000..ba9bacf90
--- /dev/null
+++ b/p/themes/Screwdriver/thumbs/original.png
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index f696ac237..aab511fb9 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -683,6 +683,98 @@ br + br + br {
 	left: 0;
 }
 
+/*=== SLIDESHOW */
+/*==============*/
+.slides {
+	padding: 0;
+	height: 320px;
+	display: block;
+	position: relative;
+	min-width: 260px;
+	max-width: 640px;
+}
+.slides * {
+	user-select: none;
+	-ms-user-select: none;
+	-moz-user-select: none;
+	-khtml-user-select: none;
+	-webkit-user-select: none;
+	-webkit-touch-callout: none;
+}
+.slides input {
+	display: none;
+}
+.slide-container {
+	display: block;
+}
+.slide {
+	top: 0;
+	opacity: 0;
+	width: 100%;
+	height: 100%;
+	display: block;
+	position: absolute;
+	transform: scale(0);
+	transition: all .7s ease-in-out;
+}
+.slide img {
+	width: 100%;
+	height: 100%;
+}
+.nav label {
+	width: 10%;
+	height: 100%;
+	display: none;
+	position: absolute;
+	opacity: 0;
+	z-index: 9;
+	cursor: pointer;
+	transition: opacity .2s;
+	color: #FFF;
+	font-size: 1000%;
+	text-align: center;
+	line-height: 225%;
+	font-family: "Varela Round", sans-serif;
+	background-color: rgba(255, 255, 255, .3);
+	text-shadow: 0px 0px 15px rgb(119, 119, 119);
+	padding: 0;
+}
+.properties {
+	bottom: 15px;
+	display: none;
+	left: 15%;
+	padding: 5px;
+	position: absolute;
+	text-align: center;
+	width: 70%;
+	font-size: 15pt;
+	text-shadow: 0px 0px 15px rgb(119, 119, 119);
+	border-radius: 5px;
+	box-shadow: 5px 5px 10px;
+	border: 1px solid;
+	background-color: #fff;
+}
+.slide:hover + .nav label {
+	opacity: 0.5;
+}
+.slide:hover ~ .properties {
+	display: block;
+}
+.nav label:hover {
+	opacity: 1;
+}
+.nav .next {
+	right: 0;
+}
+input:checked + .slide-container .slide {
+	opacity: 1;
+	transform: scale(1);
+	transition: opacity 1s ease-in-out;
+}
+input:checked + .slide-container .nav label {
+	display: block;
+}
+
 /*=== DIVERS */
 /*===========*/
 .category .title:not([data-unread="0"]):after {