attilio/segnapunti
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Ottimizza layout mobile e setup icone APK Android

Browse Source 
- Forza orientamento landscape e blocca scroll su mobile
- Aggiunge media queries responsive per schermi <768px
- Usa 100dvh e position:fixed per layout fullscreen
- Crea setup-android-icons.sh per generazione automatica icone Android
- Configura Capacitor per landscape, disabilita splash screen
- Refactoring Dockerfile con ImageMagick per icone multi-densità
This commit is contained in:
Davide Grilli
2026-01-24 11:23:45 +01:00
parent 9346117603
commit 1f71846e23
5 changed files with 137 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
Dockerfile
View File

@@ -12,6 +12,7 @@ RUN apt-get update && apt-get install -y \
wget \ wget \
openjdk-17-jdk \ openjdk-17-jdk \
build-essential \ build-essential \
imagemagick \
&& rm -rf /var/lib/apt/lists/* && rm -rf /var/lib/apt/lists/*
# Installa Node.js 18.x (LTS compatibile con Vite) # Installa Node.js 18.x (LTS compatibile con Vite)
@@ -67,4 +68,15 @@ RUN npm ci --legacy-peer-deps || npm install --legacy-peer-deps
COPY . . COPY . .
# Build script # Build script
CMD ["bash", "-c", "npm run build && npx cap add android && npx cap sync && cd android && ./gradlew assembleDebug --no-daemon && mkdir -p /app/output && cp app/build/outputs/apk/debug/app-debug.apk /app/output/segnapunti-debug.apk && echo '\n✅ APK generato: /app/output/segnapunti-debug.apk'"] CMD ["bash", "-c", "\
npm run build && \
npx cap add android && \
npx cap sync && \
sed -i 's/android:configChanges=\"\\([^\"]*\\)\"/android:configChanges=\"\\1\" android:screenOrientation=\"landscape\"/g' android/app/src/main/AndroidManifest.xml && \
bash setup-android-icons.sh && \
cd android && ./gradlew assembleDebug --no-daemon && \
mkdir -p /app/output && \
cp app/build/outputs/apk/debug/app-debug.apk /app/output/segnapunti-debug.apk && \
echo '' && \
echo 'APK generato: /app/output/segnapunti-debug.apk'\
"]

12
capacitor.config.json
View File

@@ -5,5 +5,17 @@
"bundledWebRuntime": false, "bundledWebRuntime": false,
"server": { "server": {
"androidScheme": "https" "androidScheme": "https"
},
"android": {
"allowMixedContent": true,
"webContentsDebuggingEnabled": true
},
"plugins": {
"SplashScreen": {
"launchShowDuration": 0
}
},
"preferences": {
"orientation": "landscape"
} }
} }

5
index.html
View File

@@ -3,7 +3,10 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>Segnapunti - Anto</title> <title>Segnapunti - Anto</title>
</head> </head>
<body> <body>

40
setup-android-icons.sh Normal file
View File

@@ -0,0 +1,40 @@
#!/bin/bash
set -e
echo "Configurazione icone Android..."
# Rimuove icone default di Capacitor
rm -rf android/app/src/main/res/mipmap-*
# Crea directory per tutte le densità
for density in mdpi hdpi xhdpi xxhdpi xxxhdpi; do
mkdir -p android/app/src/main/res/mipmap-$density
done
# Mappa densità -> dimensioni
declare -A sizes=(
["mdpi"]="48"
["hdpi"]="72"
["xhdpi"]="96"
["xxhdpi"]="144"
["xxxhdpi"]="192"
)
# Genera icone per ogni densità
for density in "${!sizes[@]}"; do
size="${sizes[$density]}"
echo " Generando icone ${size}x${size} per $density..."
convert public/segnap-512x512.png -resize ${size}x${size} \
android/app/src/main/res/mipmap-$density/ic_launcher.png
convert public/segnap-512x512.png -resize ${size}x${size} \
android/app/src/main/res/mipmap-$density/ic_launcher_round.png
done
# Icona per il file APK (visibile da PC)
mkdir -p android/app/src/main/res/drawable
convert public/segnap-512x512.png -resize 512x512 \
android/app/src/main/res/drawable/icon.png
echo "Icone configurate con successo!"

74
src/style.css
View File

@@ -1,17 +1,33 @@
:root { :root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
touch-action: pan-x pan-y; touch-action: none;
height: 100% height: 100%;
width: 100%;
overflow: hidden;
}
html {
height: 100%;
width: 100%;
overflow: hidden;
position: fixed;
} }
body { body {
overscroll-behavior-y: contain; overscroll-behavior: none;
margin: 0; margin: 0;
padding: 0;
place-items: center; place-items: center;
min-width: 320px;
width: 100%; width: 100%;
min-height: 100vh; height: 100vh;
height: 100dvh; /* Dynamic viewport height per mobile */
background-color: #000; background-color: #000;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
} }
button { button {
@@ -38,8 +54,13 @@ button:focus-visible {
} }
#app { #app {
margin: 0 auto; margin: 0;
padding: 0;
text-align: center; text-align: center;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
} }
.campo { .campo {
user-select: none; user-select: none;
@@ -121,4 +142,45 @@ button:focus-visible {
background-color: rgb(206, 247, 3); background-color: rgb(206, 247, 3);
color: blue; color: blue;
border-radius: 5px; border-radius: 5px;
}
/* Responsive mobile */
@media (max-width: 768px) {
.hea {
font-size: 4vw;
}
.hea span {
padding-left: 5px;
padding-right: 5px;
}
.hea img {
width: 18px !important;
}
.punt {
font-size: 45vh;
}
.form {
font-size: 4vh;
border-top: #fff dashed 15px;
padding-top: 30px;
}
.formdiv {
font-size: 15vh;
}
.bot button {
font-size: 0.7em;
padding: 0.4em 0.8em;
margin-left: 3px;
margin-right: 3px;
}
.bot img {
width: 20px !important;
}
} }