ScoDoc-Lille/app/templates/calendrier.j2

93 lines
2.1 KiB
Plaintext
Raw Normal View History

<div class="calendrier">
{% for mois,semaines in calendrier.items() %}
<div class="mois {{'highlight' if highlight=='mois'}}">
<h3>{{mois}}</h3>
{% for semaine in semaines %}
<div class="jours {{'highlight' if highlight=='semaine'}}" week_index="{{semaine}}">
{% for jour in semaines[semaine] %}
<div class="jour {{jour.get_class()}} {{'highlight' if highlight=='jour'}}" date="{{jour.get_date('%Y-%m-%d')}}">
<span class="nom">{{jour.get_nom()}}</span>
<div class="contenu">
{{jour.get_html() | safe}}
</div>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
{% endfor %}
</div>
<style>
.calendrier {
display: flex;
justify-content: center;
overflow-x: scroll;
border: 1px solid #444;
border-radius: 12px;
margin-bottom: 12px;
}
2024-05-17 15:23:29 +02:00
.mois {
flex: 1;
}
.mois h3 {
text-align: center;
}
.jour {
text-align: left;
margin: 2px;
cursor: default;
font-size: 13px;
position: relative;
font-weight: normal;
min-width: 6em;
display: flex;
justify-content: start;
}
.jour>.contenu {
background-color: white;
width: 100%;
}
.jour.jour.non-travail>.nom,
.jour.jour.non-travail>.contenu {
border: 0;
background-color: #badfff;
}
.jour>.nom {
width: 3em;
min-width: 3em;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.jour>.contenu,
.jour>.nom {
border: 1px solid #d5d5d5;
position: relative;
}
2024-05-17 15:23:29 +02:00
.jour>.contenu a {
padding: 0px 2px;
}
.jour>.nom {
text-align: center;
}
.sem-courante{
--couleur : #ee752c;
border-left: solid 3px var(--couleur);
border-right: solid 3px var(--couleur);
}
.highlight:hover{
border: solid 3px yellow;
}
</style>