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

97
style.css
View File

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