fredtempez/SabradouMap
1
0
Fork 0
Code Releases Activity

nouveau css

Browse Source
This commit is contained in:
Fred Tempez 2023-07-14 11:11:37 +02:00
parent 971a95516e
commit b04f70def7
2 changed files with 37 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
index.php
View File

@ -28,22 +28,7 @@
</form> </form>
</div> </div>
<div class="container"> <div class="container">
<div class="left-column"> <div class="map-column">
<ul class="cities">
<?php $citiesList = getCities('https://www.sabradou.com/index.php'); ?>
<?php if (isset($citiesList)): ?>
<?php foreach ($citiesList as $city): ?>
<li>
<?php
echo '<a href="' . $city['href'] . '" target="_blank">' . $city['name'] . '</a>' ; ?>
</li>
<?php endforeach; ?>
<?php endif; ?>
</ul>
</div>
<div class="right-column">
<?php <?php
if (isset($_GET['calendrier'])) { if (isset($_GET['calendrier'])) {
$jour = $_GET['calendrier']; $jour = $_GET['calendrier'];
@ -72,6 +57,20 @@
</script> </script>
<?php } ?> <?php } ?>
</div> </div>
<div class="cities-column">
<ul class="cities">
<?php $citiesList = getCities('https://www.sabradou.com/index.php'); ?>
<?php if (isset($citiesList)): ?>
<?php foreach ($citiesList as $city): ?>
<li>
<?php
echo '<a href="' . $city['href'] . '" target="_blank">' . $city['name'] . '</a>' ; ?>
</li>
<?php endforeach; ?>
<?php endif; ?>
</ul>
</div>
</div> </div>
</body> </body>

30
style.css
View File

@ -6,20 +6,19 @@
.container { .container {
display: flex; display: flex;
width: 100%; flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si nécessaire */
align-content: center; align-items: top; /* Centre les éléments verticalement */
} }
.left-column { .cities-column {
display: flex; flex: 1; /* Occupe 100% de la largeur dans les petits écrans et 10% dans les grands écrans */
width: 10%;
padding: 10px; padding: 10px;
} }
.right-column { .map-column {
display: flex; flex: 9; /* Occupe 100% de la largeur dans les petits écrans et 90% dans les grands écrans */
width: 90%;
padding: 10px; padding: 10px;
margin-top: 20px;
} }
.cities > li { .cities > li {
@ -30,3 +29,18 @@
text-align: center; text-align: center;
} }
/* Media queries pour les ajustements spécifiques à différentes tailles d'écran */
/* Pour les écrans de taille moyenne */
@media (max-width: 768px) {
.left-column, .right-column {
flex: 100%; /* Occupe 100% de la largeur */
}
}
/* Pour les écrans de petite taille */
@media (max-width: 576px) {
.container {
flex-direction: column; /* Affiche les colonnes les unes au-dessus des autres */
}
}