Reformat system pref sections as collapsible blocks

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>
This commit is contained in:
Owen Leonard 2009-09-10 09:39:23 -05:00 committed by Jesse Weaver
parent 1f68dc6192
commit 8dbf0810a1
2 changed files with 59 additions and 16 deletions

View file

@ -34,4 +34,30 @@ h1 {
}
h2 {
font-size : 134%;
}
}
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;
}

View 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>
@ -62,22 +78,24 @@
<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>
@ -152,10 +170,9 @@
<!-- /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>