Merge pull request #2532 from gnestor/issue-1129

Re: Adjust positioning of filename in save widget

Author: takluyver

notebook/static/base/less/page.less

@@ -27,6 +27,10 @@ body > #header {
     z-index: 100;
 
     #header-container {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        padding: 5px;
         padding-bottom: 5px;
         padding-top: 5px;
         .border-box-sizing();
@@ -57,9 +61,6 @@ body > #header {
     padding-left: 0px;
     padding-top: (@navbar-height - @logo_height) / 2;
     padding-bottom: (@navbar-height - @logo_height) / 2;
-    @media (max-width: @screen-sm-max){
-        margin-left: 10px;
-    }
 }
 
 
@@ -99,8 +100,12 @@ input.ui-button {
     padding: 0.3em 0.9em;
 }
 
+span#kernel_logo_widget {
+    margin: 0 10px;
+}
+
 span#login_widget {
-    float: right;
+    
 }
 
 span#login_widget > .button,

notebook/static/notebook/less/kernelselector.less

@@ -1,6 +1,4 @@
 #kernel_logo_widget {
-    .pull-right();
-    
     .current_kernel_logo {
         display: none;
         .navbar-vertical-align(32px);

notebook/static/notebook/less/savewidget.less

@@ -1,12 +1,15 @@
 span.save_widget {
-    margin-top: 6px;
-    max-width: 100%;
+    height: 30px;
+    margin-top: 4px;
     display: flex;
+    justify-content: flex-start;
+    align-items: baseline;
+    width: 50%;
+    flex: 1;
 
     span.filename {
-        height: 1em;
+        height: 100%;
         line-height: 1em;
-        padding: 3px;
         margin-left: @padding-large-horizontal;
         border: none;
         font-size: 146.5%;

notebook/templates/notebook.html

@@ -38,7 +38,7 @@
 {% block headercontainer %}
 
 
-<span id="save_widget" class="pull-left save_widget">
+<span id="save_widget" class="save_widget">
     <span id="notebook_name" class="filename"></span>
     <span class="checkpoint_status"></span>
     <span class="autosave_status"></span>

notebook/templates/page.html

@@ -120,6 +120,9 @@
   <div id="header-container" class="container">
   <div id="ipython_notebook" class="nav navbar-brand pull-left"><a href="{{default_url}}" title='dashboard'>{% block logo %}<img src='{{static_url("base/images/logo.png") }}' alt='Jupyter Notebook'/>{% endblock %}</a></div>
 
+  {% block headercontainer %}
+  {% endblock %}
+  
   {% block header_buttons %}
 
   {% block login_widget %}
@@ -135,9 +138,7 @@
   {% endblock %}
 
   {% endblock header_buttons %}
-
-  {% block headercontainer %}
-  {% endblock %}
+  
   </div>
   <div class="header-bar"></div>