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

Responsive layout for page header

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

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

@ -35,7 +35,7 @@
(def user-dropdown-open? (r/atom false)) (def user-dropdown-open? (r/atom false))
(defn user-dropdown [user items] (defn user-dropdown [user items mobile?]
(let [menu (if @(rf/subscribe [:user-dropdown-open?]) (let [menu (if @(rf/subscribe [:user-dropdown-open?])
[:div.ui.menu.transition.visible] [:div.ui.menu.transition.visible]
[:div.ui.menu.transition.hidden]) [:div.ui.menu.transition.hidden])
@ -44,8 +44,9 @@
{:on-click #(rf/dispatch [:user-dropdown-open])} {:on-click #(rf/dispatch [:user-dropdown-open])}
[:div.item [:div.item
[:img.ui.mini.circular.image {:src avatar-url}]] [:img.ui.mini.circular.image {:src avatar-url}]]
[:div.item (when not mobile?
(:login user)] [:div.item
(:login user)])
[:div.item [:div.item
[svg/dropdown-icon]] [svg/dropdown-icon]]
(into menu (into menu
@ -59,14 +60,18 @@
caption]]))])) caption]]))]))
(defn user-component [user] (defn user-component
[user mobile?]
(let [user (rf/subscribe [:user])] (let [user (rf/subscribe [:user])]
(fn [] (fn []
(if @user (if @user
[:div.ui.text.menu.user-component [:div.ui.text.menu.user-component
[:div.item [:div.item
[user-dropdown @user [[:update-address "My Payment Details" {}] [user-dropdown
["/logout" "Sign Out" {:class "logout-link"}]]]]] @user
[[:update-address "My Payment Details" {}]
["/logout" "Sign Out" {:class "logout-link"}]]
mobile?]]]
[:a.ui.button.small.login-button {:href js/authorizeUrl} "LOG IN \u2192"])))) [:a.ui.button.small.login-button {:href js/authorizeUrl} "LOG IN \u2192"]))))
(defn tabs [] (defn tabs []
@ -88,26 +93,37 @@
^{:key page} [:div props caption]))))))) ^{:key page} [:div props caption])))))))
(defn header-logo []
[:div.ui.grid
[:div.ui.four.wide.column.header-logo-left
[:div.ui.circular.image.status-logo
[svg/status-logo]]]
[:div.ui.twelve.wide.column.left.aligned.header-logo-right
[: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])
flash-message (rf/subscribe [:flash-message])] flash-message (rf/subscribe [:flash-message])]
(fn [] (fn []
[:div.vertical.segment.commiteth-header [:div.vertical.segment.commiteth-header
[:div.ui.grid.container [:div.ui.grid.container.computer.only
[:div.four.wide.column [:div.four.wide.column
[:div.ui.grid [header-logo]]
[:div.ui.four.wide.column [:div.eight.wide.column.middle.aligned.computer.only
[:div.ui.circular.image.status-logo
[svg/status-logo]]]
[:div.ui.twelve.wide.column.left.aligned
[:div.logo-header "Status"]
[:div.logo-subheader "Open Bounty"]]]]
[:div.eight.wide.column.middle.aligned
[tabs]] [tabs]]
[:div.four.wide.column.middle.aligned [:div.four.wide.column.right.aligned.computer.only
[user-component @user]] [user-component @user false]]]
(when @flash-message [:div.ui.grid.container.tablet.mobile.only
[flash-message-pane])]]))) [:div.row
[:div.eight.wide.column.left.aligned
[header-logo]]
[:div.eight.wide.column.right.aligned
[user-component @user true]]]
[:div.row.mobile-tab-container
[tabs]]]
(when @flash-message
[flash-message-pane])])))
(def pages (def pages

16
src/less/style.less
View File

@ -49,13 +49,23 @@
border-radius: 0em; border-radius: 0em;
padding-top: 1.5em; padding-top: 1.5em;
padding-bottom: 2.5em; padding-bottom: 2.5em;
padding-left: 16px !important;
padding-right: 16px !important;
.header-logo-left {
padding-right: 0 !important;
}
.header-logo-right {
padding-left: 0 !important;
}
.mobile-tab-container {
padding-left: 16px !important;
}
} }
.status-logo { .status-logo {
width: 42px; width: 42px !important;
height: 42px; height: 42px !important;
object-fit: contain;
box-shadow: 0 2px 4px 0 rgba(22, 51, 81, 0.14); box-shadow: 0 2px 4px 0 rgba(22, 51, 81, 0.14);
} }