From 948929aa71f6806a079d43da9ea8125f27c54f01 Mon Sep 17 00:00:00 2001 From: Joshua Ji Date: Sun, 5 Jul 2020 23:58:36 -0600 Subject: [PATCH 1/3] THE CULPRIT WAS USER-SELECT Can't believe I still had it smh I guess #3 is mainly fixed but I still need to work on general aesthetic. On the Safari iOS emulator the cursor for the Set repeat function looks weird I need to check is that's legit on actual iOS devices Also added inputMode and regex patters per a CSS_tricks article Will it work? Will have to unit test. --- src/Modules/Set.elm | 12 +++++++++--- src/View/TimeInput.elm | 11 ++++++++++- src/assets/main.css | 1 - 3 files changed, 19 insertions(+), 5 deletions(-) diff --git a/src/Modules/Set.elm b/src/Modules/Set.elm index d8b7257..b05fcde 100644 --- a/src/Modules/Set.elm +++ b/src/Modules/Set.elm @@ -267,12 +267,18 @@ view options (Set data) = repeats = let label = - Element.el [ Font.light ] <| Element.text "Number of Repeats:" + Element.el [ Font.light ] <| Element.text "Number of Repeats (max 50):" input = Input.text [ Font.light - , Element.htmlAttribute <| Html.Attributes.type_ "number" + + -- works for Android + , Element.htmlAttribute <| Html.Attributes.type_ "text" + + -- -- for iOS + , Element.htmlAttribute <| Html.Attributes.attribute "inputmode" "numeric" + , Element.htmlAttribute <| Html.Attributes.attribute "pattern" "[0-9]*" -- here we "sanitize" the repeats by making an empty string worth 0 , Events.onLoseFocus <| options.sanitizeRepeat data.position @@ -280,7 +286,7 @@ view options (Set data) = { onChange = options.onUpdateRepeat data.position , text = data.repeatString , placeholder = Nothing - , label = Input.labelHidden "Number of Repeats:" + , label = Input.labelHidden "Number of Repeats (Max 50):" } repeatIcon = diff --git a/src/View/TimeInput.elm b/src/View/TimeInput.elm index 4b22976..c1ff5f4 100644 --- a/src/View/TimeInput.elm +++ b/src/View/TimeInput.elm @@ -90,7 +90,16 @@ view options (TimeInput data) = Input.text [ Element.width (Element.px 175) , Element.padding 24 - , Element.htmlAttribute <| Html.Attributes.type_ "number" + + -- works for android + , Element.htmlAttribute <| Html.Attributes.type_ "text" + , Element.htmlAttribute <| Html.Attributes.class "no-cursor" + + -- for iOS maybe + , Element.htmlAttribute <| Html.Attributes.attribute "inputmode" "numeric" + , Element.htmlAttribute <| Html.Attributes.attribute "pattern" "[0-9]*" + + -- idk if this is even useful tbh , Element.htmlAttribute <| Html.Attributes.min "0" -- FONT SIZE 0 HIDES THE STUPID UGLY BEHIND-THE-SCENES TEXT diff --git a/src/assets/main.css b/src/assets/main.css index eb563a6..15527f4 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -6,7 +6,6 @@ html::-webkit-scrollbar{ /* no clicks in input lol */ input { pointer-events:none; - user-select: none; } .no-cursor { caret-color: transparent; From 815f436d72e09b4d64d611f626cb45af4c608902 Mon Sep 17 00:00:00 2001 From: Joshua Ji Date: Mon, 6 Jul 2020 14:41:52 -0600 Subject: [PATCH 2/3] iOS is still weird - regular cursors show up in TImeInput like 10% of the time - Number input for apple doesn't work (everything online is outdated) - Safari cannot unfocus? (chrome can) --- public/index.html | 2 +- src/Main.elm | 31 ++++++++++++++++--------------- src/Modules/Set.elm | 2 +- src/View/TimeInput.elm | 4 ++-- src/assets/main.css | 29 +++++++++++++++++++++++++++++ 5 files changed, 49 insertions(+), 19 deletions(-) diff --git a/public/index.html b/public/index.html index 18dc636..7836087 100644 --- a/public/index.html +++ b/public/index.html @@ -15,7 +15,7 @@ --> - + HIIT Timer diff --git a/src/Main.elm b/src/Main.elm index ff4d4ce..de08df6 100644 --- a/src/Main.elm +++ b/src/Main.elm @@ -152,21 +152,22 @@ view model = Application -> application model ] - |> Element.layoutWith - { options = - [ Element.focusStyle - { borderColor = Just Colours.focusBorder - , backgroundColor = Nothing - , shadow = - Just - { color = Colours.focusBorder - , offset = ( 0, 0 ) - , blur = 0 - , size = 3 - } - } - ] - } + -- |> Element.layoutWith + -- { options = + -- [ Element.focusStyle + -- { borderColor = Just Colours.focusBorder + -- , backgroundColor = Nothing + -- , shadow = + -- Just + -- { color = Colours.focusBorder + -- , offset = ( 0, 0 ) + -- , blur = 0 + -- , size = 3 + -- } + -- } + -- ] + -- } + |> Element.layout [ Font.family [ Font.typeface "Lato" ] ] diff --git a/src/Modules/Set.elm b/src/Modules/Set.elm index b05fcde..a19b624 100644 --- a/src/Modules/Set.elm +++ b/src/Modules/Set.elm @@ -274,7 +274,7 @@ view options (Set data) = [ Font.light -- works for Android - , Element.htmlAttribute <| Html.Attributes.type_ "text" + , Element.htmlAttribute <| Html.Attributes.type_ "number" -- -- for iOS , Element.htmlAttribute <| Html.Attributes.attribute "inputmode" "numeric" diff --git a/src/View/TimeInput.elm b/src/View/TimeInput.elm index c1ff5f4..acb1dba 100644 --- a/src/View/TimeInput.elm +++ b/src/View/TimeInput.elm @@ -90,10 +90,10 @@ view options (TimeInput data) = Input.text [ Element.width (Element.px 175) , Element.padding 24 + , Element.htmlAttribute <| Html.Attributes.class "no-cursor" -- works for android - , Element.htmlAttribute <| Html.Attributes.type_ "text" - , Element.htmlAttribute <| Html.Attributes.class "no-cursor" + , Element.htmlAttribute <| Html.Attributes.type_ "number" -- for iOS maybe , Element.htmlAttribute <| Html.Attributes.attribute "inputmode" "numeric" diff --git a/src/assets/main.css b/src/assets/main.css index 15527f4..6e89dee 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -8,6 +8,7 @@ input { pointer-events:none; } .no-cursor { + cursor: none; caret-color: transparent; } /* hide arrows in number selection */ @@ -30,4 +31,32 @@ input[type=number] { text-align: right; font-size : 24px; font-family: 'Lato', sans-serif; +} + +/* ree */ +.blink_text { + + animation:1s blinker linear infinite; + -webkit-animation:1s blinker linear infinite; + -moz-animation:1s blinker linear infinite; + + color: red; +} + +@-moz-keyframes blinker { + 0% { opacity: 1.0; } + 50% { opacity: 0.0; } + 100% { opacity: 1.0; } +} + +@-webkit-keyframes blinker { + 0% { opacity: 1.0; } + 50% { opacity: 0.0; } + 100% { opacity: 1.0; } +} + +@keyframes blinker { + 0% { opacity: 1.0; } + 50% { opacity: 0.0; } + 100% { opacity: 1.0; } } \ No newline at end of file From b4e5c1168f8beb24698935e1ff994a5f9029b918 Mon Sep 17 00:00:00 2001 From: Joshua Ji Date: Mon, 6 Jul 2020 14:48:48 -0600 Subject: [PATCH 3/3] Final Adjustments FInishing some stuff before merging branch fix-ios and closing #3 - Artificial cursors on TimeInput now blink - removed `pointer-events:none` for inputs They cause the cursor to go to the start of the line for set repeat smh --- src/View/TimeInput.elm | 1 + src/assets/main.css | 12 ++++-------- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/View/TimeInput.elm b/src/View/TimeInput.elm index acb1dba..8914091 100644 --- a/src/View/TimeInput.elm +++ b/src/View/TimeInput.elm @@ -125,6 +125,7 @@ view options (TimeInput data) = , Element.padding 8 , Element.height Element.fill , Element.alignRight + , Element.htmlAttribute <| Html.Attributes.class "blinking" ] (Element.el [ Element.height Element.fill diff --git a/src/assets/main.css b/src/assets/main.css index 6e89dee..cca5ba6 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -3,10 +3,6 @@ html::-webkit-scrollbar{ display: none; } -/* no clicks in input lol */ -input { - pointer-events:none; -} .no-cursor { cursor: none; caret-color: transparent; @@ -34,11 +30,11 @@ input[type=number] { } /* ree */ -.blink_text { +.blinking { - animation:1s blinker linear infinite; - -webkit-animation:1s blinker linear infinite; - -moz-animation:1s blinker linear infinite; + animation:1s blinker steps(1) infinite; + -webkit-animation:1s blinker steps(1) infinite; + -moz-animation:1s blinker steps(1) infinite; color: red; }