wip: prototype 1

hnuti-brontosaurus · Apr 19, 2024 · ef2d696 · ef2d696
1 parent 2ba659a
commit ef2d696
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 18 deletions.
diff --git a/UI/SupportOverview/SupportOverviewController.latte b/UI/SupportOverview/SupportOverviewController.latte
@@ -1,7 +1,7 @@
 {layout $layoutPath}
 
 {block content}
-<main class="b-mbe-6 hb-lg-mbe-7" role="main">
+<main class="supportOverview b-mbe-6 hb-lg-mbe-7" role="main">
 	<section>
 		<h1>
 			Adoptuj Brontosaura
@@ -25,29 +25,41 @@
 
 	<div class="hb-spacer-2 hb-lg-spacer-3"></div>
 
-	<section class="references" data-references data-references-infinite data-references-autoplay>
+	<section class="references" data-references {*data-references-infinite data-references-autoplay*} style="max-inline-size: 50rem">
 		<button class="references__button references__button--previous button button--customization" data-references-button="previous" type="button" aria-hidden="true"></button>
 		<button class="references__button references__button--next button button--customization" data-references-button="next" type="button" aria-hidden="true"></button>
 
-		<ul class="references__list" data-references-slides n:inner-foreach="$whatWeDo as $item">
-			<li n:class="
-				'references__list-item',
-				'presentationBox',
-				$iterator->counter % 2 === 0 ? 'presentationBox--textOnRight'
-			" style="--presentationBox-background-image-url: url('{$item->image}')"
-			>
-				<div class="presentationBox__text">
-					<div class="hb-fs-l hb-fw-b hb-mbe-2">
-						{$item->title}
+		<div class="references__list hb-eventList hb-eventList--smaller" data-references-slides n:inner-foreach="$whatWeDo as $groups">
+			<div class="references__list-item hb-eventList__grid" n:inner-foreach="$groups as $item">
+				<div class="hb-option hb-option--imageFirst">
+					<div class="hb-option__text">
+						<div class="hb-option__heading hb-fs-l hb-fw-b hb-mbe-2">
+							{$item->title}
+						</div>
+
+						<p class="hb-option__description hb-mbe-2" n:foreach="$item->text as $text">{$text}</p>
 					</div>
 
-					<p class="hb-mbe-2" n:foreach="$item->text as $text">{$text}</p>
+					<div class="hb-option__image" style="--hb-option-image: url('{$item->image}')">
+
+					</div>
+
+					<div class="hboption__button" style="align-self: center; margin-block-end: var(--hb-vr-base)">
+						{*hb-btn hb-btn--secondary*}
+					<a class="action action--primary" href="https://www.darujme.cz/darovat/525?frequency=monthly&amount={$item->price}&widget=1203034" rel="noopener" target="_blank">
+						<span>Přispět {$item->price} Kč / měs</span>
+					</a>
+					</div>
 				</div>
-			</li>
-		</ul>
+			</div>
+		</div>
+
+		<div class="hb-spacer-3 hb-lg-spacer-4"></div>
+
+		<a class="action action--ulterior" href="#todo">chci darovat jednorázově</a>
 	</section>
 
-	<div class="hb-spacer-5 hb-lg-spacer-6"></div>
+	<!--<div class="hb-spacer-5 hb-lg-spacer-6"></div>
 
 	<section>
 		<div class="supportOverview__widget optionBox hb-mi-auto hb-mbe-3">
@@ -74,7 +86,7 @@
 		<a class="action action--ulterior" href="https://www.darujme.cz/darovat/525?frequency=once&widget=1203034" rel="noopener" target="_blank">
 			darovat jednorázově
 		</a>
-	</section>
+	</section>-->
 
 	<div class="hb-spacer-5 hb-lg-spacer-6"></div>
 

diff --git a/UI/SupportOverview/SupportOverviewController.php b/UI/SupportOverview/SupportOverviewController.php
@@ -7,6 +7,7 @@
 use HnutiBrontosaurus\Theme\UI\Controller;
 use Latte\Engine;
 use stdClass;
+use function array_chunk;
 use function sprintf;
 use function wp_get_theme;
 
@@ -29,7 +30,7 @@ public function render(): void
 		});
 
 		$params = [
-			'whatWeDo' => self::whatWeDo(),
+			'whatWeDo' => array_chunk(self::whatWeDo(), length: 3),
 			'aboutSuccessesLink' => $this->base->getLinkFor(AboutSuccessesController::PAGE_SLUG),
 			'stories' => self::stories(),
 			'references' => self::references(),
@@ -52,6 +53,7 @@ private static function whatWeDo(): array
 					'Sázíme stromořadí, oživujeme polní krajinu, staráme se o mokřady, budujeme lužní park Krče. Chceme s dobrovolníky a dobrovolnicemi obnovit další místa po celé ČR. Podpoř nás v tom.',
 				],
 				'image' => self::imagePathFor('adopce-krajina'),
+				'price' => 2000,
 			],
 			(object) [
 				'title' => 'Pro památky',
@@ -60,6 +62,7 @@ private static function whatWeDo(): array
 					'Chceme v tom pokračovat a opravovat i méně známé památky u nás i u krajanů v Banátu. Podpoř nás, ať můžeme pomáhat na dalších lokalitách.',
 				],
 				'image' => self::imagePathFor('adopce-pamatky'),
+				'price' => 1000,
 			],
 			(object) [
 				'title' => 'Chráníme vše živé',
@@ -68,6 +71,7 @@ private static function whatWeDo(): array
 					'Budujeme úkryty, vyvěšujeme budky i netopýrníky, vysazujeme květnaté louky, staráme se o migrující žáby. Podpoř nás při tvorbě prostředí plného ptačího zpěvu a hmyzího bzukotu.',
 				],
 				'image' => self::imagePathFor('adopce-zivot'),
+				'price' => 600,
 			],
 			(object) [
 				'title' => 'Práce na chráněných územích',
@@ -76,6 +80,7 @@ private static function whatWeDo(): array
 					'Snažíme se přispět k jejich zachování. Péčí o orchidejové louky, udržováním stepních společenstev či bojem s invazními druhy. Podpoř zapojení dalších mladých lidí do těchto aktivit!',
 				],
 				'image' => self::imagePathFor('adopce-uzemi'),
+				'price' => 200,
 			],
 			(object) [
 				'title' => 'Pro další generace',
@@ -84,6 +89,7 @@ private static function whatWeDo(): array
 					'Na výukových programech v přírodě jim ukazujeme, jak mohou životní prostředí chránit. Podpoř aktivity pro mládež, která se chce podílet na naší budoucnosti.',
 				],
 				'image' => self::imagePathFor('adopce-generace'),
+				'price' => 100,
 			],
 		];
 	}

diff --git a/frontend/src/styles/pages/support-overview.scss b/frontend/src/styles/pages/support-overview.scss
@@ -86,4 +86,18 @@
 			}
 		}
 	}
+
+	.hb-option {
+		justify-content: flex-start;
+	}
+	.hb-option__image {
+		border-radius: unset;
+	}
+	.hb-option--imageFirst .hb-option__image {
+		order: -1;
+	}
+	.hb-option__button {
+		position: relative;
+		height: 2rem;
+	}
 }