Change settings

src/views/LiveView.vue

@@ -28,47 +28,58 @@
 
     <!-- Cards: Buy & Hold + top 4 agents (computed with perf helpers) -->
     <section class="panel panel--cards" v-if="cards.length">
-      <div class="cards5">
+      <div class="cards-grid">
         <div
           v-for="c in cards"
           :key="c.key"
-          class="card"
-          :class="{ 'card--bh': c.kind==='bh', 'card--winner': c.isWinner }"
+          class="card2"
+          :class="{ 'is-bh': c.kind==='bh', 'is-winner': c.isWinner }"
         >
-          <!-- HEADER (responsive) -->
-          <div class="card__header">
-            <div class="card__logo">
+          <!-- WINNER RIBBON -->
+          <div v-if="c.isWinner" class="card2__ribbon" aria-label="Top performer">👑</div>
+
+          <!-- TOP ROW: avatar + titles + primary metric -->
+          <div class="card2__row card2__row--top">
+            <div class="avatar">
               <img v-if="c.logo" :src="c.logo" alt="" />
-              <div v-else class="card__logo-fallback"></div>
-              <span v-if="c.isWinner" class="card__badge" aria-label="Top performer">👑</span>
+              <div v-else class="avatar__fallback" aria-hidden="true"></div>
             </div>
 
-            <div class="card__title-wrap">
-              <div class="card__title" :title="c.title">{{ c.title }}</div>
-              <div class="card__subtitle" :title="c.subtitle">{{ c.subtitle }}</div>
+            <div class="titles">
+              <div class="title" :title="c.title">{{ c.title }}</div>
+              <div class="subtitle" :title="c.subtitle">{{ c.subtitle }}</div>
             </div>
 
-            <div class="card__balance">{{ fmtUSD(c.balance) }}</div>
+            <div class="metrics">
+              <div class="primary">
+                <div class="primary__label">Balance</div>
+                <div class="primary__value">{{ fmtUSD(c.balance) }}</div>
+              </div>
+              <div class="delta" v-if="c.kind==='agent' && c.gapUsd != null">
+                <span
+                  class="delta__value"
+                  :class="{ neg: c.gapUsd < 0 && !c.isWinner, pos: c.gapUsd >= 0 || c.isWinner }"
+                >
+                  <template v-if="mode==='usd'">{{ signedMoney(c.gapUsd) }}</template>
+                  <template v-else>{{ signedPct(c.gapPct) }}</template>
+                </span>
+                <span class="delta__label">vs B&H</span>
+              </div>
+            </div>
           </div>
 
-          <!-- META -->
-          <div class="card__meta">
-            <div class="meta__left">
-              <div v-if="c.kind==='bh'" class="pill pill--neutral">Buy&nbsp;&amp;&nbsp;Hold</div>
-              <div v-else class="pill pill--outline">Strategy</div>
-            </div>
-            <div class="meta__right" v-if="c.kind==='agent' && c.gapUsd != null">
-              <div class="pill" :class="{ neg: c.gapUsd < 0 && !c.isWinner, pos: c.gapUsd >= 0 || c.isWinner }">
-                <span v-if="mode==='usd'">{{ signedMoney(c.gapUsd) }}</span>
-                <span v-else>{{ signedPct(c.gapPct) }}</span>
-              </div>
+          <!-- META ROW: type chip -->
+          <div class="card2__row card2__row--meta">
+            <div class="chips">
+              <span v-if="c.kind==='bh'" class="chip chip--neutral">Buy & Hold</span>
+              <span v-else class="chip chip--outline">Strategy</span>
             </div>
-            <div class="meta__right" v-else></div>
           </div>
 
-          <!-- FOOTER -->
-          <div class="card__footer">
-            <div class="card__foot">EOD {{ c.date ? new Date(c.date).toLocaleDateString() : '–' }}</div>
+          <!-- FOOTER: date -->
+          <div class="card2__row card2__row--foot">
+            <div class="foot__left"></div>
+            <div class="foot__right">EOD {{ c.date ? new Date(c.date).toLocaleDateString() : '–' }}</div>
           </div>
         </div>
       </div>
