feature 1507: better display for available themes (floating boxes)

git-svn-id: http://piwigo.org/svn/trunk@5145 68402e56-0260-453c-a942-63ccdbb3a9ee

4 files changed, 23 insertions, 6 deletions

diff --git a/admin/themes/clear/theme.css b/admin/themes/clear/theme.css
index 85cfdb515..656f4ed74 100644
--- a/admin/themes/clear/theme.css
+++ b/admin/themes/clear/theme.css
@@ -194,3 +194,7 @@ html>body #menubar {min-height:477px; height:477px;} /* IE 7 and modern browsers
 *+html  .bigtext { left: 70px; }
 *+html  .bigbutton input, * html  .bigbutton input  { left:0px; position:relative; top:-40px; }
 * html .bigtext { margin-right: 300px; }
+
+.themeBox {background-color:#eee;}
+.themeBox IMG {border:1px solid white;}
+.themeName {color:black;}
diff --git a/admin/themes/default/default-layout.css b/admin/themes/default/default-layout.css
index a14f6632b..6b7827fad 100644
--- a/admin/themes/default/default-layout.css
+++ b/admin/themes/default/default-layout.css
@@ -735,4 +735,10 @@ BODY#thePopuphelpPage {
 .content UL.thumbnails SPAN.thumbLegend {
   display: block;  /* display: none; if you don't want legend */
   height: 4em;    /* legend height (don't set auto to be Gecko friendly)*/
-}
\ No newline at end of file
+}
+
+.themeBox {float:left; text-align:center; height:170px; background-color:#eee; margin:5px; -moz-border-radius:5px;}
+.themeBox IMG {border:1px solid white; margin:0 15px;}
+.themeName {font-size:1.1em; margin:5px 0;}
+.themeActions {margin:5px 0;}
+.themeActions A {display:block;}
diff --git a/admin/themes/default/template/themes_new.tpl b/admin/themes/default/template/themes_new.tpl
index 7317b7df5..0edcb4130 100644
--- a/admin/themes/default/template/themes_new.tpl
+++ b/admin/themes/default/template/themes_new.tpl
@@ -3,11 +3,13 @@
 </div>
 
 {if isset($themes)}
-<ul>
+<div id="themesBox">
 {foreach from=$new_themes item=theme name=themes_loop}
-  <li>
-    <img src="{$theme.src}"> {$theme.name} <a href="{$theme.install_url}">Install</a>
-  </li>
+  <div class="themeBox">
+    <div class="themeName">{$theme.name}</div>
+    <div class="themeShot"><img src="{$theme.src}"></div>
+    <div class="themeActions"><a href="{$theme.install_url}">Install</a></div>
+  </div>
 {/foreach}
-</ul>
+</div> <!-- themesBox -->
 {/if}
\ No newline at end of file
diff --git a/admin/themes/roma/theme.css b/admin/themes/roma/theme.css
index 81af6c627..f66413ac4 100644
--- a/admin/themes/roma/theme.css
+++ b/admin/themes/roma/theme.css
@@ -217,3 +217,8 @@ html>body #menubar {min-height:477px; height:477px;} /* IE 7 and modern browsers
 
 #adminHome       {background-color:#222;}
 #adminHome:hover {background-color:#333;}
+
+.themeBox {background-color:#333;}
+.themeBox IMG {border:1px solid #666;}
+.themeName {color:white;}
+.themeActions A {border-bottom:none;}