weekly_agenda: improve styles and readability (#77935) #107

Merged
tjund merged 1 commits from wip/77935-weekly-agenda into main 2023-05-30 15:41:29 +02:00
2 changed files with 97 additions and 97 deletions

View File

@ -1,100 +1,100 @@
.weekly-agenda-cell {
margin-top: 1em;
$day-backgound:hsla(0, 0%, 0%, 0.07);
$font-soft: hsla(0, 0%, 0%, 0.6);
display: grid;
grid-template-columns: repeat(3, auto);
grid-template-rows: repeat(2, auto);
justify-items: left;
--min-column-width: 250;
}
.weekly-agenda-cell--previous-week,
.weekly-agenda-cell--next-week {
height: 3em;
width: 3em;
}
.weekly-agenda-cell--next-week {
margin-left: 1rem;
}
.weekly-agenda-cell--edit-btn {
grid-column: 2;
grid-row: 2;
}
.weekly-agenda-cell--week-list {
overflow: hidden;
margin-bottom: 2rem;
width: 100%;
}
.weekly-agenda-cell--slider {
column-gap: 0px;
display: grid;
grid-auto-columns: 0px;
grid-auto-rows: 0px;
grid-auto-flow: column;
position: relative;
}
.weekly-agenda-cell--week-item:nth-child(even) {
background: #fafafa;
}
.weekly-agenda-cell--week-title {
border-bottom: 1px solid #888;
font-weight: bold;
margin-bottom: 1rem;
display: flex;
justify-content: center;
align-items: center;
height: 3.2rem;
}
.weekly-agenda-cell--day-item {
margin: 0 1rem;
}
.weekly-agenda-cell--day-title {
border-bottom: 1px solid #888;
margin: 1rem 0;
font-weight: bold;
}
.weekly-agenda-cell--day-no-activity {
color: #888;
}
.weekly-agenda-cell--activity-item {
display: flex;
align-items: baseline;
margin: 0.3rem 0;
&+ .weekly-agenda-cell--day-no-activity {
display: none;
& &--previous-week,
& &--next-week {
height: 3em;
width: 3em;
}
&.disabled {
color: #888;
& &--previous-week {
margin-right: 1rem;
}
& &--next-week {
margin-left: 1rem;
margin-right: 0;
}
& &--edit-btn {
grid-column: 2;
grid-row: 2;
}
& &--week-list {
overflow: hidden;
margin-bottom: 2rem;
width: 100%;
}
& &--slider {
column-gap: 0;
display: grid;
grid-auto-columns: 0;
grid-auto-rows: 0;
grid-auto-flow: column;
}
& &--week-title {
font-size: 1rem;
padding: 0 1rem;
margin: 0;
}
& &--day-item {
display: flex;
flex-direction: column;
margin: 0 2px;
}
& &--day-title {
font-variant-caps: all-small-caps;
padding: 0.5rem 1rem;
margin: 0;
margin-top: 4px;
background-color: $day-backgound;
color: $font-soft;
font-weight: 500;
}
& &--day-no-activity {
padding: 0.3rem 1rem;
color: $font-soft;
background-color: $day-backgound;
flex-grow: 1;
font-style: italic;
}
& &--activity-item {
margin: 0.16rem 1rem;
display: flex;
align-items: baseline;
&+ .weekly-agenda-cell--day-no-activity {
display: none;
}
&.disabled {
color: $font-soft;
}
}
& &--activity-status {
min-height: calc(0.66rem + 2px);
min-width: calc(0.66rem + 2px);
background: white;
border: 1px solid #aaa;
border-radius: 2px;
margin-right: 1rem;
&.booked {
background: green;
}
&.cancelled {
background: yellow;
}
&.absence {
background: red;
}
}
& &--activity-label {
flex-grow: 1;
}
}
.weekly-agenda-cell--activity-status {
min-height: calc(0.66rem + 2px);
min-width: calc(0.66rem + 2px);
background: transparent;
border: 1px solid #aaa;
border-radius: 2px;
margin-right: 1rem;
&.booked {
background: green;
}
&.cancelled {
background: yellow;
}
&.absence {
background: red;
}
}
.weekly-agenda-cell--activity-label {
flex-grow: 1;
}

View File

@ -3,12 +3,12 @@
{% if json.data %}
{% if cell.title %}
<h2>
<h2 class="cell--title">
{{ cell.title }}
</h2>
{% endif %}
<div class="weekly-agenda-cell weekly-agenda-cell-{{ cell.pk }}" data-cell-id="{{ cell.pk }}">
<div class="weekly-agenda-cell weekly-agenda-cell-{{ cell.pk }} cell--body" data-cell-id="{{ cell.pk }}">
{% with first_monday=json.data.0.date|date|adjust_to_week_monday last_item=json.data|last %}
{% with last_day=last_item.date|date|adjust_to_week_monday|add_days:6 %}
{% now 'W' as current_week %}
@ -19,16 +19,16 @@
{% for day in first_monday|iterate_days_until:last_day %}
{% if day.weekday == 0 %}
{% with sunday=day|add_days:6 %}
<div class="weekly-agenda-cell--week-title {% if current_week == day|date:'W' %}current{% endif %}"
{% if booking_form_url %}data-edit-url="{{ booking_form_url }}{% if '?' in booking_form_url %}&{% else %}?{% endif %}current={{ day|adjust_to_week_monday|date:'Y-m-d' }}"{% endif %}>
<h3 class="weekly-agenda-cell--week-title {% if current_week == day|date:'W' %}current{% endif %}"
{% if booking_form_url %}data-edit-url="{{ booking_form_url }}{% if '?' in booking_form_url %}&{% else %}?{% endif %}current={{ day|adjust_to_week_monday|date:'Y-m-d' }}"{% endif %}>
{% blocktrans with day_date=day|date:'d/m' sunday_date=sunday|date:'d/m' %}Week<br class="weekbreak"> of {{ day_date }} to {{ sunday_date }}{% endblocktrans %}
</div>
</h3>
{% endwith %}
{% endif %}
<div class="weekly-agenda-cell--day-item" data-weekday="{{ day.weekday }}">
<div class="weekly-agenda-cell--day-title" >
<h4 class="weekly-agenda-cell--day-title" >
{{ day|date:"l d/m" }}
</div>
</h4>
{% with day_str=day|date:"Y-m-d" %}
{% for item in json.data %}
{% if item.date == day_str %}