extern/heynote
1
0
Fork 0
mirror of https://github.com/heyman/heynote.git synced 2024-12-26 00:29:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Jonatan Heyman 2024-01-11 20:07:03 +01:00
parent 54e390eeec
commit c645b0bac8
3 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/LanguageSelector.vue
View File

@ -126,6 +126,9 @@
+dark-mode +dark-mode
background: #151516 background: #151516
box-shadow: 0 0 10px rgba(0,0,0,0.5) box-shadow: 0 0 10px rgba(0,0,0,0.5)
+webapp-mobile
max-width: calc(100% - 80px)
input input
background: #fff background: #fff
padding: 4px 5px padding: 4px 5px
@ -144,6 +147,9 @@
border: 1px solid #5a5a5a border: 1px solid #5a5a5a
&:focus &:focus
border: 1px solid #3b3b3b border: 1px solid #3b3b3b
+webapp-mobile
font-size: 16px
max-width: 100%
.items .items
> li > li

9
src/css/include.sass
View File

@ -1,3 +1,12 @@
=dark-mode() =dark-mode()
html[theme=dark] & html[theme=dark] &
@content @content
=webapp()
html[webapp] &
@content
=webapp-mobile()
@media (max-width: 600px)
html[webapp] &
@content

2
webapp/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" webapp="true">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" />