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;
+ }
}
}
}