[MPP-71] add remaining places in plains

This commit is contained in:
Nicolas Hislaire 2022-07-28 16:30:26 +02:00
parent 17a09c2005
commit c3b709693e
1 changed files with 18 additions and 4 deletions

View File

@ -9,7 +9,8 @@
<p>Semaine du {{ week.monday|date:"d F Y" }}</p>
{% for activity in week.activities %}
<div id="{{ activity.id }}" class="activity">
{{ activity.text }}
<p class="label">{{ activity.text }}</p>
<p class="remaining_places"><span>{{ activity.remaining_places }}</span> places restantes</p>
</div>
{% endfor %}
</div>
@ -71,6 +72,9 @@ $(function(){
transition: box-shadow 0.3s ease-in-out;
height: 8ex;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.activity:hover {
box-shadow: rgb(0 0 0 / 10%) 0px 10px 15px -3px, rgb(0 0 0 / 5%) 0px 4px 6px -2px;
@ -81,13 +85,23 @@ $(function(){
.activity:active {
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}
.activity.selected {
background-color: #386ede;
font-weight: bold;
color: #FFF;
}
.activity.selected:after {
.activity p {
margin: 0;
}
.activity p.label {
font-weight: bold;
}
.activity p.remaining_places {
font-size: 0.8em;
}
.activity p.remaining_places span {
font-weight: bold;
}
.activity.selected p.label:after {
content: " \002714";
}
</style>