Responsive layout for page header

src/cljs/commiteth/core.cljs

@@ -35,7 +35,7 @@
 
 (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?])
                [:div.ui.menu.transition.visible]
                [:div.ui.menu.transition.hidden])
@@ -44,8 +44,9 @@
      {:on-click #(rf/dispatch [:user-dropdown-open])}
      [:div.item
       [:img.ui.mini.circular.image {:src avatar-url}]]
-     [:div.item
-      (:login user)]
+     (when not mobile?
+           [:div.item
+            (:login user)])
      [:div.item
       [svg/dropdown-icon]]
      (into menu
@@ -59,14 +60,18 @@
                               caption]]))]))
 
 
-(defn user-component [user]
+(defn user-component
+  [user mobile?]
   (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"}]]]]]
+          [user-dropdown
+           @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"]))))
 
 (defn tabs []
@@ -88,26 +93,37 @@
                   ^{: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 []
   (let [user (rf/subscribe [:user])
         flash-message (rf/subscribe [:flash-message])]
     (fn []
       [:div.vertical.segment.commiteth-header
-       [:div.ui.grid.container
+       [:div.ui.grid.container.computer.only
         [:div.four.wide.column
-         [:div.ui.grid
-          [:div.ui.four.wide.column
-           [: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
+         [header-logo]]
+        [:div.eight.wide.column.middle.aligned.computer.only
          [tabs]]
-        [:div.four.wide.column.middle.aligned
-         [user-component @user]]
-        (when @flash-message
-          [flash-message-pane])]])))
+        [:div.four.wide.column.right.aligned.computer.only
+         [user-component @user false]]]
+       [:div.ui.grid.container.tablet.mobile.only
+        [: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

src/less/style.less

@@ -49,13 +49,23 @@
     border-radius: 0em;
     padding-top: 1.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 {
-    width: 42px;
-	height: 42px;
-	object-fit: contain;
+    width: 42px !important;
+	height: 42px !important;
 	box-shadow: 0 2px 4px 0 rgba(22, 51, 81, 0.14);
 }