Fix rendering issue with header + dropdown
* improve responsive rendering of page header * fix flickering issue with dropdown * fix dropdown placement Fixes: #130
This commit is contained in:
Teemu Patja
parent
29a5b808c3
commit
c03e041ccf
|
|
@ -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]]
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue