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

57
php-template/template.php
View File

@@ -30,14 +30,27 @@ usort($wardCandidates, function($a, $b) {
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 foreach ($wardCandidates as $index => $candidate): ?>
<!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group">
<?php <?php
$columnCount = 4;
$chunkedWardCandidates = array_chunk($wardCandidates, $columnCount);
?>
<?php foreach($chunkedWardCandidates as $chunk): ?>
<!-- wp:columns -->
<div class="wp-block-columns">
<?php for ($columnIdx = 0; $columnIdx < $columnCount; $columnIdx++): ?>
<!-- wp:column -->
<div class="wp-block-column">
<?php if (array_key_exists($columnIdx, $chunk)): ?>
<?php
$candidate = $chunk[$columnIdx];
if (isset($candidate['Picture']) && isset($media[$candidate['Picture']])) { if (isset($candidate['Picture']) && isset($media[$candidate['Picture']])) {
$candidate_image = $media[$candidate['Picture']]; $candidate_image = $media[$candidate['Picture']];
} else { } else {
@@ -45,23 +58,35 @@ if (count($wardCandidates) == 0) continue;
} }
?> ?>
<!-- wp:image {"id":<?php echo $candidate_image['id']; ?>,"width":"200px","height":"200px","scale":"cover","style":{"color":{}},"className":"is-resized"} --> <!-- 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 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> <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:image -->
<!-- wp:heading {"fontSize":"medium"} --> <!-- 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-medium-font-size"><strong><?php echo $candidate['Candidate Name']; ?></strong></h2> <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:heading -->
<!-- wp:paragraph {"style":{"layout":{"selfStretch":"fit","flexSize":null}},"fontSize":"large"} --> <!-- 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-large-font-size" style="color: rgba(100%, 0%, 0%, 0); text-shadow: 0 0 0 green;"><?php echo str_repeat("✔️", $candidate['Rating']); ?></p> <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 --> <!-- /wp:paragraph -->
</div> <?php endif; ?>
<!-- /wp:group -->
<?php endforeach; ?>
</div> </div>
<!-- /wp:group --> <!-- /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 -->
<?php endif; ?>
<?php endforeach; ?> <?php endforeach; ?>
<?php if (isset($config['footer'])): ?> <?php if (isset($config['footer'])): ?>