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

fix(ui): stabilizza header in formazione e cambio servizio

Browse Source 
- Riserva spazio fisso per l’icona del servizio per evitare scatti
- Stabilizza la larghezza del punteggio inline in modalità Formazione
- Migliora la coerenza visiva nelle testate home/guest
This commit is contained in:
davide3011
2026-01-28 16:09:36 +01:00
parent 139dcc9c5b
commit c923bdbf64
2 changed files with 35 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/HomePage/HomePage.html
View File

@@ -74,16 +74,22 @@
<!-- home guest --> <!-- home guest -->
<div class="hea home"> <div class="hea home">
<span @click="decPunt('home')" :style="{ 'float': 'left' }"> <span @click="decPunt('home')" :style="{ 'float': 'left' }">
{{ sp.nomi.home }} <img v-if="sp.servHome" src="/serv.png" width="25" /> {{ sp.nomi.home }}
<span v-if="visuForm">{{ sp.punt.home }}</span> <span class="serv-slot">
<img v-show="sp.servHome" src="/serv.png" width="25" />
</span>
<span v-if="visuForm" class="score-inline">{{ sp.punt.home }}</span>
</span> </span>
<span @click="incSet('home')" class="mr3" :style="{ 'float': 'right' }">set {{ sp.set.home }}</span> <span @click="incSet('home')" class="mr3" :style="{ 'float': 'right' }">set {{ sp.set.home }}</span>
</div> </div>
<div class="hea guest"> <div class="hea guest">
<span @click="decPunt('guest')" :style="{ 'float': 'right' }"> <span @click="decPunt('guest')" :style="{ 'float': 'right' }">
<img v-if="!sp.servHome" src="/serv.png" width="25" /> {{ sp.nomi.guest }} <span class="serv-slot">
<span v-if="visuForm">{{ sp.punt.guest }}</span> <img v-show="!sp.servHome" src="/serv.png" width="25" />
</span>
{{ sp.nomi.guest }}
<span v-if="visuForm" class="score-inline">{{ sp.punt.guest }}</span>
</span> </span>
<span @click="incSet('guest')" class="ml3" :style="{ 'float': 'left' }">set {{ sp.set.guest }}</span> <span @click="incSet('guest')" class="ml3" :style="{ 'float': 'left' }">set {{ sp.set.guest }}</span>
</div> </div>
@@ -113,16 +119,22 @@
<div class="hea guest"> <div class="hea guest">
<span @click="decPunt('guest')" :style="{ 'float': 'left' }"> <span @click="decPunt('guest')" :style="{ 'float': 'left' }">
{{ sp.nomi.guest }} <img v-if="!sp.servHome" src="/serv.png" width="25" /> {{ sp.nomi.guest }}
<span v-if="visuForm">{{ sp.punt.guest }}</span> <span class="serv-slot">
<img v-show="!sp.servHome" src="/serv.png" width="25" />
</span>
<span v-if="visuForm" class="score-inline">{{ sp.punt.guest }}</span>
</span> </span>
<span @click="incSet('guest')" class="mr3" :style="{ 'float': 'right' }">set {{ sp.set.guest }}</span> <span @click="incSet('guest')" class="mr3" :style="{ 'float': 'right' }">set {{ sp.set.guest }}</span>
</div> </div>
<div class="hea home"> <div class="hea home">
<span @click="decPunt('home')" :style="{ 'float': 'right' }"> <span @click="decPunt('home')" :style="{ 'float': 'right' }">
<img v-if="sp.servHome" src="/serv.png" width="25" /> {{ sp.nomi.home }} <span class="serv-slot">
<span v-if="visuForm">{{ sp.punt.home }}</span> <img v-show="sp.servHome" src="/serv.png" width="25" />
</span>
{{ sp.nomi.home }}
<span v-if="visuForm" class="score-inline">{{ sp.punt.home }}</span>
</span> </span>
<span @click="incSet('home')" class="ml3" :style="{ 'float': 'left' }">set {{ sp.set.home }}</span> <span @click="incSet('home')" class="ml3" :style="{ 'float': 'left' }">set {{ sp.set.home }}</span>
</div> </div>
@@ -191,4 +203,4 @@
</div> </div>
</div> </div>
</section> </section>

15
src/style.css
View File

@@ -58,6 +58,19 @@ button:focus-visible {
padding-right: 10px; padding-right: 10px;
border-radius: 5px; border-radius: 5px;
} }
.score-inline {
display: inline-block;
min-width: 3ch;
text-align: center;
}
.serv-slot {
display: inline-flex;
width: 25px;
height: 25px;
align-items: center;
justify-content: center;
vertical-align: middle;
}
.tal { .tal {
text-align: left; text-align: left;
} }
@@ -176,4 +189,4 @@ button:focus-visible {
width: 100%; width: 100%;
height: 0; height: 0;
margin: 0; margin: 0;
} }