From a9e860a98e2386a4e18723629b77b9cfc50f1ba3 Mon Sep 17 00:00:00 2001
From: Yuya Ochiai <yuya0321@gmail.com>
Date: Thu, 16 Feb 2017 20:56:45 +0900
Subject: [PATCH] Tweak the layout for auto-save indicator

---
 src/browser/components/SettingsPage.jsx | 18 +++++++++---------
 src/browser/css/settings.css            | 14 ++++++--------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/browser/components/SettingsPage.jsx b/src/browser/components/SettingsPage.jsx
index c20f7bb6..ae6b0809 100644
--- a/src/browser/components/SettingsPage.jsx
+++ b/src/browser/components/SettingsPage.jsx
@@ -414,6 +414,15 @@ const SettingsPage = React.createClass({
           className='navbar-fixed-top'
           style={settingsPage.navbar}
         >
+          <div className='IndicatorContainer'>
+            <ReactCSSTransitionGroup
+              transitionName='AutoSaveIndicator'
+              transitionEnterTimeout={500}
+              transitionLeaveTimeout={1000}
+            >
+              { this.state.savingState === 'done' ? null : <AutoSaveIndicator savingState={this.state.savingState}/> }
+            </ReactCSSTransitionGroup>
+          </div>
           <div style={{position: 'relative'}}>
             <h1 style={settingsPage.heading}>{'Settings'}</h1>
             <Button
@@ -456,15 +465,6 @@ const SettingsPage = React.createClass({
           <hr/>
           { optionsRow }
         </Grid>
-        <div className='IndicatorContainer'>
-          <ReactCSSTransitionGroup
-            transitionName='AutoSaveIndicator'
-            transitionEnterTimeout={500}
-            transitionLeaveTimeout={1000}
-          >
-            { this.state.savingState === 'done' ? null : <AutoSaveIndicator savingState={this.state.savingState}/> }
-          </ReactCSSTransitionGroup>
-        </div>
       </div>
     );
   }
diff --git a/src/browser/css/settings.css b/src/browser/css/settings.css
index c954339d..e75ee212 100644
--- a/src/browser/css/settings.css
+++ b/src/browser/css/settings.css
@@ -4,18 +4,16 @@
 }
 
 .IndicatorContainer {
-  pointer-events: none;
-  position: fixed;
-  top: 100px;
-  left: 0;
-  right: 0;
+  position: absolute;
+  height: 100%;
   display: flex;
   flex-flow: row;
-  justify-content: center;
+  justify-content: flex-start;
+  align-items: center;
 }
 
-.IndicatorContainer * {
-  pointer-events: auto;
+.AutoSaveIndicator {
+  margin: 0;
 }
 
 .AutoSaveIndicator-enter {