diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts index 5ccd3471..0a095514 100644 --- a/src/locales/en-US.ts +++ b/src/locales/en-US.ts @@ -1194,6 +1194,7 @@ export default { currentEpisodeNotInLibrary: 'Current not in library', libraryUpdatedAt: 'Updated {time}', libraryUpdatedAtShort: '{time}', + expandDayEvents: 'Show {count} more items for this day', }, storage: { name: 'Name', diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts index 4b185bcb..233b6bbb 100644 --- a/src/locales/zh-CN.ts +++ b/src/locales/zh-CN.ts @@ -1189,6 +1189,7 @@ export default { currentEpisodeNotInLibrary: '本集未入库', libraryUpdatedAt: '最近更新 {time}', libraryUpdatedAtShort: '{time}', + expandDayEvents: '展开当天剩余 {count} 个条目', }, storage: { name: '名称', diff --git a/src/locales/zh-TW.ts b/src/locales/zh-TW.ts index 1fc8ef00..69952b9c 100644 --- a/src/locales/zh-TW.ts +++ b/src/locales/zh-TW.ts @@ -1189,6 +1189,7 @@ export default { currentEpisodeNotInLibrary: '本集未入庫', libraryUpdatedAt: '最近更新 {time}', libraryUpdatedAtShort: '{time}', + expandDayEvents: '展開當天剩餘 {count} 個條目', }, storage: { name: '名稱', diff --git a/src/views/subscribe/FullCalendarView.vue b/src/views/subscribe/FullCalendarView.vue index 0db0acd9..3de45c81 100644 --- a/src/views/subscribe/FullCalendarView.vue +++ b/src/views/subscribe/FullCalendarView.vue @@ -1,5 +1,5 @@ @@ -679,6 +797,38 @@ onActivated(() => { overflow: hidden; } +.calendar-day-events { + display: flex; + flex-direction: column; + gap: 0.3rem; + inline-size: 100%; +} + +.calendar-expand-card { + display: flex; + gap: 0.35rem; + align-items: center; + justify-content: center; + min-block-size: 2.1rem; + border: 1px dashed rgba(var(--v-theme-primary), 0.44); + border-radius: 8px; + background: rgba(var(--v-theme-primary), 0.08); + color: rgb(var(--v-theme-primary)); + cursor: pointer; + font-size: 0.78rem; + font-weight: 700; + inline-size: 100%; + padding: 0; +} + +.calendar-expand-card:hover { + background: rgba(var(--v-theme-primary), 0.14); +} + +.calendar-expand-count { + line-height: 1; +} + .calendar-event-poster { position: relative; flex: 0 0 56px; @@ -828,10 +978,27 @@ onActivated(() => { } @media (width <= 1279px) { + .calendar-day-events { + align-items: center; + } + + .calendar-event-card, .fc-daygrid-event-harness { display: flex; align-items: center; justify-content: center; } + + .calendar-expand-card { + flex-direction: column; + gap: 0.12rem; + min-block-size: 0; + block-size: clamp(60px, 8.7vw, 96px); + inline-size: clamp(40px, 5.8vw, 64px); + } + + .calendar-expand-count { + font-size: 0.68rem; + } }