UI and accessibility fixes
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
parent
15766c4e16
commit
9b3674922e
|
|
@ -16,6 +16,15 @@ body {
|
|||
.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;
|
||||
}
|
||||
.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-primary:hover {
|
||||
@apply font-bold py-2 px-4 bg-mbz-bluegreen dark:bg-violet-3 text-white rounded;
|
||||
|
|
@ -32,6 +41,9 @@ body {
|
|||
.btn-success {
|
||||
@apply bg-mbz-success;
|
||||
}
|
||||
.btn-warning {
|
||||
@apply bg-mbz-warning;
|
||||
}
|
||||
.btn-text {
|
||||
@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 {
|
||||
@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 */
|
||||
|
|
@ -278,3 +290,35 @@ button.menubar__button {
|
|||
.menubar__button {
|
||||
@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="
|
||||
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
|
||||
v-model="metadataItemValue"
|
||||
:placeholder="modelValue.placeholder"
|
||||
|
|
@ -78,10 +78,11 @@
|
|||
</o-checkbox>
|
||||
</o-field>
|
||||
</div>
|
||||
<o-button
|
||||
icon-left="close"
|
||||
@click="$emit('removeItem', modelValue.key)"
|
||||
/>
|
||||
<o-button icon-left="close" @click="$emit('removeItem', modelValue.key)">
|
||||
<span class="sr-only">
|
||||
{{ t("Remove") }}
|
||||
</span>
|
||||
</o-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -89,6 +90,7 @@
|
|||
import { EventMetadataKeyType, EventMetadataType } from "@/types/enums";
|
||||
import { IEventMetadataDescription } from "@/types/event-metadata";
|
||||
import { computed, ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: IEventMetadataDescription;
|
||||
|
|
@ -96,6 +98,8 @@ const props = defineProps<{
|
|||
|
||||
const emit = defineEmits(["update:modelValue", "removeItem"]);
|
||||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
const urlInput = ref<any>(null);
|
||||
|
||||
const metadataItemValue = computed({
|
||||
|
|
|
|||
|
|
@ -141,10 +141,6 @@ const mountLocateControl = () => {
|
|||
icon.setAttribute("aria-hidden", "true");
|
||||
icon.setAttribute("role", "img");
|
||||
icon.insertAdjacentHTML("beforeend", locationIconHTML.value);
|
||||
console.log("icon for location", {
|
||||
link,
|
||||
icon,
|
||||
});
|
||||
return { link, icon };
|
||||
},
|
||||
...props.options,
|
||||
|
|
|
|||
|
|
@ -36,12 +36,13 @@
|
|||
<o-field
|
||||
v-if="eventCategories"
|
||||
:label="t('Category')"
|
||||
label-for="category"
|
||||
label-for="categoryField"
|
||||
class="w-full md:max-w-fit"
|
||||
>
|
||||
<o-select
|
||||
:placeholder="t('Select a category')"
|
||||
v-model="event.category"
|
||||
id="categoryField"
|
||||
expanded
|
||||
>
|
||||
<option
|
||||
|
|
@ -339,10 +340,15 @@
|
|||
)
|
||||
}}
|
||||
</legend>
|
||||
<o-field class="event__status__field">
|
||||
<o-field class="radio-buttons">
|
||||
<o-radio
|
||||
v-model="event.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"
|
||||
:native-value="EventStatus.TENTATIVE"
|
||||
>
|
||||
|
|
@ -353,6 +359,11 @@
|
|||
v-model="event.status"
|
||||
name="status"
|
||||
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"
|
||||
>
|
||||
<o-icon icon="calendar-check" />
|
||||
|
|
@ -361,6 +372,11 @@
|
|||
<o-radio
|
||||
v-model="event.status"
|
||||
name="status"
|
||||
class="p-2 rounded border"
|
||||
:class="{
|
||||
'btn-danger': event.status === EventStatus.CANCELLED,
|
||||
'btn-outlined-danger': event.status !== EventStatus.CANCELLED,
|
||||
}"
|
||||
variant="danger"
|
||||
:native-value="EventStatus.CANCELLED"
|
||||
>
|
||||
|
|
@ -490,105 +506,6 @@
|
|||
</nav>
|
||||
</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>
|
||||
import { getTimezoneOffset } from "date-fns-tz";
|
||||
import PictureUpload from "@/components/PictureUpload.vue";
|
||||
|
|
@ -1416,3 +1333,15 @@ watch(group, () => {
|
|||
}
|
||||
});
|
||||
</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-danger": "#cd2026",
|
||||
"mbz-success": "#0d8758",
|
||||
"mbz-warning": '#ffe08a',
|
||||
// primary: "#272633",
|
||||
// secondary: "#ED8D07",
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue