UI and accessibility fixes
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
15766c4e16
commit
9b3674922e
|
@ -16,6 +16,15 @@ body {
|
||||||
.btn-outlined-primary {
|
.btn-outlined-primary {
|
||||||
@apply bg-transparent text-black dark:text-white font-semibold py-2 px-4 border border-mbz-bluegreen dark:border-violet-3;
|
@apply bg-transparent text-black dark:text-white font-semibold py-2 px-4 border border-mbz-bluegreen dark:border-violet-3;
|
||||||
}
|
}
|
||||||
|
.btn-outlined-success {
|
||||||
|
@apply border-mbz-success;
|
||||||
|
}
|
||||||
|
.btn-outlined-danger {
|
||||||
|
@apply border-mbz-danger;
|
||||||
|
}
|
||||||
|
.btn-outlined-warning {
|
||||||
|
@apply border-mbz-warning;
|
||||||
|
}
|
||||||
.btn-outlined-:hover,
|
.btn-outlined-:hover,
|
||||||
.btn-outlined-primary:hover {
|
.btn-outlined-primary:hover {
|
||||||
@apply font-bold py-2 px-4 bg-mbz-bluegreen dark:bg-violet-3 text-white rounded;
|
@apply font-bold py-2 px-4 bg-mbz-bluegreen dark:bg-violet-3 text-white rounded;
|
||||||
|
@ -32,6 +41,9 @@ body {
|
||||||
.btn-success {
|
.btn-success {
|
||||||
@apply bg-mbz-success;
|
@apply bg-mbz-success;
|
||||||
}
|
}
|
||||||
|
.btn-warning {
|
||||||
|
@apply bg-mbz-warning;
|
||||||
|
}
|
||||||
.btn-text {
|
.btn-text {
|
||||||
@apply bg-transparent border-transparent text-black dark:text-white font-normal underline hover:bg-zinc-200 hover:text-black;
|
@apply bg-transparent border-transparent text-black dark:text-white font-normal underline hover:bg-zinc-200 hover:text-black;
|
||||||
}
|
}
|
||||||
|
@ -171,7 +183,7 @@ body {
|
||||||
|
|
||||||
/* Select */
|
/* Select */
|
||||||
.select {
|
.select {
|
||||||
@apply dark:bg-zinc-600 dark:placeholder:text-zinc-400 dark:text-zinc-50 rounded pl-2 pr-6 border-2 border-transparent h-10 shadow-none;
|
@apply dark:bg-zinc-600 dark:placeholder:text-zinc-400 dark:text-zinc-50 rounded pl-2 pr-6 border-2 border-transparent h-10 shadow-none border rounded;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Radio */
|
/* Radio */
|
||||||
|
@ -278,3 +290,35 @@ button.menubar__button {
|
||||||
.menubar__button {
|
.menubar__button {
|
||||||
@apply hover:bg-[rgba(0,0,0,.05)];
|
@apply hover:bg-[rgba(0,0,0,.05)];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** Datepicker */
|
||||||
|
.o-drop__menu--active {
|
||||||
|
@apply z-50;
|
||||||
|
}
|
||||||
|
.o-dpck__box {
|
||||||
|
@apply px-4 py-1;
|
||||||
|
}
|
||||||
|
.o-dpck__header {
|
||||||
|
@apply pb-2 mb-2;
|
||||||
|
border-bottom: 1px solid #dbdbdb;
|
||||||
|
}
|
||||||
|
.o-dpck__header__next,
|
||||||
|
.o-dpck__header__previous {
|
||||||
|
@apply justify-center text-center no-underline cursor-pointer items-center shadow-none inline-flex relative select-none leading-6 border rounded h-10 p-2 m-1;
|
||||||
|
min-width: 2.25em;
|
||||||
|
}
|
||||||
|
.o-dpck__header__list {
|
||||||
|
@apply order-2 items-center flex justify-center text-center list-none flex-wrap my-0 p-0 -mx-0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.o-dpck__header__list > * {
|
||||||
|
@apply mx-0.5;
|
||||||
|
}
|
||||||
|
.o-dpck__month__cell,
|
||||||
|
.o-dpck__table__cell {
|
||||||
|
@apply rounded py-2 px-3;
|
||||||
|
}
|
||||||
|
.o-dpck__month__head-cell,
|
||||||
|
.o-dpck__table__head-cell {
|
||||||
|
@apply font-semibold;
|
||||||
|
}
|
||||||
|
|
|
@ -53,7 +53,7 @@
|
||||||
:pattern="
|
:pattern="
|
||||||
modelValue.pattern ? modelValue.pattern.source : undefined
|
modelValue.pattern ? modelValue.pattern.source : undefined
|
||||||
"
|
"
|
||||||
:validation-message="$t(`This URL doesn't seem to be valid`)"
|
:validation-message="t(`This URL doesn't seem to be valid`)"
|
||||||
required
|
required
|
||||||
v-model="metadataItemValue"
|
v-model="metadataItemValue"
|
||||||
:placeholder="modelValue.placeholder"
|
:placeholder="modelValue.placeholder"
|
||||||
|
@ -78,10 +78,11 @@
|
||||||
</o-checkbox>
|
</o-checkbox>
|
||||||
</o-field>
|
</o-field>
|
||||||
</div>
|
</div>
|
||||||
<o-button
|
<o-button icon-left="close" @click="$emit('removeItem', modelValue.key)">
|
||||||
icon-left="close"
|
<span class="sr-only">
|
||||||
@click="$emit('removeItem', modelValue.key)"
|
{{ t("Remove") }}
|
||||||
/>
|
</span>
|
||||||
|
</o-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -89,6 +90,7 @@
|
||||||
import { EventMetadataKeyType, EventMetadataType } from "@/types/enums";
|
import { EventMetadataKeyType, EventMetadataType } from "@/types/enums";
|
||||||
import { IEventMetadataDescription } from "@/types/event-metadata";
|
import { IEventMetadataDescription } from "@/types/event-metadata";
|
||||||
import { computed, ref } from "vue";
|
import { computed, ref } from "vue";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
modelValue: IEventMetadataDescription;
|
modelValue: IEventMetadataDescription;
|
||||||
|
@ -96,6 +98,8 @@ const props = defineProps<{
|
||||||
|
|
||||||
const emit = defineEmits(["update:modelValue", "removeItem"]);
|
const emit = defineEmits(["update:modelValue", "removeItem"]);
|
||||||
|
|
||||||
|
const { t } = useI18n({ useScope: "global" });
|
||||||
|
|
||||||
const urlInput = ref<any>(null);
|
const urlInput = ref<any>(null);
|
||||||
|
|
||||||
const metadataItemValue = computed({
|
const metadataItemValue = computed({
|
||||||
|
|
|
@ -141,10 +141,6 @@ const mountLocateControl = () => {
|
||||||
icon.setAttribute("aria-hidden", "true");
|
icon.setAttribute("aria-hidden", "true");
|
||||||
icon.setAttribute("role", "img");
|
icon.setAttribute("role", "img");
|
||||||
icon.insertAdjacentHTML("beforeend", locationIconHTML.value);
|
icon.insertAdjacentHTML("beforeend", locationIconHTML.value);
|
||||||
console.log("icon for location", {
|
|
||||||
link,
|
|
||||||
icon,
|
|
||||||
});
|
|
||||||
return { link, icon };
|
return { link, icon };
|
||||||
},
|
},
|
||||||
...props.options,
|
...props.options,
|
||||||
|
|
|
@ -36,12 +36,13 @@
|
||||||
<o-field
|
<o-field
|
||||||
v-if="eventCategories"
|
v-if="eventCategories"
|
||||||
:label="t('Category')"
|
:label="t('Category')"
|
||||||
label-for="category"
|
label-for="categoryField"
|
||||||
class="w-full md:max-w-fit"
|
class="w-full md:max-w-fit"
|
||||||
>
|
>
|
||||||
<o-select
|
<o-select
|
||||||
:placeholder="t('Select a category')"
|
:placeholder="t('Select a category')"
|
||||||
v-model="event.category"
|
v-model="event.category"
|
||||||
|
id="categoryField"
|
||||||
expanded
|
expanded
|
||||||
>
|
>
|
||||||
<option
|
<option
|
||||||
|
@ -339,10 +340,15 @@
|
||||||
)
|
)
|
||||||
}}
|
}}
|
||||||
</legend>
|
</legend>
|
||||||
<o-field class="event__status__field">
|
<o-field class="radio-buttons">
|
||||||
<o-radio
|
<o-radio
|
||||||
v-model="event.status"
|
v-model="event.status"
|
||||||
name="status"
|
name="status"
|
||||||
|
class="mr-2 p-2 rounded border"
|
||||||
|
:class="{
|
||||||
|
'btn-warning': event.status === EventStatus.TENTATIVE,
|
||||||
|
'btn-outlined-warning': event.status !== EventStatus.TENTATIVE,
|
||||||
|
}"
|
||||||
variant="warning"
|
variant="warning"
|
||||||
:native-value="EventStatus.TENTATIVE"
|
:native-value="EventStatus.TENTATIVE"
|
||||||
>
|
>
|
||||||
|
@ -353,6 +359,11 @@
|
||||||
v-model="event.status"
|
v-model="event.status"
|
||||||
name="status"
|
name="status"
|
||||||
variant="success"
|
variant="success"
|
||||||
|
class="mr-2 p-2 rounded border"
|
||||||
|
:class="{
|
||||||
|
'btn-success': event.status === EventStatus.CONFIRMED,
|
||||||
|
'btn-outlined-success': event.status !== EventStatus.CONFIRMED,
|
||||||
|
}"
|
||||||
:native-value="EventStatus.CONFIRMED"
|
:native-value="EventStatus.CONFIRMED"
|
||||||
>
|
>
|
||||||
<o-icon icon="calendar-check" />
|
<o-icon icon="calendar-check" />
|
||||||
|
@ -361,6 +372,11 @@
|
||||||
<o-radio
|
<o-radio
|
||||||
v-model="event.status"
|
v-model="event.status"
|
||||||
name="status"
|
name="status"
|
||||||
|
class="p-2 rounded border"
|
||||||
|
:class="{
|
||||||
|
'btn-danger': event.status === EventStatus.CANCELLED,
|
||||||
|
'btn-outlined-danger': event.status !== EventStatus.CANCELLED,
|
||||||
|
}"
|
||||||
variant="danger"
|
variant="danger"
|
||||||
:native-value="EventStatus.CANCELLED"
|
:native-value="EventStatus.CANCELLED"
|
||||||
>
|
>
|
||||||
|
@ -490,105 +506,6 @@
|
||||||
</nav>
|
</nav>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
// @use "@/styles/_mixins" as *;
|
|
||||||
// main section > .container {
|
|
||||||
|
|
||||||
// form {
|
|
||||||
// h2 {
|
|
||||||
// margin: 15px 0 7.5px;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// legend {
|
|
||||||
// margin-bottom: 0.75rem;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .save__navbar {
|
|
||||||
// :deep(.navbar-menu),
|
|
||||||
// .navbar-end {
|
|
||||||
// flex-wrap: wrap;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// @media screen and (max-width: 768px) {
|
|
||||||
// .navbar.is-fixed-bottom {
|
|
||||||
// position: initial;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// h2.subtitle {
|
|
||||||
// margin: 10px 0;
|
|
||||||
|
|
||||||
// span {
|
|
||||||
// padding: 5px 7px;
|
|
||||||
// display: inline;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .event__status__field {
|
|
||||||
// :deep(.field.has-addons) {
|
|
||||||
// display: flex;
|
|
||||||
// flex-wrap: wrap;
|
|
||||||
// justify-content: flex-start;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .datepicker {
|
|
||||||
// :deep(.dropdown-menu) {
|
|
||||||
// z-index: 200;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// section {
|
|
||||||
// .begins-on-field {
|
|
||||||
// margin-top: 22px;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// nav.navbar {
|
|
||||||
// min-height: 2rem !important;
|
|
||||||
|
|
||||||
// .container {
|
|
||||||
// min-height: 2rem;
|
|
||||||
|
|
||||||
// .navbar-menu,
|
|
||||||
// .navbar-end {
|
|
||||||
// display: flex !important;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .navbar-end {
|
|
||||||
// justify-content: flex-end;
|
|
||||||
// @include margin-left(auto);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .address {
|
|
||||||
// :deep(.address-autocomplete) {
|
|
||||||
// margin-bottom: 0 !important;
|
|
||||||
// }
|
|
||||||
// .is-online {
|
|
||||||
// margin-bottom: 10px;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
</style>
|
|
||||||
<style lang="scss">
|
|
||||||
// .dialog .modal-card {
|
|
||||||
// max-width: 500px;
|
|
||||||
|
|
||||||
// .modal-card-foot {
|
|
||||||
// justify-content: center;
|
|
||||||
// flex-wrap: wrap;
|
|
||||||
|
|
||||||
// & > button {
|
|
||||||
// margin-bottom: 5px;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { getTimezoneOffset } from "date-fns-tz";
|
import { getTimezoneOffset } from "date-fns-tz";
|
||||||
import PictureUpload from "@/components/PictureUpload.vue";
|
import PictureUpload from "@/components/PictureUpload.vue";
|
||||||
|
@ -1416,3 +1333,15 @@ watch(group, () => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.radio-buttons input[type="radio"] {
|
||||||
|
& {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
& + span.radio-label {
|
||||||
|
padding-left: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -73,6 +73,7 @@ module.exports = {
|
||||||
"mbz-info": "#36bcd4",
|
"mbz-info": "#36bcd4",
|
||||||
"mbz-danger": "#cd2026",
|
"mbz-danger": "#cd2026",
|
||||||
"mbz-success": "#0d8758",
|
"mbz-success": "#0d8758",
|
||||||
|
"mbz-warning": '#ffe08a',
|
||||||
// primary: "#272633",
|
// primary: "#272633",
|
||||||
// secondary: "#ED8D07",
|
// secondary: "#ED8D07",
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in a new issue