tfeigel
932c6cc90b
Added a new Chronik block feature with PHP templates to render the timeline design, updated blueprint files to define Chronik-specific fields, and migrated related content into structured formats. Introduced a visually structured timeline with left/right alignment support for chronological events.
52 lines
2.3 KiB
PHP
52 lines
2.3 KiB
PHP
<div class="flex flex-row w-full">
|
|
<!-- left col -->
|
|
<div class="w-2/5 px-2 py-10">
|
|
<?php if ($block->kind() == "left"): ?>
|
|
<div class="text-gray-600">
|
|
<div class="flex flex-col w-full rounded-lg shadow bg-white px-4 py-5 text-right">
|
|
<?php if ($block->image()->isNotEmpty()): ?>
|
|
<img class="pb-2" src="<?= $block->image()->toFile()->url() ?>" alt="">
|
|
<?php endif ?>
|
|
<div class="text-gray-600 py-4">
|
|
<div class="text-3xl font-bold"><?= $block->year() ?></div>
|
|
</div>
|
|
<div class="text-sf_grau-700 font-bold py-2">
|
|
<p><?= $block->summary() ?></p>
|
|
</div>
|
|
<div class="text-gray-600">
|
|
<p><?= $block->description() ?></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endif ?>
|
|
</div>
|
|
<!--line column-->
|
|
<div class="w-1/5 flex justify-center">
|
|
<div class="relative flex h-full w-1 bg-sf_gelb-500 items-center justify-center">
|
|
<div class="absolute flex flex-col justify-center h-24 w-24 rounded-full border-4 border-sf_gelb-500 leading-none text-center z-10 bg-white font-thin">
|
|
<div><?= $block->year() ?></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--right column-->
|
|
<div class="w-2/5 px-2 py-10 ">
|
|
<?php if ($block->kind() == "right"): ?>
|
|
<div class="text-gray-600">
|
|
<div class="flex flex-col w-full rounded-lg shadow bg-white px-4 py-5 text-left">
|
|
<?php if ($block->image()->isNotEmpty()): ?>
|
|
<img class="pb-2" src="<?= $block->image()->toFile()->url() ?>" alt="">
|
|
<?php endif ?>
|
|
<div class="text-gray-600 py-4">
|
|
<div class="text-3xl font-bold"><?= $block->year() ?></div>
|
|
</div>
|
|
<div class="text-sf_grau-700 font-bold py-2">
|
|
<p><?= $block->summary() ?></p>
|
|
</div>
|
|
<div class="text-gray-600">
|
|
<p><?= $block->description() ?></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endif ?>
|
|
</div>
|
|
</div>
|