Merge pull request #317 from ikysylevych/bug/ui-filtering-sorting-win…

…-#262 [FIX #262] fix UI filtering/sorting issues (Windows)
status-im · Feb 23, 2018 · 71d6e33 · 71d6e33
2 parents 03abdd0 + a5b55e3
commit 71d6e33
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 57 deletions.
diff --git a/src/cljs/commiteth/bounties.cljs b/src/cljs/commiteth/bounties.cljs
@@ -62,6 +62,8 @@
      :value     (:current-val opts)
      :on-change (when-let [f (:on-change-val opts)]
                   #(-> % .-target .-value int f))
+     :on-mouse-up (when-let [f (:on-change-val opts)]
+                    #(-> % .-target .-value int f))
      :on-focus  #(reset! tooltip-open? true)}]])
 
 (defmulti bounties-filter-tooltip-view #(-> %2 ::ui-model/bounty-filter-type.category))
@@ -211,8 +213,7 @@
        [:div.item-counts-label-and-sorting-container
         [:div.item-counts-label
          [:span (str "Showing " left "-" right " of " total-count)]]
-        (when-not (util/os-windows?)
-          [bounties-sort-view])])
+        [bounties-sort-view]])
      (display-data-page bounty-page-data bounty-item container-element)]))
 
 (defn bounties-page []
@@ -227,7 +228,6 @@
         [:div.ui.container.open-bounties-container
          {:ref #(reset! container-element %1)}
          [:div.open-bounties-header "Bounties"]
-         (when-not (util/os-windows?)
-           [:div.open-bounties-filter-and-sort
-            [bounty-filters-view]])
+         [:div.open-bounties-filter-and-sort
+          [bounty-filters-view]]
          [bounties-list @bounty-page-data container-element]]))))
diff --git a/src/less/style.less b/src/less/style.less
@@ -500,106 +500,95 @@ label[for="input-hidden"] {
         line-height: 1.5;
         z-index: 999;
         max-height: 300px;
-        overflow: scroll;
+        overflow: auto;
 
         .open-bounties-filter-element-tooltip-value-input-container {
             display: flex;
-            margin-top: 10px;
+            margin-top: 25px;
         }
 
         .open-bounties-filter-element-tooltip-value-input-label {
             width: 60px;
         }
 
         .open-bounties-filter-element-tooltip-value-input {
-            margin-top: 24px;
-            width: 288.5px;
-            height: 4px;
-            background-color: #55a5ea;
+            padding-top: 2px;
+            width: 289px;
         }
 
-        // generated with http://danielstern.ca/range.css/#/
         input[type=range] {
             -webkit-appearance: none;
-            //width: 100%;
-            margin: 14.5px 0;
-        }
-        input[type=range]:focus {
-            outline: 0;
-        }
-        input[type=range]::-moz-focus-outer {
-            border: 0;
         }
         input[type=range]::-webkit-slider-runnable-track {
             width: 100%;
-            height: 4px;
-            cursor: pointer;
-            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+            height: 5px;
             background: #55a5ea;
-            border-radius: 0px;
-            border: 0px solid #010101;
+            border: none;
+            border-radius: 3px;
         }
         input[type=range]::-webkit-slider-thumb {
-            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-            border: 0px solid #000000;
+            -webkit-appearance: none;
+            cursor: pointer;
+            border: none;
             height: 33px;
             width: 33px;
-            border-radius: 50px;
+            border-radius: 50%;
             background: #55a5ea;
-            cursor: pointer;
-            -webkit-appearance: none;
             margin-top: -14.5px;
         }
+        input[type=range]:focus {
+            outline: none;
+        }
         input[type=range]:focus::-webkit-slider-runnable-track {
             background: #5aa7eb;
         }
+
         input[type=range]::-moz-range-track {
-            width: 100%;
-            height: 4px;
             cursor: pointer;
-            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+            width: 100%;
+            height: 5px;
             background: #55a5ea;
-            border-radius: 0px;
-            border: 0px solid #010101;
+            border: none;
+            border-radius: 3px;
         }
         input[type=range]::-moz-range-thumb {
-            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-            border: 0px solid #000000;
+            border: none;
             height: 33px;
             width: 33px;
-            border-radius: 50px;
+            border-radius: 50%;
             background: #55a5ea;
-            cursor: pointer;
         }
+
+        input[type=range]:-moz-focusring{
+            outline: 1px solid white;
+            outline-offset: -1px;
+        }
+
         input[type=range]::-ms-track {
-            width: 100%;
-            height: 4px;
             cursor: pointer;
+            width: 300px;
+            height: 5px;
             background: transparent;
             border-color: transparent;
+            border-width: 6px 0;
             color: transparent;
         }
         input[type=range]::-ms-fill-lower {
             background: #50a3e9;
-            border: 0px solid #010101;
-            border-radius: 0px;
-            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+            border-radius: 10px;
         }
         input[type=range]::-ms-fill-upper {
             background: #55a5ea;
-            border: 0px solid #010101;
-            border-radius: 0px;
-            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+            border-radius: 10px;
         }
         input[type=range]::-ms-thumb {
-            box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-            border: 0px solid #000000;
-            height: 33px;
-            width: 33px;
-            border-radius: 50px;
-            background: #55a5ea;
             cursor: pointer;
-            height: 4px;
+            border: none;
+            height: 16px;
+            width: 16px;
+            border-radius: 8px;
+            background: #55a5ea;
+            margin-top: 1px;
         }
         input[type=range]:focus::-ms-fill-lower {
             background: #55a5ea;
@@ -722,9 +711,8 @@ label[for="input-hidden"] {
     .icon-forward-white-box {
         width: 24px;
         height: 24px;
-        display: flex;
-        justify-content: center;
-        align-content: center;
+        padding: 4px;
+        text-align: center;
     }
 }