Reformat system pref sections as collapsible blocks
authorOwen Leonard <oleonard@myacpl.org>
Thu, 10 Sep 2009 14:39:23 +0000 (09:39 -0500)
committerJesse Weaver <pianohacker@gmail.com>
Tue, 20 Oct 2009 18:06:02 +0000 (12:06 -0600)
This patch breaks the single large tables with multiple header rows into multipl
e tables with separate headings for each. Clicking the heading collapses that section. The goal is to improve clarity when scanning through a large number of prefs.

Signed-off-by: Jesse Weaver <pianohacker@gmail.com>
koha-tmpl/intranet-tmpl/prog/en/css/preferences.css
koha-tmpl/intranet-tmpl/prog/en/modules/admin/preferences.tmpl

index 7a24bc7..310c96a 100644 (file)
@@ -34,4 +34,30 @@ h1 {
 }
 h2 {
        font-size : 134%;
-}
\ No newline at end of file
+}
+
+table {
+       width : 100%;
+}
+
+caption {
+       color : #003399;
+}
+
+h3 {
+       color : #003366;
+       margin : .4em 0;
+       width : 25%;
+}
+
+h3.expanded {
+       background : transparent url("../../img/collapse.gif") 0 6px no-repeat;
+       cursor : pointer;
+       padding-left : 12px;
+}
+
+h3.collapsed {
+       background : transparent url("../../img/expand.gif") 0 6px no-repeat;   
+       cursor : pointer;
+       padding-left : 12px;
+}
index 76ffddc..1e7c116 100644 (file)
@@ -8,7 +8,23 @@
 <script src="<!-- TMPL_VAR NAME="themelang" -->/js/pages/preferences.js" type="text/javascript"></script>
 <script src="<!-- TMPL_VAR NAME="themelang" -->/lib/jquery/plugins/jquery.highlight-3.js" type="text/javascript"></script>
 <script type="text/javascript">
-    <!--
+//<![CDATA[
+       $(document).ready(function(){
+               $("h3").attr("class","expanded").attr("title",_("Click to expand this section"));
+               var collapsible = $(".collapsed,.expanded");
+       
+           $(collapsible).toggle(function () {
+            $(this).addClass("collapsed").removeClass("expanded").attr("title",_("Click to expand this section"));
+         $(this).next("table").hide();
+             },
+             function () {
+               $(this).addClass("expanded").removeClass("collapsed").attr("title",_("Click to collapse this section"));
+               $(this).next("table").show();
+             }
+    );
+
+               
+       });
     <!-- TMPL_IF NAME="searchfield" -->
     var to_highlight = "<!-- TMPL_VAR NAME="searchfield" ESCAPE="JS"-->";
 
@@ -21,7 +37,7 @@
         } );
     }
     <!-- /TMPL_IF -->
-    // -->
+//]]>
 </script>
 </head>
 <body>
@@ -45,8 +61,8 @@
                </form>
        </div>
 
-    <h1>System preferences</h1>
     <!-- TMPL_IF NAME="jump_not_found" -->
+    <h2>System preferences</h2>
     <div class="dialog error">
         Could not find a system preference named <code><!-- TMPL_VAR NAME="jumpfield" --></code>.
     </div>
     <form action="/cgi-bin/koha/admin/preferences.pl" method="post">
         <input type="hidden" name="op" value="save" />
         <input type="hidden" name="tab" value="<!-- TMPL_VAR NAME="tab" -->" />
-        <table>
-            <thead><tr><th>Preference</th><th>Value</th></tr></thead>
 
             <!-- TMPL_LOOP NAME="LINES" -->
             <!-- TMPL_IF NAME="is_group_title" -->
-            <!-- TMPL_UNLESS NAME="__first__" --></tbody><!-- /TMPL_UNLESS -->
-                       <thead>
-                               <!-- TMPL_IF NAME="highlighted" -->
-                               <tr><th colspan="2"><span class="term"><!-- TMPL_VAR NAME="title" --></span></th></tr>
+            <!-- TMPL_IF NAME="__first__" -->
+                               <h3><!-- TMPL_IF NAME="highlighted" -->
+                               <span class="term"><!-- TMPL_VAR NAME="title" --></span>
                                <!-- TMPL_ELSE -->
-                               <tr><th colspan="2"><!-- TMPL_VAR NAME="title" --></th></tr>
-                               <!-- /TMPL_IF -->
-                       </thead>
+                               <!-- TMPL_VAR NAME="title" -->
+                               <!-- /TMPL_IF --></h3><table><!-- TMPL_ELSE --></tbody></table>
+                               <h3><!-- TMPL_IF NAME="highlighted" -->
+                               <span class="term"><!-- TMPL_VAR NAME="title" --></span>
+                               <!-- TMPL_ELSE -->
+                               <!-- TMPL_VAR NAME="title" -->
+                               <!-- /TMPL_IF --></h3><table><!-- /TMPL_IF -->
+            <thead><tr><th>Preference</th><th>Value</th></tr></thead>
             <!-- TMPL_UNLESS NAME="__last__" --><tbody><!-- /TMPL_UNLESS -->
             <!-- TMPL_ELSE -->
-            <!-- TMPL_IF NAME="__first__" --><tbody><!-- /TMPL_IF -->
+            <!-- TMPL_IF NAME="__first__" --><table><thead><tr><th>Preference</th><th>Value</th></tr></thead><tbody><!-- /TMPL_IF -->
             <tr>
                 <td class="name-cell">
                     <code>
                     <!-- /TMPL_LOOP -->
                 </td>
             </tr>
-            <!-- TMPL_IF NAME="__last__" --></tbody><!-- /TMPL_IF -->
+            <!-- TMPL_IF NAME="__last__" --></tbody></table><!-- /TMPL_IF -->
             <!-- /TMPL_IF -->
         <!-- /TMPL_LOOP -->
-        </table>
         <fieldset class="action"><button class="save-all submit" type="submit">Save all <!-- TMPL_VAR NAME="tab_title" --> preferences</button> <a href="/cgi-bin/koha/admin/preferences.pl?tab=<!-- TMPL_VAR NAME="tab" -->" class="cancel">Cancel</a></fieldset>
     </form>
     </div>