From ec55aa94bfb30cdb0cd701785189215dfaf2094a Mon Sep 17 00:00:00 2001
From: Alexis Degrugillier <github@ainw.org>
Date: Sat, 15 Nov 2014 18:02:22 -0500
Subject: 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
---
 app/views/configure/display.phtml | 34 +++++++++++++++++++++++-----------
 1 file changed, 23 insertions(+), 11 deletions(-)

(limited to 'app/views/configure')

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>
 
-- 
cgit v1.2.3