ScoDoc/app/templates/calendrier.j2

79 lines
1.7 KiB
Plaintext
Raw Normal View History

<div class="calendrier">
{% for mois,jours in calendrier.items() %}
<div class="mois">
<h3>{{mois}}</h3>
<div class="jours">
{% for jour in jours %}
<div class="jour {{jour.get_class()}}">
<span class="nom">{{jour.get_nom()}}</span>
<div class="contenu">
{{jour.get_html() | safe}}
</div>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
<style>
.calendrier {
display: flex;
justify-content: center;
overflow-x: scroll;
border: 1px solid #444;
border-radius: 12px;
margin-bottom: 12px;
}
.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 {
text-align: center;
border: 1px solid #d5d5d5;
position: relative;
}
.sem-courante{
--couleur : #ee752c;
border-left: solid 3px var(--couleur);
border-right: solid 3px var(--couleur);
}
</style>