Merge pull request #9 from joshuanianji/fix-ios

Bruh i can FINALLY fix the iOS problem, and the actual solution dealt with literally one line of CSS I'm so mad rn
joshuanianji · Jul 6, 2020 · ec03bb8 · ec03bb8
2 parents 457b5fc + b4e5c11
commit ec03bb8
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 23 deletions.
diff --git a/public/index.html b/public/index.html
@@ -16,7 +16,7 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/example.png">
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.png">
     <title>HIIT Timer</title>
 </head>
 

diff --git a/src/Main.elm b/src/Main.elm
@@ -162,21 +162,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
@@ -267,20 +267,26 @@ 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
+
+                        -- works for Android
                         , Element.htmlAttribute <| Html.Attributes.type_ "number"
 
+                        -- -- 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
                         ]
                         { 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
@@ -90,7 +90,16 @@ 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_ "number"
+
+                -- 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
@@ -116,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
@@ -3,12 +3,8 @@ html::-webkit-scrollbar{
     display: none;
 }
 
-/* no clicks in input lol */
-input {
-    pointer-events:none;
-    user-select: none;
-}
 .no-cursor {
+    cursor: none;
     caret-color: transparent;
 }
 /* hide arrows in number selection */
@@ -31,4 +27,32 @@ input[type=number] {
     text-align: right;
     font-size : 24px;
     font-family: 'Lato', sans-serif;
+}
+
+/* ree */
+.blinking {
+
+    animation:1s blinker steps(1) infinite;
+    -webkit-animation:1s blinker steps(1) infinite;
+    -moz-animation:1s blinker steps(1) 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; }
 }