diff --git a/Netdisco/share/public/css/nd_print.css b/Netdisco/share/public/css/nd_print.css index 5b7f23c4..0944b8e5 100644 --- a/Netdisco/share/public/css/nd_print.css +++ b/Netdisco/share/public/css/nd_print.css @@ -2,11 +2,11 @@ body { padding-top: 0px !important; } -#search_results > li:not(.active) { +#nd_search-results > li:not(.active) { display: none !important; } -.navbar, .sidebar { +.navbar, .nd_sidebar { display: none !important; } diff --git a/Netdisco/share/public/css/netdisco.css b/Netdisco/share/public/css/netdisco.css index 707701c4..5852c519 100644 --- a/Netdisco/share/public/css/netdisco.css +++ b/Netdisco/share/public/css/netdisco.css @@ -1,18 +1,19 @@ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ -/* for the fixed navbar make sure content stops short of page top*/ +/* style common to all pages in the site */ +/* for the fixed navbar make sure content stops short of page top*/ body { padding-top: 50px; } /* magnifying glass icon for search box */ -.navbar_icon { +.nd_navbar-icon { vertical-align: sub; cursor: pointer; } /* for the "logged in as..." text */ -.nd_navbartext { +.nd_navbar-text { color: #666; padding-top: 11px; } @@ -31,49 +32,32 @@ body { .ui-autocomplete { max-height: 200px; overflow-y: auto; - /* prevent horizontal scrollbar */ overflow-x: hidden; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ -/* various styles to adjust the hero box used for homepage + login */ +/* styles to adjust the hero box used for homepage + login */ -.nd_herorow { +/* space between hero box and navbar */ +.nd_hero-row { margin-top: 50px; } +/* alter proportions of hero unit to make it "tighter" on content */ .hero-unit { padding: 30px 60px 40px 90px; } -.nd_loginform { +/* push user/pass/login form down+away from the Netdisco banner text */ +.nd_login-form { margin-top: 15px; margin-bottom: 0px; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ -/* styles for Reports */ +/* styles for device inventory */ -/* from Bootstrap doc style sheet */ -.nd_show-grid [class*="span"] { - background-color: cornsilk; - text-align: center; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - min-height: 30px; - line-height: 30px; -} - -/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ -/* styles for Inventory */ - -#nd_dev_age_form { - margin-top: 10px; - margin-bottom: 12px; -} - -.nd_inv_tbl_head { +.nd_inventory-table-head { text-align: center; color: lightSlateGray; margin-top: 6px; @@ -81,12 +65,7 @@ body { } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ -/* results table links */ - -.nd_stealthlink { - text-decoration: none !important; - color: #404040; -} +/* styles for links in results tables */ /* make the whole cell become a hyperlink in results table */ .nd_linkcell { @@ -95,119 +74,57 @@ body { height: 100%; } -/* special placing for edit icon in details tab */ -.nd_device_details_edit { - float: right !important; - font-size: 14px; +/* still a link, but styled like normal text */ +.nd_stealth-link { + text-decoration: none !important; + color: #404040; } -/* port admin up/down control */ -.nd_edit_icon, .nd_hand_icon { - cursor: pointer; - float: left; - display: none; -} - -.nd_power_icon { - cursor: pointer; -} - -.icon-off { - vertical-align: middle; - color: darkRed; -} - -.nd_power_on { - color: darkGreen; -} - -/* placement of port link when port admin hint is enabled */ -.nd_editable_cell > .nd_this_port_only { +/* nudge cell content to the right when port_control controls are enabled */ +.nd_editable-cell > .nd_this-port-only { margin-left: 18px; } -.nd_editable_cell > .nd_editable_cell_content { +.nd_editable-cell > .nd_editable-cell-content { margin-left: 18px; } -/* style of editable content in table */ -[contenteditable]:focus { - background: #FFFFD3 !important; -} - /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ -/* many styles for the collapsing lists */ - -/* mouse-over should be pointer to show JS collapser is clickable */ -.nd_collapser { - cursor: pointer; - color: #0088CC; -} - -/* collapser label should not have any decoration even though it's clickable */ -.clearfix > a { - text-decoration: none !important; -} - -/* collapser label should not have any decoration even though it's clickable */ -.nd_collapse_vlans { - text-decoration: none !important; - cursor: pointer; - color: #0088CC; -} - -/* class to control default state of collapsible lists on page load */ -.nd_collapse_pre_hidden { - display: none; -} - -/* for the tagged vlans total when hiding the full list */ -.vlan_total { - float: right; -} - -/* little up/down chevron to the right of some collapser link */ -.arrow-up-down { - float: right; - margin-top: 1px; - margin-right: 1px; - color: #555; -} - -/* draw little up arrow to the left of a label for collapsed list */ -.cell-arrow-up-down { - float: left; - margin-right: 6px; - color: #555; -} - -/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ -/* for table and to position cell content */ +/* styles to position table cell content */ td { vertical-align: baseline; } -.center_cell { +.nd_center-cell { text-align: center; } -/* manage pseudo devices table form */ -.center_cell input { - margin-bottom: 2px; +/* fix layout of form fields inside the (topology) table */ +td div.input-append { + margin-bottom: 0px; } -.nd_inline_form { +/* fix layout of form fields inside the (pseudo devices) table */ +.nd_center-cell input { + margin-bottom: 0px; +} + +/* with two forms inside one cell, make the submit buttons side-by-side */ +.nd_inline-form { display: inline; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ -/* tabs */ +/* styles for "tabs" and surrounding content */ -#search_results { + +/* add a small bottom margin (gutter) below all pages */ +#nd_search-results { margin-bottom: 10px; } -#nd_device_name { +/* for any label which we want to appear alongside tabs, floated to the right */ +#nd_device-name { float: right; margin-bottom: 0px; margin-top: 9px; @@ -215,90 +132,255 @@ td { color: #6D5720; } -.nd_single_tab { +/* when there's only one tab (report, task etc) change the text color */ +.nd_single-tab { color: rgb(187,112,0) !important; } +/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ +/* style for port_control controls */ + +/* edit icon in details tab is in the label (not content) cell so nudge to RHS*/ +.nd_device-details-edit { + float: right !important; + font-size: 14px; +} + +/* port admin up/down control */ +.nd_edit-icon, .nd_hand-icon { + cursor: pointer; + float: left; + display: none; + margin-top: 3px; +} + +/* port power control */ +.nd_power-icon { + cursor: pointer; +} + +/* the port power icon, whether it's on or off */ +.icon-off { + vertical-align: middle; + color: darkRed; +} + +/* change color of icon from default of red (which is OK for power-off) */ +.nd_power-on { + color: darkGreen; +} + +/* style of editable content in any table - yellow background */ +[contenteditable]:focus { + background: #FFFFD3 !important; +} + +/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ +/* styles for collapsing lists - sidebar or main table cell content */ + +/* sidebar collapser is clickable and deep grey */ +.nd_collapser { + cursor: pointer; + color: #0088CC; +} + +/* vlans collapser also clickable and deep grey but with no link styling */ +.nd_collapse-vlans { + cursor: pointer; + color: #0088CC; + text-decoration: none !important; +} + +/* set default state of collapsible lists as collapsed (hidden) */ +.nd_collapse-pre-hidden { + display: none; +} + +/* for the tagged vlans total when hiding the full list */ +.nd_vlan-total { + float: right; +} + +/* little up/down chevron to the right of some collapsed list */ +.nd_arrow-up-down-right { + float: right; + margin-top: 1px; + margin-right: 1px; + color: #555; +} + +/* little up arrow to the left of a label for collapsed list */ +.nd_arrow-up-down-left { + float: left; + margin-right: 6px; + color: #555; +} + +/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ +/* styles for sidebar placement and sizing */ + +/* make the sidebar fixed on the screen */ +.container-fluid > .nd_sidebar { + position: absolute; + right: 20px; + width: 200px; + left: auto; +} + +/* nudge content in the sidebar closer to the left */ +.nd_sidebar-form { + padding-left: 0px; + margin-top: -9px; + margin-bottom: 0px; +} + +/* reduce padding at the bottom of the sidebar content */ +.container-fluid > .nd_sidebar > .well { + padding-bottom: 15px; +} + +/* pull tab content away from the sidebar */ +.container-fluid > .content { + margin-right: 215px; + margin-left: 0px; +} + +/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ +/* styles for sidebar position controls (collapse, pin) */ + +.nd_sidebar-pinned { + position: fixed !important; +} + +.nd_sidebar-pin-clicked { + color: rgba(255,0,0,0.8) !important; +} + +.nd_sidebar-pin { + float: left; + margin-top: 6px; + margin-left: -16px; + font-size: 15px; + color: #555; + cursor: pointer; +} + +#nd_sidebar-toggle-img-in { + float: left; + margin-top: -9px; + margin-left: -16px; + font-size: 15px; + color: #555; + cursor: pointer; +} + +#nd_sidebar-toggle-img-out { + position: fixed; + top: 60px; + right: 7px; + z-index: 1; + color: #555; + cursor: pointer; + display: none; +} + +/* question mark image with popover for netmap instructions */ +#nd_netmap-help { + position: fixed; + top: 160px; + right: 7px; + z-index: 1; + color: #555; + font-size: 20px; + cursor: pointer; + display: none; +} + /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* style customization for many items which appear in the sidebar */ -/* fixups for prepended checkbox in sidebar */ +.nd_sidebar-title { + margin-left: 10px; + margin-top: 6px; + margin-bottom: 12px; +} + +/* fixup for prepended checkbox in sidebar */ .nd_searchcheckbox { width: 123px; padding-left: 8px; cursor: pointer; } +/* fixup for prepended checkbox in sidebar */ +.nd_sidebar .input-prepend { + margin-left: -2px; + margin-bottom: 0px; +} + /* for some reason bootstrap 2.1.0 displays add-on as block - no check supprt? */ .nd_checkboxlabel { display: inline; } -/* fixups for placing the Archived "A" inside the prepended checkbox */ +/* fixup for placing the Archived "A" inside the prepended checkbox */ .nd_legendlabel { float: right; line-height: 1.2; } -.nd_side_input { +/* placement of form field in sidebar */ +.nd_side-input { margin-left: -3px; width: 152px; } -.nd_side_select { +/* placement of form field in sidebar */ +.nd_side-select { margin-left: -3px; width: 165px; } -.sidebar .input-prepend { - margin-left: -2px; - margin-bottom: 0px; -} - -/* nudge the port name/vlan filter over a little */ -#nd_port_query { +/* nudge the port name/vlan filter over a little (as compared to nd_side-select) */ +#nd_port-query { margin-left: 5px !important; width: 152px; } -/* somewhere between span1 and span2 is desirable */ -#nd_days_select { +/* set the day/mon/year drop-down width */ +#nd_days-select { margin-top: 4px; width: 56px; } /* set the day/mon/year drop-down width */ -#nd_age_select { +#nd_age-select { margin-top: 4px; width: 95px; } /* set the MAC format drop-down width */ -#nd_mac_format { +#nd_mac-format { margin-top: 4px; width: 154px; } /* set the MAC format drop-down width */ -#nd_node_mac_format { +#nd_node-mac-format { margin-left: -2px; margin-top: 4px; width: 165px; } -/* sidebar submit button width and spacing from Node Props */ -.sidebar button { +/* sidebar submit button width and spacing */ +.nd_sidebar button { margin-top: 9px; margin-left: -3px; width: 165px; } -.sidebar #ports_submit { - margin-top: 9px; - width: 165px; -} /* little icon inside of search input fields */ -.field_clear_icon, .field_copy_icon { +.nd_field-clear-icon, .nd_field-copy-icon { position: absolute; margin-left: 140px; margin-top: 5px; @@ -307,22 +389,24 @@ td { cursor: pointer; } -.field_copy_icon { +/* little icon inside of search input fields */ +.nd_field-copy-icon { color: #999; } -.field_clear_icon { +/* little icon inside of search input fields */ +.nd_field-clear-icon { background-color: #A9DBA9; color: #3A87AD; } - /* for the ports form, but the positioning is slightly different */ -#ports_form .field_clear_icon { + /* same for the ports form, but the positioning is slightly different */ +#ports_form .nd_field-clear-icon { margin-left: 149px; margin-top: 5px; } -/* change highlighting for form fields which are being used in a search */ +/* change bg color for form fields which are being used in a search */ form .clearfix.success select { background-color: #A9DBA9; } @@ -339,109 +423,21 @@ form .clearfix.success input { } /* bring sidebar items closer together */ -.inputs-list label { +.nd_inputs-list label { margin-bottom: 1px; } -.inputs-list i { +/* compact icons for the sidebar legend */ +.nd_inputs-list i { margin-right: 5px; margin-left: 2px; } /* nudge content closer to the header labels in the sidebar */ -.inputs-list li:first-child { +.nd_inputs-list li:first-child { padding-top: 3px !important; } -/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ -/* sidebar collapser */ - -.nd_sidebar_title { - margin-left: 10px; - margin-top: 6px; - margin-bottom: 12px; -} - -.sidebar_pinned { - position: fixed !important; -} - -.sidebar_pin_clicked { - color: rgba(255,0,0,0.8) !important; -} - -/* for placing the sidebar pin icons */ -.sidebar_pin { - float: left; - margin-top: 6px; - margin-left: -16px; - font-size: 15px; - color: #555; - cursor: pointer; -} - -/* for placing the sidebar toggle icons */ -#sidebar_toggle_img_in { - float: left; - margin-top: -9px; - margin-left: -16px; - font-size: 15px; - color: #555; - cursor: pointer; -} - -/* for placing the sidebar toggle icons */ -#sidebar_toggle_img_out { - position: fixed; - top: 60px; - right: 7px; - z-index: 1; - color: #555; - cursor: pointer; - display: none; -} - -/* question mark image with popover for netmap instructions */ -#netmap_help_img { - position: fixed; - top: 160px; - right: 7px; - z-index: 1; - color: #555; - font-size: 20px; - cursor: pointer; - display: none; -} - -/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ -/* sidebar placement and sizing */ - -/* make the sidebar fixed on the screen */ -.container-fluid > .sidebar { - position: absolute; - right: 20px; - width: 200px; - left: auto; -} - -/* smaller padding below form button in sidebar well */ -.container-fluid > .sidebar > .well { - padding-bottom: 15px; -} - -/* make the content start more to the left now the sidebar is narrower */ -.container-fluid > .content { - margin-right: 215px; - margin-left: 0px; -} - -/* nudge content in the sidebar closer to the left */ -.nd_sidesearchform { - padding-left: 0px; - margin-top: -9px; - margin-bottom: 0px; -} - /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* D3 SVG */ diff --git a/Netdisco/share/public/javascripts/netdisco.js b/Netdisco/share/public/javascripts/netdisco.js index e9f287f1..1f9af175 100644 --- a/Netdisco/share/public/javascripts/netdisco.js +++ b/Netdisco/share/public/javascripts/netdisco.js @@ -9,8 +9,8 @@ function do_search (event, tab) { // page title var pgtitle = 'Netdisco'; - if ($('#nd_device_name').text().length) { - var pgtitle = $('#nd_device_name').text() +' - '+ $('#'+ tab + '_link').text(); + if ($('#nd_device-name').text().length) { + var pgtitle = $('#nd_device-name').text() +' - '+ $('#'+ tab + '_link').text(); } // each sidebar search form has a hidden copy of the main navbar search @@ -26,16 +26,16 @@ function do_search (event, tab) { // hide or show sidebars depending on previous state, // and whether the sidebar contains any content (detected by TT) if (has_sidebar[tab] == 0) { - $('.sidebar, #sidebar_toggle_img_out').hide(); + $('.nd_sidebar, #nd_sidebar-toggle-img-out').hide(); $('.content').css('margin-right', '10px'); } else { if (sidebar_hidden) { - $('#sidebar_toggle_img_out').show(); + $('#nd_sidebar-toggle-img-out').show(); } else { $('.content').css('margin-right', '215px'); - $('.sidebar').show(); + $('.nd_sidebar').show(); } } @@ -104,8 +104,8 @@ function update_content(from, to) { // page title var pgtitle = 'Netdisco'; - if ($('#nd_device_name').text().length) { - var pgtitle = $('#nd_device_name').text() +' - '+ $('#'+ to + '_link').text(); + if ($('#nd_device-name').text().length) { + var pgtitle = $('#nd_device-name').text() +' - '+ $('#'+ to + '_link').text(); } if (window.History && window.History.enabled && is_from_state_event == 0) { @@ -144,7 +144,7 @@ function device_form_state(e) { $('#nq').css('text-decoration', 'line-through'); if (e.attr('type') == 'text') { - $('.field_copy_icon').hide(); + $('.nd_field-copy-icon').hide(); } } @@ -160,15 +160,15 @@ function device_form_state(e) { function(n,i) {return($(n).val() != "")}).length; if (num_empty === 3) { $('#nq').css('text-decoration', 'none'); - $('.field_copy_icon').show(); + $('.nd_field-copy-icon').show(); } } } $(document).ready(function() { // sidebar form fields should change colour and have bin/copy icon - $('.field_copy_icon').hide(); - $('.field_clear_icon').hide(); + $('.nd_field-copy-icon').hide(); + $('.nd_field-clear-icon').hide(); // activate typeahead on the main search box, for device names only $('#nq').typeahead({ @@ -197,30 +197,30 @@ $(document).ready(function() { $('.add-on :checkbox').each(syncCheckBox).click(syncCheckBox); // sidebar toggle - pinning - $('.sidebar_pin').click(function() { - $('.sidebar').toggleClass('sidebar_pinned'); - $('.sidebar_pin').toggleClass('sidebar_pin_clicked'); + $('.nd_sidebar-pin').click(function() { + $('.nd_sidebar').toggleClass('nd_sidebar-pinned'); + $('.nd_sidebar-pin').toggleClass('nd_sidebar-pin-clicked'); // update tooltip note for current state - if ($('.sidebar_pin').hasClass('sidebar_pin_clicked')) { - $('.sidebar_pin').first().data('tooltip').options.title = 'Unpin Sidebar'; + if ($('.nd_sidebar-pin').hasClass('nd_sidebar-pin-clicked')) { + $('.nd_sidebar-pin').first().data('tooltip').options.title = 'Unpin Sidebar'; } else { - $('.sidebar_pin').first().data('tooltip').options.title = 'Pin Sidebar'; + $('.nd_sidebar-pin').first().data('tooltip').options.title = 'Pin Sidebar'; } }); // sidebar toggle - trigger in/out on image click() - $('#sidebar_toggle_img_in').click(function() { - $('.sidebar').toggle(250); - $('#sidebar_toggle_img_out').toggle(); + $('#nd_sidebar-toggle-img-in').click(function() { + $('.nd_sidebar').toggle(250); + $('#nd_sidebar-toggle-img-out').toggle(); $('.content').css('margin-right', '10px'); sidebar_hidden = 1; }); - $('#sidebar_toggle_img_out').click(function() { - $('#sidebar_toggle_img_out').toggle(); + $('#nd_sidebar-toggle-img-out').click(function() { + $('#nd_sidebar-toggle-img-out').toggle(); $('.content').css('margin-right', '215px'); - $('.sidebar').toggle(250); - if (! $('.sidebar').hasClass('sidebar_pinned')) { + $('.nd_sidebar').toggle(250); + if (! $('.nd_sidebar').hasClass('nd_sidebar-pinned')) { $(window).scrollTop(0); } sidebar_hidden = 0; @@ -228,7 +228,7 @@ $(document).ready(function() { // could not get twitter bootstrap tabs to behave, so implemented this // but warning! will probably not work for dropdowns in tabs - $('#search_results li').delegate('a', 'click', function(event) { + $('#nd_search-results li').delegate('a', 'click', function(event) { event.preventDefault(); var from_li = $('.nav-tabs').find('> .active').first(); var to_li = $(this).parent('li') diff --git a/Netdisco/share/public/javascripts/netdisco_portcontrol.js b/Netdisco/share/public/javascripts/netdisco_portcontrol.js index f4ffb062..56b6fda8 100644 --- a/Netdisco/share/public/javascripts/netdisco_portcontrol.js +++ b/Netdisco/share/public/javascripts/netdisco_portcontrol.js @@ -32,12 +32,12 @@ function port_control (e) { } else if ($.trim(td.attr('data-action')) == 'false') { $(e).next('span').text(''); - $(e).toggleClass('nd_power_on'); + $(e).toggleClass('nd_power-on'); $(e).data('tooltip').options.title = 'Click to Enable'; td.attr('data-action', 'true'); } else if ($.trim(td.attr('data-action')) == 'true') { - $(e).toggleClass('nd_power_on'); + $(e).toggleClass('nd_power-on'); $(e).data('tooltip').options.title = 'Click to Disable'; td.attr('data-action', 'false'); } diff --git a/Netdisco/share/views/admintask.tt b/Netdisco/share/views/admintask.tt index 92346f7a..f3df8fe1 100644 --- a/Netdisco/share/views/admintask.tt +++ b/Netdisco/share/views/admintask.tt @@ -1,16 +1,16 @@ -
-