Merge branch 'develop'

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
+     [:div.header-dropdown-container
-      [:img.ui.mini.circular.image {:src avatar-url}]]
+      [:div.item.header-avatar
-     (when not mobile?
+       [:img.ui.mini.circular.image.user-dropdown-image {:src avatar-url}]]
-           [:div.item
+      (when-not mobile?
-            (:login user)])
+        [:div.header-username (:login user)])
-     [:div.item
+      [:div.item
-      [svg/dropdown-icon]]
+       [svg/dropdown-icon]]
-     (into menu
+      (into menu
-           (for [[target caption props] items]
+            (for [[target caption props] items]
-             ^{:key target} [:div.item
+              ^{:key target} [:div.item
-                             [:a
+                              [:a
-                              (merge props
+                               (merge props
-                                     (if (keyword? target)
+                                      (if (keyword? target)
-                                       {:on-click #(rf/dispatch [target])}
+                                        {:on-click #(rf/dispatch [target])}
-                                       {:href target}))
+                                        {:href target}))
-                              caption]]))]))
+                               caption]]))]]))
 
 
 (defn user-component
@@ -65,13 +63,12 @@
   (let [user (rf/subscribe [:user])]
     (fn []
       (if @user
-        [:div.ui.text.menu.user-component
+        [:div.ui.container.user-component
-         [:div.item
+         [user-dropdown
-          [user-dropdown
+          @user
-           @user
+          [[: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} (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]]

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;
+    background-color: #1e3751;
-    transform: translate(100%, -100%);
+    @media  (max-width: 767px) {
-    .item>a {
+        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;