Skip to content

enable carousel #684

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

Open
sterlingwes wants to merge 15 commits into
base: main
Choose a base branch
from
Open

enable carousel #684

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
dfefe2e
feat(home): stories carousel concept
sterlingwes Jun 7, 2026
831cc11
catalog & explore phase exploration documented
sterlingwes Jun 8, 2026
0b46580
add card carousel to home page
sterlingwes Jun 8, 2026
17300bc
Merge branch 'main' into stories-in-data
sterlingwes Jun 8, 2026
32df75c
realistic data & add dual scale
sterlingwes Jun 8, 2026
4b52994
Merge branch 'main' into stories-in-data
sterlingwes Jun 8, 2026
4c143ea
fix format
sterlingwes Jun 8, 2026
68a010b
apply updated carousel header layout
sterlingwes Jun 8, 2026
f8f529a
new header w/ tweaks
sterlingwes Jun 8, 2026
33f27c4
align home page sections
sterlingwes Jun 8, 2026
edb2032
more home tweaks
sterlingwes Jun 8, 2026
ef0d892
fix type issue
sterlingwes Jun 8, 2026
da7bbb3
improve marquee + more tweaks
sterlingwes Jun 9, 2026
f1bc121
hide story carousel for now
sterlingwes Jun 9, 2026
020d1b5
enable carousel
sterlingwes Jun 9, 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
69 changes: 43 additions & 26 deletions site/src/components/HomeDailyChart/HomeDailyChart.styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,30 +52,53 @@

.chartContainer {
position: relative;
max-width: 1000px;
max-width: 1140px;
margin: 0 auto;
padding: 40px 20px;
padding: 40px var(--ifm-spacing-horizontal, 1rem);
padding-bottom: 0;
}

/* ---- section masthead ---- */
.eyebrow {
display: block;
margin-bottom: 8px;
font-family: var(--ifm-font-family-base);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--story-red, #c0392f);
}

.mastRow {
display: flex;
align-items: center;
gap: 20px;
}

.mastLine {
flex: 1;
min-width: 16px;
height: 1px;
background: var(--story-ink, var(--tfp-chart-title));
opacity: 0.22;
}

.chartTitle {
font-size: 2em;
margin: 0;
flex: none;
white-space: nowrap;
font-size: 1.85rem;
font-weight: bold;
line-height: 1.05;
letter-spacing: -0.4px;
font-family: var(--ifm-heading-font-family);
color: var(--tfp-chart-title);
}

.chartTitle span {
color: var(--tfp-chart-accent);
font-weight: normal;
border-left: 1px solid var(--tfp-chart-accent-border);
margin-left: 14px;
padding-left: 14px;
}

.chartSubtitle {
color: var(--tfp-chart-subtitle);
padding-left: 4px;
padding-top: 4px;
padding-top: 6px;
padding-right: 20px;
margin-bottom: 20px;
line-height: 1.3em;
Expand Down Expand Up @@ -226,7 +249,6 @@
}

.chartFooterButtonsContainer {
background-color: var(--tfp-chart-cta-box-fill);
padding: 20px;
padding-bottom: 20px;
border-bottom-left-radius: 6px;
Expand All @@ -235,7 +257,7 @@

.chartFooterButtons {
display: flex;
justify-content: center;
justify-content: flex-end;
}

.chartFooterJsonMessage {
Expand Down Expand Up @@ -293,24 +315,19 @@
}
}

@media screen and (max-width: 680px) {
.chartTitle {
font-size: 1.45rem;
}
}

@media screen and (max-width: 600px) {
.homeChartDesktop {
padding-top: 150px;
}
}

