Merge branch 'og-singlesearchbox'

Netdisco/bin/netdisco-web.pl

@@ -1,4 +1,5 @@
 #!/usr/bin/env perl
+
 use Dancer;
 use Netdisco::Web;
 dance;

Netdisco/lib/Netdisco/Web/Device.pm

@@ -54,7 +54,7 @@ ajax '/ajax/content/device/:thing' => sub {
 
 # device interface addresses
 ajax '/ajax/content/device/addresses' => sub {
-    my $ip = param('ip');
+    my $ip = param('q');
     return unless $ip;
 
     my $set = schema('netdisco')->resultset('DeviceIp')->search({ip => $ip}, { order_by => 'alias' });
@@ -68,13 +68,13 @@ ajax '/ajax/content/device/addresses' => sub {
 
 # device ports with a description (er, name) matching
 ajax '/ajax/content/device/ports' => sub {
-    my $ip = param('ip');
+    my $ip = param('q');
     return unless $ip;
 
     my $set = schema('netdisco')->resultset('DevicePort')->by_ip($ip);
 
     # refine by ports if requested
-    my $q = param('q');
+    my $q = param('f');
     if ($q) {
         if ($q =~ m/^\d+$/) {
             $set = $set->by_vlan($q);
@@ -107,7 +107,7 @@ ajax '/ajax/content/device/ports' => sub {
 
 # device details table
 ajax '/ajax/content/device/details' => sub {
-    my $ip = param('ip');
+    my $ip = param('q');
     return unless $ip;
 
     my $device = schema('netdisco')->resultset('Device')->find($ip);
@@ -120,7 +120,7 @@ ajax '/ajax/content/device/details' => sub {
 };
 
 get '/device' => sub {
-    my $ip = NetAddr::IP::Lite->new(param('ip'));
+    my $ip = NetAddr::IP::Lite->new(param('q'));
     if (! $ip) {
         redirect uri_for('/', {nosuchdevice => 1});
         return;

Netdisco/public/css/netdisco.css

@@ -1,28 +1,18 @@
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 /* for the fixed navbar make sure content stops short of page top*/
+
 body {
   padding-top: 50px;
 }
 
-/* the bootstrap style is only set for input so set for select too*/
+.navbar_icon {
-/* also make the green a little more visible */
+  vertical-align: middle;
-form .clearfix.success select {
+  cursor: pointer;
-  border-color: green;
-}
-form .clearfix.success input {
-  border-color: green;
-}
-
-/* make the sidebar less wide */
-.well {
-  margin-right: 15px;
-}
-
-/* make the content start more to the left now the sidebar is narrower */
-.nd_content {
-  margin-left: 225px !important;
 }
 
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 /* various styles to adjust the hero box used for homepage + login */
+
 .nd_loginalert {
   margin-top: -40px;
 }
@@ -40,67 +30,9 @@ form .clearfix.success input {
   margin-bottom: 0px;
 }
 
-/* nudge content closer to the header labels in the sidebar */
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
-.inputs-list:first-child {
+/* results table links */
-  padding-top: 4px !important;
-}
 
-/* colour for device name and ip in sidebar */
-.device_label {
-  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;
-}
-
-/* nudge content in the sidebar closer to the left */
-.nd_sidesearchform {
-  padding-left: 0px;
-  margin-bottom: 0px;
-  /* margin-top: 8px; */
-}
-
-/* fixups for prepended checkbox in sidebar */
-.nd_searchcheckbox {
-  width: 120px;
-  padding-left: 35px;
-  cursor: pointer;
-}
-
-/* placement of the search/filter bookmark link icon */
-.nd_bookmark {
-  vertical-align: top;
-}
-
-/* fixups for placing the Archived "A" inside the prepended checkbox */
-.nd_legendlabel {
-  float: right;
-  line-height: 1.2;
-  margin-top: 2px;
-  margin-right: 3px;
-}
-
-/* somewhere between span1 and span2 is desirable */
-.nd_days_select {
-  width: 56px;
-  margin-left: -2px !important;
-}
-
-/* search/filter button placement */
-.nd_search {
-  margin-top: 15px;
-}
-
-/* results table links with no decoration */
 .nd_stealthlink {
   text-decoration: none !important;
   color: #404040;
@@ -113,6 +45,9 @@ form .clearfix.success input {
   height: 100%;
 }
 
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+/* many styles for the collapsing lists */
+
 /* mouse-over should be pointer to show JS collapser is clickable */
 .nd_collapser {
   cursor: pointer;
@@ -148,6 +83,11 @@ form .clearfix.success input {
   border-top: 8px solid #F89406;
 }
 
+/* for the tagged vlans total when hiding the full list */
+.vlan_total {
+  float: right;
+}
+
 /* draw little up arrow to the right of a label for collapsed list */
 .cell-arrow-up {
   float: left;
@@ -168,48 +108,47 @@ form .clearfix.success input {
   border-top: 8px solid #F89406;
 }
 
-/* nudge the port name/vlan filter over a little */
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
-.nd_port_query {
+/* for table to center cell content */
-  margin-left: -2px !important;
-}
 
-/* for ports table to center cell content */
 .center_cell {
   text-align: center;
 }
 
-/* for the tagged vlans total when hiding the full list */
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
-.vlan_total {
+/* tabs */
+
+#search_results {
+    margin-bottom: 10px;
+}
+
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+/* style customization for many items which appear in the sidebar */
+
+/* fixups for prepended checkbox in sidebar */
+.nd_searchcheckbox {
+  width: 120px;
+  padding-left: 35px;
+  cursor: pointer;
+}
+
+/* fixups for placing the Archived "A" inside the prepended checkbox */
+.nd_legendlabel {
   float: right;
+  line-height: 1.2;
+  margin-top: 2px;
+  margin-right: 3px;
 }
 
-/* for placing the sidebar toggle icons */
+/* somewhere between span1 and span2 is desirable */
-#sidebar_toggle_img_in {
+.nd_days_select {
-  margin-top: -10px;
+  width: 56px;
-  margin-left: 164px;
+  margin-left: -2px !important;
-  cursor: pointer;
 }
 
-/* for placing the sidebar toggle icons */
+/* nudge the port name/vlan filter over a little */
-#sidebar_toggle_img_out {
+.nd_port_query {
-  position: fixed;
+  margin-left: -2px !important;
-  top: 60px;
-  left: 4px;
-  z-index: 1;
-  cursor: pointer;
-  display: none;
-}
-
-/* pull the device label closer to the top of the sidebar
-to reduce the useless gap */
-h3.device_label {
-  margin-top: -12px;
-}
-
-/* make the sidebar fixed on the screen */
-.sidebar {
-  position: fixed !important;
-  margin-top: 50px;
 }
 
 /* little sweep brush inside of port filter input field */
@@ -224,3 +163,63 @@ so that its tooltip takes prescedence over the field tooltip */
 .field_clear_icon > img {
   padding: 6px;
 }
+
+/* change highlighting for form fields which are being used in a search */
+form .clearfix.success select {
+  background-color: #A9DBA9;
+}
+form .clearfix.success input {
+  background-color: #A9DBA9;
+}
+
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+/* sidebar collapser */
+
+/* for placing the sidebar toggle icons */
+#sidebar_toggle_img_in {
+  float: left;
+  margin-top: -9px;
+  margin-left: -18px;
+  cursor: pointer;
+}
+
+/* for placing the sidebar toggle icons */
+#sidebar_toggle_img_out {
+  position: fixed;
+  top: 60px;
+  right: 7px;
+  z-index: 1;
+  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;
+}
+
+/* make the content start more to the left now the sidebar is narrower */
+.container-fluid > .content {
+  margin-right: 220px;
+  margin-left: 0px;
+}
+
+/* nudge content in the sidebar closer to the left */
+.nd_sidesearchform {
+  padding-left: 0px;
+  margin-top: -9px;
+  margin-bottom: 0px;
+}
+
+/* nudge content closer to the header labels in the sidebar */
+.inputs-list:first-child {
+  padding-top: 4px !important;
+}
+
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

Netdisco/public/javascripts/netdisco.js

@@ -3,7 +3,6 @@
 function do_search (event, tab) {
   var form = '#' + tab + '_form';
   var target = '#' + tab + '_pane';
-  var mark = '#' + tab + '_bookmark';
 
   // stop form from submitting normally
   event.preventDefault();
@@ -13,6 +12,22 @@ function do_search (event, tab) {
     $(this).val( $(form).find("input[name=q]").val() );
   });
 
+  // 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();
+    $('.content').css('margin-right', '10px !important');
+  }
+  else {
+    if (sidebar_hidden) {
+      $('#sidebar_toggle_img_out').show();
+    }
+    else {
+      $('.content').css('margin-right', '220px !important');
+      $('.sidebar').show();
+    }
+  }
+
   // get the form params
   var query = $(form).serialize();
 
@@ -48,14 +63,16 @@ function do_search (event, tab) {
           '<div class="span3 alert-message info"><p>No matching records.</p></div>'
         );
       }
-      // looks good, update the bookmark for this search
-      $(mark).attr('href', uri_base + '/' + path + '?' + query);
 
       inner_view_processing();
     }
   );
 }
 
+// keep track of which tabs have a sidebar, for when switching tab
+var has_sidebar = {};
+var sidebar_hidden = 0;
+
 // the history.js plugin is great, but fires statechange at pushState
 // so we have these semaphpores to help avoid messing the History.
 
@@ -107,6 +124,11 @@ $(document).ready(function() {
   // activate tooltips
   $("[rel=twipsy]").twipsy({live: true});
 
+  // bind submission to the navbar go icon
+  $('#navsearchgo').click(function() {
+    $('#navsearchgo').parent('form').submit();
+  });
+
   // fix green background on search checkboxes
   // https://github.com/twitter/bootstrap/issues/742
   syncCheckBox = function() {
@@ -120,21 +142,22 @@ $(document).ready(function() {
       $('.sidebar').toggle(
         function() {
           $('#sidebar_toggle_img_out').toggle();
-          $('.nd_content').animate({'margin-left': '5px !important'}, 100);
+          $('.content').animate({'margin-right': '10px !important'}, 50);
-          $('.device_label_right').toggle();
         }
       );
+      sidebar_hidden = 1;
     }
   );
   $('#sidebar_toggle_img_out').click(
     function() {
       $('#sidebar_toggle_img_out').toggle();
-      $('.nd_content').animate({'margin-left': '225px !important'}, 200,
+      $('.content').animate({'margin-right': '220px !important'}, 100,
         function() {
-          $('.device_label_right').toggle();
           $('.sidebar').toggle(200);
+          $(window).scrollTop(0);
         }
       );
+      sidebar_hidden = 0;
     }
   );
 
@@ -145,22 +168,22 @@ $(document).ready(function() {
     var from_li = $('.tabs').find('> .active').first();
     var to_li = $(this).parent('li')
 
-    from_li.removeClass('active');
+    from_li.toggleClass('active');
-    to_li.addClass('active');
+    to_li.toggleClass('active');
 
-    var from = from_li.find('a').attr('href');
+    var from_id = from_li.find('a').attr('href');
-    var to = $(this).attr('href');
+    var to_id = $(this).attr('href');
 
-    if (from == to) {
+    if (from_id == to_id) {
       return;
     }
 
-    $(from).toggleClass('active');
+    $(from_id).toggleClass('active');
-    $(to).toggleClass('active');
+    $(to_id).toggleClass('active');
 
     update_content(
-      from.replace(/^#/,"").replace(/_pane$/,""),
+      from_id.replace(/^#/,"").replace(/_pane$/,""),
-      to.replace(/^#/,"").replace(/_pane$/,"")
+      to_id.replace(/^#/,"").replace(/_pane$/,"")
     );
   });
 });

Netdisco/views/ajax/device/addresses.tt

@@ -14,7 +14,7 @@
       <td>[% row.alias %]</a>
       <td>[% row.dns.remove(settings.domain_suffix) %]</a>
       <td class="center_cell"><a class="nd_linkcell"
-        href="[% uri_for('/device') %]?tab=ports&ip=[% row.ip %]&q=[% row.port %]">[% row.port %]</a></td>
+        href="[% uri_for('/device') %]?tab=ports&q=[% row.ip %]&f=[% row.port %]">[% row.port %]</a></td>
       <td>[% row.device_port.name %]</td>
       <td><a class="nd_linkcell"
         href="[% uri_for('/search') %]?tab=device&ip=[% row.subnet %]">[% row.subnet %]</a></td>

Netdisco/views/ajax/device/ports.tt

@@ -85,7 +85,7 @@
       <td>
         [% IF row.remote_ip %]
           [% IF row.neighbor %]
-          <a href="[% uri_for('/device') %]?tab=ports&ip=[% row.neighbor.ip | uri %]&q=[% row.remote_port | uri %]">
+          <a href="[% uri_for('/device') %]?tab=ports&q=[% row.neighbor.ip | uri %]&f=[% row.remote_port | uri %]">
             [% row.neighbor.dns.remove(settings.domain_suffix) || row.neighbor.ip %]
             ([% row.remote_port | html_entity %])</a>
           [% ELSE %]

Netdisco/views/ajax/search/device.tt

@@ -14,7 +14,7 @@
   </tbody>
     [% WHILE (row = results.next) %]
     <tr>
-      <td><a href="[% uri_for('/device') %]?ip=[% row.ip %]">[% row.dns.remove(settings.domain_suffix) %]</a></td>
+      <td><a href="[% uri_for('/device') %]?q=[% row.ip %]">[% row.dns.remove(settings.domain_suffix) %]</a></td>
       <td>[% row.contact %]</td>
       <td>[% row.location %]</td>
       <td>[% row.name %]</td>

Netdisco/views/ajax/search/node_by_ip.tt

@@ -38,7 +38,7 @@
       <td>&nbsp;</td>
       [% END %]
       <td>Switch Port</td>
-      <td><a href="[% uri_for('/device') %]?tab=ports&ip=[% node.switch | url %]&q=[% node.port | url %]">[% node.switch %] [ [% node.port %] ]</a>
+      <td><a href="[% uri_for('/device') %]?tab=ports&q=[% node.switch | url %]&f=[% node.port | url %]">[% node.switch %] [ [% node.port %] ]</a>
         [% ' (' _ node.device.dns.remove(settings.domain_suffix) _ ')' IF node.device.dns %]
         [% ' <span class="label warning">a</span>' IF NOT node.active %]
       </td>

Netdisco/views/ajax/search/node_by_mac.tt

@@ -66,7 +66,7 @@
       </td>
       [% END %]
       <td>Switch Port</td>
-      <td><a href="[% uri_for('/device') %]?tab=ports&ip=[% node.switch | url %]&q=[% node.port | url %]">[% node.switch %] [ [% node.port %] ]</a>
+      <td><a href="[% uri_for('/device') %]?tab=ports&q=[% node.switch | url %]&f=[% node.port | url %]">[% node.switch %] [ [% node.port %] ]</a>
         [% ' (' _ node.device.dns.remove(settings.domain_suffix) _ ')' IF node.device.dns %]
         [% ' <span class="label warning">a</span>' IF NOT node.active %]
       </td>
@@ -97,7 +97,7 @@
       </td>
       [% END %]
       <td>Switch Port</td>
-      <td><a href="[% uri_for('/device') %]?tab=ports&ip=[% port.ip | url %]&q=[% port.port | url %]">[% port.ip %] [ [% port.port %] ]</a>
+      <td><a href="[% uri_for('/device') %]?tab=ports&q=[% port.ip | url %]&f=[% port.port | url %]">[% port.ip %] [ [% port.port %] ]</a>
         [% ' (' _ port.device.dns.remove(settings.domain_suffix) _ ')' IF port.device.dns %]
       </td>
       [% IF params.stamps %]

Netdisco/views/ajax/search/port.tt

@@ -11,7 +11,7 @@
     [% WHILE (row = results.next) %]
     <tr>
       <td>[% row.name %]</td>
-      <td><a href="[% uri_for('/device') %]?tab=ports&ip=[% row.ip %]&q=[% row.port %]">[% row.ip %] [ [% row.port %] ]</a>
+      <td><a href="[% uri_for('/device') %]?tab=ports&q=[% row.ip %]&f=[% row.port %]">[% row.ip %] [ [% row.port %] ]</a>
         [% ' (' _ row.device.dns.remove(settings.domain_suffix) _ ')' IF row.device.dns %]
       </td>
       <td>[% row.descr %]</td>

Netdisco/views/ajax/search/vlan.tt

@@ -13,17 +13,17 @@
     [% WHILE (row = results.next) %]
     <tr>
       <td><a class="nd_linkcell nd_stealthlink"
-        href="[% uri_for('/device') %]?tab=ports&ip=[% row.ip %]&q=[% row.vlan.vlan %]">[% row.vlan.vlan %]</a></td>
+        href="[% uri_for('/device') %]?tab=ports&q=[% row.ip %]&f=[% row.vlan.vlan %]">[% row.vlan.vlan %]</a></td>
       <td><a class="nd_linkcell"
-        href="[% uri_for('/device') %]?tab=ports&ip=[% row.ip %]&q=[% row.vlan.vlan %]">[% row.dns %]</a></td>
+        href="[% uri_for('/device') %]?tab=ports&q=[% row.ip %]&f=[% row.vlan.vlan %]">[% row.dns %]</a></td>
       <td><a class="nd_linkcell nd_stealthlink"
-        href="[% uri_for('/device') %]?tab=ports&ip=[% row.ip %]&q=[% row.vlan.vlan %]">[% row.vlan.description %]</a></td>
+        href="[% uri_for('/device') %]?tab=ports&q=[% row.ip %]&f=[% row.vlan.vlan %]">[% row.vlan.description %]</a></td>
       <td><a class="nd_linkcell nd_stealthlink"
-        href="[% uri_for('/device') %]?tab=ports&ip=[% row.ip %]&q=[% row.vlan.vlan %]">[% row.model %]</a></td>
+        href="[% uri_for('/device') %]?tab=ports&q=[% row.ip %]&f=[% row.vlan.vlan %]">[% row.model %]</a></td>
       <td><a class="nd_linkcell nd_stealthlink"
-        href="[% uri_for('/device') %]?tab=ports&ip=[% row.ip %]&q=[% row.vlan.vlan %]">[% row.os %]</a></td>
+        href="[% uri_for('/device') %]?tab=ports&q=[% row.ip %]&f=[% row.vlan.vlan %]">[% row.os %]</a></td>
       <td><a class="nd_linkcell nd_stealthlink"
-        href="[% uri_for('/device') %]?tab=ports&ip=[% row.ip %]&q=[% row.vlan.vlan %]">[% row.vendor %]</a></td>
+        href="[% uri_for('/device') %]?tab=ports&q=[% row.ip %]&f=[% row.vlan.vlan %]">[% row.vendor %]</a></td>
     </tr>
     [% END %]
   </tbody>

Netdisco/views/device.tt

@@ -1,36 +1,38 @@
 <img class="sidebar_toggle" id="sidebar_toggle_img_out"
-  src="[% uri_base %]/images/splashyfish_right.png"/>
+  src="[% uri_base %]/images/diagona_settings.png"
+  rel="twipsy" data-placement="left" data-offset="5" title="Show Options"/>
 <div class="container-fluid">
   <div class="sidebar">
     <div class="well">
       <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 Sidebar"/>
-      <h3 class="device_label">[% d.ip %]</h3>
-      [% IF d.dns %]
-      <p class="device_label">[% d.dns.remove(settings.domain_suffix) %]</p>
-      [% END %]
       <div class="tab-content">
         [% FOREACH tab IN vars.tabs %]
         <div id="[% tab.id %]_search" class="tab-pane [% 'active' IF params.tab == tab.id %]">
-          [%+ TRY %][% INCLUDE "sidebar/device/${tab.id}.tt" %][% CATCH %]<!-- no "[% tab.id %]" search options -->[% END %]
+          <form id="[% tab.id %]_form" class="nd_sidesearchform form-stacked" method="get" action="[% uri_for('/device') %]">
+            <input name="tab" value="[% tab.id %]" type="hidden"/>
+            [% TRY %]
+            [% INCLUDE "sidebar/device/${tab.id}.tt" %]
+            <script type="text/javascript">has_sidebar["[% tab.id %]"] = 1;</script>
+            [% CATCH %]
+            <!-- no "[% tab.id %]" search options -->
+            <input name="q" value="[% params.q %]" type="hidden"/>
+            <input name="f" value="[% params.f %]" type="hidden"/>
+            <script type="text/javascript">has_sidebar["[% tab.id %]"] = 0;</script>
+            [% END %]
+          </form>
         </div> <!-- /tab-pane -->
         [% END %]
       </div> <!-- /tab-content -->
     </div>
   </div>
 
-  <div class="nd_content content">
+  <div class="content">
     <ul id="search_results" class="tabs" data-tabs="on">
       [% 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>
       [% END %]
-      <li class="device_label_right">
-        <h3 class="inline device_label">[% d.ip %]</h3>
-        [% IF d.dns %]
-        <h5 class="inline device_label">([% d.dns.remove(settings.domain_suffix) %])</h5>
-        [% END %]
-      </li>
     </ul>
     <div class="tab-content">
       [% FOREACH tab IN vars.tabs %]

Netdisco/views/js/device.js

@@ -47,7 +47,7 @@
     });
 
     // show or hide sweeping brush icon when field has content
-    var sweep = $('#ports_form').find("input[name=q]");
+    var sweep = $('#ports_form').find("input[name=f]");
 
     if (sweep.val() === "") {
       $('.field_clear_icon').hide();

Netdisco/views/js/search.js

@@ -6,36 +6,25 @@
   var path = 'search';
 
   $(document).ready(function() {
-    // highlight active search filters in green
+    // highlight active search filters in green.
-    // there must be a way to factor this out to a func but my JS is weak :-/
+    // strikethrough the navbar search if using device_form instead.
 
-    $("form .clearfix input").not("[name=q]").each(function() {
+    var d_inputs = $("#device_form .clearfix input").not('[type="checkbox"]')
-      if ($(this).val() === "") {
+        .add("#device_form .clearfix select");
-        $(this).parent(".clearfix").removeClass('success');
-      } else {
-        $(this).parent(".clearfix").addClass('success');
-      }
-    });
-    $("form .clearfix input").not("[name=q]").change(function() {
-      if ($(this).val() === "") {
-        $(this).parent(".clearfix").removeClass('success');
-      } else {
-        $(this).parent(".clearfix").addClass('success');
-      }
-    });
-    $("form .clearfix select").each(function() {
-      if ($(this).find(":selected").length === 0) {
-        $(this).parent(".clearfix").removeClass('success');
-      } else {
-        $(this).parent(".clearfix").addClass('success');
-      }
-    });
-    $("form .clearfix select").change(function() {
-      if ($(this).find(":selected").length === 0) {
-        $(this).parent(".clearfix").removeClass('success');
-      } else {
-        $(this).parent(".clearfix").addClass('success');
-      }
-    });
 
+    function device_form_state(e) {
+      if (e.is('[value!=""]')) {
+        e.parent(".clearfix").addClass('success');
+        $('#nq').css('text-decoration', 'line-through');
+      }
+      else {
+        e.parent(".clearfix").removeClass('success');
+        if (! d_inputs.is('[value!=""]') ) {
+          $('#nq').css('text-decoration', 'none');
+        }
+      }
+    }
+
+    d_inputs.each(function() {device_form_state($(this))});
+    d_inputs.change(function() {device_form_state($(this))});
   });

Netdisco/views/layouts/main.tt

@@ -25,8 +25,8 @@
   <script type="text/javascript" src="[% uri_base %]/javascripts/netdisco.js"></script>
 
   <link rel="stylesheet" href="[% uri_base %]/css/bootstrap.min.css">
-  <link rel="stylesheet" href="[% uri_base %]/css/style.css">
+  <link rel="stylesheet" href="[% uri_base %]/css/netdisco.css">
-  <link rel="stylesheet" href="[% uri_base %]/css/print.css" media="print">
+  <link rel="stylesheet" href="[% uri_base %]/css/nd_print.css" media="print">
 </head>
 
 <body>
@@ -58,7 +58,8 @@
         [% END %]
       </ul>
       <form method="get" action="[% uri_for('/search') %]">
-        <input placeholder="Device, Node or VLAN Search" class="span5" name="q" type="text"/>
+        <input placeholder="Find Anything" class="span5" id="nq" name="q" type="text"/>
+        <img id="navsearchgo" class="navbar_icon" src="[% uri_base %]/images/crystalclear_mag.png"/>
       </form>
       <ul class="nav secondary-nav">
         <li class="menu">

Netdisco/views/search.tt

@@ -1,27 +1,25 @@
 <img class="sidebar_toggle" id="sidebar_toggle_img_out"
-  src="[% uri_base %]/images/splashyfish_right.png"/>
+  src="[% uri_base %]/images/diagona_settings.png"
+  rel="twipsy" data-placement="left" data-offset="5" title="Show Search Options"/>
 <div class="container-fluid">
   <div class="sidebar">
     <div class="well">
       <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 Sidebar"/>
       <div class="tab-content">
         [% FOREACH tab IN vars.tabs %]
         <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') %]">
-            <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 %]
             <input name="tab" value="[% tab.id %]" type="hidden"/>
-            <div class="nd_search clearfix">
+            [% TRY %]
-              <button id="[% tab.id %]_submit" type="submit" class="btn info">Search Again</button>
+            [% INCLUDE "sidebar/search/${tab.id}.tt" %]
-              <a id="[% tab.id %]_bookmark" href="#"
+            <script type="text/javascript">has_sidebar["[% tab.id %]"] = 1;</script>
-                rel="twipsy" data-placement="right" data-offset="5" title="Bookmark this Search">
+            [% CATCH %]
-                <img class="nd_bookmark" src="[% uri_base %]/images/glyphicons_072_bookmark.png">
+            <!-- no "[% tab.id %]" search options -->
-              </a>
+            <input name="q" value="[% params.q %]" type="hidden"/>
-            </div>
+            <script type="text/javascript">has_sidebar["[% tab.id %]"] = 0;</script>
+            [% END %]
           </form>
         </div> <!-- /tab-pane -->
         [% END %]
@@ -29,7 +27,7 @@
     </div>
   </div>
 
-  <div class="nd_content content">
+  <div class="content">
     <ul id="search_results" class="tabs" data-tabs="on">
       [% 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>

Netdisco/views/sidebar/device/addresses.tt

@@ -1,6 +0,0 @@
-
-          <form id="[% tab.id %]_form" class="nd_sidesearchform form-stacked" method="get" action="[% uri_for('/device') %]">
-            <input name="tab" value="[% tab.id %]" type="hidden"/>
-            <input name="ip" value="[% params.ip %]" type="hidden"/>
-            <input name="q" value="[% params.q %]" type="hidden"/>
-          </form>

Netdisco/views/sidebar/device/details.tt

@@ -1,6 +0,0 @@
-
-          <form id="[% tab.id %]_form" class="nd_sidesearchform form-stacked" method="get" action="[% uri_for('/device') %]">
-            <input name="tab" value="[% tab.id %]" type="hidden"/>
-            <input name="ip" value="[% params.ip %]" type="hidden"/>
-            <input name="q" value="[% params.q %]" type="hidden"/>
-          </form>

Netdisco/views/sidebar/device/modules.tt

@@ -1,6 +0,0 @@
-
-          <form id="[% tab.id %]_form" class="nd_sidesearchform form-stacked" method="get" action="[% uri_for('/device') %]">
-            <input name="tab" value="[% tab.id %]" type="hidden"/>
-            <input name="ip" value="[% params.ip %]" type="hidden"/>
-            <input name="q" value="[% params.q %]" type="hidden"/>
-          </form>

Netdisco/views/sidebar/device/ports.tt

@@ -1,14 +1,13 @@
 
-          <form id="[% tab.id %]_form" class="nd_sidesearchform form-stacked" method="get" action="[% uri_for('/device') %]">
+            <p><em>Port Filter Options</em></p>
-            <input name="tab" value="[% tab.id %]" type="hidden"/>
+            <input name="q" value="[% params.q %]" type="hidden"/>
-            <input name="ip" value="[% params.ip %]" type="hidden"/>
             <div class="clearfix">
               <a class="field_clear_icon" href="#"
-                rel="twipsy" data-placement="right" data-offset="3" title="Show all Ports">
+                rel="twipsy" data-placement="above" data-offset="3" title="Show all Ports">
                 <img src="[% uri_base %]/images/tango_sweep.png"/></a>
               <input class="nd_port_query span3" placeholder="Port, Name or VLAN"
-                name="q" value="[% params.q %]" type="text"
+                name="f" value="[% params.f %]" 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 class="clearfix">
               <a href="#" id="nd_collapse_legend"><label>Legend</label></a>
@@ -63,7 +62,7 @@
                   </li>
                   <p></p>
                   <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"/>
                       [% SET count = 1 %]
                       [% WHILE count < 32 %]
@@ -96,10 +95,4 @@
                 </ul>
               </div>
             </div>
-            <div class="nd_search clearfix">
+            <button id="[% tab.id %]_submit" type="submit" class="btn info span3">Update View</button>
-              <button id="[% tab.id %]_submit" type="submit" class="btn info">Update View</button>
-              <a id="[% tab.id %]_bookmark" href="#"
-                rel="twipsy" data-placement="right" data-offset="5" title="Bookmark these Settings">
-                <img class="nd_bookmark" src="[% uri_base %]/images/glyphicons_072_bookmark.png"></a>
-            </div>
-          </form>

Netdisco/views/sidebar/search/device.tt

@@ -1,34 +1,35 @@
 
             <p><em>Device Search Options</em></p>
+            <input name="q" value="[% params.q %]" type="hidden"/>
             <div class="clearfix">
               <input class="span3" placeholder="System 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 class="clearfix">
               <input class="span3" placeholder="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 class="clearfix">
               <input class="span3" placeholder="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 class="clearfix">
               <input class="span3" placeholder="IP Address"
                 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 class="clearfix">
               <input class="span3" placeholder="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 class="clearfix">
               <select class="span3" size="[% vars.model_list.size > 5 ? 5 : vars.model_list.size %]"
                 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 %]
                 <option[% ' selected="selected"' IF vars.model_lkp.exists(opt) %]>[% opt %]</option>
                 [% END %]
@@ -37,7 +38,7 @@
             <div class="clearfix">
               <select class="span3" size="[% vars.os_ver_list.size > 5 ? 5 : vars.os_ver_list.size %]"
                 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 %]
                 <option[% ' selected="selected"' IF vars.os_ver_lkp.exists(opt) %]>[% opt %]</option>
                 [% END %]
@@ -46,7 +47,7 @@
             <div class="clearfix">
               <select class="span3" size="[% vars.vendor_list.size > 5 ? 5 : vars.vendor_list.size %]"
                 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 %]
                 <option[% ' selected="selected"' IF vars.vendor_lkp.exists(opt) %]>[% opt %]</option>
                 [% END %]
@@ -60,3 +61,4 @@
                 <span class="nd_searchcheckbox uneditable-input">Match All Options</span>
               </label>
             </div>
+            <button id="[% tab.id %]_submit" type="submit" class="btn info span3">Search Again</button>

Netdisco/views/sidebar/search/node.tt

@@ -1,5 +1,6 @@
 
             <p><em>Node Search Options</em></p>
+            <input name="q" value="[% params.q %]" type="hidden"/>
             <div class="clearfix input-prepend">
               <label class="add-on">
                 <input type="checkbox" id="stamps" name="stamps"[% ' checked="checked"' IF params.stamps %]/>
@@ -34,3 +35,4 @@
               </label>
             </div>
             [% END %]
+            <button id="[% tab.id %]_submit" type="submit" class="btn info span3">Search Again</button>