secstate/vrobbler
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[calendar] Make it responsive

Browse Source
This commit is contained in:
Colin Powell
2026-05-27 14:26:33 -04:00
parent 43d514cf5b
commit 389641002d
1 changed files with 26 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
vrobbler/templates/scrobbles/calendar.html
View File

@ -144,6 +144,32 @@ header.navbar { display: none !important; }
.calendar-footer a:hover {
color: #fff;
}
@media (max-width: 768px) {
.calendar-wrapper {
padding: 4px;
overflow-y: auto;
}
.calendar-grid {
grid-template-columns: 1fr;
}
.month-banner {
grid-column: 1;
font-size: 1.4rem;
padding: 12px 10px;
gap: 12px;
}
.month-banner a { font-size: 1.1rem; }
.day-header { display: none; }
.day-cell {
min-height: auto;
padding: 8px 10px;
border-bottom: 1px solid {{ month_color }}33;
}
.day-cell[style*="background:transparent"] { display: none; }
.day-number { margin-bottom: 2px; }
.calendar-footer { grid-column: 1; }
}
</style>
{% endblock %}
@ -164,8 +190,6 @@ header.navbar { display: none !important; }
{{ month_name }} {{ year }}
<a href="?date={{ next_month }}{% if active_filter %}&media_type={{ active_filter }}{% endif %}">&rarr;</a>
</div>
<div style="grid-column:1/-1;text-align:center;padding:4px 0;background:{{ month_color }};">
</div>
{% for name in day_names %}
<div class="day-header">{{ name }}</div>