UI and accessibility fixes

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/assets/oruga-tailwindcss.css

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

js/src/components/Event/EventMetadataItem.vue

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

js/src/components/LeafletMap.vue

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

js/src/views/Event/EditView.vue

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

js/tailwind.config.js

@@ -73,6 +73,7 @@ module.exports = {
         "mbz-info": "#36bcd4",
         "mbz-danger": "#cd2026",
         "mbz-success": "#0d8758",
+        "mbz-warning": '#ffe08a',
         // primary: "#272633",
         // secondary: "#ED8D07",
       },