`public/panels/board.html`

58 lines
<div class="board-toolbar">
  <div class="muted" style="font-size:12.5px">Live streams across every channel — scheduled, staged &amp; published. Scroll sideways for more channels.</div>
  <div class="board-controls">
    <label class="muted" style="font-size:12px">Sort
      <select id="bd-sort" style="width:auto;font-size:12px">
        <option value="newest">Newest</option>
        <option value="oldest">Oldest</option>
      </select>
    </label>
    <label class="muted" style="font-size:12px">Width
      <input id="bd-width" type="range" min="240" max="420" step="10" value="300" style="vertical-align:middle">
    </label>
    <a class="btn gold" href="#composer" style="text-decoration:none;font-size:12.5px;padding:6px 12px">✍️ Compose</a>
    <button class="btn ghost" id="bd-clear" style="font-size:12.5px;padding:6px 12px" title="Remove staged / pending / failed cards (keeps posted history)">🗑 Clear staged</button>
    <button class="btn ghost" id="bd-refresh" style="font-size:12.5px;padding:6px 12px">↻ Refresh</button>
  </div>
</div>

<div id="bd-board" class="board-scroll"><div class="loading">Loading streams…</div></div>

<style>
  .board-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
  .board-controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  /* Horizontal column rail — the Hootsuite signature */
  .board-scroll{display:flex;gap:16px;overflow-x:auto;padding-bottom:14px;align-items:flex-start;
    scroll-snap-type:x proximity}
  .bd-col{flex:0 0 var(--bd-w,300px);width:var(--bd-w,300px);background:var(--card,#fff);
    border:1px solid var(--line,#e7e1d6);border-radius:14px;display:flex;flex-direction:column;
    max-height:calc(100vh - 210px);scroll-snap-align:start;box-shadow:0 1px 3px rgba(0,0,0,.04)}
  .bd-col.soon{opacity:.72}
  .bd-colhead{padding:12px 14px;border-bottom:1px solid var(--line,#e7e1d6);position:sticky;top:0;
    background:var(--card,#fff);border-radius:14px 14px 0 0;z-index:1}
  .bd-colhead .row1{display:flex;align-items:center;gap:8px}
  .bd-colhead .ico{font-size:18px}
  .bd-colhead .nm{font-weight:700;font-size:13.5px;color:var(--ink,#2a2620);flex:1;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bd-colhead .cnt{font-size:11px;color:var(--mut,#8a8170);font-weight:600}
  .bd-pill{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;margin-top:7px}
  .bd-pill.on{background:#e3efe0;color:#3a6b3a}
  .bd-pill.off{background:#f3e9e9;color:#9a5a5a}
  .bd-pill.stage{background:#eef3f8;color:#3a5a8a}
  .bd-pill.soon{background:#f5efe2;color:#8a6a2a}
  .bd-body{padding:10px;overflow-y:auto;display:flex;flex-direction:column;gap:9px;flex:1}
  .bd-card{border:1px solid var(--line,#ece6da);border-radius:10px;padding:9px 10px;background:#fdfcf9}
  .bd-card .when{font-size:10.5px;color:var(--mut,#8a8170);margin-bottom:4px}
  .bd-card .txt{font-size:12.5px;color:var(--ink,#2a2620);line-height:1.4;word-break:break-word}
  .bd-card .media{margin-top:7px;width:100%;height:120px;object-fit:cover;border-radius:7px;display:block;background:#f0ece3}
  .bd-card .foot{display:flex;justify-content:space-between;align-items:center;margin-top:7px;gap:6px}
  .bd-status{font-size:9.5px;font-weight:700;padding:1px 7px;border-radius:999px}
  .bd-status.posted{background:#e3efe0;color:#3a6b3a}
  .bd-status.failed{background:#f6dede;color:#9a3a3a}
  .bd-status.pending,.bd-status.staged{background:#eef3f8;color:#3a5a8a}
  .bd-status.draft{background:#f5efe2;color:#8a6a2a}
  .bd-empty{font-size:12px;color:var(--mut,#8a8170);text-align:center;padding:22px 8px;font-style:italic}
  .bd-metric{font-size:11px;color:var(--mut,#8a8170)}
  .bd-soonmsg{font-size:12px;color:var(--mut,#8a8170);text-align:center;padding:26px 12px;line-height:1.5}
</style>