Styles [alpha] nav bar #127 and alters feedback icon to 2 message bub…

…bles #114
dwyl · Apr 13, 2015 · 09c96c1 · 09c96c1
1 parent 3454081
commit 09c96c1
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git a/front/public/css/mobile-first.css b/front/public/css/mobile-first.css
@@ -59,7 +59,7 @@ input {
   #feedback-triangle i:before{
     position:relative;
     bottom: 0.9em;
-    right: 1.1em;
+    right: 1.3em;
     color:white;
     font-size: 2em;
   }
@@ -269,26 +269,35 @@ input {
   width: 100%;
   position: fixed;
   bottom: 0;
-  /*display: none; To be shown when a person is logged in only */
+  display: none; /*To be shown when a person is logged in only */
 }
 
-  #profile-button{
+  #nav .fa-user{
     color: white;
     font-size: 1.5em;
-    padding: 0.1em 0.2em;
+    padding: 0.3em 0em 0.3em 0.2em;
   }
 
   #offlinemsg{
-    display: inline-block;
-    font-size: 0.7em;
-    margin: auto 0.5em;
+    display: inline;
+    color: white;
+    font-size: 0.9em;
+    padding: 0.3em;
   }
 
   #logout {
-    position:relative;
-    right: 0.5em;
+    position:absolute;
+    right: 0.4em;
+    bottom: 0.6em;
+    border-radius:0;
+    color: #fff;
+    border: solid 1px #fff;
+    text-align: center;
+    background: none;
+    padding:0.2em;
   }
 
+
 /*==============================
     Colours
 ================================*/

diff --git a/front/views/index.html b/front/views/index.html
@@ -15,7 +15,7 @@
     <!--Icon first, then add mailto-->
     <div id="feedback-triangle">
       <a href="https://github.com/ideaq/time/labels/MVP" target="_blank">
-        <i class="fa fa-comment" aria-hidden="true"></i>
+        <i class="fa fa-comments" aria-hidden="true"></i>
       </a>
     </div>
 
@@ -55,12 +55,10 @@
     </section>
 
     <!-- section hidden until person logs in  -->
-    <section id="nav" style="display:none;">
-      <div id="profile-button">
+    <section id="nav">
         <i class="fa fa-user"></i>
-        <p id="offlinemsg"> You are logged in as <b id="loggedinas"> </b>&nbsp;</p>
+        <p id="offlinemsg"> Logged in as <b id="loggedinas"> </b>&nbsp;</p>
         <button id="logout"><i class="fa fa-sign-out" ></i>Logout</button>
-      </div>
     </section>