Fancy selects

resources/public/css/select.less

@@ -1,3 +1,4 @@
+.stock-input {
 .hegex-select {
     position: relative;
     background-color: white;
@@ -112,3 +113,128 @@ select {
 	background-size: 100% auto;
 }
 
+
+}
+
+
+
+
+
+
+.fancy-input {
+.select {
+  border-radius: 5px !important;
+  display:flex;
+  font-size: 0.6em;
+  flex-direction: column;
+  position:relative;
+  height:45px;
+}
+.select.disabled {
+  pointer-events: none;
+}
+
+.option {
+  padding:5px 30px 0 10px;
+  // border-radius: 5px;
+  min-height:41px;
+  display:flex;
+  align-items:center;
+  background:white;
+  // border-top:#222 solid 1px;
+  position:absolute;
+  color: black;
+  top:0;
+  width: 100%;
+  pointer-events:none;
+  order:2;
+  z-index:1;
+  transition:all .4s ease-in-out;
+  white-space:nowrap;
+  border-radius: 5px;
+
+}
+
+.option:hover {
+  background:#18D7FF !important;
+}
+
+.select:focus > .option {
+  border-radius: 1px 1px 0px 0px;
+  background: #afecf9;
+}
+
+.select:focus > .option ~ .option {
+    border-radius: 0px;
+  background: white;
+}
+
+
+.select:focus .option {
+  position:relative;
+  pointer-events:all;
+}
+
+input {
+  opacity:0;
+  position:absolute;
+  left:-99999px;
+}
+
+input:checked + label {
+  order: 1;
+  z-index:2;
+  background:white;
+  position:relative;
+}
+
+.select.primary {
+  border: 2px solid @hegexgreen;
+}
+
+.select.yellow {
+  border: 2px solid @hegexorange;
+}
+
+.select.secondary {
+  border: 2px solid @hegexseablue;
+}
+
+.little-arrow {
+  color: black;
+  display: flex;
+  justify-content: center;
+  align-items: top;
+  line-height: 1.2;
+  border-radius: 50%;
+  position: absolute;
+  top: 0.7em;
+  z-index: 89;
+  right: 10px;
+  width: 22px;
+  height: 22px;
+  font-size: 15px;
+  cursor: pointer;
+  pointer-events: none;
+  -webkit-transition: .25s all ease;
+  -o-transition: .25s all ease;
+  transition: .25s all ease;
+}
+
+.little-arrow.primary {
+	background: transparent url('/images/select-green.png') no-repeat left top;
+	background-size: 100% auto;
+}
+
+.little-arrow.secondary {
+	background: transparent url('/images/select-blue.png') no-repeat left top;
+	background-size: 100% auto;
+}
+
+.little-arrow.yellow {
+	background: transparent url('/images/select-yellow.png') no-repeat left top;
+	background-size: 100% auto;
+}
+
+
+}

resources/public/css/style.main.less

@@ -2810,3 +2810,28 @@ p.errors-size {
 p.small {
   font-size: 1.1em !important;
 }
+
+  .stock-input select, .stock-input .hegex-select  {
+    display: inherit;
+  }
+
+  .stock-input  .little-arrow {
+    display: none !important;
+  }
+  .fancy-input, .fancy-input .little-arrow  {
+    display: none;
+  }
+
+@media (min-width: 720px) {
+
+  .stock-input select, .stock-input .hegex-select, .stock-input .little-arrow {
+    display: none;
+  }
+  .fancy-input  {
+    display: initial;
+  }
+
+  .fancy-input  .little-arrow {
+    display: inherit;
+  }
+}

src/district_hegex/ui/components/inputs.cljs

@@ -1,44 +1,27 @@
 (ns district-hegex.ui.components.inputs
 (:require
+   [reagent.core :as r]
+    [oops.core :refer [oget oset! ocall oapply ocall! oapply!
+                       gget
+                       oget+ oset!+ ocall+ oapply+ ocall!+ oapply!+]]
    [district-hegex.ui.home.subs :as home-subs]
    [re-frame.core :refer [subscribe]]))
 
-(defn- little-arrow [color]
-  [:span.little-arrow {:className (or color "primary")}
-   ])
-
-#_(defn- little-arrow [color]
-  [:svg {:class "caret" :height "24" :viewBox "0 0 24 24" :width "24"}
-   [:path {:d "M7 10l5 5 5-5z"}]
-   [:path {:d "M0 0h24v24H0z" :fill "none"}]])
-
-(defn select [& children]
-  (let [color (some-> children first :color)
-        size (some-> children first :size)
-        c (case color
-            :primary :select.primary
-            :secondary :select.secondary
-            :yellow :select.yellow
-            :select.primary)
-        s (case size
-            :small :div.hegex-select.small
-            :div.hegex-select)]
-    [s
-    [little-arrow color]
-    [:div.select
-     (into [c] children)]]))
+(defn little-arrow [color]
+  [:span.little-arrow {:className (or color "primary")}])
 
 (defn text-input [{:keys [type step min max on-change label color size] :as props}]
   (println "stepis" step)
   (let [el :div.hinput-wrapper
         ->sized #(keyword (str (name %) "." (name size)))]
     [(if-not size el (->sized el))
-    [:input.hegex-input (merge props {:type      type
-                                      :step      step
-                                      :className (or color "primary")
-                                      :on-change on-change
-                                      :min       min
-                                      :max       max})]
+     [:span.stock-input
+      [:input.hegex-input (merge props {:type      type
+                                        :step      step
+                                        :className (or color "primary")
+                                        :on-change on-change
+                                        :min       min
+                                        :max       max})]]
     (when label
       ;;NOTE ideally  should be set via less inheritance
       [:div.hinput-label
@@ -52,3 +35,41 @@
      [:div]
      [:div]
      [:div]]]))
+
+(defn fancy-select []
+  (let [on-change #(js/console.log (oget % ".target.value"))]
+    [:div.fancy-input.primary
+    [:div {:class "select secondary"
+           :tabindex "1"}
+     [little-arrow :secondary]
+     [:input {:class "fancy"
+              :on-change on-change
+              :type "radio"
+              :id "opt1"
+              :value "oranges"
+              }]
+     [:label {:for "opt1" :class "option"} "Oranges"]
+     [:input {:class "fancy"
+              :on-change on-change
+              :value "apples"
+              :checked true
+              :type "radio"
+              :id "opt2"}]
+     [:label {:for "opt2" :class "option"} "Apples"]]]))
+
+(defn select [& children]
+  (let [color (some-> children first :color)
+        size (some-> children first :size)
+        c (case color
+            :primary :select.primary
+            :secondary :select.secondary
+            :yellow :select.yellow
+            :select.primary)
+        s (case size
+            :small :div.hegex-select.small
+            :div.hegex-select)]
+    [:span.stock-input
+     [s
+      [little-arrow color]
+      [:div.select
+       (into [c] children)]]]))

src/district_hegex/ui/home/page.cljs

@@ -575,6 +575,23 @@
                           (js/e.persist)
                           (swap! offer assoc :total (oget e ".?target.?value")))}]]
          [:div.box.d
+          [:div.fancy-input.primary
+           [:div {:class "select primary disabled"
+                  :tabindex "1"}
+            [inputs/little-arrow :primary]
+            [:input {:class "fancy"
+                     :type "radio"
+                     :id "opt1"
+                     :checked true
+                     :value :eth}]
+            [:label {:for "opt1" :class "option"} "ETH"]
+            [:input {:class "fancy"
+                     :value :wbtc
+                     :disabled true
+                     :type "radio"
+                     :id "opt2"}]
+            [:label {:for "opt2" :class "option"} "WBTC"]]]
+
           [inputs/select
            {:disabled true}
            [:option {:selected true
@@ -716,6 +733,9 @@
     (fn []
       (let [hegic-type (some-> form-data deref :new-hegex/hegic-type)
             option-type (some-> form-data deref :new-hegex/option-type keyword)
+            on-currency-change (fn [e]
+                                 (js/e.persist)
+                                 (upd-new-hegex form-data e :new-hegex/hegic-type))
             tx-pending? (subscribe [::tx-id-subs/tx-pending? :mint-hegex!])
             expires-on  (some-> form-data deref :new-hegex/period calc-expiration)
 
@@ -760,11 +780,30 @@
          [:div.box-grid-new {:style {:margin-top "2em"}}
          [:div.box.a
           [:div.hover-label "Currency"]
+          (println "currencyis" (:new-hegex/hegic-type @form-data))
+
+          [:div.fancy-input.primary
+           [:div {:class "select secondary"
+                  :tabindex "1"}
+            [inputs/little-arrow :secondary]
+            [:input {:class "fancy"
+                     :type "radio"
+                     :id "opt1"
+                     :on-change on-currency-change
+                     :checked (= "0" (:new-hegex/hegic-type @form-data))
+                     :value "0"}]
+            [:label {:for "opt1" :class "option"} "ETH"]
+            [:input {:class "fancy"
+                     :value "1"
+                     :on-change on-currency-change
+                     :checked (= "1" (:new-hegex/hegic-type @form-data))
+                     :type "radio"
+                     :id "opt2"}]
+            [:label {:for "opt2" :class "option"} "BTC"]]]
+
           [inputs/select
            {:color :secondary
-            :on-change (fn [e]
-                         (js/e.persist)
-                         (upd-new-hegex form-data e :new-hegex/hegic-type))}
+            :on-change on-currency-change}
            [:option {:selected true
                      :value 0}
             "ETH"]