Avoid zoom in on input focus, in the webapp on mobile devices

Set LanguageSelector's input font-size to 16px on mobile devices. Add SASS mixins "webapp" and "webapp-mobile" to write specific CSS for those clients.
2024-10-06 18:12:16 +02:00 · 2024-01-11 20:07:03 +01:00 · 2024-01-11 20:07:03 +01:00 · c645b0bac8
commit c645b0bac8
parent 54e390eeec
3 changed files with 16 additions and 1 deletions
--- a/src/components/LanguageSelector.vue
+++ b/src/components/LanguageSelector.vue
@ -126,6 +126,9 @@
        +dark-mode
            background: #151516
            box-shadow: 0 0 10px rgba(0,0,0,0.5)
+        +webapp-mobile
+            max-width: calc(100% - 80px)
+
        input
            background: #fff
            padding: 4px 5px
@ -144,6 +147,9 @@
                border: 1px solid #5a5a5a
                &:focus
                    border: 1px solid #3b3b3b
+            +webapp-mobile
+                font-size: 16px
+                max-width: 100%
        
        .items
            > li
--- a/src/css/include.sass
+++ b/src/css/include.sass
@ -1,3 +1,12 @@
 =dark-mode()
    html[theme=dark] &
        @content
+
+=webapp()
+    html[webapp] &
+        @content
+
+=webapp-mobile()
+    @media (max-width: 600px)
+        html[webapp] &
+            @content
--- a/webapp/index.html
+++ b/webapp/index.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" webapp="true">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />