UI and accessibility fixes

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2022-10-11 10:20:41 +02:00
parent 15766c4e16
commit 9b3674922e
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
5 changed files with 85 additions and 111 deletions

View file

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

View file

@ -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({

View file

@ -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,

View file

@ -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>

View file

@ -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",
}, },