Fix block management UI. Block list height is now dynamically set based on the total number of available blocks which will grow without hardcoding CSS heights and setting the div to be scrollable.

2 files changed, 41 insertions, 25 deletions

diff --git a/modules/gallery/views/admin_sidebar.html.php b/modules/gallery/views/admin_sidebar.html.php
index 030dfdce..834429c3 100644
--- a/modules/gallery/views/admin_sidebar.html.php
+++ b/modules/gallery/views/admin_sidebar.html.php
@@ -1,11 +1,13 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
 <script type="text/javascript">
   $(document).ready(function(){
-    $(".g-blocks-list").equal_heights();
+    $(".g-admin-blocks-list").equal_heights();
+    var extra_ht = $(".g-admin-blocks-list li").length * $(".g-admin-blocks-list li:first").height();
+    $(".g-admin-blocks-list").height($(".g-admin-blocks-list").height() + extra_ht);
   });
 
   $(function() {
-    $(".g-blocks-list ul").sortable({
+    $(".g-admin-blocks-list ul").sortable({
       connectWith: ".g-sortable-blocks",
       opacity: .7,
       placeholder: "g-target",
@@ -15,7 +17,7 @@
           $("ul#g-active-blocks li").each(function(i) {
             active_blocks += "&block["+i+"]="+$(this).attr("ref");
           });
-          $.getJSON($("#g-admin-blocks").attr("ref").replace("__ACTIVE__", active_blocks), function(data) {
+          $.getJSON($("#g-site-blocks").attr("ref").replace("__ACTIVE__", active_blocks), function(data) {
             if (data.result == "success") {
               $("ul#g-available-blocks").html(data.available);
               $("ul#g-active-blocks").html(data.active);
@@ -26,27 +28,30 @@
     }).disableSelection();
   });
 </script>
-<div class="g-block">
+
+<div class="g-block ui-helper-clearfix">
   <h1> <?= t("Manage Sidebar") ?> </h1>
   <p>
     <?= t("Select and drag blocks from the available column to the active column to add to the sidebar; remove by dragging the other way.") ?>
   </p>
 
-  <div id="g-admin-blocks" class="g-block-content ui-helper-clearfix" ref="<?= url::site("admin/sidebar/update?csrf={$csrf}__ACTIVE__") ?>">
-    <div class="g-block g-left">
-      <h3><?= t("Available Blocks") ?></h3>
-      <div class="g-blocks-list g-block-content">
-        <ul id="g-available-blocks" class="g-sortable-blocks">
-        <?= $available ?>
-        </ul>
+  <div class="g-block-content">
+    <div id="g-site-blocks" ref="<?= url::site("admin/sidebar/update?csrf={$csrf}__ACTIVE__") ?>">
+      <div class="g-admin-blocks-list">
+        <div><h3><?= t("Available Blocks") ?></h3></div>
+        <div>
+          <ul id="g-available-blocks" class="g-sortable-blocks">
+          <?= $available ?>
+          </ul>
+        </div>
       </div>
-    </div>
-    <div class="g-block g-left">
-      <h3><?= t("Active Blocks") ?></h3>
-      <div class="g-blocks-list g-block-content">
-        <ul id="g-active-blocks" class="g-sortable-blocks">
-        <?= $active ?>
-        </ul>
+      <div class="g-admin-blocks-list">
+        <div><h3><?= t("Active Blocks") ?></h3></div>
+        <div>
+          <ul id="g-active-blocks" class="g-sortable-blocks">
+          <?= $active ?>
+          </ul>
+        </div>
       </div>
     </div>
   </div>
diff --git a/themes/admin_wind/css/screen.css b/themes/admin_wind/css/screen.css
index 31de58f8..a889545b 100644
--- a/themes/admin_wind/css/screen.css
+++ b/themes/admin_wind/css/screen.css
@@ -424,16 +424,27 @@ li.g-default-group h4, li.g-default-group .g-user {
 
 /* Block admin  ~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
-#g-admin-blocks .g-block {
-  clear: none;
+.g-admin-blocks-list {
+  float: left;
+  margin: 0 2em 2em 0;
   width: 30%;
 }
 
-#g-admin-blocks .g-block .g-draggable {
-  background: #e7e7e7;
-  /*border: 1px solid #fff;*/
-  margin-bottom: 1em;
-  padding: .4em .8em;
+.g-admin-blocks-list div:last-child {
+  border: .1em solid;
+  height: 100%;
+}
+
+.g-admin-blocks-list ul {
+  height: 98%;
+  margin: .1em .1em;
+  padding: .1em;
+}
+
+.g-admin-blocks-list ul li.g-draggable {
+  background-color: #e8e8e8;
+  margin: .5em;
+  padding: .3em .8em;
 }
 
 /** *******************************************************************