Theme admin refinement. Make more room to show the preview by enlarging the iframe and removing the heading above it.

4 files changed, 50 insertions, 32 deletions

diff --git a/core/views/admin_themes.html.php b/core/views/admin_themes.html.php
index f8dc0812..5e10a803 100644
--- a/core/views/admin_themes.html.php
+++ b/core/views/admin_themes.html.php
@@ -8,44 +8,44 @@
   var select_url = "<?= url::site("admin/themes/choose") ?>";
   select = function(type, id) {
     $.post(select_url, {"type": type, "id": id, "csrf": '<?= access::csrf_token() ?>'},
-           function() { load(type) });
+      function() { load(type) });
   }
 </script>
 <div id="gAdminThemes">
-  <h1><?= t("Theme Administration") ?></h1>
+  <h1> <?= t("Theme Administration") ?> </h1>
   <div id="gThemeTabs">
     <?= $menu ?>
   </div>
 
-  <!-- @todo: move this fix into the CSS file -->
-  <div style="clear: both"></div>
-
   <div id="gThemePane">
     <h1> <?= $title ?> </h1>
-    <div class="active">
+    <div id="gSelectedTheme">
       <h2> <?= t("Selected theme") ?> </h2>
-      <div class="theme_block">
-        <h3> <?= $themes[$active]->name ?> </h3>
-        <img src="<?= url::file("themes/{$active}/thumbnail.png") ?>"
+      <div class="gBlock">
+         <img src="<?= url::file("themes/{$active}/thumbnail.png") ?>"
              alt="<?= $themes[$active]->name ?>" />
+        <h3> <?= $themes[$active]->name ?> </h3>
         <p>
           <?= $themes[$active]->description ?>
         </p>
       </div>
     </div>
 
-    <div class="available">
+    <div id="gAvailableThemes">
       <h2> <?= t("Available themes") ?> </h2>
+      <p><?= t("Change the look of your Gallery with one of the following available themes. Click to preview and activate.") ?></p>
       <? foreach ($themes as $id => $info): ?>
       <? if (!$info->$type) continue ?>
       <? if ($id == $active) continue ?>
-      <div class="theme_block gDialogLink" href="<?= url::site("admin/themes/preview/$type/$id") ?>">
+      <div class="gBlock">
+        <a href="<?= url::site("admin/themes/preview/$type/$id") ?>" class="gDialogLink" title="<?= t("Theme Preview: {{theme_name}}", array("theme_name" => $info->name)) ?>">
         <h3> <?= $info->name ?> </h3>
         <img src="<?= url::file("themes/{$id}/thumbnail.png") ?>"
              alt="<?= $info->name ?>" />
         <p>
           <?= $info->description ?>
         </p>
+        </a>
       </div>
       <? endforeach ?>
     </div>
diff --git a/core/views/admin_themes_preview.html.php b/core/views/admin_themes_preview.html.php
index b29c2a48..acd1ba3c 100644
--- a/core/views/admin_themes_preview.html.php
+++ b/core/views/admin_themes_preview.html.php
@@ -1,8 +1,7 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<h1> <?= t("Theme Preview: {{theme_name}}", array("theme_name" => $info->name)) ?> </h1>
-<iframe src="<?= $url ?>" style="width: 600px; height: 500px"></iframe>
 <p>
   <a href="<?= url::site("admin/themes/choose/$type/$theme_name?csrf=" . access::csrf_token()) ?>">
-    <?= t("Activate <b>{{theme_name}}</b>", array("theme_name" => $info->name)) ?>
+    <?= t("Activate <strong>{{theme_name}}</strong>", array("theme_name" => $info->name)) ?>
   </a>
 </p>
+<iframe src="<?= $url ?>" style="width: 900px; height: 450px"></iframe>
diff --git a/lib/gallery.dialog.js b/lib/gallery.dialog.js
index fef44b38..d6511fd9 100644
--- a/lib/gallery.dialog.js
+++ b/lib/gallery.dialog.js
@@ -21,6 +21,7 @@ function handleDialogEvent(event) {
  */
 function openDialog(element, on_success) {
   var sHref = $(element).attr("href");
+  var sTitle = $(element).attr("title");
   var eDialog = '<div id="gDialog"></div>';
 
   $("body").append(eDialog);
@@ -48,11 +49,12 @@ function openDialog(element, on_success) {
     var parent = $("#gDialog").parent().parent();
     parent.css("opacity", "0.0");
     $("#gDialog").dialog("open");
-    var title = $("#gDialog h1:eq(0)").html();
-    if (!title) {
-      title = $("#gDialog fieldset legend:eq(0)").html();
+    if ($("#gDialog h1").length) {
+      sTitle = $("#gDialog h1:eq(0)").html();
+    } else if ($("#gDialog fieldset legend").length) {
+      sTitle = $("#gDialog fieldset legend:eq(0)").html();
     }
-    $("#ui-dialog-title-gDialog").html(title);
+    $("#ui-dialog-title-gDialog").html(sTitle);
     if (parent.width() < 400) {
       parent.css("width", 400);
     }
diff --git a/themes/admin_default/css/screen.css b/themes/admin_default/css/screen.css
index edc1beab..02a0aeca 100644
--- a/themes/admin_default/css/screen.css
+++ b/themes/admin_default/css/screen.css
@@ -88,7 +88,9 @@
  *********************************************************************/
 
 #gHeader:after,
-#gAdminCommentsMenu:after {
+#gAdminCommentsMenu:after,
+#gThemeTabs:after,
+#gSelectedTheme .gBlock:after {
   clear: both;
   content: ".";
   display: block;
@@ -96,31 +98,46 @@
   visibility: hidden;
 }
 
-/* stuff that needs a home */
-#gAdminThemes .theme_block {
-  background: white;
-}
-#gAdminThemes .active {
-  padding: 10px;
+/** *******************************************************************
+ *  Stuff that needs a home or needs to be organized
+ *********************************************************************/
+
+#gAdminThemes #gSelectedTheme img {
+  float: left;
+  margin-right: 1em;
 }
-#gAdminThemes .available .theme_block:hover {
-  background: #eee;
+
+#gAdminThemes .gBlock {
+  background: #fff;
+  padding: 1em;
 }
-#gAdminThemes .available div {
-  padding: 10px;
+
+#gAdminThemes #gAvailableThemes .gBlock {
+  clear: none;
   cursor: pointer;
-}
-#gAdminThemes .available div {
-  width: 250px;
   float: left;
+  margin-right: 1em;
+  text-align: center;
+  width: 250px;
 }
+
+#gAdminThemes #gAvailableThemes .gBlock:hover {
+  background: #eee;
+}
+
+#gAdminThemes a {
+  color: #333;
+}
+
 #gAdminGraphics tr {
   cursor: pointer;
 }
+
 #gAdminGraphics tr.selected {
   background-color: #cfc !important;
   cursor: default;
 }
+
 #gAdminGraphics tr:hover {
   background-color: #eee;
 }