display device name on RHS when sidebar hidden

Netdisco/public/css/style.css

@@ -45,11 +45,23 @@ form .clearfix.success input {
   padding-top: 4px !important;
 }
 
-/* icolour for device name and ip in sidebar */
+/* colour for device name and ip in sidebar */
 .device_label {
   color: #660033;
 }
 
+/* right hand side device label */
+.device_label_right {
+  float: right !important;
+  margin-top: -3px !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;
@@ -208,3 +220,4 @@ so that its tooltip takes prescedence over the field tooltip */
 .field_clear_icon > img {
   padding: 6px;
 }
+

Netdisco/views/device.tt

@@ -7,7 +7,9 @@
         src="[% uri_base %]/images/application_side_contract.png"
         rel="twipsy" data-placement="below" 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 %]">
@@ -23,6 +25,12 @@
       [% FOREACH tab IN vars.tabs %]
       <li[% ' class="active"' IF params.tab == tab.id %]><a 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/sidebar.js

@@ -5,6 +5,7 @@
           function() {
             $('#sidebar_toggle_img_out').toggle();
             $('.nd_content').animate({'margin-left': '5px !important'}, 100);
+            $('.device_label_right').toggle();
           }
         );
       }
@@ -14,6 +15,7 @@
         $('#sidebar_toggle_img_out').toggle();
         $('.nd_content').animate({'margin-left': '225px !important'}, 200,
           function() {
+            $('.device_label_right').toggle();
             $('.sidebar').toggle(200);
           }
         );