recipes/backend/templates/calendar.html

87 lines
No EOL
3.1 KiB
HTML

<div class="calendar">
<div class="month-selector">
<div class="prev button">
<svg class="svg-arrow" aria-hidden="true" viewBox="0 0 1 1">
<polygon points="0.866,0 0.866,1 0,0.5" />
</svg>
</div>
<div>
<span class="year"></span>
{% for month in [
Sentence::CalendarJanuary,
Sentence::CalendarFebruary,
Sentence::CalendarMarch,
Sentence::CalendarApril,
Sentence::CalendarMay,
Sentence::CalendarJune,
Sentence::CalendarJuly,
Sentence::CalendarAugust,
Sentence::CalendarSeptember,
Sentence::CalendarOctober,
Sentence::CalendarNovember,
Sentence::CalendarDecember,
] %}
<span class="month">{{ context.tr.t(*month) }}</span>
{% endfor %}
</div>
<div class="next button">
<svg class="svg-arrow" aria-hidden="true" viewBox="0 0 1 1">
<polygon points="0,0 0.866,0.5 0,1" />
</svg>
</div>
</div>
<ul class="days">
{% let day_names = [
Sentence::CalendarMondayAbbreviation,
Sentence::CalendarTuesdayAbbreviation,
Sentence::CalendarWednesdayAbbreviation,
Sentence::CalendarThursdayAbbreviation,
Sentence::CalendarFridayAbbreviation,
Sentence::CalendarSaturdayAbbreviation,
Sentence::CalendarSundayAbbreviation,
] %}
{% for i in 0..7 %}
<li class="weekday">
{{ context.tr.t(*day_names[
(i + context.first_day_of_the_week().num_days_from_monday() as usize) % 7
]) }}
</li>
{% endfor %}
{% for i in 0..5 %}
{% for j in 0..7 %}
{# All days of the current selected month will have the class 'current-month' #}
<li id="day-grid-{{i}}{{j}}">
<div class="number"></div>
<div class="scheduled-recipes"></div>
</li>
{% endfor %}
{% endfor %}
</ul>
<div id="hidden-templates-calendar">
<div class="scheduled-recipe-with-link-and-remove"><a></a>
<span class="remove-scheduled-recipe button tooltip"><span class="tooltiptext">{{ context.tr.t(Sentence::CalendarUnschedule) }}</span></span>
</div>
<div class="scheduled-recipe"></div>
<div class="unschedule-confirmation">
<div>{{ context.tr.t(Sentence::CalendarUnscheduleConfirmation) }}</div>
<input
id="input-remove-ingredients-from-shopping-list"
type="checkbox"
checked
>
<label for="input-remove-ingredients-from-shopping-list">
{{ context.tr.t(Sentence::CalendarRemoveIngredientsFromShoppingList) }}
</label>
</div>
<span class="calendar-date-format">{{ context.tr.t(Sentence::CalendarDateFormat) }}</span>
</div>
</div>