Skip to content

Landing page: fix preview diversity for news/video, proper markets grid, natural icons for filled assets #151

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
asim merged 4 commits into from
Feb 25, 2026
Merged

Landing page: fix preview diversity for news/video, proper markets grid, natural icons for filled assets #151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
409c3c8
Initial plan
Copilot Feb 25, 2026
3e3beaf
Fix markets grid to be proper rows and columns
Copilot Feb 25, 2026
e122966
Fix landing page previews: 1-per-category news/video, remove brightne…
Copilot Feb 25, 2026
d54c81b
Remove brightness(0) filter from filled/coloured icons (places, weath…
Copilot Feb 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 6 additions & 16 deletions app/html/mu.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1663,28 +1663,18 @@ body:has(#messages) #chat-back-link {
/* Professional market ticker grid */
.market-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}

.market-item {
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
padding: 6px 8px;
}

.market-item:nth-child(4n+1),
.market-item:nth-child(4n+2) {
padding: 8px 6px;
background: var(--hover-background);
}

.market-item:nth-child(odd) {
padding-right: 12px;
}

.market-item:nth-child(even) {
padding-left: 12px;
border-radius: var(--border-radius);
text-align: center;
}

.market-symbol {
Expand Down
20 changes: 12 additions & 8 deletions home/home.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,28 +165,28 @@ var landingTemplate = `<html lang="en">
</a>
<a href="/places" style="text-decoration: none; color: inherit;">
<div class="block">
<img src="/places.png" alt="Places" style="width: 32px; height: 32px; margin-bottom: 8px; filter: brightness(0);">
<img src="/places.png" alt="Places" style="width: 32px; height: 32px; margin-bottom: 8px;">
<b>Places</b>
<div class="small">Search and discover places on an ad-free map</div>
</div>
</a>
<a href="/weather" style="text-decoration: none; color: inherit;">
<div class="block">
<img src="/weather.png" alt="Weather" style="width: 32px; height: 32px; margin-bottom: 8px; filter: brightness(0);">
<img src="/weather.png" alt="Weather" style="width: 32px; height: 32px; margin-bottom: 8px;">
<b>Weather</b>
<div class="small">Local weather forecasts without ads or tracking</div>
</div>
</a>
<a href="/markets" style="text-decoration: none; color: inherit;">
<div class="block">
<img src="/markets.png" alt="Markets" style="width: 32px; height: 32px; margin-bottom: 8px; filter: brightness(0);">
<img src="/markets.png" alt="Markets" style="width: 32px; height: 32px; margin-bottom: 8px;">
<b>Markets</b>
<div class="small">Live crypto, futures and commodity prices</div>
</div>
</a>
<a href="/reminder" style="text-decoration: none; color: inherit;">
<div class="block">
<img src="/reminder.png" alt="Reminder" style="width: 32px; height: 32px; margin-bottom: 8px; filter: brightness(0);">
<img src="/reminder.png" alt="Reminder" style="width: 32px; height: 32px; margin-bottom: 8px;">
<b>Reminder</b>
<div class="small">Daily Islamic verse, hadith, and name of Allah</div>
</div>
Expand Down Expand Up @@ -374,7 +374,9 @@ POST /video HTTP/1.1
fetch('/news', {headers:{'Accept':'application/json'}})
.then(function(r){return r.json();})
.then(function(d){
var posts=(d.feed||[]).slice(0,5);
var seen={};var posts=[];var all=d.feed||[];
for(var i=0;i<all.length&&posts.length<5;i++){var cat=all[i].category||'_';if(!seen[cat]){seen[cat]=true;posts.push(all[i]);}}

var el=document.getElementById('preview-news-content');
if(!el) return;
if(!posts.length){el.innerHTML='<p style="color:#888;font-size:13px;">No headlines yet.</p>';return;}
Expand All @@ -399,14 +401,14 @@ POST /video HTTP/1.1
var el=document.getElementById('preview-markets-content');
if(!el) return;
if(!items.length){el.innerHTML='<p style="color:#888;font-size:13px;">Prices loading…</p>';return;}
var h='<div style="max-width: 400px;gap:8px;margin-bottom:4px;">';
var h='<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:4px;">';
items.forEach(function(item){
var chg='';
if(item.change_24h){
var sign=item.change_24h>=0?'+':'',color=item.change_24h>=0?'#28a745':'#dc3545';
chg='<span style="font-size:11px;color:'+color+';">'+sign+item.change_24h.toFixed(1)+'%%</span>';
}
h+='<div style="background:#f9f9f9;border-radius:6px;padding:8px 10px;text-align:center;display:inline-block;">'+
h+='<div style="background:#f9f9f9;border-radius:6px;padding:8px 10px;text-align:center;">'+
'<div style="font-size:11px;font-weight:700;color:#555;letter-spacing:.5px;">'+esc(item.symbol)+'</div>'+
'<div style="font-size:15px;font-weight:800;">'+formatPrice(item.price)+chg+'</div>'+
'</div>';
Expand All @@ -424,7 +426,9 @@ POST /video HTTP/1.1
var all=[];
Object.keys(channels).forEach(function(ch){(channels[ch].videos||[]).forEach(function(v){all.push(v);});});
all.sort(function(a,b){return new Date(b.published)-new Date(a.published);});
all=all.slice(0,4);
var seenCh={};var filtered=[];
for(var i=0;i<all.length&&filtered.length<4;i++){var ch=all[i].channel||'_';if(!seenCh[ch]){seenCh[ch]=true;filtered.push(all[i]);}}
all=filtered;
var el=document.getElementById('preview-video-content');
if(!el) return;
if(!all.length){el.innerHTML='<p style="color:#888;font-size:13px;">No videos yet.</p>';return;}
Expand Down