Enhance news navigation and add Intelligence Dashboard CTA across multiple languages#319
Enhance news navigation and add Intelligence Dashboard CTA across multiple languages#319
Conversation
pethers
commented
Feb 19, 2026
- Updated news navigation sections in German, Spanish, Finnish, French, Hebrew, Japanese, Korean, Dutch, Norwegian, Swedish, and Chinese to include a more detailed description and features list for AI-driven political journalism.
- Introduced a new Intelligence Dashboard call-to-action (CTA) in the same languages, highlighting interactive visualizations and analysis tools provided by the Citizen Intelligence Agency.
- Improved CSS styles for the dashboard CTA and news navigation to enhance visual appeal and responsiveness.
…tiple languages - Updated news navigation sections in German, Spanish, Finnish, French, Hebrew, Japanese, Korean, Dutch, Norwegian, Swedish, and Chinese to include a more detailed description and features list for AI-driven political journalism. - Introduced a new Intelligence Dashboard call-to-action (CTA) in the same languages, highlighting interactive visualizations and analysis tools provided by the Citizen Intelligence Agency. - Improved CSS styles for the dashboard CTA and news navigation to enhance visual appeal and responsiveness.
🏷️ Automatic Labeling SummaryThis PR has been automatically labeled based on the files changed and PR metadata. Applied Labels: dashboard,html-css,i18n,translation,rtl,size-xl Label Categories
For more information, see |
🔍 Lighthouse Performance Audit
📥 Download full Lighthouse report Budget Compliance: Performance budgets enforced via |
There was a problem hiding this comment.
Pull request overview
This PR enhances the site’s top-level entry pages by expanding the “News” navigation into a richer feature callout and adding a prominent “Intelligence Dashboard” CTA across multiple languages, supported by new/updated CSS styling. It also modernizes the dashboard language-page footers to a structured quick-links + language-grid layout.
Changes:
- Added a new “Intelligence Dashboard” CTA block to the homepage (and localized homepages) with feature highlights and a primary link into
/dashboard/. - Expanded localized “News” navigation blocks from a single link into a heading/description/features list + styled link.
- Introduced new CSS for the dashboard CTA banner and refreshed CSS for the news navigation callout.
Reviewed changes
Copilot reviewed 28 out of 28 changed files in this pull request and generated 24 comments.
Show a summary per file
| File | Description |
|---|---|
| styles.css | Adds CTA/news-navigation component styles (layout, shimmer animation, responsive rules). |
| index.html | Reworks News navigation into rich callout; adds Dashboard CTA. |
| index_ar.html | Localized rich News callout; adds localized Dashboard CTA. |
| index_da.html | Localized rich News callout; adds localized Dashboard CTA. |
| index_de.html | Localized rich News callout; adds localized Dashboard CTA. |
| index_es.html | Localized rich News callout; adds localized Dashboard CTA. |
| index_fi.html | Localized rich News callout; adds localized Dashboard CTA. |
| index_fr.html | Localized rich News callout; adds localized Dashboard CTA. |
| index_he.html | Localized rich News callout; adds localized Dashboard CTA. |
| index_ja.html | Localized rich News callout; adds localized Dashboard CTA. |
| index_ko.html | Localized rich News callout; adds localized Dashboard CTA. |
| index_nl.html | Localized rich News callout; adds localized Dashboard CTA. |
| index_no.html | Localized rich News callout; adds localized Dashboard CTA. |
| index_sv.html | Localized rich News callout; adds localized Dashboard CTA. |
| index_zh.html | Localized rich News callout; adds localized Dashboard CTA. |
| dashboard/index_ar.html | Replaces simple footer with structured quick-links + language grid. |
| dashboard/index_da.html | Replaces simple footer with structured quick-links + language grid. |
| dashboard/index_de.html | Replaces simple footer with structured quick-links + language grid. |
| dashboard/index_es.html | Replaces simple footer with structured quick-links + language grid. |
| dashboard/index_fi.html | Replaces simple footer with structured quick-links + language grid. |
| dashboard/index_fr.html | Replaces simple footer with structured quick-links + language grid. |
| dashboard/index_he.html | Replaces simple footer with structured quick-links + language grid. |
| dashboard/index_ja.html | Replaces simple footer with structured quick-links + language grid. |
| dashboard/index_ko.html | Replaces simple footer with structured quick-links + language grid. |
| dashboard/index_nl.html | Replaces simple footer with structured quick-links + language grid. |
| dashboard/index_no.html | Replaces simple footer with structured quick-links + language grid. |
| dashboard/index_sv.html | Replaces simple footer with structured quick-links + language grid. |
| dashboard/index_zh.html | Replaces simple footer with structured quick-links + language grid. |
index_no.html
Outdated
| <a href="news/index_no.html" aria-label="Besøk nyhetsseksjonen - AI-drevet politisk journalistikk"> | ||
| <span class="news-navigation-icon" aria-hidden="true">📰</span> | ||
| <span>Nyheter</span> | ||
| <h2 class="news-navigation-heading"><span aria-hidden="true">📰</span> AI-drevet politisk journalistikk</h2> |
There was a problem hiding this comment.
This h2 appears before the page’s h1 (the main header comes later), which breaks heading hierarchy and can confuse screen readers/outline generation. Consider moving the entire news-navigation block below the <header> (after the h1), or render this as non-heading text so headings start at h1 then h2.
| <h2 class="news-navigation-heading"><span aria-hidden="true">📰</span> AI-drevet politisk journalistikk</h2> | |
| <p class="news-navigation-heading"><span aria-hidden="true">📰</span> AI-drevet politisk journalistikk</p> |
index_zh.html
Outdated
| <a href="news/index_zh.html" aria-label="访问新闻板块 - AI驱动的政治新闻"> | ||
| <span class="news-navigation-icon" aria-hidden="true">📰</span> | ||
| <span>新闻</span> | ||
| <h2 class="news-navigation-heading"><span aria-hidden="true">📰</span> AI驱动的政治新闻</h2> |
There was a problem hiding this comment.
This h2 appears before the page’s h1 (the main header comes later), which breaks heading hierarchy and can confuse screen readers/outline generation. Consider moving the entire news-navigation block below the <header> (after the h1), or render this as non-heading text so headings start at h1 then h2.
| <h2 class="news-navigation-heading"><span aria-hidden="true">📰</span> AI驱动的政治新闻</h2> | |
| <p class="news-navigation-heading"><span aria-hidden="true">📰</span> AI驱动的政治新闻</p> |
index_nl.html
Outdated
| <a href="news/index_nl.html" aria-label="Ga naar de nieuwsrubriek - door AI vernieuwde politieke journalistiek"> | ||
| <span class="news-navigation-icon" aria-hidden="true">📰</span> | ||
| <span>Nieuws</span> | ||
| <h2 class="news-navigation-heading"><span aria-hidden="true">📰</span> Door AI vernieuwde politieke journalistiek</h2> |
There was a problem hiding this comment.
This h2 appears before the page’s h1 (the main header comes later), which breaks heading hierarchy and can confuse screen readers/outline generation. Consider moving the entire news-navigation block below the <header> (after the h1), or render this as non-heading text so headings start at h1 then h2.
| <h2 class="news-navigation-heading"><span aria-hidden="true">📰</span> Door AI vernieuwde politieke journalistiek</h2> | |
| <p class="news-navigation-heading"><span aria-hidden="true">📰</span> Door AI vernieuwde politieke journalistiek</p> |
index_he.html
Outdated
| <a href="news/index_he.html" aria-label="מעבר למדור החדשות - עיתונות פוליטית מונעת בינה מלאכותית"> | ||
| <span class="news-navigation-icon" aria-hidden="true">📰</span> | ||
| <span>חדשות</span> | ||
| <h2 class="news-navigation-heading"><span aria-hidden="true">📰</span> עיתונות פוליטית מונעת בינה מלאכותית</h2> |
There was a problem hiding this comment.
This h2 appears before the page’s h1 (the main header comes later), which breaks heading hierarchy and can confuse screen readers/outline generation. Consider moving the entire news-navigation block below the <header> (after the h1), or render this as non-heading text so headings start at h1 then h2.
| <h2 class="news-navigation-heading"><span aria-hidden="true">📰</span> עיתונות פוליטית מונעת בינה מלאכותית</h2> | |
| <p class="news-navigation-heading"><span aria-hidden="true">📰</span> עיתונות פוליטית מונעת בינה מלאכותית</p> |
index_fi.html
Outdated
| <p class="news-navigation-description">Economist-tyylinen seuranta Ruotsin valtiopäivistä, tuotettu päivittäin tekoälyagenttien avulla Citizen Intelligence Agency OSINT-datasta. Automatisoitu analyysi hallituksen esityksistä, valiokuntamietinnöistä, oppositioaloitteista, eduskuntakysymyksistä ja iltasyventymisistä — 14 kielellä.</p> | ||
| <ul class="news-navigation-features" aria-label="Uutiskattauksen tyypit"> | ||
| <li>📋 Valiokuntamietinnöt</li> | ||
| <li>📜 Hallituksen esitykset</li> | ||
| <li>✊ Oppositioaloitteet</li> | ||
| <li>❓ Eduskuntakysymykset</li> |
There was a problem hiding this comment.
This list item says “Eduskuntakysymykset”, which refers to Finland’s Eduskunta rather than Sweden’s Riksdag. Update to a Sweden/Riksdag-accurate term (or generic “parlamenttikysymykset”).
| <p class="news-navigation-description">Economist-tyylinen seuranta Ruotsin valtiopäivistä, tuotettu päivittäin tekoälyagenttien avulla Citizen Intelligence Agency OSINT-datasta. Automatisoitu analyysi hallituksen esityksistä, valiokuntamietinnöistä, oppositioaloitteista, eduskuntakysymyksistä ja iltasyventymisistä — 14 kielellä.</p> | |
| <ul class="news-navigation-features" aria-label="Uutiskattauksen tyypit"> | |
| <li>📋 Valiokuntamietinnöt</li> | |
| <li>📜 Hallituksen esitykset</li> | |
| <li>✊ Oppositioaloitteet</li> | |
| <li>❓ Eduskuntakysymykset</li> | |
| <p class="news-navigation-description">Economist-tyylinen seuranta Ruotsin valtiopäivistä, tuotettu päivittäin tekoälyagenttien avulla Citizen Intelligence Agency OSINT-datasta. Automatisoitu analyysi hallituksen esityksistä, valiokuntamietinnöistä, oppositioaloitteista, valtiopäiväkysymyksistä ja iltasyventymisistä — 14 kielellä.</p> | |
| <ul class="news-navigation-features" aria-label="Uutiskattauksen tyypit"> | |
| <li>📋 Valiokuntamietinnöt</li> | |
| <li>📜 Hallituksen esitykset</li> | |
| <li>✊ Oppositioaloitteet</li> | |
| <li>❓ Valtiopäiväkysymykset</li> |
index_ar.html
Outdated
| <a href="news/index_ar.html" aria-label="زيارة قسم الأخبار - صحافة سياسية مدعومة بالذكاء الاصطناعي"> | ||
| <span class="news-navigation-icon" aria-hidden="true">📰</span> | ||
| <span>الأخبار</span> | ||
| <h2 class="news-navigation-heading"><span aria-hidden="true">📰</span> صحافة سياسية مدعومة بالذكاء الاصطناعي</h2> |
There was a problem hiding this comment.
This h2 appears before the page’s h1 (the main header comes later), which breaks heading hierarchy and can confuse screen readers/outline generation. Consider moving the entire news-navigation block below the <header> (after the h1), or render this as non-heading text so headings start at h1 then h2.
| <h2 class="news-navigation-heading"><span aria-hidden="true">📰</span> صحافة سياسية مدعومة بالذكاء الاصطناعي</h2> | |
| <p class="news-navigation-heading"><span aria-hidden="true">📰</span> صحافة سياسية مدعومة بالذكاء الاصطناعي</p> |
index_fi.html
Outdated
| <p class="news-navigation-description">Economist-tyylinen seuranta Ruotsin valtiopäivistä, tuotettu päivittäin tekoälyagenttien avulla Citizen Intelligence Agency OSINT-datasta. Automatisoitu analyysi hallituksen esityksistä, valiokuntamietinnöistä, oppositioaloitteista, eduskuntakysymyksistä ja iltasyventymisistä — 14 kielellä.</p> | ||
| <ul class="news-navigation-features" aria-label="Uutiskattauksen tyypit"> | ||
| <li>📋 Valiokuntamietinnöt</li> | ||
| <li>📜 Hallituksen esitykset</li> | ||
| <li>✊ Oppositioaloitteet</li> | ||
| <li>❓ Eduskuntakysymykset</li> |
There was a problem hiding this comment.
“eduskuntakysymyksistä” is specific to Finland’s parliament (Eduskunta), but this site covers Sweden’s Riksdag. Consider using a Sweden/Riksdag-specific term or a generic “parlamenttikysymyksistä” to avoid factual confusion.
| <p class="news-navigation-description">Economist-tyylinen seuranta Ruotsin valtiopäivistä, tuotettu päivittäin tekoälyagenttien avulla Citizen Intelligence Agency OSINT-datasta. Automatisoitu analyysi hallituksen esityksistä, valiokuntamietinnöistä, oppositioaloitteista, eduskuntakysymyksistä ja iltasyventymisistä — 14 kielellä.</p> | |
| <ul class="news-navigation-features" aria-label="Uutiskattauksen tyypit"> | |
| <li>📋 Valiokuntamietinnöt</li> | |
| <li>📜 Hallituksen esitykset</li> | |
| <li>✊ Oppositioaloitteet</li> | |
| <li>❓ Eduskuntakysymykset</li> | |
| <p class="news-navigation-description">Economist-tyylinen seuranta Ruotsin valtiopäivistä, tuotettu päivittäin tekoälyagenttien avulla Citizen Intelligence Agency OSINT-datasta. Automatisoitu analyysi hallituksen esityksistä, valiokuntamietinnöistä, oppositioaloitteista, parlamenttikysymyksistä ja iltasyventymisistä — 14 kielellä.</p> | |
| <ul class="news-navigation-features" aria-label="Uutiskattauksen tyypit"> | |
| <li>📋 Valiokuntamietinnöt</li> | |
| <li>📜 Hallituksen esitykset</li> | |
| <li>✊ Oppositioaloitteet</li> | |
| <li>❓ Parlamenttikysymykset</li> |
| <div class="footer-content"> | ||
| <div class="footer-section"> | ||
| <h3>快速链接</h3> | ||
| <ul> | ||
| <li><a href="../index_zh.html">首页</a></li> | ||
| <li><a href="../news/index_zh.html">新闻</a></li> | ||
| <li><a href="index_zh.html">仪表板</a></li> | ||
| <li><a href="https://www.hack23.com/cia" target="_blank" rel="noopener noreferrer">CIA平台</a></li> | ||
| <li><a href="https://github.com/Hack23/riksdagsmonitor" target="_blank" rel="noopener noreferrer">GitHub</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="footer-section"> | ||
| <h3>语言</h3> | ||
| <div class="language-grid"> |
There was a problem hiding this comment.
The dashboard footer now contains only two .footer-section blocks, but .footer-content is styled as a 4-column grid in styles.css. On wider screens this will likely leave two empty columns and produce excessive whitespace; consider adding the missing sections (e.g., About/Built by) or applying a dashboard-specific footer class/layout that uses an auto-fit/2-column grid.
index_ko.html
Outdated
| <a href="news/index_ko.html" aria-label="뉴스 섹션으로 이동 - AI 기반 정치 저널리즘"> | ||
| <span class="news-navigation-icon" aria-hidden="true">📰</span> | ||
| <span>뉴스</span> | ||
| <h2 class="news-navigation-heading"><span aria-hidden="true">📰</span> AI 기반 정치 저널리즘</h2> |
There was a problem hiding this comment.
This h2 appears before the page’s h1 (the main header comes later), which breaks heading hierarchy and can confuse screen readers/outline generation. Consider moving the entire news-navigation block below the <header> (after the h1), or render this as non-heading text so headings start at h1 then h2.
| <h2 class="news-navigation-heading"><span aria-hidden="true">📰</span> AI 기반 정치 저널리즘</h2> | |
| <p class="news-navigation-heading"><span aria-hidden="true">📰</span> AI 기반 정치 저널리즘</p> |
index_da.html
Outdated
| <a href="dashboard/index_da.html" class="dashboard-cta-link" aria-label="Åbn efterretningspanelen"> | ||
| <span class="dashboard-cta-link-icon" aria-hidden="true">📊</span> | ||
| <span>Åbn panelen</span> |
There was a problem hiding this comment.
In Danish, the definite form is typically “panelet” (not “panelen”). Update the aria-label/link text to avoid the Swedish-form “panelen” in Danish UI text.
| <a href="dashboard/index_da.html" class="dashboard-cta-link" aria-label="Åbn efterretningspanelen"> | |
| <span class="dashboard-cta-link-icon" aria-hidden="true">📊</span> | |
| <span>Åbn panelen</span> | |
| <a href="dashboard/index_da.html" class="dashboard-cta-link" aria-label="Åbn efterretningspanelet"> | |
| <span class="dashboard-cta-link-icon" aria-hidden="true">📊</span> | |
| <span>Åbn panelet</span> |
|
@copilot open a new pull request to apply changes based on the comments in this thread |
…rminology Co-authored-by: pethers <[email protected]>
Fix accessibility: heading hierarchy, reduced motion, and Nordic language terminology
🔍 Lighthouse Performance Audit
📥 Download full Lighthouse report Budget Compliance: Performance budgets enforced via |
index_no.html
Outdated
| <!-- Intelligence Dashboard CTA --> | ||
| <nav class="dashboard-cta" aria-label="Etterretningspanel"> | ||
| <h2 class="dashboard-cta-heading"><span aria-hidden="true">📊</span> Etterretningspanel</h2> | ||
| <p class="dashboard-cta-description">Utforsk interaktive visualiseringer drevet av Citizen Intelligence Agency — valgprognose 2026, partiprestasjonsanalyse, 45-reglers risikovurdering for 349 parlamentsmedlemmer, koalisjonsstabilitet og komiténettsanalyse.</p> |
There was a problem hiding this comment.
Spelling/wording issue: "komiténettsanalyse" appears to be a typo/inconsistent with the dashboard’s "Komité Nettverksanalyse" wording. Consider changing it to "komiténettverksanalyse" for consistency.
| <p class="dashboard-cta-description">Utforsk interaktive visualiseringer drevet av Citizen Intelligence Agency — valgprognose 2026, partiprestasjonsanalyse, 45-reglers risikovurdering for 349 parlamentsmedlemmer, koalisjonsstabilitet og komiténettsanalyse.</p> | |
| <p class="dashboard-cta-description">Utforsk interaktive visualiseringer drevet av Citizen Intelligence Agency — valgprognose 2026, partiprestasjonsanalyse, 45-reglers risikovurdering for 349 parlamentsmedlemmer, koalisjonsstabilitet og komiténettverksanalyse.</p> |
styles.css
Outdated
| .news-navigation > p { | ||
| margin: 0.5rem 0 0 0; | ||
| color: var(--text-secondary); | ||
| font-size: var(--font-size-sm); | ||
| } |
There was a problem hiding this comment.
The generic .news-navigation > p rule will also match the new .news-navigation-heading and .news-navigation-description paragraphs (direct children), overriding their intended font size/color/margins due to higher specificity. Limit this legacy rule to only the old unclassed paragraph (e.g., target only p elements without these classes) so the new heading/description styles apply as designed.
styles.css
Outdated
| animation: dashboard-cta-shimmer 4s linear infinite; | ||
| } | ||
|
|
||
| @keyframes dashboard-cta-shimmer { | ||
| 0% { left: -100%; } | ||
| 100% { left: 100%; } |
There was a problem hiding this comment.
The shimmer keyframes animate the left property, which typically forces layout recalculation on every frame. For smoother performance, prefer animating via transform (e.g., translateX) and keep the animated element positioned with transform rather than left/right.
| animation: dashboard-cta-shimmer 4s linear infinite; | |
| } | |
| @keyframes dashboard-cta-shimmer { | |
| 0% { left: -100%; } | |
| 100% { left: 100%; } | |
| transform: translateX(0); | |
| will-change: transform; | |
| animation: dashboard-cta-shimmer 4s linear infinite; | |
| } | |
| @keyframes dashboard-cta-shimmer { | |
| 0% { | |
| transform: translateX(0); | |
| } | |
| 100% { | |
| transform: translateX(100%); | |
| } |
|
@copilot open a new pull request to apply changes based on the comments in this thread |
…ation performance Co-authored-by: pethers <[email protected]>
…rminology Co-authored-by: pethers <[email protected]>
Fix CSS specificity conflict, animation performance, and Norwegian terminology
🔍 Lighthouse Performance Audit
📥 Download full Lighthouse report Budget Compliance: Performance budgets enforced via |