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>
</div>
<div class="container">
<div class="left-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">
<div class="map-column">
<?php
if (isset($_GET['calendrier'])) {
$jour = $_GET['calendrier'];
@ -72,6 +57,20 @@
</script>
<?php } ?>
</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>
</body>

30
style.css
View File

@ -6,20 +6,19 @@
.container {
display: flex;
width: 100%;
align-content: center;
flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si nécessaire */
align-items: top; /* Centre les éléments verticalement */
}
.left-column {
display: flex;
width: 10%;
.cities-column {
flex: 1; /* Occupe 100% de la largeur dans les petits écrans et 10% dans les grands écrans */
padding: 10px;
}
.right-column {
display: flex;
width: 90%;
.map-column {
flex: 9; /* Occupe 100% de la largeur dans les petits écrans et 90% dans les grands écrans */
padding: 10px;
margin-top: 20px;
}
.cities > li {
@ -30,3 +29,18 @@
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 */
}
}