openvibers/openvibe.live Commits
Home hero board: fold rewards into Points Spent (7-up rows), hide empty board, mobile label room
Changes
@@@ -2213,7 +2213,8 @@ body.egg-rainbow { animation: eggRainbow 2.6s linear; }.hero-stat-kicker i { color: var(--accent); font-size: 0.8rem; opacity: 0.9; }/* auto-fit: a row with fewer chips stretches them to the board edge instead ofleaving a ragged gap — every row reads as one full-width band. */--.hero-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }++.hero-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 8px; }++.hero-stats:empty { display: none; }.hero-stat--spark { grid-column: span 2; flex-direction: column; align-items: stretch; gap: 3px; padding: 7px 12px 6px; color: var(--accent); }.hero-stat--spark svg { display: block; width: 100%; height: 30px; opacity: 0.9; }@@@ -2323,6 +2324,8 @@ a.pulse-card:hover { border-color: var(--accent); transform: translateY(-2px); }.hero-stat-kicker { padding-left: 10px; border-left-width: 2px; }.hero-stat-row { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px; margin-left: 10px; }.hero-stat { padding: 7px 9px; gap: 7px; }++ .hero-stat > i { display: none; } /* icons cost the room labels need at 3-up */++ .hero-stat-label { white-space: normal; line-height: 1.1; }.hero-stat-num { font-size: 1.05rem; }.hero-float { border-radius: 10px; }}@@@ -62,7 +62,7 @@</script><!-- Stylesheets -->-- <link rel="stylesheet" href="/css/style.css?v=139">++ <link rel="stylesheet" href="/css/style.css?v=140"><link rel="stylesheet" href="/css/chat-shared.css?v=1"><link rel="stylesheet" href="/css/broadcast.css?v=11"><link rel="stylesheet" href="/css/cosmetics.css?v=2">@@@ -5021,7 +5021,7 @@ curl -s https://openvibe.media/live/@Goosely/chat-insight.json | jq ".chat_insig<!-- Scripts --><script src="/js/theme-engine.js?v=4"></script><script src="/live-notify.js?v=3" defer></script>--<script src="/js/app.js?v=131" defer></script>++<script src="/js/app.js?v=132" defer></script><script src="/js/stream-player.js?v=21" defer></script><script src="/js/stream-pip.js?v=1" defer></script><script src="/js/chat-shared.js?v=3" defer></script>@@@ -1264,8 +1264,7 @@ function renderHeroStats(stats) {{ icon: 'fa-cart-shopping', num: stats.vibesBought, label: 'Vibes Bought', title: 'Vibes purchased with real money (PowerChat, card, PayPal, crypto)', recent: R.vibesBought },{ icon: 'fa-star', num: stats.activeSubs, label: 'Subs', title: 'Active channel subscriptions', recent: R.subs },{ icon: 'fa-coins', num: stats.pointsEarned, label: 'Points Earned', title: 'Channel points earned by viewers (watching, chatting, following)', recent: R.points },-- { icon: 'fa-gift', num: stats.pointsSpent, label: 'Points Spent', title: 'Channel points spent on rewards', recent: R.pointsSpent },-- { icon: 'fa-ticket', num: stats.redemptions, label: 'Rewards', title: 'Channel reward redemptions', recent: R.redemptions },++ { icon: 'fa-gift', num: stats.pointsSpent, label: 'Points Spent', title: `Channel points spent on rewards · ${_fmtCount(stats.redemptions || 0)} rewards redeemed`, recent: R.pointsSpent, sub: stats.redemptions ? `${_fmtCount(stats.redemptions)} rewards` : '' },{ icon: 'fa-bullseye', num: stats.goalsActive, label: 'Goals', title: `Donation goals running now · ${stats.goalsReached || 0} reached so far`, sub: stats.goalsReached ? `${_fmtCount(stats.goalsReached)} reached` : '' },],});@@@ -7,7 +7,7 @@<!-- Keep these in step with index.html — the popout renders the same chatcomponents (cosmetics.css positions particle effects; without it they sitinline next to the username as "broken badges" until their cleanup timer). -->-- <link rel="stylesheet" href="/css/style.css?v=139">++ <link rel="stylesheet" href="/css/style.css?v=140"><link rel="stylesheet" href="/css/chat-shared.css?v=1"><link rel="stylesheet" href="/css/cosmetics.css?v=2"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">@@@ -226,7 +226,7 @@<!-- Chat feature scripts — mirror index.html so the popout has full parity.Order: dependencies (app/emotes/gif/uploads/coins/bucks/cosmetics) before chat.js. -->-- <script src="/js/app.js?v=131"></script>++ <script src="/js/app.js?v=132"></script><script src="/js/emotes.js?v=8"></script><script src="/js/gif-picker.js?v=1"></script><script src="/js/channel-uploads.js?v=12"></script>
@@ -2213,7 +2213,8 @@ body.egg-rainbow { animation: eggRainbow 2.6s linear; }
@@ -2213,7 +2213,8 @@ body.egg-rainbow { animation: eggRainbow 2.6s linear; }
.hero-stat-kicker i { color: var(--accent); font-size: 0.8rem; opacity: 0.9; }
.hero-stat-kicker i { color: var(--accent); font-size: 0.8rem; opacity: 0.9; }
/* auto-fit: a row with fewer chips stretches them to the board edge instead of
/* auto-fit: a row with fewer chips stretches them to the board edge instead of
leaving a ragged gap — every row reads as one full-width band. */
leaving a ragged gap — every row reads as one full-width band. */
-.hero-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
+.hero-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 8px; }
+.hero-stats:empty { display: none; }
.hero-stat--spark { grid-column: span 2; flex-direction: column; align-items: stretch; gap: 3px; padding: 7px 12px 6px; color: var(--accent); }
.hero-stat--spark { grid-column: span 2; flex-direction: column; align-items: stretch; gap: 3px; padding: 7px 12px 6px; color: var(--accent); }
.hero-stat--spark svg { display: block; width: 100%; height: 30px; opacity: 0.9; }
.hero-stat--spark svg { display: block; width: 100%; height: 30px; opacity: 0.9; }
@@ -2323,6 +2324,8 @@ a.pulse-card:hover { border-color: var(--accent); transform: translateY(-2px); }
@@ -2323,6 +2324,8 @@ a.pulse-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.hero-stat-kicker { padding-left: 10px; border-left-width: 2px; }
.hero-stat-kicker { padding-left: 10px; border-left-width: 2px; }
.hero-stat-row { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px; margin-left: 10px; }
.hero-stat-row { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px; margin-left: 10px; }
.hero-stat { padding: 7px 9px; gap: 7px; }
.hero-stat { padding: 7px 9px; gap: 7px; }
+ .hero-stat > i { display: none; } /* icons cost the room labels need at 3-up */
+ .hero-stat-label { white-space: normal; line-height: 1.1; }
.hero-stat-num { font-size: 1.05rem; }
.hero-stat-num { font-size: 1.05rem; }
.hero-float { border-radius: 10px; }
.hero-float { border-radius: 10px; }
}
}
@@ -62,7 +62,7 @@
@@ -62,7 +62,7 @@
</script>
</script>
<!-- Stylesheets -->
<!-- Stylesheets -->
- <link rel="stylesheet" href="/css/style.css?v=139">
+ <link rel="stylesheet" href="/css/style.css?v=140">
<link rel="stylesheet" href="/css/chat-shared.css?v=1">
<link rel="stylesheet" href="/css/chat-shared.css?v=1">
<link rel="stylesheet" href="/css/broadcast.css?v=11">
<link rel="stylesheet" href="/css/broadcast.css?v=11">
<link rel="stylesheet" href="/css/cosmetics.css?v=2">
<link rel="stylesheet" href="/css/cosmetics.css?v=2">
@@ -5021,7 +5021,7 @@ curl -s https://openvibe.media/live/@Goosely/chat-insight.json | jq ".chat_insig
@@ -5021,7 +5021,7 @@ curl -s https://openvibe.media/live/@Goosely/chat-insight.json | jq ".chat_insig
<!-- Scripts -->
<!-- Scripts -->
<script src="/js/theme-engine.js?v=4"></script>
<script src="/js/theme-engine.js?v=4"></script>
<script src="/live-notify.js?v=3" defer></script>
<script src="/live-notify.js?v=3" defer></script>
-<script src="/js/app.js?v=131" defer></script>
+<script src="/js/app.js?v=132" defer></script>
<script src="/js/stream-player.js?v=21" defer></script>
<script src="/js/stream-player.js?v=21" defer></script>
<script src="/js/stream-pip.js?v=1" defer></script>
<script src="/js/stream-pip.js?v=1" defer></script>
<script src="/js/chat-shared.js?v=3" defer></script>
<script src="/js/chat-shared.js?v=3" defer></script>
@@ -1264,8 +1264,7 @@ function renderHeroStats(stats) {
@@ -1264,8 +1264,7 @@ function renderHeroStats(stats) {
{ icon: 'fa-cart-shopping', num: stats.vibesBought, label: 'Vibes Bought', title: 'Vibes purchased with real money (PowerChat, card, PayPal, crypto)', recent: R.vibesBought },
{ icon: 'fa-cart-shopping', num: stats.vibesBought, label: 'Vibes Bought', title: 'Vibes purchased with real money (PowerChat, card, PayPal, crypto)', recent: R.vibesBought },
{ icon: 'fa-star', num: stats.activeSubs, label: 'Subs', title: 'Active channel subscriptions', recent: R.subs },
{ icon: 'fa-star', num: stats.activeSubs, label: 'Subs', title: 'Active channel subscriptions', recent: R.subs },
{ icon: 'fa-coins', num: stats.pointsEarned, label: 'Points Earned', title: 'Channel points earned by viewers (watching, chatting, following)', recent: R.points },
{ icon: 'fa-coins', num: stats.pointsEarned, label: 'Points Earned', title: 'Channel points earned by viewers (watching, chatting, following)', recent: R.points },
- { icon: 'fa-gift', num: stats.pointsSpent, label: 'Points Spent', title: 'Channel points spent on rewards', recent: R.pointsSpent },
- { icon: 'fa-ticket', num: stats.redemptions, label: 'Rewards', title: 'Channel reward redemptions', recent: R.redemptions },
+ { icon: 'fa-gift', num: stats.pointsSpent, label: 'Points Spent', title: `Channel points spent on rewards · ${_fmtCount(stats.redemptions || 0)} rewards redeemed`, recent: R.pointsSpent, sub: stats.redemptions ? `${_fmtCount(stats.redemptions)} rewards` : '' },
{ icon: 'fa-bullseye', num: stats.goalsActive, label: 'Goals', title: `Donation goals running now · ${stats.goalsReached || 0} reached so far`, sub: stats.goalsReached ? `${_fmtCount(stats.goalsReached)} reached` : '' },
{ icon: 'fa-bullseye', num: stats.goalsActive, label: 'Goals', title: `Donation goals running now · ${stats.goalsReached || 0} reached so far`, sub: stats.goalsReached ? `${_fmtCount(stats.goalsReached)} reached` : '' },
],
],
});
});
@@ -7,7 +7,7 @@
@@ -7,7 +7,7 @@
<!-- Keep these in step with index.html — the popout renders the same chat
<!-- Keep these in step with index.html — the popout renders the same chat
components (cosmetics.css positions particle effects; without it they sit
components (cosmetics.css positions particle effects; without it they sit
inline next to the username as "broken badges" until their cleanup timer). -->
inline next to the username as "broken badges" until their cleanup timer). -->
- <link rel="stylesheet" href="/css/style.css?v=139">
+ <link rel="stylesheet" href="/css/style.css?v=140">
<link rel="stylesheet" href="/css/chat-shared.css?v=1">
<link rel="stylesheet" href="/css/chat-shared.css?v=1">
<link rel="stylesheet" href="/css/cosmetics.css?v=2">
<link rel="stylesheet" href="/css/cosmetics.css?v=2">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
@@ -226,7 +226,7 @@
@@ -226,7 +226,7 @@
<!-- Chat feature scripts — mirror index.html so the popout has full parity.
<!-- Chat feature scripts — mirror index.html so the popout has full parity.
Order: dependencies (app/emotes/gif/uploads/coins/bucks/cosmetics) before chat.js. -->
Order: dependencies (app/emotes/gif/uploads/coins/bucks/cosmetics) before chat.js. -->
- <script src="/js/app.js?v=131"></script>
+ <script src="/js/app.js?v=132"></script>
<script src="/js/emotes.js?v=8"></script>
<script src="/js/emotes.js?v=8"></script>
<script src="/js/gif-picker.js?v=1"></script>
<script src="/js/gif-picker.js?v=1"></script>
<script src="/js/channel-uploads.js?v=12"></script>
<script src="/js/channel-uploads.js?v=12"></script>