@media screen and (max-width: 500px) {
.chartTitle span {
border-left: 0px;
margin-left: 0px;
padding-left: 0px;
display: block;
line-height: 1.1em;
font-size: 0.8em;
margin-left: 1px;
margin-bottom: 5px;
}

.chartSubtitle {
padding-left: 2px;
}
Expand Down
114 changes: 64 additions & 50 deletions site/src/components/HomeDailyChart/HomeDailyChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import styles from "./HomeDailyChart.styles.module.css";
import { Button } from "../Button";
import { HalfRadialProgress, radialProgressCircum } from "./HalfRadialProgress";
import previewData from "@site/src/generated/summary.json";
import { BuildFlags } from "@site/src/lib/build-flags";

const childrenRatePct = Math.round(
((previewData.known_killed_in_gaza.female.child + previewData.known_killed_in_gaza.male.child) /
Expand Down Expand Up @@ -114,8 +115,10 @@ export const HomeDailyChart = () => {

return (
<div className={styles.chartContainer}>
<div className={styles.chartTitle}>
The Human Toll <span>Daily Casualties Datasets</span>
<span className={styles.eyebrow}>Daily Casualties Datasets</span>
<div className={styles.mastRow}>
<h2 className={styles.chartTitle}>The Human Toll</h2>
<span className={styles.mastLine} aria-hidden="true" />
</div>
<div className={styles.chartSubtitle}>Since October 7, 2023 for Gaza and the West Bank</div>
<div className={styles.chartWarning}>
Expand Down Expand Up @@ -205,59 +208,70 @@ export const HomeDailyChart = () => {
/>
<div className={styles.chartSliderHint}>Use the slider to change the date</div>
</div>
<div className={styles.chartRadialsContainer}>
<div className={styles.chartRadials}>
<div>Of those killed:</div>
<div>
<HalfRadialProgress
{...{
rate: childrenRatePct,
strokeOffset: childrenStrokeOffset,
label: "were children",
}}
/>
<HalfRadialProgress
{...{
rate: womenRatePct,
strokeOffset: womenStrokeOffset,
label: "were women",
}}
/>
{!isMobile() && (
<HalfRadialProgress
{...{
rate: elderlyRatePct,
strokeOffset: elderlyStrokeOffset,
label: "were elderly",
}}
/>
)}
</div>
</div>
</div>
<div
style={{
backgroundColor: "var(--tfp-chart-cta-box-fill)",
fontSize: "1.5em",
fontWeight: "bold",
textAlign: "center",
color: "var(--tfp-radial-section-title)",
paddingTop: "30px",
}}
>
Start telling their story:
</div>
<div className={styles.chartFooterButtonsContainer}>
<div className={styles.chartFooterButtons}>
<Button to="/docs/datasets?chartdata=1" type="primary">
Get the daily numbers
</Button>
<div style={{ width: 10, height: 10 }} />
<Button to="/docs/killed-in-gaza" type="primary">
Get the list of those killed
<Button to="/docs/datasets?chartdata=1" type="secondary">
Learn more about this dataset
</Button>
</div>
</div>
{BuildFlags.legacyModules && (
<>
<div className={styles.chartRadialsContainer}>
<div className={styles.chartRadials}>
<div>Of those killed:</div>
<div>
<HalfRadialProgress
{...{
rate: childrenRatePct,
strokeOffset: childrenStrokeOffset,
label: "were children",
}}
/>
<HalfRadialProgress
{...{
rate: womenRatePct,
strokeOffset: womenStrokeOffset,
label: "were women",
}}
/>
{!isMobile() && (
<HalfRadialProgress
{...{
rate: elderlyRatePct,
strokeOffset: elderlyStrokeOffset,
label: "were elderly",
}}
/>
)}
</div>
</div>
</div>
<div
style={{
backgroundColor: "var(--tfp-chart-cta-box-fill)",
fontSize: "1.5em",
fontWeight: "bold",
textAlign: "center",
color: "var(--tfp-radial-section-title)",
paddingTop: "30px",
}}
>
Start telling their story:
</div>
<div className={styles.chartFooterButtonsContainer}>
<div className={styles.chartFooterButtons}>
<Button to="/docs/datasets?chartdata=1" type="primary">
Get the daily numbers
</Button>
<div style={{ width: 10, height: 10 }} />
<Button to="/docs/killed-in-gaza" type="primary">
Get the list of those killed
</Button>
</div>
</div>
</>
)}
</div>
);
};
59 changes: 34 additions & 25 deletions site/src/components/KilledHeaderMarquee/KilledHeaderMarquee.styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,51 +2,60 @@
.leftRows,
.rightRows {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
white-space: nowrap;
inset: 0;
overflow: hidden;
z-index: 1;
user-select: none;
}

.container {
opacity: 1;
transition: opacity 0.5s ease-in-out;
}

.container.fading {
opacity: 0.2;
}

.leftRows {
top: -0.8em;
display: flex;
flex-direction: column;
text-align: left;
}

.leftRows .namesRow {
animation: marquee-left 120s linear infinite;
}

.rightRows {
top: 1em;
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
}

.rightRows .namesRow {
line-height: 3.97em;
animation: marquee-right 200s linear infinite;
}

.namesRow {
position: relative;
top: 0.2em;
display: block;
display: flex;
flex-wrap: nowrap;
white-space: nowrap;
width: max-content;
color: rgba(245, 242, 235, 0.13);
font-weight: bold;
font-size: 0.9em;
line-height: 4em;
width: 5000px;
}

.track {
display: inline-flex;
flex: 0 0 auto;
}

.leftRows .namesRow {
animation: marquee-left 120s linear infinite;
}

.rightRows .namesRow {
line-height: 3.97em;
animation: marquee-right 200s linear infinite;
}

.namesRow svg {
Expand All @@ -67,19 +76,19 @@
}

@keyframes marquee-left {
0% {
transform: translateX(0%);
from {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
to {
transform: translateX(-50%);
}
}

@keyframes marquee-right {
0% {
transform: translateX(0%);
from {
transform: translateX(-50%);
}
100% {
transform: translateX(100%);
to {
transform: translateX(0);
}
}
Loading
Loading