@@ -305,97 +316,93 @@ watch(
 /* empty */
 .empty { padding: 14px; border: 1px dashed #D6DAE1; border-radius: 12px; color: #6B7280; font-size: .92rem; }
 
-/* grid of 5 cards */
-.cards5 { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
-@media (max-width: 1280px) { .cards5 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
-@media (max-width: 960px)  { .cards5 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
-@media (max-width: 640px)  { .cards5 { grid-template-columns: 1fr; } }
+/* NEW GRID: fluid, auto-fit tiles */
+.cards-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
 
-/* card shell */
-.card {
+/* CARD v2 */
+.card2 {
+  position: relative;
   display: grid;
-  grid-template-rows: auto auto auto; /* header, meta, footer */
-  gap: 10px;
-  padding: 12px 14px;
+  grid-template-rows: auto auto auto; /* rows: top, meta, foot */
+  gap: 12px;
+  padding: 14px;
   border: 1px solid #EEF1F6;
   border-radius: 14px;
   background: #fff;
   box-shadow: 0 1px 2px rgba(0,0,0,.04);
-  min-width: 0; /* allow truncation inside */
+  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
 }
-.card--bh { outline: 2px dashed rgba(15,23,42,.08); }
-.card--winner { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
-
-/* HEADER — responsive grid areas
-   wide:  "logo title balance"
-   tight: "logo title balance"
-           "logo .     balance"
-*/
-.card__header {
-  display: grid;
-  grid-template-columns: 48px minmax(0,1fr) auto;
-  grid-template-areas: "logo title balance";
-  align-items: center;
+.card2:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
+.card2.is-bh { outline: 2px dashed rgba(15,23,42,.08); }
+.card2.is-winner { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
+
+/* ribbon */
+.card2__ribbon { position: absolute; top: 10px; right: 10px; font-size: 18px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
+
+/* row layout */
+.card2__row { display: grid; align-items: center; }
+.card2__row--top {
+  grid-template-columns: 48px minmax(0,1fr) auto; /* avatar | titles | metrics */
   column-gap: 12px;
-  row-gap: 6px;
-}
-@media (max-width: 1200px) {
-  .card__header {
-    grid-template-areas:
-      "logo title balance"
-      "logo .     balance"; /* lets balance move down, title gets more space */
-  }
 }
+.card2__row--meta { grid-template-columns: 1fr; }
+.card2__row--foot { grid-template-columns: 1fr auto; font-size: 12px; color: #5B6476; opacity: .9; margin-top: -4px; }
 
-/* logo */
-.card__logo { grid-area: logo; width: 44px; height: 44px; border-radius: 999px; background: #F3F4F6;
-  display: grid; place-items: center; overflow: hidden; position: relative; }
-.card__logo img { width: 100%; height: 100%; object-fit: contain; }
-.card__logo-fallback { width: 60%; height: 60%; border-radius: 999px; background: #E5E7EB; }
-.card__badge { position: absolute; right: -6px; top: -6px; font-size: 16px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
+/* avatar */
+.avatar { width: 44px; height: 44px; border-radius: 999px; background: #F3F4F6; display: grid; place-items: center; overflow: hidden; }
+.avatar img { width: 100%; height: 100%; object-fit: contain; }
+.avatar__fallback { width: 60%; height: 60%; border-radius: 999px; background: #E5E7EB; }
 
-/* title block */
-.card__title-wrap { grid-area: title; min-width: 0; display: grid; gap: 2px; }
-.card__title {
+/* titles */
+.titles { min-width: 0; display: grid; gap: 2px; }
+.title {
   font-weight: 800; color: #0F172A; line-height: 1.15;
-  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; /* 2-line clamp */
-  overflow: hidden;
-  font-size: clamp(16px, 1.6vw, 19px);
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+  overflow: hidden; font-size: clamp(16px, 1.4vw, 18px);
 }
-.card__subtitle {
-  font-size: 12px; color: #5B6476; opacity: .85; line-height: 1.1;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+.subtitle { font-size: 12px; color: #5B6476; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* primary metric */
+.primary { text-align: right; }
+.primary__label { font-size: 11px; letter-spacing: .02em; color: #6B7280; }
+.primary__value { font-weight: 900; color: #0F172A; font-size: clamp(18px, 1.8vw, 22px); white-space: nowrap; }
+
+/* metrics wrapper (balance + delta in same row) */
+.metrics { display: flex; align-items: baseline; gap: 12px; justify-content: flex-end; }
+
+/* chips & delta */
+.chips { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.chip { padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; background: #EEF2F7; color: #0F172A; }
+.chip--neutral { background: #EEF2F7; color: #0F172A; }
+.chip--outline { background: transparent; color: #475569; border: 1px solid #E5E7EB; padding: 3px 8px; }
+
+.delta { display: flex; align-items: baseline; gap: 8px; }
+.delta__value { padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; background: #EEF2F7; color: #0F172A; }
+.delta__value.pos { background: #DCFCE7; color: #166534; }
+.delta__value.neg { background: #FEE2E2; color: #B91C1C; }
+.delta__label { font-size: 11px; color: #64748B; }
+.chips { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.chip { padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; background: #EEF2F7; color: #0F172A; }
+.chip--neutral { background: #EEF2F7; color: #0F172A; }
+.chip--outline { background: transparent; color: #475569; border: 1px solid #E5E7EB; padding: 3px 8px; }
+
+.delta { display: flex; align-items: baseline; gap: 8px; }
+.delta__value { padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; background: #EEF2F7; color: #0F172A; }
+.delta__value.pos { background: #DCFCE7; color: #166534; }
+.delta__value.neg { background: #FEE2E2; color: #B91C1C; }
+.delta__label { font-size: 11px; color: #64748B; }
+
+/* foot */
+.foot__right { white-space: nowrap; }
+
+/* responsive nits */
+@media (max-width: 1200px) {
+  .card2__row--top { grid-template-columns: 44px minmax(0,1fr) auto; }
 }
-
-/* balance (never wraps; can move to its own row on tight cards) */
-.card__balance {
-  grid-area: balance;
-  white-space: nowrap;
-  font-weight: 900; color: #0F172A;
-  font-size: clamp(18px, 1.9vw, 22px);
-  align-self: start;
+@media (max-width: 960px) {
+  .primary__value { font-size: 20px; }
 }
-
-/* meta row */
-.card__meta {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  align-items: center;
-  gap: 10px;
-}
-.meta__left, .meta__right { min-width: 0; display: flex; align-items: center; gap: 8px; }
-
-/* footer */
-.card__footer { margin-top: -2px; }
-.card__foot { font-size: 12px; color: #5B6476; opacity: .85; }
-
-/* pills */
-.pill {
-  padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 800;
-  line-height: 1; white-space: nowrap; background: #EEF2F7; color: #0F172A;
+@media (max-width: 640px) {
+  .cards-grid { grid-template-columns: 1fr; }
 }
-.pill.pos { background: #DCFCE7; color: #166534; }
-.pill.neg { background: #FEE2E2; color: #B91C1C; }
-.pill--neutral { background: #EEF2F7; color: #0F172A; }
-.pill--outline { background: transparent; color: #475569; border: 1px solid #E5E7EB; padding: 3px 8px; }
 </style>