make savewidget css a little more generic

- use classes instead of IDs
- use .filename instead of #notebook_name

IPython/html/static/notebook/js/savewidget.js

@@ -29,7 +29,7 @@ define([
 
     SaveWidget.prototype.bind_events = function () {
         var that = this;
-        this.element.find('span#notebook_name').click(function () {
+        this.element.find('span.filename').click(function () {
             that.rename_notebook({notebook: that.notebook});
         });
         this.events.on('notebook_loaded.Notebook', function () {
@@ -130,7 +130,7 @@ define([
 
     SaveWidget.prototype.update_notebook_name = function () {
         var nbname = this.notebook.get_notebook_name();
-        this.element.find('span#notebook_name').text(nbname);
+        this.element.find('span.filename').text(nbname);
     };
 
 
@@ -152,11 +152,11 @@ define([
 
 
     SaveWidget.prototype.set_save_status = function (msg) {
-        this.element.find('span#autosave_status').text(msg);
+        this.element.find('span.autosave_status').text(msg);
     };
 
     SaveWidget.prototype._set_checkpoint_status = function (human_date, iso_date) {
-        var el = this.element.find('span#checkpoint_status');
+        var el = this.element.find('span.checkpoint_status');
         if(human_date){
             el.text("Last Checkpoint: "+human_date).attr('title',iso_date);
         } else {

IPython/html/static/notebook/less/notebook.less

@@ -15,20 +15,6 @@ body {
     .border-box-sizing();
 }
 
-span#notebook_name {
-    height: 1em;
-    line-height: 1em;
-    padding: 3px;
-    border: none;
-    font-size: 146.5%;
-    &:hover{
-        // ensure body is lighter on dark palette, 
-        // and vice versa
-        background-color:contrast(@body-bg, lighten(@body-bg,30%), darken(@body-bg,10%));
-    }
-    .corner-all;
-}
-
 div#notebook_panel {
     margin: 0px 0px 0px 0px;
     padding: 0px;

IPython/html/static/notebook/less/savewidget.less

@@ -1,33 +1,41 @@
-span#save_widget {
+span.save_widget {
     margin-top: 6px;
+    
+    span.filename {
+        height: 1em;
+        line-height: 1em;
+        padding: 3px;
+        border: none;
+        font-size: 146.5%;
+        &:hover{
+            // ensure body is lighter on dark palette, 
+            // and vice versa
+            background-color:contrast(@body-bg, lighten(@body-bg,30%), darken(@body-bg,10%));
+        }
+        .corner-all;
+    }
 }
 
-span#checkpoint_status, span#autosave_status {
+span.checkpoint_status, span.autosave_status {
     font-size: small;
 }
 
 @media (max-width: 767px) {
-    span#save_widget {
+    span.save_widget {
         font-size: small;
     }
-    span#checkpoint_status, span#autosave_status {
-        font-size: x-small;
-    }
-}
-
-@media (max-width: 767px) {
-    span#checkpoint_status, span#autosave_status {
-        display: none;
+    span.checkpoint_status, span.autosave_status {
+      display: none;
     }
 }
 
 @media (min-width: 768px) and (max-width: 979px) {
-    span#checkpoint_status {
+    span.checkpoint_status {
         display: none;
     }
-    span#autosave_status {
+    span.autosave_status {
         font-size: x-small;
     }
 }
 
-  
+

IPython/html/static/style/style.min.css

@@ -7752,9 +7752,6 @@ div#header {
   /* Initially hidden to prevent FLOUC */
   display: none;
   background-color: #ffffff;
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
   /* Display over codemirror */
   z-index: 100;
 }
@@ -9440,17 +9437,6 @@ body {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
-span#notebook_name {
-  height: 1em;
-  line-height: 1em;
-  padding: 3px;
-  border: none;
-  font-size: 146.5%;
-  border-radius: 4px;
-}
-span#notebook_name:hover {
-  background-color: #e6e6e6;
-}
 div#notebook_panel {
   margin: 0px 0px 0px 0px;
   padding: 0px;
@@ -9700,7 +9686,6 @@ fieldset[disabled] #kernel_selector_widget > button.active {
   margin-top: 0px;
 }
 #menubar {
-  margin-top: 0px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -10178,33 +10163,38 @@ div#pager .ui-resizable-handle {
   /* Modern browsers */
   flex: 1;
 }
-span#save_widget {
+span.save_widget {
   margin-top: 6px;
 }
-span#checkpoint_status,
-span#autosave_status {
+span.save_widget span.filename {
+  height: 1em;
+  line-height: 1em;
+  padding: 3px;
+  border: none;
+  font-size: 146.5%;
+  border-radius: 4px;
+}
+span.save_widget span.filename:hover {
+  background-color: #e6e6e6;
+}
+span.checkpoint_status,
+span.autosave_status {
   font-size: small;
 }
 @media (max-width: 767px) {
-  span#save_widget {
+  span.save_widget {
     font-size: small;
   }
-  span#checkpoint_status,
-  span#autosave_status {
-    font-size: x-small;
-  }
-}
-@media (max-width: 767px) {
-  span#checkpoint_status,
-  span#autosave_status {
+  span.checkpoint_status,
+  span.autosave_status {
     display: none;
   }
 }
 @media (min-width: 768px) and (max-width: 979px) {
-  span#checkpoint_status {
+  span.checkpoint_status {
     display: none;
   }
-  span#autosave_status {
+  span.autosave_status {
     font-size: x-small;
   }
 }

IPython/html/templates/notebook.html

@@ -35,10 +35,10 @@ class="notebook_app"
 {% block headercontainer %}
 
 
-<span id="save_widget" class="nav pull-left">
-    <span id="notebook_name"></span>
-    <span id="checkpoint_status"></span>
-    <span id="autosave_status"></span>
+<span id="save_widget" class="nav pull-left save_widget">
+    <span class="filename"></span>
+    <span class="checkpoint_status"></span>
+    <span class="autosave_status"></span>
 </span>
 
 <span id="kernel_selector_widget" class="pull-right dropdown">