From 32091e37aff0d9f645af27c5862d5417656bf86d Mon Sep 17 00:00:00 2001
From: st4cks1deflow <1@stacksideflow.host>
Date: Sun, 1 Aug 2021 19:17:53 +0300
Subject: [PATCH 1/4] Add fancy select base
---
resources/public/css/select.less | 265 ++++++++++++-------
src/district_hegex/ui/components/inputs.cljs | 30 +++
src/district_hegex/ui/home/page.cljs | 3 +-
3 files changed, 202 insertions(+), 96 deletions(-)
diff --git a/resources/public/css/select.less b/resources/public/css/select.less
index 6079ee0..5d33082 100644
--- a/resources/public/css/select.less
+++ b/resources/public/css/select.less
@@ -1,114 +1,189 @@
-.hegex-select {
- position: relative;
- background-color: white;
- border-radius: 5px;
-/* Reset Select */
-select {
- -webkit-appearance: none;
- -moz-appearance: none;
- -ms-appearance: none;
- appearance: none;
- outline: 0;
- box-shadow: none;
- background: transparent;
- color: inherit;
- border: none;
-}
-select.primary {
- border: 2px solid @hegexgreen;
-}
+// .hegex-select {
+// position: relative;
+// background-color: white;
+// border-radius: 5px;
+// /* Reset Select */
+// select {
+// -webkit-appearance: none;
+// -moz-appearance: none;
+// -ms-appearance: none;
+// appearance: none;
+// outline: 0;
+// box-shadow: none;
+// background: transparent;
+// color: inherit;
+// border: none;
+// }
+// select.primary {
+// border: 2px solid @hegexgreen;
+// }
-select.yellow {
- border: 2px solid @hegexorange;
-}
+// select.yellow {
+// border: 2px solid @hegexorange;
+// }
-select.secondary {
- border: 2px solid @hegexseablue;
-}
+// select.secondary {
+// border: 2px solid @hegexseablue;
+// }
-/* Remove IE arrow */
-select::-ms-expand {
- display: none;
-}
-/* Custom Select */
-.select {
- position: relative;
- display: flex;
- min-height: 1em;
- overflow: hidden;
- font-size: 15px;
- border-radius: .25em;
-}
-select {
- flex: 1;
- position: relative;
- padding: 11px;
- cursor: pointer;
- color: inherit;
-}
-/* Arrow */
-/* Transition */
+// /* Remove IE arrow */
+// select::-ms-expand {
+// display: none;
+// }
+// /* Custom Select */
+// .select {
+// position: relative;
+// display: flex;
+// min-height: 1em;
+// overflow: hidden;
+// font-size: 15px;
+// border-radius: .25em;
+// }
+// select {
+// flex: 1;
+// position: relative;
+// padding: 11px;
+// cursor: pointer;
+// color: inherit;
+// }
+// /* Arrow */
+// /* Transition */
+
+// }
+// .night {
+// .hegex-select {
+// color: white;
+// background-color: inherit;
+// border-radius: 5px;
+// }
+// }
+
+// .hegex-select.small {
+// /* Reset Select */
+// /* Custom Select */
+// display: inline-block;
+// .select {
+// font-size: 12px;
+// }
+
+// select {
+// padding: 11px;
+// padding-right: 40px;
+// }
+// /* Arrow */
+// /* Transition */
+
+// }
+
+
+// .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;
+// }
-}
-.night {
- .hegex-select {
- color: white;
- background-color: inherit;
- border-radius: 5px;
- }
-}
-.hegex-select.small {
-/* Reset Select */
-/* Custom Select */
- display: inline-block;
.select {
- font-size: 12px;
+ display:flex;
+ flex-direction: column;
+ position:relative;
+ width:250px;
+ height:40px;
}
-select {
- padding: 11px;
- padding-right: 40px;
-}
-/* Arrow */
-/* Transition */
+.option {
+ padding:0 30px 0 10px;
+ min-height:40px;
+ 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:background .4s ease-in-out;
+ box-sizing:border-box;
+ overflow:hidden;
+ white-space:nowrap;
}
-
-.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;
+.option:hover {
+ background:#18D7FF;
}
-.little-arrow.primary {
- background: transparent url('/images/select-green.png') no-repeat left top;
- background-size: 100% auto;
+.select:focus .option {
+ position:relative;
+ pointer-events:all;
}
-.little-arrow.secondary {
- background: transparent url('/images/select-blue.png') no-repeat left top;
- background-size: 100% auto;
+input {
+ opacity:0;
+ position:absolute;
+ left:-99999px;
}
-.little-arrow.yellow {
- background: transparent url('/images/select-yellow.png') no-repeat left top;
- background-size: 100% auto;
+input:checked + label {
+ order: 1;
+ z-index:2;
+ background:white;
+ border-top:none;
+ position:relative;
}
+// input:checked + label:after {
+// content:'';
+// width: 0;
+// height: 0;
+// border-left: 5px solid transparent;
+// border-right: 5px solid transparent;
+// border-top: 5px solid white;
+// position:absolute;
+// right:10px;
+// top:calc(50% - 2.5px);
+// pointer-events:none;
+// z-index:3;
+// }
+
+// input:checked + label:before {
+// position:absolute;
+// right:0;
+// height: 40px;
+// width: 40px;
+// content: '';
+// background:#666;
+// }
diff --git a/src/district_hegex/ui/components/inputs.cljs b/src/district_hegex/ui/components/inputs.cljs
index 8775957..9d166cb 100644
--- a/src/district_hegex/ui/components/inputs.cljs
+++ b/src/district_hegex/ui/components/inputs.cljs
@@ -52,3 +52,33 @@
[:div]
[:div]
[:div]]]))
+
+;;
+;;
+;;
+;;
+;;
+;;
+;;
+;;
+;;
+;;
+;;
+;;
+
+(defn fancy-select []
+ [:div {:class "select"
+ :tabindex "1"
+ }
+ [:input {:class "fancy"
+ :name "test"
+ :type "radio"
+ :id "opt1"
+ :checked true}]
+ [:label {:for "opt1" :class "option"} "Oranges"]
+ [:input {:class "fancy"
+ :name "test"
+ :type "radio"
+ :id "opt2"
+ :checked true}]
+ [:label {:for "opt2" :class "option"} "Apples"]])
diff --git a/src/district_hegex/ui/home/page.cljs b/src/district_hegex/ui/home/page.cljs
index ca3f7b7..5aee85f 100644
--- a/src/district_hegex/ui/home/page.cljs
+++ b/src/district_hegex/ui/home/page.cljs
@@ -829,7 +829,8 @@
[:div.hover-label "Break-even"]
[:h3.stats "$" break-even]]
[:div.box.e
- [:button.secondary.line-btn
+ [inputs/fancy-select]
+ #_[:button.secondary.line-btn
{:disabled (or @tx-pending? (pos? (count mint-errs)))
:on-click #(dispatch [::hegex-nft/mint-hegex @form-data])}
(if @tx-pending?
From 99d36c18bf528f3af55ab5ccc13179ed139dcf0c Mon Sep 17 00:00:00 2001
From: st4cks1deflow <1@stacksideflow.host>
Date: Wed, 4 Aug 2021 11:23:17 +0300
Subject: [PATCH 2/4] [WIP] Remove isolated materialize and jquery, mimick
component
---
resources/public/css/select.less | 259 +++++++++----------
src/district_hegex/ui/components/inputs.cljs | 65 ++---
2 files changed, 151 insertions(+), 173 deletions(-)
diff --git a/resources/public/css/select.less b/resources/public/css/select.less
index 5d33082..d5a80b8 100644
--- a/resources/public/css/select.less
+++ b/resources/public/css/select.less
@@ -1,118 +1,127 @@
-// .hegex-select {
-// position: relative;
-// background-color: white;
-// border-radius: 5px;
-// /* Reset Select */
-// select {
-// -webkit-appearance: none;
-// -moz-appearance: none;
-// -ms-appearance: none;
-// appearance: none;
-// outline: 0;
-// box-shadow: none;
-// background: transparent;
-// color: inherit;
-// border: none;
-// }
-// select.primary {
-// border: 2px solid @hegexgreen;
-// }
-
-// select.yellow {
-// border: 2px solid @hegexorange;
-// }
-
-// select.secondary {
-// border: 2px solid @hegexseablue;
-// }
-
-// /* Remove IE arrow */
-// select::-ms-expand {
-// display: none;
-// }
-// /* Custom Select */
-// .select {
-// position: relative;
-// display: flex;
-// min-height: 1em;
-// overflow: hidden;
-// font-size: 15px;
-// border-radius: .25em;
-// }
-// select {
-// flex: 1;
-// position: relative;
-// padding: 11px;
-// cursor: pointer;
-// color: inherit;
-// }
-// /* Arrow */
-// /* Transition */
-
-// }
-// .night {
-// .hegex-select {
-// color: white;
-// background-color: inherit;
-// border-radius: 5px;
-// }
-// }
-
-// .hegex-select.small {
-// /* Reset Select */
-// /* Custom Select */
-// display: inline-block;
-// .select {
-// font-size: 12px;
-// }
-
-// select {
-// padding: 11px;
-// padding-right: 40px;
-// }
-// /* Arrow */
-// /* Transition */
-
-// }
-
-
-// .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;
-// }
+.stock-input {
+.hegex-select {
+ position: relative;
+ background-color: white;
+ border-radius: 5px;
+/* Reset Select */
+select {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -ms-appearance: none;
+ appearance: none;
+ outline: 0;
+ box-shadow: none;
+ background: transparent;
+ color: inherit;
+ border: none;
+}
+select.primary {
+ border: 2px solid @hegexgreen;
+}
+
+select.yellow {
+ border: 2px solid @hegexorange;
+}
+
+select.secondary {
+ border: 2px solid @hegexseablue;
+}
+
+/* Remove IE arrow */
+select::-ms-expand {
+ display: none;
+}
+/* Custom Select */
+.select {
+ position: relative;
+ display: flex;
+ min-height: 1em;
+ overflow: hidden;
+ font-size: 15px;
+ border-radius: .25em;
+}
+select {
+ flex: 1;
+ position: relative;
+ padding: 11px;
+ cursor: pointer;
+ color: inherit;
+}
+/* Arrow */
+/* Transition */
+
+}
+.night {
+ .hegex-select {
+ color: white;
+ background-color: inherit;
+ border-radius: 5px;
+ }
+}
+
+.hegex-select.small {
+/* Reset Select */
+/* Custom Select */
+ display: inline-block;
+.select {
+ font-size: 12px;
+}
+
+select {
+ padding: 11px;
+ padding-right: 40px;
+}
+/* Arrow */
+/* Transition */
+
+}
+
+
+.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;
+}
+
+
+}
+
+
+
+
+.fancy-input {
.select {
display:flex;
flex-direction: column;
@@ -165,25 +174,5 @@ input:checked + label {
position:relative;
}
-// input:checked + label:after {
-// content:'';
-// width: 0;
-// height: 0;
-// border-left: 5px solid transparent;
-// border-right: 5px solid transparent;
-// border-top: 5px solid white;
-// position:absolute;
-// right:10px;
-// top:calc(50% - 2.5px);
-// pointer-events:none;
-// z-index:3;
-// }
-
-// input:checked + label:before {
-// position:absolute;
-// right:0;
-// height: 40px;
-// width: 40px;
-// content: '';
-// background:#666;
-// }
+
+}
diff --git a/src/district_hegex/ui/components/inputs.cljs b/src/district_hegex/ui/components/inputs.cljs
index 9d166cb..1554353 100644
--- a/src/district_hegex/ui/components/inputs.cljs
+++ b/src/district_hegex/ui/components/inputs.cljs
@@ -23,22 +23,24 @@
s (case size
:small :div.hegex-select.small
:div.hegex-select)]
- [s
- [little-arrow color]
- [:div.select
- (into [c] children)]]))
+ [:span.stock-input
+ [s
+ [little-arrow color]
+ [:div.select
+ (into [c] children)]]]))
(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
@@ -53,32 +55,19 @@
[:div]
[:div]]]))
-;;
-;;
-;;
-;;
-;;
-;;
-;;
-;;
-;;
-;;
-;;
-;;
-
(defn fancy-select []
- [:div {:class "select"
- :tabindex "1"
- }
- [:input {:class "fancy"
- :name "test"
- :type "radio"
- :id "opt1"
- :checked true}]
- [:label {:for "opt1" :class "option"} "Oranges"]
- [:input {:class "fancy"
- :name "test"
- :type "radio"
- :id "opt2"
- :checked true}]
- [:label {:for "opt2" :class "option"} "Apples"]])
+ [:div.fancy-input
+ [:div {:class "select"
+ :tabindex "1"}
+ [:input {:class "fancy"
+ :name "test"
+ :type "radio"
+ :id "opt1"
+ :checked true}]
+ [:label {:for "opt1" :class "option"} "Oranges"]
+ [:input {:class "fancy"
+ :name "test"
+ :type "radio"
+ :id "opt2"
+ :checked true}]
+ [:label {:for "opt2" :class "option"} "Apples"]]])
From bb99417b7acbcb301dd2fef2e8d46c5f81980841 Mon Sep 17 00:00:00 2001
From: stacksideflow <1@stacksideflow.host>
Date: Wed, 4 Aug 2021 22:17:08 +0300
Subject: [PATCH 3/4] Add select arrows and adjust UI
---
resources/public/css/select.less | 71 ++++++++++++++++--
src/district_hegex/ui/components/inputs.cljs | 77 ++++++++++----------
2 files changed, 105 insertions(+), 43 deletions(-)
diff --git a/resources/public/css/select.less b/resources/public/css/select.less
index d5a80b8..7ed50b1 100644
--- a/resources/public/css/select.less
+++ b/resources/public/css/select.less
@@ -123,6 +123,7 @@ select {
.fancy-input {
.select {
+ border-radius: 5px !important;
display:flex;
flex-direction: column;
position:relative;
@@ -132,7 +133,8 @@ select {
.option {
padding:0 30px 0 10px;
- min-height:40px;
+ // border-radius: 5px;
+ min-height:36px;
display:flex;
align-items:center;
background:white;
@@ -144,17 +146,27 @@ select {
pointer-events:none;
order:2;
z-index:1;
- transition:background .4s ease-in-out;
- box-sizing:border-box;
- overflow:hidden;
+ transition:all .4s ease-in-out;
white-space:nowrap;
+ border-radius: 5px;
}
.option:hover {
- background:#18D7FF;
+ 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;
@@ -170,9 +182,56 @@ input:checked + label {
order: 1;
z-index:2;
background:white;
- border-top:none;
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.4em;
+ 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;
+}
+
}
diff --git a/src/district_hegex/ui/components/inputs.cljs b/src/district_hegex/ui/components/inputs.cljs
index 1554353..4a60614 100644
--- a/src/district_hegex/ui/components/inputs.cljs
+++ b/src/district_hegex/ui/components/inputs.cljs
@@ -1,5 +1,9 @@
(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]]))
@@ -7,28 +11,6 @@
[: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)]
- [:span.stock-input
- [s
- [little-arrow color]
- [:div.select
- (into [c] children)]]]))
-
(defn text-input [{:keys [type step min max on-change label color size] :as props}]
(println "stepis" step)
(let [el :div.hinput-wrapper
@@ -56,18 +38,39 @@
[:div]]]))
(defn fancy-select []
- [:div.fancy-input
- [:div {:class "select"
- :tabindex "1"}
- [:input {:class "fancy"
- :name "test"
- :type "radio"
- :id "opt1"
- :checked true}]
- [:label {:for "opt1" :class "option"} "Oranges"]
- [:input {:class "fancy"
- :name "test"
- :type "radio"
- :id "opt2"
- :checked true}]
- [:label {:for "opt2" :class "option"} "Apples"]]])
+ (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)]]]))
From c1905e12de46089ddc692855ee52bc7b13607431 Mon Sep 17 00:00:00 2001
From: stacksideflow <1@stacksideflow.host>
Date: Wed, 4 Aug 2021 22:55:47 +0300
Subject: [PATCH 4/4] [WIP] Polish synthetic selects
---
resources/public/css/select.less | 13 ++++--
resources/public/css/style.main.less | 25 ++++++++++
src/district_hegex/ui/components/inputs.cljs | 5 +-
src/district_hegex/ui/home/page.cljs | 48 ++++++++++++++++++--
4 files changed, 78 insertions(+), 13 deletions(-)
diff --git a/resources/public/css/select.less b/resources/public/css/select.less
index 7ed50b1..89c32a7 100644
--- a/resources/public/css/select.less
+++ b/resources/public/css/select.less
@@ -125,16 +125,19 @@ select {
.select {
border-radius: 5px !important;
display:flex;
+ font-size: 0.6em;
flex-direction: column;
position:relative;
- width:250px;
- height:40px;
+ height:45px;
+}
+.select.disabled {
+ pointer-events: none;
}
.option {
- padding:0 30px 0 10px;
+ padding:5px 30px 0 10px;
// border-radius: 5px;
- min-height:36px;
+ min-height:41px;
display:flex;
align-items:center;
background:white;
@@ -205,7 +208,7 @@ input:checked + label {
line-height: 1.2;
border-radius: 50%;
position: absolute;
- top: 0.4em;
+ top: 0.7em;
z-index: 89;
right: 10px;
width: 22px;
diff --git a/resources/public/css/style.main.less b/resources/public/css/style.main.less
index e5fd84c..08312aa 100644
--- a/resources/public/css/style.main.less
+++ b/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;
+ }
+}
diff --git a/src/district_hegex/ui/components/inputs.cljs b/src/district_hegex/ui/components/inputs.cljs
index 4a60614..3d31944 100644
--- a/src/district_hegex/ui/components/inputs.cljs
+++ b/src/district_hegex/ui/components/inputs.cljs
@@ -7,9 +7,8 @@
[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]
+ [: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)
diff --git a/src/district_hegex/ui/home/page.cljs b/src/district_hegex/ui/home/page.cljs
index 5aee85f..d6730e6 100644
--- a/src/district_hegex/ui/home/page.cljs
+++ b/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"]
@@ -829,8 +868,7 @@
[:div.hover-label "Break-even"]
[:h3.stats "$" break-even]]
[:div.box.e
- [inputs/fancy-select]
- #_[:button.secondary.line-btn
+ [:button.secondary.line-btn
{:disabled (or @tx-pending? (pos? (count mint-errs)))
:on-click #(dispatch [::hegex-nft/mint-hegex @form-data])}
(if @tx-pending?