Skip to content

Stats: lay the country tiers in two rows (city tiers together, regions + sites below) #24

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
davd-gzl merged 1 commit into from
Jul 22, 2026
+99 −59
Merged

Stats: lay the country tiers in two rows (city tiers together, regions + sites below) #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
119 changes: 62 additions & 57 deletions apps/postcards/src/features/stats/StatsView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,63 +244,68 @@ function CountryRow({
</button>

{/* Each tier is tappable — it opens Places filtered to this country + tier,
so you can browse (and add) exactly what it counts. Regions have no
Places list of their own, so that one opens the country's full page. */}
{c.citiesTotal > 0 &&
metric(
"stats.country.metricCities",
"stats.country.metricCitiesDetail",
"stats.country.cityBarAria",
c.citiesVisited,
c.citiesTotal,
c.cityPct,
CITY_COLOR,
drill("cities", 0),
)}
{c.bigCitiesTotal > 0 &&
metric(
"stats.country.metricBigCities",
"stats.country.metricBigCitiesDetail",
"stats.country.bigCityBarAria",
c.bigCitiesVisited,
c.bigCitiesTotal,
c.bigCityPct,
BIG_COLOR,
drill("cities", 100_000),
)}
{hasMega &&
metric(
"stats.country.metricMega",
"stats.country.metricMegaDetail",
"stats.country.megaCityBarAria",
c.megaCitiesVisited,
c.megaCitiesTotal,
c.megaCityPct,
MEGA_COLOR,
drill("cities", 1_000_000),
)}
{c.regionsTotal > 0 &&
metric(
"stats.country.metricRegions",
"stats.country.metricRegionsDetail",
"stats.country.regionBarAria",
c.regionsVisited,
c.regionsTotal,
c.regionPct,
REGION_COLOR,
() => useUi.getState().openCountry(c.iso2),
)}
{c.heritageTotal > 0 &&
metric(
"stats.country.metricSites",
"stats.country.metricSitesDetail",
"stats.country.heritageBarAria",
c.heritageVisited,
c.heritageTotal,
c.heritagePct,
"var(--stat-want)",
drill("monuments", 0),
)}
so you can browse (and add) exactly what it counts. The three city
tiers share one row; regions + sites sit on the row below. Regions have
no Places list of their own, so that one opens the country's full page. */}
<div className="tier-grid">
{c.citiesTotal > 0 &&
metric(
"stats.country.metricCities",
"stats.country.metricCitiesDetail",
"stats.country.cityBarAria",
c.citiesVisited,
c.citiesTotal,
c.cityPct,
CITY_COLOR,
drill("cities", 0),
)}
{c.bigCitiesTotal > 0 &&
metric(
"stats.country.metricBigCities",
"stats.country.metricBigCitiesDetail",
"stats.country.bigCityBarAria",
c.bigCitiesVisited,
c.bigCitiesTotal,
c.bigCityPct,
BIG_COLOR,
drill("cities", 100_000),
)}
{hasMega &&
metric(
"stats.country.metricMega",
"stats.country.metricMegaDetail",
"stats.country.megaCityBarAria",
c.megaCitiesVisited,
c.megaCitiesTotal,
c.megaCityPct,
MEGA_COLOR,
drill("cities", 1_000_000),
)}
</div>
<div className="tier-grid">
{c.regionsTotal > 0 &&
metric(
"stats.country.metricRegions",
"stats.country.metricRegionsDetail",
"stats.country.regionBarAria",
c.regionsVisited,
c.regionsTotal,
c.regionPct,
REGION_COLOR,
() => useUi.getState().openCountry(c.iso2),
)}
{c.heritageTotal > 0 &&
metric(
"stats.country.metricSites",
"stats.country.metricSitesDetail",
"stats.country.heritageBarAria",
c.heritageVisited,
c.heritageTotal,
c.heritagePct,
"var(--stat-want)",
drill("monuments", 0),
)}
</div>

{detail && (
<>
Expand Down
39 changes: 37 additions & 2 deletions apps/postcards/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1773,8 +1773,9 @@ h1.brand {
display: none;
}
.cmeter {
/* Two per row (so up to four tiers stay legible on a phone), growing to fill. */
flex: 1 1 calc(50% - 12px);
/* Three per row: the city tiers (cities/big/mega) share the top row and regions
wraps to the next — matching the expanded body's layout. */
flex: 1 1 calc(33.333% - 8px);
min-width: 0;
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -1829,6 +1830,40 @@ h1.brand {
.metric-btn:focus-visible {
background: var(--bg-sub);
}
/* Tier metrics in rows: the three city tiers on one line, regions + sites on the
next. Each cell grows to fill its row; a narrow cell stacks its label over its
count so it stays readable at a third of the card's width. */
.tier-grid {
display: flex;
flex-wrap: wrap;
gap: 4px 8px;
margin-top: 8px;
}
.tier-grid > .metric {
flex: 1 1 0;
min-width: 0;
margin-top: 0;
}
.tier-grid .metric-btn {
width: 100%;
margin: 0;
padding: 6px;
}
.tier-grid .metric-label {
flex-direction: column;
align-items: flex-start;
gap: 0;
min-width: 0;
}
.tier-grid .metric-label > span {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tier-grid .metric-label .muted {
font-size: 10.5px;
}
/* "What's left to explore" as plain, scannable text — a label + count, then
names as accent links joined by thin separators. Far lighter than the old
rounded-chip wall, and it wraps cleanly on a narrow phone. */
Expand Down
Loading