Skip to content

Roll out Bengaluru-style data previews to the other 11 city hubs #16

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
Ashwask merged 1 commit into from
Jul 31, 2026
Merged

Roll out Bengaluru-style data previews to the other 11 city hubs #16

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
40 changes: 7 additions & 33 deletions website/public/assets/js/pages/city-hub.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,40 +65,14 @@
'<span class="hub-preview-meta">' + esc(s.community || s.location || '') + '</span></a>'
).join('')
: '<div class="hub-empty">No stories here yet.</div>';
}

// Community Stories card -> Live when the city has stories.
const storiesCard = document.querySelector('[data-feature="stories"]');
if (storiesCard && cityStories.length > 0) {
storiesCard.classList.remove('coming-soon');

const badge = storiesCard.querySelector('.feature-status-badge');
if (badge) {
badge.className = 'feature-status-badge live';
badge.innerHTML =
'<i class="fa-solid fa-check-circle"></i> ' +
'<span data-i18n="cityHub.features.map.statusLive">Live</span>';
}

const desc = storiesCard.querySelector('.feature-description');
if (desc) {
desc.setAttribute('data-i18n', 'cityHub.features.stories.description');
desc.textContent =
'Discover real stories of neighbourhood transformation, ' +
'told by the people who made it happen.';
}

const action = storiesCard.querySelector('.feature-action');
if (action) {
action.innerHTML =
'<a href="/cities/' + slug + '/stories/" class="btn btn-primary">' +
'<span data-i18n="cityHub.features.stories.button">Read Stories</span> ' +
'<i class="fa-solid fa-arrow-right"></i></a>';
}

// Translate the newly injected data-i18n nodes.
if (window.translator && typeof window.translator.translatePage === 'function') {
window.translator.translatePage();
// Hide the "Read all" link for cities without a stories page yet
// (they have no stories) so it can't 404. It reappears once a
// city has stories (and thus a /stories/ page).
if (cityStories.length === 0) {
const seeAll = hubStories.closest('.hub-section');
const link = seeAll && seeAll.querySelector('.hub-see-all');
if (link) link.style.display = 'none';
}
}

Expand Down
105 changes: 24 additions & 81 deletions website/public/cities/ahmedabad/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@
<meta name="description" content="Communities, solution providers, and ward-level climate data for Ahmedabad neighbourhoods.">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="stylesheet" href="/assets/css/pages/city-hub.css">
<link rel="stylesheet" href="/assets/chat/chat.css">
<link rel="stylesheet" href="/assets/i18n/language-selector.css">
<style>
Expand Down Expand Up @@ -378,96 +379,38 @@ <h2 data-i18n="cityHub.ahmedabad.exploreTitle">Explore Ahmedabad</h2>
<p data-i18n="cityHub.ahmedabad.exploreSubtitle">Ward-level map available now. Community and provider directories coming soon.</p>
</div>

<div class="feature-grid">
<!-- Ward Map (Available) -->
<div class="feature-card-large">
<div class="feature-header">
<div class="feature-icon-large">
<i class="fa-solid fa-map" style="color: #B9C98A !important;"></i>
</div>
<div class="feature-info">
<h3 data-i18n="cityHub.features.map.title">Ward-Level Map</h3>
<span class="feature-status-badge live">
<i class="fa-solid fa-check-circle"></i> <span data-i18n="cityHub.features.map.statusLive">Live</span>
</span>
</div>
<div class="hub-grid">
<!-- Communities Preview (populated by city-hub.js) -->
<div class="hub-section">
<div class="hub-section-header">
<h3><img src="/assets/images/icons/community.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.communities.title">Communities</span></h3>
<span class="hub-count" id="hubCommCount">-</span>
<a href="/communities/" class="hub-see-all">See all <i class="fa-solid fa-arrow-right"></i></a>
</div>
<p class="feature-description" data-i18n="cityHub.features.map.description" data-i18n-params='{"wardCount":"64"}'>
Explore all 64 electoral wards with interactive boundaries. View ward demographics and geographical data across Chennai.
</p>
<div class="feature-action">
<a href="/cities/ahmedabad/map/" class="btn btn-primary">
<span data-i18n="cityHub.features.map.button">View Map</span> <i class="fa-solid fa-arrow-right"></i>
</a>
<div class="hub-preview-list" id="hubCommunities">
<div class="hub-loading">Loading...</div>
</div>
</div>

<!-- Communities (Coming Soon) -->
<div class="feature-card-large coming-soon">
<div class="feature-header">
<div class="feature-icon-large">
<img src="/assets/images/icons/community.svg" alt="" style="width:20px;height:20px;">
</div>
<div class="feature-info">
<h3 data-i18n="cityHub.features.communities.title">Communities</h3>
<span class="feature-status-badge coming-soon">
<i class="fa-solid fa-clock"></i> <span data-i18n="cityHub.features.statusComingSoon">Coming Soon</span>
</span>
</div>
<!-- Stories Preview (populated by city-hub.js) -->
<div class="hub-section">
<div class="hub-section-header">
<h3><img src="/assets/images/icons/story.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.stories.title">Community Stories</span></h3>
<a href="/cities/ahmedabad/stories/" class="hub-see-all">Read all <i class="fa-solid fa-arrow-right"></i></a>
</div>
<p class="feature-description" data-i18n="cityHub.comingSoonCallout.description">
Community directory for Ahmedabad is under development. Help us build the network by joining as a community.
</p>
<div class="feature-action">
<button class="btn" style="background: var(--color-text-lighter); cursor: not-allowed;" disabled>
<span data-i18n="cityHub.comingSoonCallout.comingSoonButton">Coming Soon</span>
</button>
<div class="hub-preview-list" id="hubStories">
<div class="hub-loading">Loading...</div>
</div>
</div>


<!-- Community Stories (Coming Soon) -->
<div class="feature-card-large coming-soon" data-feature="stories">
<div class="feature-header">
<div class="feature-icon-large">
<img src="/assets/images/icons/story.svg" alt="" style="width:20px;height:20px;">
</div>
<div class="feature-info">
<h3 data-i18n="cityHub.features.stories.title">Community Stories</h3>
<span class="feature-status-badge coming-soon">
<i class="fa-solid fa-clock"></i> <span data-i18n="cityHub.features.statusComingSoon">Coming Soon</span>
</span>
</div>
<!-- Map Preview -->
<div class="hub-section hub-section-wide">
<div class="hub-section-header">
<h3><img src="/assets/images/icons/location.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.map.title">Ward-Level Map</span></h3>
<a href="/cities/ahmedabad/map/" class="hub-see-all">View map <i class="fa-solid fa-arrow-right"></i></a>
</div>
<p class="feature-description" data-i18n="cityHub.features.stories.comingSoonDescription">
Community stories for this city are under development. Real stories of neighbourhood transformation coming soon.
</p>
<div class="feature-action">
<button class="btn" style="background: var(--color-text-lighter); cursor: not-allowed;" disabled>
<span data-i18n="cityHub.comingSoonCallout.comingSoonButton">Coming Soon</span>
</button>
</div>
</div>
</div>

<!-- Coming Soon Callout -->
<div class="coming-soon-callout">
<img src="/assets/images/icons/plant.svg" alt="" aria-hidden="true" style="width: 64px; height: 64px; margin-bottom: var(--space-md);">
<h3 data-i18n="cityHub.comingSoonCallout.title">Ahmedabad Data Coming Soon</h3>
<p data-i18n="cityHub.comingSoonCallout.description">
We're currently building the Ahmedabad directory. Help us grow the network by registering your community or organization.
</p>
<p style="font-weight: 600;">
<img src="/assets/images/icons/community.svg" alt="" style="width:20px;height:20px;"> <span data-i18n="cityHub.comingSoonCallout.communityDirectory">Community Directory</span><br>
<i class="fa-solid fa-building"></i> <span data-i18n="cityHub.comingSoonCallout.providerNetwork">Solution Provider Network</span><br>
<img src="/assets/images/icons/conservation.svg" alt="" style="width:20px;height:20px;"> <span data-i18n="cityHub.comingSoonCallout.climateAction">Climate Action Dashboard</span>
</p>
<div class="cta-buttons">
<a href="/join/" class="btn btn-primary">
<i class="fa-solid fa-user-plus"></i> <span data-i18n="cityHub.comingSoonCallout.joinCommunity">Join as Community</span>
</a>
<a href="/join/" class="btn btn-secondary">
<i class="fa-solid fa-building-user"></i> <span data-i18n="cityHub.comingSoonCallout.joinProvider">Join as Provider</span>
<a href="/cities/ahmedabad/map/" class="hub-map-preview" id="hubMap">
<img src="/assets/images/cities/ahmedabad.svg" alt="Ahmedabad ward map" style="width:100%; height:200px; object-fit: contain; opacity: 0.7;">
</a>
</div>
</div>
Expand Down
Loading
Loading