Visually connect the selected album to the album thumbnail grid. Edit item opacity, selected items become opaque.

3 files changed, 57 insertions, 45 deletions

diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index cc39ac26..33067ae6 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -2,6 +2,16 @@
 #gOrganizeTreeContainer,
 #gMicroThumbContainer {
   overflow-y: auto;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+#gMicroThumbContainer {
+  background-color: #cfdeff;
+  border: 1px solid #999 !important;
+  border-top: none !important;
+  border-left: none !important;
+  margin-left: -1em !important;
 }
 
 #gMicroThumbContainer #gMicroThumbGrid {
@@ -9,7 +19,8 @@
 }
 
 #gMicroThumbContainer #gMicroThumbGrid .gMicroThumb {
-  border: 1px solid #e8e8e8;
+  background-color: #fff;
+  border: 2px solid #e8e8e8;
   border-right-color: #ccc;
   border-bottom-color: #ccc;
   float: left;
@@ -17,6 +28,7 @@
   height: 9em;
   margin-left: .5em;
   margin-top: .5em;
+  opacity: .4;
   overflow: hidden;
   padding: .5em;
   text-align: center;
@@ -33,16 +45,19 @@
 }
 
 #gMicroThumbContainer #gMicroThumbGrid :hover {
-  background-color: #09F !important;
-  opacity: .3;
+  opacity: 1;
 }
 
-.gThumbSelected {
-  border: 0.2em solid #0099FF !important;
+#gMicroThumbContainer #gMicroThumbGrid .gThumbSelected {
+  border: 0.2em solid #09f;
+  opacity: 1;
 }
 
 .gBranchSelected {
-  background-color: #6CF !important;
+  background-color: #cfdeff !important;
+  border-bottom: 1px solid #999 !important;
+  display: block;
+  padding: .3em 0;
 }
 
 .gBranchText {
@@ -76,12 +91,11 @@
 #gOrganizeFormThumbs {
   padding: .5em;
   height: 7em; 
-  width: 100%; 
   overflow: hidden;
 }
 
 #gOrganizeFormThumbs div {
-  margin: 0 auto;
+  margin: 0;
   text-align: center;
 }
 
@@ -94,5 +108,3 @@
   border: thin none;
   padding: 0;
 }
-
-
diff --git a/modules/organize/views/organize.html.php b/modules/organize/views/organize.html.php
index 915b7446..df187099 100644
--- a/modules/organize/views/organize.html.php
+++ b/modules/organize/views/organize.html.php
@@ -13,31 +13,36 @@
 <fieldset style="display: none">
   <legend><?= t("Organize %name", array("name" => $item->title)) ?></legend>
 </fieldset>
-<div id="doc3" class="yui-t6">
+<div id="doc3" class="yui-t1">
   <div id="hd" ref="<?= url::site("organize/header/__ITEM_ID__") ?>">
     <h2 id="gOrganizeAlbumTitle"><?= $item->title ?></h2>
     <p id="gOrganizeAlbumDescription"><?= $item->description ?></p>
   </div>
-  <div id="bd">
-    <div id="yui-main">
-      <div class="yui-b">
-        <div class="yui-gf">
-          <div id="gOrganizeTreeContainer" class="yui-u first" style="border: 1px solid">
-            <?= $album_tree ?>
-          </div>
-          <div id="gMicroThumbContainer" class="yui-u" style="border: 1px solid"
+
+  <div id="bd" role="main">
+	  <div id="yui-main">
+	    <div class="yui-b">
+        <div class="yui-ge">
+          <div id="gMicroThumbContainer" class="yui-u first"
                ref="<?= url::site("organize/content/__ITEM_ID__?width=__WIDTH__&height=__HEIGHT__&offset=__OFFSET__") ?>">
             <ul id="gMicroThumbGrid">
             </ul>
           </div>
+          <div id="gOrganizeEditContainer"  class="yui-u">
+            <?= $edit_form ?>
+          </div>
         </div>
       </div>
+	  </div>
+	  <div id="gOrganizeTreeContainer" class="yui-b">
+      <?= $album_tree ?>
     </div>
-    <div id="gOrganizeEditContainer"  class="yui-b" style="border: 1px solid">
-      <?= $edit_form ?>
-    </div>
-  </div>
+	</div>
+
+
+
+
   <div id="ft">
-    <div class="gProgressBar" style="visibility: hidden" ></div>
+    <div class="gProgressBar" style="visibility: hidden"></div>
   </div>
 </div>
diff --git a/modules/organize/views/organize_edit.html.php b/modules/organize/views/organize_edit.html.php
index ebfbae2b..1085a863 100644
--- a/modules/organize/views/organize_edit.html.php
+++ b/modules/organize/views/organize_edit.html.php
@@ -3,11 +3,11 @@
   <?= form::open(url::site("organize/update/__ITEM_ID__?csrf=__CSRF__&action=__ACTION__"), array("method" => "post")) ?>
   <div id="gOrganizeFormThumbs">
     <div id="gOrganizeFormNoImage">
-      <h3 style="text-align:center"><?= t("No Image Selected") ?></h3>
+      <h3><?= t("No Image Selected") ?></h3>
     </div>
     <div id="gOrganizeFormThumb" style="display: none"></div>
     <div id="gOrganizeFormMultipleImages" style="display:none">
-      <h3 style="text-align:center"><?= t("Multiple Images Selected") ?></h3>
+      <h3><?= t("Multiple Images Selected") ?></h3>
     </div>
   </div>
 
@@ -17,25 +17,20 @@
   
   <div id="gOrganizeFormInfo" style="display:none"
        ref="<?= url::site("organize/detail/__ITEM_ID__") ?>">
-    <table style="padding: 0;">
-      <tbody>
-        <tr>
-          <td>Title:</td><td><span id="gOrganizeFormTitle"></span></td>
-        </tr>
-        <tr>
-          <td>Owner:</td><td><span id="gOrganizeFormOwner"></span></td>
-         </tr>
-        <tr>
-         <td>Date:</td><td><span id="gOrganizeFormDate"></span></td>
-        </tr>
-        <tr>
-          <td colspan="2">Description:</td>
-        </tr>
-        <tr>
-          <td colspan="2"><span id="gOrganizeFormDescription">&nbsp;</span>
-        </tr>
-      </tbody>
-    </table>
+    <ul>
+        <li>
+          Title: <span id="gOrganizeFormTitle"></span>
+        </li>
+        <li>
+          Owner: <span id="gOrganizeFormOwner"></span>
+         </li>
+        <li>
+          Date: <span id="gOrganizeFormDate"></span>
+        </li>
+        <li>
+          Description: <span id="gOrganizeFormDescription">&nbsp;</span>
+        </li>
+    </ul>
   </div>
   
   <span id="gOrganizeFormButtons">