mirror of
https://framagit.org/JonathanMM/sutom.git
synced 2024-05-11 18:26:48 +02:00
Amélioration de l'affichage de la popup
This commit is contained in:
parent
1d48c6de99
commit
98eb3b3f39
|
@ -40,22 +40,6 @@ body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
#contenu {
|
|
||||||
margin-left: 2px;
|
|
||||||
margin-right: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-height: 640px) {
|
|
||||||
:root {
|
|
||||||
--taille-cellule: 36px;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
header {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 2fr 6fr 2fr;
|
grid-template-columns: 2fr 6fr 2fr;
|
||||||
|
@ -210,12 +194,6 @@ h1 {
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-height: 640px) {
|
|
||||||
.regles-panel table {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.regles-panel #panel-fenetre {
|
.regles-panel #panel-fenetre {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
@ -286,12 +264,6 @@ h1 {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
#panel-fenetre {
|
|
||||||
width: 90%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.config-panel #panel-fenetre-contenu {
|
.config-panel #panel-fenetre-contenu {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -329,3 +301,38 @@ h1 {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding-left: 0.5em;
|
padding-left: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
#contenu {
|
||||||
|
margin-left: 2px;
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#panel-fenetre {
|
||||||
|
width: 90%;
|
||||||
|
overflow-y: auto;
|
||||||
|
max-height: calc(100vh - 4em - 2px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
:root {
|
||||||
|
--taille-cellule: 42px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body,
|
||||||
|
.regles-panel table {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-height: 640px), (max-width: 400px) {
|
||||||
|
:root {
|
||||||
|
--taille-cellule: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body,
|
||||||
|
.regles-panel table {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -103,22 +103,22 @@ export default class FinDePartiePanel {
|
||||||
let stats = Sauvegardeur.chargerSauvegardeStats();
|
let stats = Sauvegardeur.chargerSauvegardeStats();
|
||||||
if (stats) {
|
if (stats) {
|
||||||
contenu +=
|
contenu +=
|
||||||
'<div class="stats-area"><div class="stats-ligne"><div class="stats-cellule">Nombre de parties :</div>' +
|
'<div class="stats-area"><div class="stats-ligne"><div class="stats-cellule">Parties :</div>' +
|
||||||
`<div class="stats-cellule">${stats.partiesGagnees}/${stats.partiesJouees}</div>` +
|
`<div class="stats-cellule">${stats.partiesGagnees}/${stats.partiesJouees}</div>` +
|
||||||
"</div>" +
|
"</div>" +
|
||||||
`<div class="stats-ligne"><div class="stats-cellule">1/6 :</div><div class="stats-cellule">${stats.repartition[1]}</div></div>` +
|
`<div class="stats-ligne"><div class="stats-cellule">1/6 :</div><div class="stats-cellule">${stats.repartition[1]}</div></div>` +
|
||||||
`<div class="stats-ligne"><div class="stats-cellule">2/6 :</div><div class="stats-cellule">${stats.repartition[2]}</div></div>` +
|
`<div class="stats-ligne"><div class="stats-cellule">2/6 :</div><div class="stats-cellule">${stats.repartition[2]}</div></div>` +
|
||||||
`<div class="stats-ligne"><div class="stats-cellule">3/6 :</div><div class="stats-cellule">${stats.repartition[3]}</div></div>` +
|
`<div class="stats-ligne"><div class="stats-cellule">3/6 :</div><div class="stats-cellule">${stats.repartition[3]}</div></div>` +
|
||||||
`<div class="stats-ligne"><div class="stats-cellule">4/6 :</div><div class="stats-cellule">${stats.repartition[4]}</div></div>` +
|
`<div class="stats-ligne"><div class="stats-cellule">4/6 :</div><div class="stats-cellule">${stats.repartition[4]}</div></div>` +
|
||||||
`<div class="stats-ligne"><div class="stats-cellule">5/6 :</div><div class="stats-cellule">${stats.repartition[5]}</div></div>` +
|
`<div class="stats-ligne"><div class="stats-cellule">5/6 :</div><div class="stats-cellule">${stats.repartition[5]}</div></div>` +
|
||||||
`<div class="stats-ligne"><div class="stats-cellule">6/6 :</div><div class="stats-cellule">${stats.repartition[6]}</div></div>` +
|
`<div class="stats-ligne"><div class="stats-cellule">6/6 :</div><div class="stats-cellule">${stats.repartition[6]}</div></div>` +
|
||||||
`<div class="stats-ligne"><div class="stats-cellule">-/6 :</div><div class="stats-cellule">${stats.repartition["-"]}</div></div>` +
|
`<div class="stats-ligne"><div class="stats-cellule">-/6 :</div><div class="stats-cellule">${stats.repartition["-"]}</div></div>` +
|
||||||
`<div class="stats-ligne"><div class="stats-cellule">Moyenne :</div><div class="stats-cellule">${this.getMoyenne(stats.repartition)}</div></div>` +
|
`<div class="stats-ligne"><div class="stats-cellule">Moyenne :</div><div class="stats-cellule">${this.getMoyenne(stats.repartition)}</div></div>` +
|
||||||
'<div class="stats-ligne"><div class="stats-cellule">Lettres :</div>' +
|
'<div class="stats-ligne"><div class="stats-cellule">Lettres :</div>' +
|
||||||
'<div class="stats-cellule">' +
|
'<div class="stats-cellule">' +
|
||||||
`${stats.lettresRepartitions.bienPlace} 🟥 ` +
|
`${stats.lettresRepartitions.bienPlace} 🟥 ` +
|
||||||
`${stats.lettresRepartitions.malPlace} 🟡 ` +
|
`${stats.lettresRepartitions.malPlace} 🟡 ` +
|
||||||
`${stats.lettresRepartitions.nonTrouve} 🟦` +
|
`${stats.lettresRepartitions.nonTrouve} 🟦` +
|
||||||
"</div>" +
|
"</div>" +
|
||||||
"</div>" +
|
"</div>" +
|
||||||
"</div>";
|
"</div>";
|
||||||
|
|
Loading…
Reference in a new issue