gburri/recipes
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

Use svg for arrows in calendar

Browse source
This commit is contained in:
Greg Burri 2025-05-22 02:20:12 +02:00
parent 5a314ffbec
commit 03f74e76ca
2 changed files with 27 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

16
backend/scss/calendar.scss
View file

@ -9,6 +9,22 @@
width: 100%;
font-weight: bold;
.prev.button,
.next.button {
.svg-arrow {
display: block;
margin: consts.$margin calc(consts.$margin / 2);
fill: consts.$link-color;
width: 0.8rem;
height: 0.8rem;
}
&:hover .svg-arrow {
fill: consts.$link-hover-color;
}
}
.prev {
float: left;
}

13
backend/templates/calendar.html
View file

@ -1,6 +1,10 @@
<div class="calendar">
<div class="month-selector">
<div class="prev button">⯇</div>
<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>
@ -22,7 +26,11 @@
{% endfor %}
</div>
<div class="next button">⯈</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="weekdays">
@ -49,6 +57,7 @@
<ul class="days">
{% 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>