diff --git a/resources/js/views/EventView.vue b/resources/js/views/EventView.vue index 77f3691..e9de1dd 100644 --- a/resources/js/views/EventView.vue +++ b/resources/js/views/EventView.vue @@ -93,9 +93,10 @@

{{ - event.ages + computedAges }}

+

{{ computedAgeNotice }}

@@ -212,6 +213,34 @@ const expired = computed(() => { }).isBefore(); }); +/** + * Return a human readable Ages string + */ +const computedAges = computed(() => { + const trimmed = event.value.ages.trim(); + const regex = /^(\d+)(\s*\+?\s*|\s*-\s*\d+\s*)?$/; + + if (regex.test(trimmed)) { + return `Ages ${trimmed}`; + } + + return event.value.ages; +}); + +const computedAgeNotice = computed(() => { + const trimmed = event.value.ages.trim(); + const regex = /^(\d+)(\s*\+?\s*|\s*-\s*\d+\s*)?$/; + + if (regex.test(trimmed)) { + const age = parseInt(trimmed, 10); + if (age <= 8) { + return "Parental supervision may be required for children 8 years of age and under."; + } + } + + return ""; +}); + /** * Load the page data. */ @@ -369,9 +398,19 @@ handleLoad(); .sm-workshop-date, .sm-workshop-location, - .sm-workshop-price { + .sm-workshop-price, + .sm-workshop-ages { padding: 0 1rem; } + + .sm-workshop-ages p { + margin-top: 1rem; + margin-left: 1rem; + padding: 0 0 0 0.5rem; + font-size: 80%; + border-left: 4px solid $warning-color; + line-height: 1.2rem; + } } } } @@ -396,6 +435,11 @@ handleLoad(); padding-left: 0; text-align: center; } + + .sm-workshop-ages p { + margin-left: 0; + border-left: 0; + } } } }