Merge pull request #441 from district0x/mobile-visual-fixes

Visual fixes for mobile UI

ui/resources/public/less/component/select-input.less

@@ -28,6 +28,10 @@
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+
+      @media #media[mobile-query] {
+        max-width: 19em;
+      }
     }
 
     .ethlance-icon {

ui/resources/public/less/page/jobs.less

@@ -109,6 +109,12 @@
 
         @media #media[mobile-query] {
           font-size: 2.5em;
+
+          // To truncate job titles at 2 lines on mobiles (terminating with ...)
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
         }
       }
 

ui/src/ethlance/ui/component/loading_spinner.cljs

@@ -5,3 +5,9 @@
   []
   [:div.loading-spinner
    [:img {:src "/images/svg/ethlance_spinner.svg"}]])
+
+(defn c-spinner-until-data-ready
+  [loading-states component-when-loading-finished]
+  (if (not-every? false? loading-states)
+    [c-loading-spinner]
+    component-when-loading-finished))

ui/src/ethlance/ui/component/mobile_navigation_bar.cljs

@@ -1,6 +1,12 @@
 (ns ethlance.ui.component.mobile-navigation-bar
   (:require
+    [district.format :as format]
     [district.ui.router.subs :as ui.router.subs]
+    [district.ui.conversion-rates.subs :as conversion-subs]
+    [district.ui.graphql.subs :as gql]
+    [district.ui.web3-account-balances.subs :as balances-subs]
+    [district.ui.web3-accounts.subs :as accounts-subs]
+    [district.web3-utils :as web3-utils]
     ;; Ethlance Components
     [ethlance.ui.component.ethlance-logo :refer [c-ethlance-logo]]
     [ethlance.ui.component.icon :refer [c-icon]]
@@ -39,13 +45,25 @@
 
 (defn c-mobile-account-page
   []
-  [:div.mobile-account-page
-   [:div.account-profile
-    [c-profile-image {}]
-    [:span.name "Brian Curran"]]
-   [:div.account-balance
-    [:span.token-value "9.20 ETH"]
-    [:span.usd-value "$1,337.00"]]])
+  (let [active-account @(re/subscribe [::accounts-subs/active-account])
+        query [:user {:user/id active-account}
+               [:user/id
+                :user/name
+                :user/email
+                :user/profile-image]]
+        result (re/subscribe [::gql/query {:queries [query]} {:refetch-on #{:ethlance.user-profile-updated}}])
+        active-account (re/subscribe [::accounts-subs/active-account])
+        balance-eth (re/subscribe [::balances-subs/active-account-balance])
+        eth-balance (web3-utils/wei->eth-number (or @balance-eth 0))]
+    [:div.mobile-account-page
+     (when @active-account
+       [:div.account-profile
+        [c-profile-image {:size :small :src (get-in @result [:user :user/profile-image])}]
+        [:span.name (get-in @result [:user :user/name])]])
+     [:div.account-balance
+      [:span.token-value (format/format-eth eth-balance)]
+      [:span.usd-value (-> @(re/subscribe [::conversion-subs/convert :ETH :USD eth-balance])
+                              (format/format-currency {:currency "USD"}))]]]))
 
 
 (defn c-mobile-navigation-bar

ui/src/ethlance/ui/component/scrollable.cljs

@@ -41,10 +41,13 @@
        (fn [_ child]
          [:div.scrollable {:ref react-ref} child])})))
 
+(defn- c-scrollable-css
+  [& [opts body]]
+  [:div {:style {:overflow-x "auto"}} (or body opts)])
 
 (defn c-scrollable
   [opts val]
-  (let [use-noop true] ; Using noop implementation until can make the simplebar work
-    (if use-noop
-      (c-scrollable-noop opts val)
+  (let [alternative-implementation true] ; Using basic CSS implementation to make wide tables scroll horizontally
+    (if alternative-implementation
+      (c-scrollable-css opts val)
       (c-scrollable-real opts val))))

ui/src/ethlance/ui/component/select_input.cljs

@@ -81,7 +81,7 @@
          [:div.main
           {:title (or (label-fn current-selection) label)
            :on-click #(swap! *open? not)}
-          [:span.label (or (label-fn current-selection) label)]
+          [:span.label.selected-value (or (label-fn @*current-default-selection) label)]
           [c-icon {:class "icon"
                    :name (if @*open? :ic-arrow-up :ic-arrow-down)
                    :color icon-color

ui/src/ethlance/ui/page/job_detail.cljs

@@ -9,7 +9,7 @@
     [ethlance.ui.component.button :refer [c-button c-button-label]]
     [ethlance.ui.component.carousel :refer [c-carousel c-feedback-slide]]
     [ethlance.ui.component.info-message :refer [c-info-message]]
-    [ethlance.ui.component.loading-spinner :refer [c-loading-spinner]]
+    [ethlance.ui.component.loading-spinner :refer [c-spinner-until-data-ready]]
     [ethlance.ui.component.main-layout :refer [c-main-layout]]
     [ethlance.ui.component.pagination :as pagination]
     [ethlance.ui.component.profile-image :refer [c-profile-image]]
@@ -29,12 +29,6 @@
     [re-frame.core :as re]))
 
 
-(defn spinner-until-data-ready
-  [loading-states component-when-loading-finished]
-  (if (not-every? false? loading-states)
-    [c-loading-spinner]
-    component-when-loading-finished))
-
 (defn hidden-until-data-ready
   [loading-states component-when-loading-finished]
   (when (every? false? loading-states)
@@ -445,7 +439,6 @@
     [:div.proposal-listing
      [:div.label "Arbitrations"]
      [c-scrollable
-      {:forceVisible true :autoHide false}
       (into [c-table {:headers ["" "Arbiter" "Rate" "Accepted at" "Status" ""]}]
             (map (fn [arbitration]
                    [[:span (cond
@@ -680,7 +673,7 @@
           [loading? processing?] (map @query-results [:graphql/loading? :graphql/preprocessing?])
           results (:job @query-results)]
       [c-main-layout {:container-opts {:class :job-detail-main-container}}
-       [spinner-until-data-ready [loading? processing?]
+       [c-spinner-until-data-ready [loading? processing?]
         [c-job-info-section results]]
        [hidden-until-data-ready [loading? processing?] [c-proposals-section results]]
        [hidden-until-data-ready [loading? processing?] [c-arbitrations-section contract-address]]

ui/src/ethlance/ui/page/profile.cljs

@@ -9,6 +9,7 @@
     [ethlance.shared.utils :refer [ilike=]]
     [ethlance.ui.component.button :refer [c-button c-button-label]]
     [ethlance.ui.component.carousel :refer [c-carousel c-feedback-slide]]
+    [ethlance.ui.component.loading-spinner :refer [c-spinner-until-data-ready]]
     [ethlance.ui.component.main-layout :refer [c-main-layout]]
     [ethlance.ui.component.pagination :refer [c-pagination-ends]]
     [ethlance.ui.component.profile-image :refer [c-profile-image]]
@@ -271,6 +272,7 @@
                       :user/name
                       :user/profile-image]]]]]]]]
         results (re/subscribe [::gql/query {:queries [query]}])
+        [loading? processing?] (map @results [:graphql/loading? :graphql/preprocessing?])
         name (get-in @results [:candidate :user :user/name])
         location (get-in @results [:candidate :user :user/country])
         professional-title (get-in @results [:candidate :candidate/professional-title])
@@ -282,21 +284,22 @@
         rating {:average (get-in @results [:candidate :candidate/rating]) :count (count feedback-list)}
         has-candidate-profile? (not (nil? biography))]
     [:<>
-     (if has-candidate-profile?
-       [:div.candidate-profile
-        [:div.title
-         [:div.profile-image
-          [c-profile-image {:src image-url}]]
-         [:div.name name]
-         [:div.detail professional-title]]
-        [:div.biography biography]
-        [c-rating-box rating]
-        [:div.location location]
-        [:div.detail-listing
-         [c-tag-list "Languages" languages]
-         [c-tag-list "Skills" skills]]]
-
-       [c-missing-profile-notification :candidate])
+     [c-spinner-until-data-ready [loading? processing?]
+      (if has-candidate-profile?
+        [:div.candidate-profile
+         [:div.title
+          [:div.profile-image
+           [c-profile-image {:src image-url}]]
+          [:div.name name]
+          [:div.detail professional-title]]
+         [:div.biography biography]
+         [c-rating-box rating]
+         [:div.location location]
+         [:div.detail-listing
+          [c-tag-list "Languages" languages]
+          [c-tag-list "Skills" skills]]]
+
+        [c-missing-profile-notification :candidate])]
      (when has-candidate-profile? (c-job-activity :candidate))
      (when has-candidate-profile? [c-invite-candidate])
      (c-feedback-listing professional-title feedback-list)]))