Scarriffle/Calendarr
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: Monatszelle am Monatswechsel nicht mehr vertikal zentriert

Browse Source 
Mein voriges flex/align-center hat "1 JUN" in die Mitte der ganzen Zelle
geschoben. Jetzt: Tageszahl bleibt oben links (wie alle Tage), Monatskürzel
sitzt klein/dezent inline daneben (cell-day inline-flex + kleiner Marker).
Version v38.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-05-31 19:00:53 +02:00
parent a992d97796
commit 8d605ab2cd
3 changed files with 13 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/css/app.css
View File

@@ -582,7 +582,8 @@ a { color: var(--primary); text-decoration: none; }
.cell-day {
font-size: 12px; font-weight: 500; color: var(--text-2);
width: 26px; height: 26px;
display: flex; align-items: center; justify-content: center;
display: inline-flex; align-items: center; justify-content: center;
vertical-align: top;
border-radius: 50%; flex-shrink: 0;
}
.cell-day.today { background: var(--today-color); color: #fff; font-weight: 700; }
@@ -591,13 +592,8 @@ a { color: var(--primary); text-decoration: none; }
.month-col {
position: relative; /* anchor for divider pseudo-elements */
}
.month-col.first-of-month {
display: flex;
flex-direction: row; /* "1 JUN" inline — keeps the header height uniform */
align-items: center;
gap: 6px;
padding-top: 4px;
}
/* first-of-month keeps the normal block layout (number top-left); the month
label sits inline next to the number via .cell-day/.month-marker below. */
/* Dividers via pseudo-elements so they render above events (z-index 2) */
.month-col.month-divider-left::before {
content: '';
@@ -641,14 +637,14 @@ a { color: var(--primary); text-decoration: none; }
pointer-events: none;
}
.month-marker {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
font-size: 11px;
font-weight: 600;
text-transform: none;
letter-spacing: .3px;
color: var(--month-label-color, #7090c0);
line-height: 1;
padding: 0;
margin: 0;
line-height: 26px; /* align with the day-number circle */
margin-left: 4px;
vertical-align: top;
position: relative;
z-index: 3; /* above events overlay (z-index 2) */
}

2
frontend/js/version.js
View File

@@ -1,2 +1,2 @@
// Increment APP_VERSION with every code change
export const APP_VERSION = 'v37';
export const APP_VERSION = 'v38';

2
frontend/js/views/month.js
View File

@@ -149,7 +149,7 @@ export function renderMonth(container, currentDate, events, onDayClick, onEventC
if (monthChangeIdx > 0 && idx < monthChangeIdx) dividerClasses.push('month-divider-bottom');
const dividerCls = dividerClasses.join(' ');
const monthLabel = isFirstOfMonth
? `<div class="month-marker">${monthsShort[cell.getMonth()]}</div>`
? `<span class="month-marker">${monthsShort[cell.getMonth()]}</span>`
: '';
colsHtml += `<div class="month-col ${todayCls} ${otherCls} ${selectedCls} ${firstCls} ${dividerCls}" data-date="${key}">
<div class="cell-day ${numCls}">${cell.getDate()}</div>