status-im
/
open-bounty
mirror of https://github.com/status-im/open-bounty.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Header responsive layout fixes

This commit is contained in:
Teemu Patja 2017-10-31 15:17:40 +02:00
parent 211a234b3b
commit 32e0590784
No known key found for this signature in database
GPG Key ID: F5B7035E6580FD4C
2 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/cljs/commiteth/core.cljs
View File

@ -72,7 +72,8 @@
[[:update-address "My Payment Details" {}] [[:update-address "My Payment Details" {}]
["/logout" "Sign Out" {:class "logout-link"}]] ["/logout" "Sign Out" {:class "logout-link"}]]
mobile?]]] mobile?]]]
[:a.ui.button.small.login-button {:href js/authorizeUrl} "LOG IN \u2192"])))) [:a.ui.button.small.login-button {:href js/authorizeUrl} (str "LOG IN"
(when-not mobile? " \u2192"))]))))
(defn tabs [] (defn tabs []
(let [user (rf/subscribe [:user]) (let [user (rf/subscribe [:user])
@ -94,13 +95,11 @@
(defn header-logo [] (defn header-logo []
[:div.ui.grid [:div.status-header-logo
[:div.ui.four.wide.column.header-logo-left [:div.ui.circular.image.status-logo
[:div.ui.circular.image.status-logo [svg/status-logo]]
[svg/status-logo]]] [:div.logo-header "Status"]
[:div.ui.twelve.wide.column.left.aligned.header-logo-right [:div.logo-subheader "Open Bounty"]])
[:div.logo-header "Status"]
[:div.logo-subheader "Open Bounty"]]])
(defn page-header [] (defn page-header []
(let [user (rf/subscribe [:user]) (let [user (rf/subscribe [:user])
@ -110,7 +109,7 @@
[:div.ui.grid.container.computer.only [:div.ui.grid.container.computer.only
[:div.four.wide.column [:div.four.wide.column
[header-logo]] [header-logo]]
[:div.eight.wide.column.middle.aligned.computer.only [:div.eight.wide.column.middle.aligned.computer.only.computer-tabs-container
[tabs]] [tabs]]
[:div.four.wide.column.right.aligned.computer.only [:div.four.wide.column.right.aligned.computer.only
[user-component @user false]]] [user-component @user false]]]

25
src/less/style.less
View File

@ -63,18 +63,27 @@
} }
.status-header-logo {
display: flex;
flex-direction: column;
justify-content: center;
}
.status-logo { .status-logo {
width: 42px !important; width: 42px !important;
height: 42px !important; height: 42px !important;
box-shadow: 0 2px 4px 0 rgba(22, 51, 81, 0.14);
} }
.logo-header { .logo-header {
color: #fff; color: #fff;
font-family: "PostGrotesk-Medium"; font-family: "PostGrotesk-Medium";
font-size: 21px; font-size: 21px;
font-weight: 500; font-weight: 500;
text-align: left; text-align: left;
position: relative;
top: -37px;
left: 50px;
} }
.logo-subheader { .logo-subheader {
@ -84,8 +93,16 @@
font-size: 15px; font-size: 15px;
line-height: 1.0; line-height: 1.0;
text-align: left; text-align: left;
position: relative;
top: -37px;
left: 50px;
} }
.computer-tabs-container {
padding-top: 0 !important;
}
.top-hunters-header { .top-hunters-header {
margin-bottom: 0; margin-bottom: 0;
} }
@ -129,8 +146,10 @@
} }
.ui.mini.circular.image { .ui.mini.circular.image {
height: 32px; height: 32px !important;
width: 32px!important; width: 32px!important;
//min-width: 32px;
box-shadow: none;
} }
.ui.header { .ui.header {
@ -144,7 +163,7 @@
.user-component { .user-component {
margin-top: 0px!important; // margin-top: 0px!important;
} }
.ui.text.menu { .ui.text.menu {