135/netdisco
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first impl. of RHS sidebar

Browse Source
This commit is contained in:
Oliver Gorwits
2012-01-31 16:59:55 +00:00
parent e7b390dca5
commit c7bae9b638
9 changed files with 64 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
Netdisco/bin/netdisco-web.pl
View File

@@ -1,4 +1,9 @@
#!/usr/bin/env perl #!/usr/bin/env perl
# use lib '/root/perl-profiles/netdisco-web/lib/perl5';
use local::lib '/srv/www/vhosts/netdisco.ecmwf.int/perl-profiles/netdisco-web';
use lib '/srv/www/vhosts/netdisco.ecmwf.int/Netdisco/lib';
use Dancer; use Dancer;
use Netdisco::Web; use Netdisco::Web;
dance; dance;

65
Netdisco/public/css/netdisco.css
View File

@@ -35,20 +35,6 @@ form .clearfix.success input {
background-color: #A9DBA9; background-color: #A9DBA9;
} }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* right hand side device label */
.device_label_right {
float: right !important;
margin-bottom: -7px !important;
display: none;
}
/* take a block element and force it inline */
.inline {
display: inline !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* results table links */ /* results table links */
@@ -200,13 +186,28 @@ h3.device_label {
color: #660033; color: #660033;
} }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* right hand side device label */
.device_label_right {
float: right !important;
margin-bottom: -7px !important;
display: none;
}
/* take a block element and force it inline */
.inline {
display: inline !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* sidebar collapser */ /* sidebar collapser */
/* for placing the sidebar toggle icons */ /* for placing the sidebar toggle icons */
#sidebar_toggle_img_in { #sidebar_toggle_img_in {
margin-top: -10px; float: right;
margin-left: 164px; margin-top: -7px;
margin-right: -16px;
cursor: pointer; cursor: pointer;
} }
@@ -214,7 +215,7 @@ h3.device_label {
#sidebar_toggle_img_out { #sidebar_toggle_img_out {
position: fixed; position: fixed;
top: 60px; top: 60px;
left: 4px; right: 7px;
z-index: 1; z-index: 1;
cursor: pointer; cursor: pointer;
display: none; display: none;
@@ -224,19 +225,25 @@ h3.device_label {
/* sidebar placement and sizing */ /* sidebar placement and sizing */
/* make the sidebar fixed on the screen */ /* make the sidebar fixed on the screen */
.sidebar { .container-fluid > .sidebar {
position: fixed !important; position: fixed;
margin-top: 50px; margin-top: 50px;
} right: 20px;
width: 200px;
/* make the sidebar less wide */ left: auto;
.well {
margin-right: 15px;
} }
/* make the content start more to the left now the sidebar is narrower */ /* make the content start more to the left now the sidebar is narrower */
.nd_content { .container-fluid > .content {
margin-left: 225px !important; margin-right: 220px;
margin-left: 0px;
}
/* nudge content in the sidebar closer to the left */
.nd_sidesearchform {
padding-left: 0px;
margin-top: -7px;
margin-bottom: 0px;
} }
/* nudge content closer to the header labels in the sidebar */ /* nudge content closer to the header labels in the sidebar */
@@ -244,10 +251,4 @@ h3.device_label {
padding-top: 4px !important; padding-top: 4px !important;
} }
/* nudge content in the sidebar closer to the left */
.nd_sidesearchform {
padding-left: 0px;
margin-bottom: 0px;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

BIN
Netdisco/public/images/diagona_settings.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 819 B

BIN
Netdisco/public/images/dusseldorf_settings.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 671 B

4
Netdisco/public/javascripts/netdisco.js
View File

@@ -120,7 +120,7 @@ $(document).ready(function() {
$('.sidebar').toggle( $('.sidebar').toggle(
function() { function() {
$('#sidebar_toggle_img_out').toggle(); $('#sidebar_toggle_img_out').toggle();
$('.nd_content').animate({'margin-left': '5px !important'}, 100); $('.content').animate({'margin-right': '10px !important'}, 100);
$('.device_label_right').toggle(); $('.device_label_right').toggle();
} }
); );
@@ -129,7 +129,7 @@ $(document).ready(function() {
$('#sidebar_toggle_img_out').click( $('#sidebar_toggle_img_out').click(
function() { function() {
$('#sidebar_toggle_img_out').toggle(); $('#sidebar_toggle_img_out').toggle();
$('.nd_content').animate({'margin-left': '225px !important'}, 200, $('.content').animate({'margin-right': '220px !important'}, 200,
function() { function() {
$('.device_label_right').toggle(); $('.device_label_right').toggle();
$('.sidebar').toggle(200); $('.sidebar').toggle(200);

9
Netdisco/views/device.tt
View File

@@ -1,11 +1,12 @@
<img class="sidebar_toggle" id="sidebar_toggle_img_out" <img class="sidebar_toggle" id="sidebar_toggle_img_out"
src="[% uri_base %]/images/splashyfish_right.png"/> src="[% uri_base %]/images/dusseldorf_settings.png"
rel="twipsy" data-placement="left" data-offset="5" title="Show Options"/>
<div class="container-fluid"> <div class="container-fluid">
<div class="sidebar"> <div class="sidebar">
<div class="well"> <div class="well">
<img class="sidebar_toggle" id="sidebar_toggle_img_in" <img class="sidebar_toggle" id="sidebar_toggle_img_in"
src="[% uri_base %]/images/splashyfish_left.png" src="[% uri_base %]/images/splashyfish_right.png"
rel="twipsy" data-placement="below" data-offset="5" title="Hide Sidebar"/> rel="twipsy" data-placement="left" data-offset="5" title="Hide"/>
<h3 class="device_label">[% d.ip %]</h3> <h3 class="device_label">[% d.ip %]</h3>
[% IF d.dns %] [% IF d.dns %]
<p class="device_label">[% d.dns.remove(settings.domain_suffix) %]</p> <p class="device_label">[% d.dns.remove(settings.domain_suffix) %]</p>
@@ -20,7 +21,7 @@
</div> </div>
</div> </div>
<div class="nd_content content"> <div class="content">
<ul id="search_results" class="tabs" data-tabs="on"> <ul id="search_results" class="tabs" data-tabs="on">
[% FOREACH tab IN vars.tabs %] [% FOREACH tab IN vars.tabs %]
<li[% ' class="active"' IF params.tab == tab.id %]><a id="[% tab.id %]_link" href="#[% tab.id %]_pane">[% tab.label %]</a></li> <li[% ' class="active"' IF params.tab == tab.id %]><a id="[% tab.id %]_link" href="#[% tab.id %]_pane">[% tab.label %]</a></li>

15
Netdisco/views/search.tt
View File

@@ -1,24 +1,23 @@
<img class="sidebar_toggle" id="sidebar_toggle_img_out" <img class="sidebar_toggle" id="sidebar_toggle_img_out"
src="[% uri_base %]/images/splashyfish_right.png"/> src="[% uri_base %]/images/dusseldorf_settings.png"
rel="twipsy" data-placement="left" data-offset="5" title="Show Search Options"/>
<div class="container-fluid"> <div class="container-fluid">
<div class="sidebar"> <div class="sidebar">
<div class="well"> <div class="well">
<img class="sidebar_toggle" id="sidebar_toggle_img_in" <img class="sidebar_toggle" id="sidebar_toggle_img_in"
src="[% uri_base %]/images/splashyfish_left.png" src="[% uri_base %]/images/splashyfish_right.png"
rel="twipsy" data-placement="below" data-offset="5" title="Hide Sidebar"/> rel="twipsy" data-placement="left" data-offset="5" title="Hide"/>
<div class="tab-content"> <div class="tab-content">
[% FOREACH tab IN vars.tabs %] [% FOREACH tab IN vars.tabs %]
<div id="[% tab.id %]_search" class="tab-pane [% 'active' IF params.tab == tab.id %]"> <div id="[% tab.id %]_search" class="tab-pane [% 'active' IF params.tab == tab.id %]">
<form id="[% tab.id %]_form" class="nd_sidesearchform form-stacked" method="get" action="[% uri_for('/search') %]"> <form id="[% tab.id %]_form" class="nd_sidesearchform form-stacked" method="get" action="[% uri_for('/search') %]">
<div class="clearfix">
<input class="span3" name="q" value="[% params.q %]" type="text"/>
</div>
[%+ TRY %][% INCLUDE "sidebar/search/${tab.id}.tt" %][% CATCH %]<!-- no "[% tab.id %]" search options -->[% END %] [%+ TRY %][% INCLUDE "sidebar/search/${tab.id}.tt" %][% CATCH %]<!-- no "[% tab.id %]" search options -->[% END %]
<input name="q" value="[% params.q %]" type="hidden"/>
<input name="tab" value="[% tab.id %]" type="hidden"/> <input name="tab" value="[% tab.id %]" type="hidden"/>
<div class="nd_search clearfix"> <div class="nd_search clearfix">
<button id="[% tab.id %]_submit" type="submit" class="btn info">Search Again</button> <button id="[% tab.id %]_submit" type="submit" class="btn info">Search Again</button>
<a id="[% tab.id %]_bookmark" href="#" <a id="[% tab.id %]_bookmark" href="#"
rel="twipsy" data-placement="right" data-offset="5" title="Bookmark this Search"> rel="twipsy" data-placement="left" data-offset="5" title="Bookmark this Search">
<img class="nd_bookmark" src="[% uri_base %]/images/glyphicons_072_bookmark.png"> <img class="nd_bookmark" src="[% uri_base %]/images/glyphicons_072_bookmark.png">
</a> </a>
</div> </div>
@@ -29,7 +28,7 @@
</div> </div>
</div> </div>
<div class="nd_content content"> <div class="content">
<ul id="search_results" class="tabs" data-tabs="on"> <ul id="search_results" class="tabs" data-tabs="on">
[% FOREACH tab IN vars.tabs %] [% FOREACH tab IN vars.tabs %]
<li[% ' class="active"' IF params.tab == tab.id %]><a id="[% tab.id %]_link" href="#[% tab.id %]_pane">[% tab.label %]</a></li> <li[% ' class="active"' IF params.tab == tab.id %]><a id="[% tab.id %]_link" href="#[% tab.id %]_pane">[% tab.label %]</a></li>

8
Netdisco/views/sidebar/device/ports.tt
View File

@@ -4,11 +4,11 @@
<input name="ip" value="[% params.ip %]" type="hidden"/> <input name="ip" value="[% params.ip %]" type="hidden"/>
<div class="clearfix"> <div class="clearfix">
<a class="field_clear_icon" href="#" <a class="field_clear_icon" href="#"
rel="twipsy" data-placement="right" data-offset="3" title="Show all Ports"> rel="twipsy" data-placement="left" data-offset="3" title="Show all Ports">
<img src="[% uri_base %]/images/tango_sweep.png"/></a> <img src="[% uri_base %]/images/tango_sweep.png"/></a>
<input class="nd_port_query span3" placeholder="Port, Name or VLAN" <input class="nd_port_query span3" placeholder="Port, Name or VLAN"
name="q" value="[% params.q %]" type="text" name="q" value="[% params.q %]" type="text"
rel="twipsy" data-placement="right" data-offset="5" title="Filter by Port, Name or VLAN"/> rel="twipsy" data-placement="left" data-offset="5" title="Filter by Port, Name or VLAN"/>
</div> </div>
<div class="clearfix"> <div class="clearfix">
<a href="#" id="nd_collapse_legend"><label>Legend</label></a> <a href="#" id="nd_collapse_legend"><label>Legend</label></a>
@@ -63,7 +63,7 @@
</li> </li>
<p></p> <p></p>
<li> <li>
<span rel="twipsy" data-placement="right" data-offset="5" title="Free if Down for this period of time"> <span rel="twipsy" data-placement="left" data-offset="5" title="Free if Down for this period of time">
<select class="nd_days_select" name="age_num"/> <select class="nd_days_select" name="age_num"/>
[% SET count = 1 %] [% SET count = 1 %]
[% WHILE count < 32 %] [% WHILE count < 32 %]
@@ -99,7 +99,7 @@
<div class="nd_search clearfix"> <div class="nd_search clearfix">
<button id="[% tab.id %]_submit" type="submit" class="btn info">Update View</button> <button id="[% tab.id %]_submit" type="submit" class="btn info">Update View</button>
<a id="[% tab.id %]_bookmark" href="#" <a id="[% tab.id %]_bookmark" href="#"
rel="twipsy" data-placement="right" data-offset="5" title="Bookmark these Settings"> rel="twipsy" data-placement="left" data-offset="5" title="Bookmark these Settings">
<img class="nd_bookmark" src="[% uri_base %]/images/glyphicons_072_bookmark.png"></a> <img class="nd_bookmark" src="[% uri_base %]/images/glyphicons_072_bookmark.png"></a>
</div> </div>
</form> </form>

16
Netdisco/views/sidebar/search/device.tt
View File

@@ -3,32 +3,32 @@
<div class="clearfix"> <div class="clearfix">
<input class="span3" placeholder="System Name" <input class="span3" placeholder="System Name"
type="text" name="name" value="[% params.name %]" type="text" name="name" value="[% params.name %]"
rel="twipsy" data-placement="right" data-offset="5" title="System Name"/> rel="twipsy" data-placement="left" data-offset="5" title="System Name"/>
</div> </div>
<div class="clearfix"> <div class="clearfix">
<input class="span3" placeholder="Location" <input class="span3" placeholder="Location"
type="text" name="location" value="[% params.location %]" type="text" name="location" value="[% params.location %]"
rel="twipsy" data-placement="right" data-offset="5" title="Location"/> rel="twipsy" data-placement="left" data-offset="5" title="Location"/>
</div> </div>
<div class="clearfix"> <div class="clearfix">
<input class="span3" placeholder="DNS" <input class="span3" placeholder="DNS"
type="text" name="dns" value="[% params.dns %]" type="text" name="dns" value="[% params.dns %]"
rel="twipsy" data-placement="right" data-offset="5" title="DNS"/> rel="twipsy" data-placement="left" data-offset="5" title="DNS"/>
</div> </div>
<div class="clearfix"> <div class="clearfix">
<input class="span3" placeholder="IP Address" <input class="span3" placeholder="IP Address"
type="text" name="ip" value="[% params.ip %]" type="text" name="ip" value="[% params.ip %]"
rel="twipsy" data-placement="right" data-offset="5" title="IP Address"/> rel="twipsy" data-placement="left" data-offset="5" title="IP Address"/>
</div> </div>
<div class="clearfix"> <div class="clearfix">
<input class="span3" placeholder="Description" <input class="span3" placeholder="Description"
type="text" name="description" value="[% params.description %]" type="text" name="description" value="[% params.description %]"
rel="twipsy" data-placement="right" data-offset="5" title="Description"/> rel="twipsy" data-placement="left" data-offset="5" title="Description"/>
</div> </div>
<div class="clearfix"> <div class="clearfix">
<select class="span3" size="[% vars.model_list.size > 5 ? 5 : vars.model_list.size %]" <select class="span3" size="[% vars.model_list.size > 5 ? 5 : vars.model_list.size %]"
multiple="on" name="model" multiple="on" name="model"
rel="twipsy" data-placement="right" data-offset="5" title="Model"/> rel="twipsy" data-placement="left" data-offset="5" title="Model"/>
[% FOREACH opt IN vars.model_list %] [% FOREACH opt IN vars.model_list %]
<option[% ' selected="selected"' IF vars.model_lkp.exists(opt) %]>[% opt %]</option> <option[% ' selected="selected"' IF vars.model_lkp.exists(opt) %]>[% opt %]</option>
[% END %] [% END %]
@@ -37,7 +37,7 @@
<div class="clearfix"> <div class="clearfix">
<select class="span3" size="[% vars.os_ver_list.size > 5 ? 5 : vars.os_ver_list.size %]" <select class="span3" size="[% vars.os_ver_list.size > 5 ? 5 : vars.os_ver_list.size %]"
multiple="on" name="os_ver" multiple="on" name="os_ver"
rel="twipsy" data-placement="right" data-offset="5" title="OS Release"/> rel="twipsy" data-placement="left" data-offset="5" title="OS Release"/>
[% FOREACH opt IN vars.os_ver_list %] [% FOREACH opt IN vars.os_ver_list %]
<option[% ' selected="selected"' IF vars.os_ver_lkp.exists(opt) %]>[% opt %]</option> <option[% ' selected="selected"' IF vars.os_ver_lkp.exists(opt) %]>[% opt %]</option>
[% END %] [% END %]
@@ -46,7 +46,7 @@
<div class="clearfix"> <div class="clearfix">
<select class="span3" size="[% vars.vendor_list.size > 5 ? 5 : vars.vendor_list.size %]" <select class="span3" size="[% vars.vendor_list.size > 5 ? 5 : vars.vendor_list.size %]"
multiple="on" name="vendor" multiple="on" name="vendor"
rel="twipsy" data-placement="right" data-offset="5" title="Vendor"/> rel="twipsy" data-placement="left" data-offset="5" title="Vendor"/>
[% FOREACH opt IN vars.vendor_list %] [% FOREACH opt IN vars.vendor_list %]
<option[% ' selected="selected"' IF vars.vendor_lkp.exists(opt) %]>[% opt %]</option> <option[% ' selected="selected"' IF vars.vendor_lkp.exists(opt) %]>[% opt %]</option>
[% END %] [% END %]