weekly_agenda: improve styles and readability (#77935) #107
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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 %}
|
||||
|
|
Loading…
Reference in New Issue