implement vlan hide/show when list is larger than 10

This commit is contained in:
Oliver Gorwits
2012-01-12 21:19:32 +00:00
parent 9dea705a1b
commit 659b984fec
3 changed files with 47 additions and 9 deletions

View File

@@ -134,11 +134,32 @@ form .clearfix.success input {
border-top: 8px solid #F89406;
}
/* draw little up arrow to the right of a label for collapsed list */
.cell-arrow-up {
float: left;
margin-top: 4px;
margin-right: 6px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 8px solid #F89406;
}
/* draw little down arrow to the right of a label for collapsed list */
.cell-arrow-down {
float: left;
margin-top: 4px;
margin-right: 6px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 8px solid #F89406;
}
/* nudge the port name/vlan filter over a little */
.nd_port_query {
margin-left: -2px !important;
}
/* for ports table to center cell content */
.center_cell {
text-align: center;
}

View File

@@ -9,8 +9,10 @@
</tr>
</thead>
</tbody>
[% SET rownum = 0 %]
[% FOREACH row in results %]
[% NEXT IF params.free AND NOT row.is_free(params.age_num, params.age_unit) %]
[% SET rownum = rownum + 1 %]
<tr>
<td>
[% IF row.up_admin == 'down' %]
@@ -58,22 +60,28 @@
[% END %]
[% IF params.c_vlan %]
<td class="center_cell">
<a class="nd_linkcell" href="/search?tab=vlan&q=[% row.vlan | uri %]">[% row.vlan | html_entity %]</a>
<a class="nd_linkcell"
href="/search?tab=vlan&q=[% row.vlan | uri %]">[% row.vlan | html_entity %]</a>
</td>
[% END %]
[% IF params.c_vmember %]
<td>
[% SET count = 1 %]
[%# this is really ugly because for some reason
I could not get size/max to work on row.tagged_vlans.all %]
[% SET output = '' %]
[% SET count = 0 %]
[% FOREACH vlan IN row.tagged_vlans %]
<a href="/search?tab=vlan&q=[% vlan.vlan | uri %]">[% vlan.vlan | html_entity %]</a>
[% SET output = output _
'<a href="/search?tab=vlan&q=' _ vlan.vlan _ '">' _ vlan.vlan _ '</a>' %]
[% SET output = output _ ', ' IF NOT loop.last %]
[% SET count = count + 1 %]
[% IF count > 25 %]
(more...)
[% LAST %]
[% ELSE %]
[% ', ' IF NOT loop.last %]
[% END %]
[% END %]
[% IF count > 10 %]
[% SET output = '<a href="#" class="nd_linkcell nd_collapse_vlans">'
_ 'Show VLANs</a><div class="nd_collapse_pre_hidden">' _ output %]
[% SET output = output _ '</div>' %]
[% END %]
[% output %]
</td>
[% END %]
[% IF params.c_connected %]

View File

@@ -66,6 +66,15 @@
}
// looks good, update the bookmark for this search
$(mark).attr('href', '/device?' + query);
// enable collapser on any large vlan lists
$('.nd_collapse_vlans').collapser({
target: 'siblings',
effect: 'slide',
changeText: true,
expandHtml: '<div class="nd_collapser">Show VLANs<div class="cell-arrow-up"></div></div>',
collapseHtml: '<div class="nd_collapser">Hide VLANs<div class="cell-arrow-down"></div></div>',
});
}
);
}