Merge branch 'mobilizon-fork-ui-margins' into 'main'

UI: Minor tweaks and fixes

See merge request framasoft/mobilizon!1434

js/src/App.vue

@@ -24,7 +24,7 @@
     </div>
     <ErrorComponent v-if="error" :error="error" />
 
-    <main id="main" class="pt-4" v-else>
+    <main id="main" class="px-2 py-4" v-else>
       <router-view></router-view>
     </main>
     <mobilizon-footer />

js/src/assets/oruga-tailwindcss.css

@@ -55,7 +55,7 @@ body {
 }
 .btn-outlined-:hover,
 .btn-outlined-primary:hover {
-  @apply font-bold py-2 px-4 bg-mbz-bluegreen dark:bg-violet-3 text-white rounded;
+  @apply font-semibold py-2 px-4 bg-mbz-bluegreen dark:bg-violet-3 text-white rounded;
 }
 
 /* Field */
@@ -89,7 +89,7 @@ body {
 
 /* Input */
 .input {
-  @apply appearance-none box-border border w-full py-2 px-3 text-black leading-tight dark:bg-zinc-600 dark:placeholder:text-zinc-400 dark:text-zinc-50;
+  @apply appearance-none box-border rounded border w-full py-2 px-3 text-black leading-tight dark:bg-zinc-600 dark:placeholder:text-zinc-400 dark:text-zinc-50;
 }
 .input-danger {
   @apply border-red-500;

js/src/components/Event/EventActionSection.vue

@@ -14,8 +14,8 @@
       @confirm-leave="confirmLeave"
       @cancel-anonymous-participation="cancelAnonymousParticipation"
     />
-    <div class="flex flex-col">
+    <div class="flex flex-col gap-1 mt-1">
-      <p class="inline-flex gap-1">
+      <p class="inline-flex gap-2 ml-auto">
         <TicketConfirmationOutline />
         <router-link
           class="participations-link"
@@ -92,7 +92,7 @@
           </template>
         </VTooltip>
       </p>
-      <o-dropdown>
+      <o-dropdown class="ml-auto">
         <template #trigger>
           <o-button icon-right="dots-horizontal">
             {{ t("Actions") }}

js/src/components/Event/FullAddressAutoComplete.vue

@@ -13,6 +13,7 @@
         </template>
         <o-button
           v-if="canShowLocateMeButton"
+          class="!h-auto"
           ref="mapMarker"
           icon-right="map-marker"
           @click="locateMe"
@@ -63,7 +64,7 @@
         <o-button
           :disabled="!queryTextWithDefault"
           @click="resetAddress"
-          class="reset-area"
+          class="reset-area !h-auto"
           icon-left="close"
           :title="t('Clear address field')"
         />

js/src/components/Event/ParticipationButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="ml-auto w-min">
     <o-dropdown
       v-if="participation && participation.role === ParticipantRole.PARTICIPANT"
     >

js/src/oruga-config.ts

@@ -25,6 +25,7 @@ export const orugaConfig = {
   },
   inputitems: {
     itemClass: "inputitems-item",
+    containerClass: "rounded",
   },
   autocomplete: {
     menuClass: "autocomplete-menu",

js/src/plugins/dialog.ts

@@ -49,6 +49,7 @@ export class Dialog {
         hasInput,
       },
       autoFocus: false,
+      contentClass: "!w-11/12",
     });
   }
 
@@ -87,6 +88,7 @@ export class Dialog {
         onConfirm,
         onCancel,
       },
+      contentClass: "!w-11/12",
     });
   }
 }

js/src/views/Account/children/EditIdentity.vue

@@ -53,7 +53,7 @@
           />
 
           <p class="control">
-            <span class="button is-static">@{{ getInstanceHost }}</span>
+            <span class="button is-static !h-auto">@{{ getInstanceHost }}</span>
           </p>
         </o-field>
       </o-field>

js/src/views/Event/EditView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container mx-auto px-1" v-if="hasCurrentActorPermissionsToEdit">
+  <div class="container mx-auto" v-if="hasCurrentActorPermissionsToEdit">
     <h1 class="" v-if="isUpdate === true">
       {{ t("Update event {name}", { name: event.title }) }}
     </h1>
@@ -473,7 +473,7 @@
   <nav
     role="navigation"
     aria-label="main navigation"
-    class="bg-mbz-yellow-alt-200 py-3"
+    class="bg-mbz-yellow-alt-200 p-3 mt-3 rounded"
     :class="{ 'is-fixed-bottom': showFixedNavbar }"
     v-if="hasCurrentActorPermissionsToEdit"
   >
@@ -482,11 +482,11 @@
         <span class="dark:text-gray-900" v-if="isEventModified">
           {{ t("Unsaved changes") }}
         </span>
-        <div class="flex flex-wrap gap-3 items-center">
+        <div class="flex flex-wrap gap-3 items-center justify-end">
           <o-button
             variant="text"
             @click="confirmGoBack"
-            class="dark:!text-black"
+            class="dark:!text-black ml-auto"
             >{{ t("Cancel") }}</o-button
           >
           <!-- If an event has been published we can't make it draft anymore -->
@@ -500,7 +500,7 @@
               >{{ t("Save draft") }}</o-button
             >
           </span>
-          <span class="">
+          <span class="ml-auto">
             <o-button
               variant="primary"
               :disabled="saving"

js/src/views/Event/EventView.vue

@@ -4,7 +4,7 @@
     <div class="flex flex-col mb-3">
       <event-banner :picture="event?.picture" />
       <div
-        class="flex flex-col relative pb-2 bg-white dark:bg-zinc-700 my-2 rounded"
+        class="flex flex-col relative pb-2 bg-white dark:bg-zinc-700 my-4 rounded"
       >
         <div class="date-calendar-icon-wrapper relative" v-if="event?.beginsOn">
           <skeleton-date-calendar-icon
@@ -19,7 +19,7 @@
         </div>
 
         <section class="intro px-2 pt-4" dir="auto">
-          <div class="flex flex-wrap gap-2">
+          <div class="flex flex-wrap gap-2 justify-end">
             <div class="flex-1 min-w-[300px]">
               <div
                 v-if="eventLoading"

js/src/views/Event/MyEventsView.vue

@@ -67,7 +67,7 @@
           />
           <o-button
             @click="dateFilter = new Date()"
-            class="reset-area"
+            class="reset-area !h-auto"
             icon-left="close"
             :title="t('Clear date filter field')"
           />