From c03e041ccf2e1a76c9db7635d0af53633660a4b4 Mon Sep 17 00:00:00 2001 From: Teemu Patja Date: Fri, 3 Nov 2017 18:07:42 +0200 Subject: [PATCH 1/2] Fix rendering issue with header + dropdown * improve responsive rendering of page header * fix flickering issue with dropdown * fix dropdown placement Fixes: #130 --- src/cljs/commiteth/core.cljs | 59 +++++++++++++++++------------------- src/less/style.less | 52 +++++++++++++++++++++++-------- 2 files changed, 68 insertions(+), 43 deletions(-) diff --git a/src/cljs/commiteth/core.cljs b/src/cljs/commiteth/core.cljs index cabdc01..f8550dc 100644 --- a/src/cljs/commiteth/core.cljs +++ b/src/cljs/commiteth/core.cljs @@ -33,31 +33,29 @@ [:i.close.icon {:on-click #(rf/dispatch [:clear-flash-message])}] [:p message]]]))))) -(def user-dropdown-open? (r/atom false)) - (defn user-dropdown [user items mobile?] (let [menu (if @(rf/subscribe [:user-dropdown-open?]) - [:div.ui.menu.transition.visible] + [:div.ui.menu.transition.visible {:tab-index -1}] [:div.ui.menu.transition.hidden]) avatar-url (:avatar_url user)] - [:div.ui.left.item.dropdown + [:div.ui.inline.dropdown {:on-click #(rf/dispatch [:user-dropdown-open])} - [:div.item - [:img.ui.mini.circular.image {:src avatar-url}]] - (when not mobile? - [:div.item - (:login user)]) - [:div.item - [svg/dropdown-icon]] - (into menu - (for [[target caption props] items] - ^{:key target} [:div.item - [:a - (merge props - (if (keyword? target) - {:on-click #(rf/dispatch [target])} - {:href target})) - caption]]))])) + [:div.header-dropdown-container + [:div.item.header-avatar + [:img.ui.mini.circular.image.user-dropdown-image {:src avatar-url}]] + (when-not mobile? + [:div.header-username (:login user)]) + [:div.item + [svg/dropdown-icon]] + (into menu + (for [[target caption props] items] + ^{:key target} [:div.item + [:a + (merge props + (if (keyword? target) + {:on-click #(rf/dispatch [target])} + {:href target})) + caption]]))]])) (defn user-component @@ -65,13 +63,12 @@ (let [user (rf/subscribe [:user])] (fn [] (if @user - [:div.ui.text.menu.user-component - [:div.item - [user-dropdown - @user - [[:update-address "My Payment Details" {}] - ["/logout" "Sign Out" {:class "logout-link"}]] - mobile?]]] + [:div.ui.container.user-component + [user-dropdown + @user + [[:update-address "My Payment Details" {}] + ["/logout" "Sign Out" {:class "logout-link"}]] + mobile?]] [:a.ui.button.small.login-button {:href js/authorizeUrl} (str "LOG IN" (when-not mobile? " \u2192"))])))) @@ -106,14 +103,14 @@ flash-message (rf/subscribe [:flash-message])] (fn [] [:div.vertical.segment.commiteth-header - [:div.ui.grid.container.computer.only + [:div.ui.grid.container.computer.tablet.only [:div.four.wide.column [header-logo]] - [:div.eight.wide.column.middle.aligned.computer.only.computer-tabs-container + [:div.eight.wide.column.middle.aligned.computer.tablet.only.computer-tabs-container [tabs false]] - [:div.four.wide.column.right.aligned.computer.only + [:div.four.wide.column.right.aligned.computer.tablet.only [user-component @user false]]] - [:div.ui.grid.container.tablet.mobile.only + [:div.ui.grid.container.mobile.only [:div.row [:div.eight.wide.column.left.aligned [header-logo]] diff --git a/src/less/style.less b/src/less/style.less index 5b7e159..8ae9046 100644 --- a/src/less/style.less +++ b/src/less/style.less @@ -70,13 +70,13 @@ } } - .status-header-logo { display: flex; flex-direction: column; justify-content: center; } + .status-logo { width: 42px !important; height: 42px !important; @@ -106,8 +106,28 @@ left: 50px; } +.header-dropdown-container { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + witdh: 100%; +} + +.header-username { + color: #fff; + font-size: 15px; + padding-left: 5px; + padding-right: 5px; + white-space: nowrap; + overflow: hidden; +} + .computer-tabs-container { padding-top: 0 !important; + .item { + height: 24px; + } } @@ -156,7 +176,6 @@ .ui.mini.circular.image { height: 32px !important; width: 32px!important; - //min-width: 32px; box-shadow: none; } @@ -169,9 +188,12 @@ font-weight: normal; } - .user-component { -// margin-top: 0px!important; + margin-top: 5px!important; + + .item { + padding-top: 0px !important; + } } .ui.text.menu { @@ -201,18 +223,21 @@ .ui.selection.dropdown.address-input option { color: #e7e7e7; - background-color: yellow!important; } + .ui.menu.transition.visible { font-family: "PostGrotesk-Book"; font-size: 1em; border-radius: 8px; border: none; padding: .5em; - z-index: 999; - transform: translate(100%, -100%); - .item>a { + background-color: #1e3751; + @media (max-width: 767px) { + transform: translateX(-72px); + } + + a { color: #fff; pointer: default; } @@ -244,10 +269,14 @@ } @media only screen and (max-width: 767px) { - .ui.container { + .ui.container { + margin-left: 1px !important; + margin-right: 1px !important; width: 100% !important; - margin-left: 0 !important; - margin-right: 0 !important; + } + .ui.mini.circular.image { + width: 48px !important; + height: 48px !important; } } @@ -267,7 +296,6 @@ padding-bottom: 80px; .center.aligned.segment { border: 0; } - .button { font-size: 13px; font-weight: 500; From 4b947767e013014c8808f975cae58282eee721fd Mon Sep 17 00:00:00 2001 From: Teemu Patja Date: Fri, 3 Nov 2017 22:43:55 +0200 Subject: [PATCH 2/2] Bump sign-off gas-limit 600k --- src/cljs/commiteth/handlers.cljs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/cljs/commiteth/handlers.cljs b/src/cljs/commiteth/handlers.cljs index 48eccf8..528c116 100644 --- a/src/cljs/commiteth/handlers.cljs +++ b/src/cljs/commiteth/handlers.cljs @@ -383,7 +383,7 @@ confirm-id) payload {:from owner-address :to contract-address - :gas 180000 + :gas 600000 :gas-price 20000000000 :value 0 :data data}]