Modifiche per adattare il piu' possibile alla tipologia APP.
Aggiunto un bordo trasparente alle 2 icone. In manifest forzata la modalità fullscreen landscape, aiutandosi anche con documentElement.requestFullscreen(). Le formazioni vengono visualizzate cambiando posto con il punteggio. inseriti opportuni cambiamenti su style.css. inserito in css-body overscroll-behavior-y: contain; per prevenire la ricarica della pagina con swipe-down. modificato il title direttamente in index.html.
This commit is contained in:
Attilio Grilli
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue</title>
|
||||
<title>Segnapunti - Anto</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 206 KiB After Width: | Height: | Size: 124 KiB |
@@ -5,6 +5,7 @@ export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
visuForm: false,
|
||||
sp: {
|
||||
punt: { home: 0, guest: 0 },
|
||||
set: { home: 0, guest: 0 },
|
||||
@@ -15,13 +16,20 @@ export default {
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
if (this.isMobile()) {
|
||||
var noSleep = new NoSleep();
|
||||
noSleep.enable();
|
||||
document.documentElement.requestFullscreen();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeApp() {
|
||||
if (confirm("Confermi di voler chiudere l'app ?")) {
|
||||
var win = window.open("", "_self");
|
||||
win.close();
|
||||
}
|
||||
},
|
||||
fullScreen() {
|
||||
document.documentElement.requestFullscreen();
|
||||
},
|
||||
@@ -51,7 +59,9 @@ export default {
|
||||
this.sp.form[team].push(this.sp.form[team].shift());
|
||||
},
|
||||
decPunt(team) {
|
||||
if (this.sp.punt[team] > 0) {
|
||||
// decrementa il punteggio se è > 0 e non siamo in
|
||||
// visualizza formazioni.
|
||||
if (this.sp.punt[team] > 0 && !this.visuForm) {
|
||||
this.sp.punt[team]--;
|
||||
this.sp.form[team].unshift(this.sp.form[team].pop());
|
||||
}
|
||||
@@ -62,15 +72,35 @@ export default {
|
||||
|
||||
<template>
|
||||
<div class="campo">
|
||||
<div class="hea home" @click="decPunt('home')">HOME</div>
|
||||
<div class="hea guest" @click="decPunt('guest')">GUEST</div>
|
||||
<div class="col home" @click="incPunt('home')">{{ sp.punt.home }}</div>
|
||||
<div class="col guest" @click="incPunt('guest')">{{ sp.punt.guest }}</div>
|
||||
<div class="bot tal">
|
||||
<button @click="fullScreen">Fullscreen</button>
|
||||
<div class="hea home" @click="decPunt('home')">ANTONIANA
|
||||
<span v-if="visuForm">- {{ sp.punt.home }}</span>
|
||||
</div>
|
||||
<div class="bot tar">
|
||||
<div class="hea guest" @click="decPunt('guest')">GUEST
|
||||
<span v-if="visuForm">- {{ sp.punt.guest }}</span>
|
||||
</div>
|
||||
<span v-if="visuForm">
|
||||
<div class="col form home">
|
||||
<div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]">
|
||||
{{ sp.form.home[x] }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col form guest">
|
||||
<div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]">
|
||||
{{ sp.form.guest[x] }}
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<span v-if="!visuForm">
|
||||
<div class="col punt home" @click="incPunt('home')">{{ sp.punt.home }}</div>
|
||||
<div class="col punt guest" @click="incPunt('guest')">{{ sp.punt.guest }}</div>
|
||||
</span>
|
||||
<div class="bot tal">
|
||||
<button @click="visuForm = !visuForm">
|
||||
<span v-if="visuForm">PUNTEGGI</span>
|
||||
<span v-if="!visuForm">FORMAZIONI</span>
|
||||
</button>
|
||||
<button @click="resetta">RESET</button>
|
||||
<button v-if="isMobile()" @click="closeApp">exit</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
}
|
||||
|
||||
body {
|
||||
overscroll-behavior-y: contain;
|
||||
margin: 0;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
@@ -19,7 +20,7 @@ button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid #fff;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-size: 0.8em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
color: #fff;
|
||||
@@ -40,7 +41,6 @@ button:focus-visible {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.campo {
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
@@ -59,16 +59,41 @@ button:focus-visible {
|
||||
text-align: right;
|
||||
}
|
||||
.bot {
|
||||
float: left;
|
||||
width: 50%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 1px;
|
||||
text-align: right;
|
||||
background-color: #000;
|
||||
}
|
||||
.col {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
float: left;
|
||||
font-size: 60vh;
|
||||
width: 50%;
|
||||
}
|
||||
.punt {
|
||||
font-size: 60vh;
|
||||
}
|
||||
.form {
|
||||
font-size: 5vh;
|
||||
border-top: #fff dashed 25px;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
.formtit {
|
||||
font-size: 5vh;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.formdiv {
|
||||
font-size: 20vh;
|
||||
float: left;
|
||||
width: 32%;
|
||||
}
|
||||
.home {
|
||||
background-color: #00f;
|
||||
}
|
||||
|
||||
@@ -15,6 +15,7 @@ export default defineConfig({
|
||||
description: "Segnapunti standalone.",
|
||||
background_color: "#eee",
|
||||
theme_color: '#ffffff',
|
||||
display: "fullscreen",
|
||||
orientation: "landscape",
|
||||
icons: [
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user