matt/spl-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve LGA template

Browse Source 
- Use columns instead of grid so it looks better on mobile
- Add message if there are no candidates for a particular ward
- Tweak spacing of candidate name and ticks
This commit is contained in:
Matt Way
2024-08-18 23:43:58 +10:00
parent 7950bab0c9
commit 8b3ddec283
1 changed files with 65 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
php-template/template.php
View File

@@ -13,55 +13,80 @@
<?php endif ?> <?php endif ?>
<?php foreach ($config['wardNames'] as $index => $wardName): ?> <?php foreach ($config['wardNames'] as $index => $wardName): ?>
<!-- wp:heading {"level":3,"className":"is-style-default"} --> <!-- wp:heading {"level":3,"className":"is-style-default"} -->
<?php $wardSlug = strtolower(str_replace(' ', '-', $wardName)); ?> <?php $wardSlug = strtolower(str_replace(' ', '-', $wardName)); ?>
<h3 class="wp-block-heading is-style-default" id="<?php echo $wardSlug; ?>"><a style="text-decoration: none;" href="#<?php echo $wardSlug; ?>"><?php echo $wardName; ?></a></h3> <h3 class="wp-block-heading is-style-default" id="<?php echo $wardSlug; ?>"><a style="text-decoration: none;" href="#<?php echo $wardSlug; ?>"><?php echo $wardName; ?></a></h3>
<!-- /wp:heading --> <!-- /wp:heading -->
<?php <?php
$wardCandidates = array_filter($candidates, function ($candidate) use ($wardName) { $wardCandidates = array_filter($candidates, function ($candidate) use ($wardName) {
return isset($candidate["Ward"]) && $candidate["Ward"] === $wardName; return isset($candidate["Ward"]) && $candidate["Ward"] === $wardName;
}); });
usort($wardCandidates, function($a, $b) { usort($wardCandidates, function($a, $b) {
if ($a == $b) { if ($a == $b) {
return 0; return 0;
} }
return (((int) $a) < ((int) $b)) ? 1 : -1; return (((int) $a) < ((int) $b)) ? 1 : -1;
}); });
if (count($wardCandidates) == 0) continue; if (count($wardCandidates) > 0):
?> ?>
<!-- wp:group {"style":{"spacing":{"padding":{"top":"0","bottom":"7rem"}}},"layout":{"type":"grid","columnCount":4}} -->
<div class="wp-block-group" style="padding-top:0;padding-bottom:7rem"> <?php
<?php foreach ($wardCandidates as $index => $candidate): ?> $columnCount = 4;
<!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group"> $chunkedWardCandidates = array_chunk($wardCandidates, $columnCount);
<?php
if (isset($candidate['Picture']) && isset($media[$candidate['Picture']])) {
$candidate_image = $media[$candidate['Picture']];
} else {
$candidate_image = $media['default.png'];
}
?> ?>
<!-- wp:image {"id":<?php echo $candidate_image['id']; ?>,"width":"200px","height":"200px","scale":"cover","style":{"color":{}},"className":"is-resized"} --> <?php foreach($chunkedWardCandidates as $chunk): ?>
<figure class="wp-block-image is-resized"><img src="<?php echo $candidate_image['url']; ?>" alt="" class="wp-image-<?php echo $candidate_image['id']; ?>" style="object-fit:cover;width:200px;height:200px"/></figure> <!-- wp:columns -->
<!-- /wp:image --> <div class="wp-block-columns">
<?php for ($columnIdx = 0; $columnIdx < $columnCount; $columnIdx++): ?>
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:heading {"fontSize":"medium"} --> <?php if (array_key_exists($columnIdx, $chunk)): ?>
<h2 class="wp-block-heading has-medium-font-size"><strong><?php echo $candidate['Candidate Name']; ?></strong></h2> <?php
<!-- /wp:heading --> $candidate = $chunk[$columnIdx];
<!-- wp:paragraph {"style":{"layout":{"selfStretch":"fit","flexSize":null}},"fontSize":"large"} --> if (isset($candidate['Picture']) && isset($media[$candidate['Picture']])) {
<p class="has-large-font-size" style="color: rgba(100%, 0%, 0%, 0); text-shadow: 0 0 0 green;"><?php echo str_repeat("✔️", $candidate['Rating']); ?></p> $candidate_image = $media[$candidate['Picture']];
} else {
$candidate_image = $media['default.png'];
}
?>
<!-- wp:image {"id":<?php echo $candidate_image['id']; ?>,"width":"200px","height":"200px","scale":"cover","align":"center","style":{"color":{}},"className":"is-resized"} -->
<figure class="wp-block-image aligncenter is-resized"><img src="<?php echo $candidate_image['url']; ?>" alt="" class="wp-image-<?php echo $candidate_image['id']; ?>" style="object-fit:cover;width:200px;height:200px"/></figure>
<!-- /wp:image -->
<!-- wp:heading {"textAlign":"center","className":"wp-block-heading has-text-align-center has-medium-font-size","style":{"spacing":{"margin":{"top":"1rem"}}}} -->
<h2 class="wp-block-heading has-text-align-center has-medium-font-size" style="margin-top:1rem"><strong><?php echo $candidate['Candidate Name']; ?></strong></h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"layout":{"selfStretch":"fit","flexSize":null},"typography":{"lineHeight":"1"},"spacing":{"margin":{"top":"0.5rem","bottom":"1.5rem"}}},"fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size" style="margin-top:0.5rem;margin-bottom:1.5rem;line-height:1;color: rgba(100%, 0%, 0%, 0);text-shadow: 0 0 0 green;"><?php echo str_repeat("✔️", $candidate['Rating']); ?></p>
<!-- /wp:paragraph -->
<?php endif; ?>
</div>
<!-- /wp:column -->
<?php endfor; ?>
</div>
<!-- /wp:columns -->
<?php endforeach; ?>
<?php else: ?>
<!-- wp:paragraph -->
<p>We don't know who the candidates are for <?php echo $wardName; ?> ward yet.</p>
<!-- /wp:paragraph --> <!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
<?php endforeach; ?>
</div> <?php endif; ?>
<!-- /wp:group -->
<?php endforeach; ?> <?php endforeach; ?>
<?php if (isset($config['footer'])): ?> <?php if (isset($config['footer'])): ?>