tweaking for ports sidebar layout css

Netdisco/public/css/netdisco.css

@@ -48,6 +48,11 @@ body {
   height: 100%;
 }
 
+/* link port name to restricted search */
+.this_port_only {
+  cursor: pointer;
+}
+
 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 /* many styles for the collapsing lists */
 
@@ -143,15 +148,29 @@ body {
   margin-right: 3px;
 }
 
-/* somewhere between span1 and span2 is desirable */
+/* nudge the port name/vlan filter over a little */
-.nd_days_select {
+#nd_port_query {
-  width: 56px;
   margin-left: -2px !important;
+  width: 152px;
 }
 
-/* nudge the port name/vlan filter over a little */
+/* somewhere between span1 and span2 is desirable */
-.nd_port_query {
+#nd_days_select {
-  width: 141px; /* FIXME width and placing */
+  margin-left: -2px !important;
+  margin-top: 4px;
+  width: 56px;
+}
+
+/* set the day/mon/year drop-down width */
+#nd_age_select {
+  margin-top: 4px;
+  width: 95px;
+}
+
+/* sidebar submit button width and spacing from Node Props */
+#ports_submit {
+  margin-top: 3px;
+  width: 152px;
 }
 
 /* little sweep brush inside of port filter input field */
@@ -167,11 +186,6 @@ so that its tooltip takes prescedence over the field tooltip */
   padding: 6px;
 }
 
-/* link port name to restricted search */
-.this_port_only {
-  cursor: pointer;
-}
-
 /* change highlighting for form fields which are being used in a search */
 form .clearfix.success select {
   background-color: #A9DBA9;
@@ -180,6 +194,21 @@ form .clearfix.success input {
   background-color: #A9DBA9;
 }
 
+/* a little whitespace between legend items */
+.nd_legend li {
+  line-height: 19px;
+}
+
+/* bring sidebar items closer together */
+.inputs-list label {
+  margin-bottom: 1px;
+}
+
+/* nudge content closer to the header labels in the sidebar */
+.inputs-list li:first-child {
+  padding-top: 3px !important;
+}
+
 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 /* sidebar collapser */
 
@@ -250,14 +279,8 @@ form .clearfix.success input {
   margin-bottom: 0px;
 }
 
-/* nudge content closer to the header labels in the sidebar */
+.sidebar .tab-content {
-.inputs-list:first-child {
+  overflow: visible;
-  padding-top: 4px !important;
-}
-
-/* a little whitespace between legend items */
-.nd_legend > li {
-  line-height: 19px;
 }
 
 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

Netdisco/views/device.tt

@@ -13,7 +13,8 @@
       <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('/device') %]">
+          <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" %]

Netdisco/views/sidebar/device/ports.tt

@@ -5,7 +5,7 @@
               <a class="field_clear_icon" href="#"
                 rel="tooltip" data-placement="top" data-offset="3" title="Show all Ports">
                 <img src="[% uri_base %]/images/tango_sweep.png"/></a>
-              <input class="nd_port_query" placeholder="Port, Name or VLAN"
+              <input id="nd_port_query" placeholder="Port, Name or VLAN"
                 name="f" value="[% params.f %]" type="text"
                 rel="tooltip" data-placement="left" data-offset="5" title="Filter by Port, Name or VLAN"/>
             </div>
@@ -62,18 +62,17 @@
                       Only Show Free Ports
                     </label>
                   </li>
-                  <p></p>
                   <li>
                     <span rel="tooltip" data-placement="left"
                       data-offset="5" title="Free if Down for this period of time">
-                    <select class="nd_days_select" name="age_num"/>
+                    <select id="nd_days_select" name="age_num"/>
                       [% SET count = 1 %]
                       [% WHILE count < 32 %]
                       <option[% ' selected="selected"' IF params.age_num == count %]>[% count %]</option>
                       [% SET count = count + 1 %]
                       [% END %]
                     </select>
-                    <select class="span2" name="age_unit"/>
+                    <select id="nd_age_select" name="age_unit"/>
                       [% FOREACH unit IN [ 'days', 'weeks', 'months', 'years' ] %]
                       <option[% ' selected="selected"' IF params.age_unit == unit %]>[% unit %]</option>
                       [% END %]