diff --git a/src/assets/app.scss b/src/assets/app.scss index f550406f..d233e8d9 100644 --- a/src/assets/app.scss +++ b/src/assets/app.scss @@ -556,6 +556,31 @@ h5.settings-subheading::after { border-bottom: 1px solid $dark-border-color; } + +$shadow-box-padding: 20px; + +.shadow-box-with-fixed-bottom-bar { + padding-top: $shadow-box-padding; + padding-bottom: 0; + padding-right: $shadow-box-padding; + padding-left: $shadow-box-padding; +} + +.fixed-bottom-bar { + position: sticky; + bottom: 0; + margin-left: -$shadow-box-padding; + margin-right: -$shadow-box-padding; + z-index: 100; + background-color: rgba(white, 0.2); + backdrop-filter: blur(2px); + border-radius: 0 0 10px 10px; + + .dark & { + background-color: rgba($dark-header-bg, 0.9); + } +} + // Localization @import "localization.scss"; diff --git a/src/components/MaintenanceTime.vue b/src/components/MaintenanceTime.vue index 9a798031..ba885553 100644 --- a/src/components/MaintenanceTime.vue +++ b/src/components/MaintenanceTime.vue @@ -10,7 +10,7 @@ {{ endDateTime }}
- UTC{{ maintenance.timezoneOffset }} {{ maintenance.timezone }} + UTC{{ maintenance.timezoneOffset }} {{ maintenance.timezone }}
diff --git a/src/lang/en.json b/src/lang/en.json index d09e4882..4a2fe881 100644 --- a/src/lang/en.json +++ b/src/lang/en.json @@ -398,6 +398,8 @@ "startDateTime": "Start Date/Time", "endDateTime": "End Date/Time", "cronExpression": "Cron Expression", + "cronSchedule": "Schedule: ", + "invalidCronExpression": "Invalid Cron Expression: {0}", "recurringInterval": "Interval", "Recurring": "Recurring", "strategyManual": "Active/Inactive Manually", diff --git a/src/pages/EditMaintenance.vue b/src/pages/EditMaintenance.vue index 1f59305c..eb9ef7fd 100644 --- a/src/pages/EditMaintenance.vue +++ b/src/pages/EditMaintenance.vue @@ -3,7 +3,7 @@

{{ pageName }}

-
+
@@ -108,7 +108,7 @@ -

Run: {{ cronDescription }}

+

{{ $t("cronSchedule") }}{{ cronDescription }}

@@ -233,17 +233,12 @@
- -
- -
+ +
+ +
@@ -256,7 +251,7 @@ import VueMultiselect from "vue-multiselect"; import dayjs from "dayjs"; import Datepicker from "@vuepic/vue-datepicker"; import { timezoneList } from "../util-frontend"; -import cronstrue from "cronstrue"; +import cronstrue from "cronstrue/i18n"; const toast = useToast(); @@ -330,9 +325,28 @@ export default { if (! this.maintenance.cron) { return ""; } - return cronstrue.toString(this.maintenance.cron, { - locale: "zh-TW", - }); + + let locale = ""; + + if (this.$root.language) { + locale = this.$root.language.replace("-", "_"); + } + + // Special handling + // If locale is also not working in your language, you can map it here + // https://github.com/bradymholt/cRonstrue/tree/master/src/i18n/locales + if (locale === "zh_HK") { + locale = "zh_TW"; + } + + try { + return cronstrue.toString(this.maintenance.cron, { + locale, + }); + } catch (e) { + return this.$t("invalidCronExpression", e.message); + } + }, selectedStatusPagesOptions() { @@ -528,10 +542,6 @@ export default {