Changeset 69 for trunk/templates


Ignore:
Timestamp:
02/16/11 11:37:48 (13 years ago)
Author:
Kris Deugau
Message:

/trunk

Changes for much nicer-looking, nifty collapsible tree for groups

  • CSS derived from ​http://www.thecssninja.com/css/css-tree-menu
  • HTML changes to match
  • Template changes to make the source more closely match the rendered display (and the real tree structure)
  • Minor source tweaks to work with the template changes

Still to ponder:

  • IE (CSS collapsing tree doesn't render correctly in IE 6 or 8, *may* work in 9, pretty much guaranteed to fail in < 6), experiments with <!-- [if IE]--> constructs show they don't work well in <head>
  • Tweaks to allow clicking a group name in the tree to switch to that group (currently the hidden checkbox seems to take over then entire name/line/label, making it easy to expand or collapse the group, but harder to use it for anything else)
Location:
trunk/templates
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/templates/dns.css

    r66 r69  
    156156}
    157157
    158 ul {
    159         margin-left: 10px;
    160         padding: 0px;
    161         list-style: none outside none;
    162 }
    163 /* F*** ME BUT THIS LOOKS LIKE CRAP! */
    164 /* Need to find a way to vertically centre the plus image on the text.  >:(  */
     158
     159/*
     160  Pure CSS collapseable tree for groups
     161  Adapted (mostly trimmed down) from http://www.thecssninja.com/css/css-tree-menu
     162  Fails variously in IE
     163*/
     164
    165165li.hassub {
    166         background-image: url('../images/plus.png');
    167         background-repeat: no-repeat;
    168         background-position: 0px 1px;
    169         padding-left: 14px;
    170         //list-style: none outside url('../images/fwd.png');
    171         margin-left: -12px;
     166        position: relative;
     167        margin: 0 0 0 -40px;
     168        padding: 0;
     169        list-style: none;
    172170}
    173171li.leaf {
    174         //list-style: none outside none;
    175         //margin-left: 0px;
    176         background-image: url('../images/midleaf.png');
    177         background-repeat: no-repeat;
    178         background-position: 0px 1px;
    179         padding-left: 14px;
    180         margin-left: -12px;
    181 }
    182 li.lastinlvl {
    183         background-image: url('../images/lastleaf.png');
    184         background-repeat: no-repeat;
    185         background-position: 0px 1px;
    186         padding-left: 14px;
    187         //list-style: none outside url('../images/lastleaf.png');
    188         margin-left: -12px;
    189 }
    190 ul.grptree {
    191         list-style-type: none;
    192         padding: 0px;
    193         margin-left: 14px;
    194 }
    195 #grptree {
    196         //margin-left: 10px;
    197 }
     172        margin: 0;
     173        padding: 0 0 0 15px;    /* in px since this is to adjust for a fixed-size image */
     174}
     175li.hassub input {
     176        position: absolute;
     177        left: 0;
     178        margin: 0;
     179        opacity: 0;
     180        filter:alpha(opacity=0);        /* IE > 6, maybe */
     181        z-index: 2;
     182        cursor: pointer;
     183        height: 1em;
     184        width: 1em;
     185        top: 0;
     186}
     187li.hassub input + ul {
     188        background: url('../images/tree_closed.png') 0px -2px no-repeat;
     189        margin-top: -0.95em;    /* esplain to me, why this not 1em?  O_o */
     190        padding-top: 0.1em;
     191        padding-left: 2.25em;   /* ah-HA!  use this to adjust the indent!  watch for neg margin from li.hassub */
     192        xdisplay: block;
     193        height: 1em;
     194}
     195li.hassub input + ul > li {
     196        height: 0;
     197        overflow: hidden;
     198        margin-left: -14px !important;
     199}
     200li.hassub label {
     201        cursor: pointer;
     202        display: block;
     203        padding-left: 15px;     /* in px as it ajusts for fixed-size image */
     204}
     205li.hassub input:checked + ul {
     206        background: url('../images/tree_open.png') 0px 0px no-repeat;
     207        margin-top: -1.2em;
     208        padding-top: 1.1em;
     209        height: auto;
     210}
     211li.hassub input:checked + ul > li {
     212        height: auto;
     213}
     214
     215
    198216/* general classes */
    199217.errmsg {

  • trunk/templates/grptree.tmpl

    r66 r69  
    1 <ul>
    2 <TMPL_LOOP NAME=treelvl><li class="<TMPL_IF last>lastinlvl </TMPL_IF><TMPL_IF NAME=subs>hassub<TMPL_ELSE>leaf</TMPL_IF>"><TMPL_VAR NAME=grpname>
    3 <TMPL_VAR NAME=subs></li>
    4 </TMPL_LOOP></ul>
     1<TMPL_VAR NAME=indent><ul class="grptree">
     2<TMPL_LOOP NAME=treelvl><TMPL_VAR NAME=indent>  <li class="<TMPL_IF NAME=subs>hassub<TMPL_ELSE>leaf</TMPL_IF>">
     3<TMPL_IF name=subs><TMPL_VAR NAME=indent>    <label for="<TMPL_VAR NAME=grpname>"><TMPL_VAR NAME=grpdisp></label>
     4<TMPL_VAR NAME=indent>    <input type="checkbox" class="grptreebox" checked id="<TMPL_VAR NAME=grpname>" /><TMPL_ELSE><TMPL_VAR NAME=indent>    <TMPL_VAR NAME=grpdisp></TMPL_IF>
     5<TMPL_VAR NAME=subs><TMPL_VAR NAME=indent>  </li>
     6</TMPL_LOOP><TMPL_VAR NAME=indent></ul>

  • trunk/templates/menu.tmpl

    r65 r69  
    2323<a href="dns.cgi?sid=<TMPL_VAR NAME=sid>&amp;page=grpman">Manage groups</a><br />
    2424<div id="grptree">
     25
    2526<ul class="grptree">
    26 <li class="<TMPL_IF NAME=subs>hassub<TMPL_ELSE>leaf</TMPL_IF>"><TMPL_IF inlogingrp><b><TMPL_VAR NAME=logingrp></b><TMPL_ELSE><TMPL_VAR NAME=logingrp></TMPL_IF>
     27  <li class="<TMPL_IF NAME=subs>hassub<TMPL_ELSE>leaf</TMPL_IF>">
     28<TMPL_IF name=subs>    <label for="<TMPL_VAR NAME=logingrp>"><TMPL_IF inlogingrp><b><TMPL_VAR NAME=logingrp></b><TMPL_ELSE><TMPL_VAR NAME=logingrp></TMPL_IF></label>
     29    <input type="checkbox" checked id="<TMPL_VAR NAME=logingrp>" /><TMPL_ELSE>
     30    <TMPL_IF inlogingrp><b><TMPL_VAR NAME=logingrp></b><TMPL_ELSE><TMPL_VAR NAME=logingrp></TMPL_IF></TMPL_IF>
    2731<TMPL_VAR NAME=grptree>
    28 </li>
     32  </li>
    2933</ul>
     34
    3035</div>
    3136<!-- hmm:  <TMPL_VAR NAME=groupname> -->
Note: See TracChangeset for help on using the changeset viewer.