Merge pull request #884 from BoostIO/fix-layout-at-bottom

Fix layout at bottom

browser/components/RealtimeNotification.js

@@ -37,7 +37,7 @@ class RealtimeNotification extends React.Component {
   render () {
     const { notifications } = this.state
     const link = notifications.length > 0
-      ? <a href={notifications[0].linkUrl}
+      ? <a styleName='notification-link' href={notifications[0].linkUrl}
         onClick={(e) => this.handleLinkClick(e)}
       >
         {notifications[0].text}
@@ -45,7 +45,7 @@ class RealtimeNotification extends React.Component {
     : ''
 
     return (
-      <div>{link}</div>
+      <div styleName='notification-area'>{link}</div>
     )
   }
 }

browser/components/RealtimeNotification.styl

@@ -1,2 +1,35 @@
-.realtime-notification
+.notification-area
-  font-size 1em
+  z-index 1000
+  font-size 12px
+  position absolute
+  bottom 0px
+  background-color #EBEBEB
+  width 100vw
+  height 30px
+  text-align center
+
+.notification-link
+  text-decoration none
+  color #282A36
+  border 1px solid #6FA8E6
+  background-color alpha(#6FA8E6, 0.2)
+  padding 3px 9px
+  border-radius 2px
+  position absolute
+  bottom 4px
+  margin-left -10%
+  transition 0.2s
+  &:hover
+    color #1378BD
+
+body[data-theme="dark"]
+  .notification-area
+    background-color #1E2124
+
+  .notification-link
+    color #fff
+    border 1px solid alpha(#5CB85C, 0.6)
+    background-color alpha(#5CB85C, 0.2)
+    transition 0.2s
+    &:hover
+      color #5CB85C

browser/finder/NoteDetail.styl

@@ -2,6 +2,7 @@
 
 .root
   absolute top bottom left right
+  bottom 30px
   left $note-detail-left-margin
   right $note-detail-right-margin
   height 100%

browser/main/Detail/SnippetNoteDetail.styl

@@ -28,7 +28,7 @@
   width 100%
   resize none
   border 1px solid $ui-borderColor
-  padding 10px
+  padding 2px 5px
   line-height 1.6
   background-color $ui-noteDetail-backgroundColor
 
@@ -57,9 +57,10 @@
 
 .override
   absolute bottom left
+  bottom 30px
   left 60px
   height 23px
-  z-index 1
+  z-index 101
   button
     navButtonColor()
     height 24px

browser/main/Main.js

@@ -14,6 +14,7 @@ import InitModal from 'browser/main/modals/InitModal'
 import mixpanel from 'browser/main/lib/mixpanel'
 import mobileAnalytics from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import eventEmitter from 'browser/main/lib/eventEmitter'
+import RealtimeNotification from 'browser/components/RealtimeNotification'
 
 function focused () {
   mixpanel.track('MAIN_FOCUSED')
@@ -255,6 +256,7 @@ class Main extends React.Component {
             ignorePreviewPointerEvents={this.state.isRightSliderFocused}
           />
         </div>
+        <RealtimeNotification />
       </div>
     )
   }

browser/main/StatusBar/StatusBar.styl

@@ -3,6 +3,8 @@
 .root
   absolute bottom left right
   height $statusBar-height
+  bottom 16px
+  z-index 100
   background-color $ui-noteDetail-backgroundColor
   display flex
 

browser/main/StatusBar/index.js

@@ -2,7 +2,6 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StatusBar.styl'
 import ZoomManager from 'browser/main/lib/ZoomManager'
-import RealtimeNotification from 'browser/components/RealtimeNotification'
 
 const electron = require('electron')
 const { remote, ipcRenderer } = electron
@@ -60,10 +59,6 @@ class StatusBar extends React.Component {
           {Math.floor(config.zoom * 100)}%
         </button>
 
-        <RealtimeNotification
-          styleName='realtime-notification'
-        />
-
         {status.updateReady
           ? <button onClick={this.updateApp} styleName='update'>
             <i styleName='update-icon' className='fa fa-cloud-download' /> Ready to Update!

browser/main/global.styl

@@ -91,7 +91,7 @@ body[data-theme="dark"]
 .CodeMirror
   font-family inherit !important
   line-height 1.4em
-  height 100%
+  height 96%
 .CodeMirror > div > textarea
   margin-bottom -1em
 .CodeMirror-focused .CodeMirror-selected

browser/styles/index.styl

@@ -5,7 +5,7 @@ $danger-color = #c9302c
 $danger-lighten-color = lighten(#c9302c, 5%)
 
 // Layouts
-$statusBar-height = 24px
+$statusBar-height = 36px
 $sideNav-width = 200px
 $sideNav--folded-width = 44px
 $topBar-height = 60px