adrien/mots-croises
adrien/mots-croises
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

responsive design

Browse Source
This commit is contained in:
Adrien MALINGREY 2025-04-30 03:25:53 +02:00
parent cb8b42af67
commit b703729e66
2 changed files with 110 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
index.php
View File

@ -53,7 +53,7 @@ $grille->current();
<body> <body>
<form id="grilleForm" method="get" location="."> <form id="grilleForm" method="get" location=".">
<h1> <h1 class="large width">
<table> <table>
<tbody> <tbody>
<tr> <tr>
@ -80,32 +80,35 @@ $grille->current();
</tbody> </tbody>
</table> </table>
</h1> </h1>
<?php if ($grille->valid()): ?> <h1 class="small width">Mots croisés</h1>
<table class="grille"> <div class="grille-et-definitions">
<tr> <?php if ($grille->valid()): ?>
<th></th> <div class="grille">
<?php for ($x = 0; $x < $largeur; $x++): ?> <table>
<th><?= chr($x + 65) ?></th> <tr>
<?php endfor; ?> <th></th>
<th></th> <?php for ($x = 0; $x < $largeur; $x++): ?>
</tr> <th><?= chr($x + 65) ?></th>
<?php for ($y = 0; $y < $hauteur; $y++): ?> <?php endfor; ?>
<tr> <th></th>
<th><?= $y + 1 ?></th> </tr>
<?php for ($x = 0; $x < $largeur; $x++): ?> <?php for ($y = 0; $y < $hauteur; $y++): ?>
<td class="case <?= $grille->grille[$y][$x] == " " ? "noire" : "blanche" ?>"> <tr>
<?php if ($grille->grille[$y][$x] == " "): ?> <th><?= $y + 1 ?></th>
<input type="text" maxlength="1" size="1" value=" " disabled /> <?php for ($x = 0; $x < $largeur; $x++): ?>
<?php else: ?> <td class="case <?= $grille->grille[$y][$x] == " " ? "noire" : "blanche" ?>">
<input type="text" maxlength="1" size="1" pattern="[A-Z]"/> <?php if ($grille->grille[$y][$x] == " "): ?>
<?php endif; ?> <input type="text" maxlength="1" size="1" value=" " disabled />
</td> <?php else: ?>
<input type="text" maxlength="1" size="1" pattern="[A-Z]"/>
<?php endif; ?>
</td>
<?php endfor; ?>
</tr>
<?php endfor; ?> <?php endfor; ?>
</tr> </table>
<?php endfor; ?> </div>
</table> <div class="definitions horizontales">
<div class="definitions">
<div class="horizontales">
<h2>Horizontalement</h2> <h2>Horizontalement</h2>
<ol> <ol>
<?php for ($y = 0; $y < $hauteur; $y++): ?> <?php for ($y = 0; $y < $hauteur; $y++): ?>
@ -124,7 +127,7 @@ $grille->current();
<?php endfor; ?> <?php endfor; ?>
</ol> </ol>
</div> </div>
<div class="verticales"> <div class="definitions verticales">
<h2>Verticalement</h2> <h2>Verticalement</h2>
<ol type="A"> <ol type="A">
<?php for ($x = 0; $x < $largeur; $x++): ?> <?php for ($x = 0; $x < $largeur; $x++): ?>
@ -143,10 +146,10 @@ $grille->current();
<?php endfor; ?> <?php endfor; ?>
</ol> </ol>
</div> </div>
</div> <?php else: ?>
<?php else: ?> <h3 class="erreur">Erreur de génération de la grille</h3>
<h3 class="erreur">Erreur de génération de la grille</h3> <?php endif ?>
<?php endif ?> </div>
<input type="hidden" id="lignes" <?php if (isset($_GET["lignes"])): ?>name="lignes" <?php endif ?>value="<?= $hauteur ?>" /> <input type="hidden" id="lignes" <?php if (isset($_GET["lignes"])): ?>name="lignes" <?php endif ?>value="<?= $hauteur ?>" />
<input type="hidden" id="colonnes" <?php if (isset($_GET["colonnes"])): ?>name="colonnes" <?php endif ?>value="<?= $largeur ?>" /> <input type="hidden" id="colonnes" <?php if (isset($_GET["colonnes"])): ?>name="colonnes" <?php endif ?>value="<?= $largeur ?>" />

95
style.css
View File

@ -1,20 +1,27 @@
body { body {
margin: 0; margin: 0;
padding: 0; padding: 2rem 1rem;
background-color: white; background-color: white;
font-family: Times, 'Times New Roman', Georgia, serif; font-family: Times, 'Times New Roman', Georgia, serif;
} }
form { form {
padding: 1rem;
min-height: calc(100vh - 2rem);
display: flex; display: flex;
flex-flow: column; flex-flow: column;
justify-content: space-evenly; min-height: calc(100vh - 4rem);
} }
h1 { h1 {
margin: 0; margin: 0;
letter-spacing: 0.2em;
}
h1.large.width {
display: inherit;
}
h1.small.width {
display: none;
} }
h1 table { h1 table {
@ -33,15 +40,26 @@ h2 {
text-align: center; text-align: center;
} }
table.grille { .grille-et-definitions {
display: flex;
flex-flow: row;
justify-content: space-evenly;
flex-wrap: wrap;
height: max-content;
flex-grow: 1;
align-items: center;
}
.grille table {
border-collapse: collapse; border-collapse: collapse;
margin: 0 auto; margin: 0 auto;
height: fit-content; height: fit-content;
} }
.grille th { .grille th,
width: 25px; .grille td {
height: 30px; width: 2rem;
height: 2rem;
text-align: center; text-align: center;
} }
@ -91,13 +109,11 @@ table.grille {
} }
.definitions { .definitions {
display: flex; width: 30%;
justify-content: space-evenly;
} }
.definitions .horizontales, .definitions.horizontales {
.definitions .verticales { order: -1;
width: 45%;
} }
.definitions ol { .definitions ol {
@ -141,8 +157,8 @@ button[type='submit'] {
} }
button[type='submit'] { button[type='submit'] {
width: fit-content; width: 100%;
margin: 0 auto; margin: auto;
border: none; border: none;
background: none; background: none;
font-family: inherit; font-family: inherit;
@ -150,6 +166,7 @@ button[type='submit'] {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5em; gap: 0.5em;
justify-content: center;
} }
button[type="submit"]:hover { button[type="submit"]:hover {
@ -163,6 +180,41 @@ button[type="submit"]:active {
} }
@media (max-width: 1024px) {
body {
padding: 1.5rem 1rem;
}
h1.large.width {
display: none;
}
h1.small.width {
display: initial;
}
h1 table {
line-height: 0.7;
}
form {
min-height: calc(100vh - 2rem);
}
.grille {
width: 100%;
margin: auto;
}
.definitions {
width: 45%;
}
.definitions.horizontales {
order: inherit
}
}
@media (max-width: 640px) { @media (max-width: 640px) {
* { * {
box-sizing: border-box; box-sizing: border-box;
@ -171,12 +223,15 @@ button[type="submit"]:active {
body { body {
width: auto; width: auto;
margin: 0; margin: 0;
padding: 0; padding: 1rem 0;
} }
h1.large.width {
display: none;
}
h1 table { h1.small.width {
line-height: 0.7; display: none;
} }
.grille td { .grille td {
@ -189,8 +244,8 @@ button[type="submit"]:active {
flex-flow: column; flex-flow: column;
} }
.definitions .horizontales, .definitions.horizontales,
.definitions .verticales { .definitions.verticales {
width: 100%; width: 100%;
} }
} }