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:
parent
1f68dc6192
commit
8dbf0810a1
2 changed files with 59 additions and 16 deletions
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue