danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Calendar: keep hero side panels >=10% wide + make Compact the default view

Browse source 
- The 2-3 'Next up' panels now floor at min-width 10%, so when one is expanded
  the others stay visibly selectable instead of collapsing to slivers (reset to
  0 in the mobile stacked layout).
- Compact is now the default calendar view (still overridable + remembered via
  localStorage).
This commit is contained in:
BoulderBadgeDad 2026-06-17 00:03:49 -07:00
parent 987cee7cb3
commit 6d63016566
3 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
webui/index.html
View file

@ -963,11 +963,11 @@
<button class="vcal-nav-btn" type="button" data-video-cal-next aria-label="Next week">&#8250;</button>
</div>
<div class="vcal-views" role="group" aria-label="View">
<button class="vcal-view-btn vcal-view-btn--on" type="button" data-video-cal-view="cards" title="Card view with episode art">
<button class="vcal-view-btn" type="button" data-video-cal-view="cards" title="Card view with episode art">
<svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><rect x="1" y="1" width="6" height="6" rx="1.6"/><rect x="9" y="1" width="6" height="6" rx="1.6"/><rect x="1" y="9" width="6" height="6" rx="1.6"/><rect x="9" y="9" width="6" height="6" rx="1.6"/></svg>
<span>Cards</span>
</button>
<button class="vcal-view-btn" type="button" data-video-cal-view="compact" title="Compact view — hide art to fit more episodes">
<button class="vcal-view-btn vcal-view-btn--on" type="button" data-video-cal-view="compact" title="Compact view — hide art to fit more episodes">
<svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><rect x="1" y="2.4" width="14" height="2.3" rx="1.1"/><rect x="1" y="6.85" width="14" height="2.3" rx="1.1"/><rect x="1" y="11.3" width="14" height="2.3" rx="1.1"/></svg>
<span>Compact</span>
</button>

2
webui/static/video/video-calendar.js
View file

@ -18,7 +18,7 @@
var MO = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var MO_FULL = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',
'September', 'October', 'November', 'December'];
var state = { loaded: false, eps: {}, data: null, offset: 0, filter: 'all', view: 'cards' };
var state = { loaded: false, eps: {}, data: null, offset: 0, filter: 'all', view: 'compact' };
function $(s) { return document.querySelector(s); }
function esc(s) {

4
webui/static/video/video-side.css
View file

@ -1754,7 +1754,7 @@ body[data-side="video"] #soulsync-toggle { display: none; }
/* "Next up" with 2-3 episodes → diagonal split panels; hover one to expand it */
.vcal-bb-multi { position: relative; display: flex; min-height: 306px; border-radius: 22px; overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 34px 90px rgba(0, 0, 0, 0.55); background: #08080c; }
.vcal-bb-panel { --vcal-h: 230; position: relative; flex: 1 1 0; flex-grow: 1; min-width: 0; overflow: hidden;
.vcal-bb-panel { --vcal-h: 230; position: relative; flex: 1 1 0; flex-grow: 1; min-width: 10%; overflow: hidden;
display: flex; align-items: flex-end; cursor: pointer;
clip-path: polygon(34px 0, 100% 0, calc(100% - 34px) 100%, 0 100%); margin-left: -34px;
transition: flex-grow 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
@ -1785,7 +1785,7 @@ body[data-side="video"] #soulsync-toggle { display: none; }
.vcal-bb-title { font-size: 30px; } .vcal-bb { min-height: 240px; }
/* stack the diagonal panels vertically on narrow screens */
.vcal-bb-multi { flex-direction: column; min-height: 0; }
.vcal-bb-panel, .vcal-bb-panel:first-child, .vcal-bb-panel:last-child { clip-path: none; margin-left: 0; min-height: 150px; }
.vcal-bb-panel, .vcal-bb-panel:first-child, .vcal-bb-panel:last-child { clip-path: none; margin-left: 0; min-width: 0; min-height: 150px; }
.vcal-bb-panel--lead, .vcal-bb-multi:hover .vcal-bb-panel, .vcal-bb-multi .vcal-bb-panel:hover { flex-grow: 1; }
.vcal-bb-panel .vcal-bb-sub, .vcal-bb-panel .vcal-bb-actions { opacity: 1; }
.vcal-bb-multi:hover .vcal-bb-panel:not(:hover)::after { opacity: 0; }