Merge pull request #4 from negar-binary/negar/header

aminmarashi · web-flow · commit 8f50759214a1 · 2016-07-07T14:18:25.000+08:00
fix header style
diff --git a/static/css/bot.css b/static/css/bot.css
@@ -156,7 +156,7 @@ th, td {
     margin-bottom: 5px;
 }
 #fixed-bar-right button {
-    background-color: #F2F2F2;  
+    background-color: #F2F2F2;
     border: 1px solid #ddd;
     padding: 2.5px 6px;
     color: black;
@@ -251,28 +251,31 @@ button:focus {
     border-top: 2px solid #394171;
     border-bottom: 4px solid #e98024;
     font-size: 18px;
-}
-.wrapper {
-    max-width: 960px;
-    margin: 0 auto;
+	padding: 0 20px;
 }
 #header #logo div {
     display: inline-block;
 }
 #topbar {
     background-color: #15212d;
     width: 100%;
-    height: 20px;
     color: #fff;
     line-height: 1;
+    font-size: 70%;
+    text-align: right;
+    padding: 3px 20px;
+    display: table;
 }
 #logo {
     display: inline-block;
-    margin-top: 15px;
+    margin-top: 5px;
+}
+.symbol-logo {
+	width: 22%;
 }
 .type-logo {
-    width: 80%;
-    margin-left: 10px;
+    width: 57%;
+    margin-left: 8px;
 }
 
 .left-header {
@@ -283,12 +286,27 @@ button:focus {
     float: right;
 }
 
+#header .right-header {
+    margin-top: 5px;
+}
+
 #logout, #accountSelect, #login{
     display: none;
 }
 
+#logout, #login{
+    display: inline-block;
+    letter-spacing: .75px;
+    padding: 6px;
+    text-transform: uppercase;
+    font-size: 0.7em;
+}
+
 #login {
-    margin-top: 25px;
+    padding: 0 10px;
+    font-size: 0.8em;
+    line-height: 2em;
+    margin: 0.8em 0;
 }
 
 .btn-primary {
@@ -303,4 +321,4 @@ button:focus {
     text-decoration: none !important;
     background-color: #14602B !important;
     border-color: #14602B !important;
-}
+}
diff --git a/templates/bot.mustache b/templates/bot.mustache
@@ -18,36 +18,31 @@
   <div id="center"></div>
  <div class="spinning"><img src="image/binary-symbol-logo.svg"/></div>
   <div id="topbar">
-    <div class="wrapper">
-      <div class="right-header">
-        {{> language }}
-        <select id="tours">
-                  <option value="" data-i18n-text="Select a Tour"></option>
-          <option value="welcome" data-i18n-text="Welcome!"></option>
-          <option value="introduction" data-i18n-text="Introduction"></option>
-        </select>
-      </div>
-    </div>
+	  <div class="right-header">
+	    {{> language }}
+	    <select id="tours">
+	              <option value="" data-i18n-text="Select a Tour"></option>
+	      <option value="welcome" data-i18n-text="Welcome!"></option>
+	      <option value="introduction" data-i18n-text="Introduction"></option>
+	    </select>
+	  </div>
   </div>
   <div id="header">
-    <div class="wrapper">
       <div class="left-header">
         <a href="" id="logo">
-          <div><img class="symbol-logo" src="image/binary-symbol-logo.svg" alt="Binary-logo" /></div>
-          <div><img class="type-logo" src="image/binary-type-logo.svg" alt="Binary-logo"></div>
+          <img class="symbol-logo" src="image/binary-symbol-logo.svg" alt="Binary-logo" />
+          <img class="type-logo" src="image/binary-type-logo.svg" alt="Binary-logo">
         </a>
       </div>
       <div class="right-header">
         <div>
-          <select id="accountSelect">
-          </select>
+          <select id="accountSelect"></select>
         </div>
         <div class="intro-token">
-          <button id="logout" data-i18n-text="Logout"></button>
+          <button id="logout" data-i18n-text="Log out"></button>
           <button title="Add your tokens to the bot" id="login" data-i18n-text="Login"></button>
         </div>
       </div>
-    </div>
   </div>
   <div id="blocklyDiv"></div>
   <div id="summaryPanel" class="panel">
