Layout adaptation

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue

@@ -47,38 +47,14 @@
         </div>
         <div class="footer-ticket-main">
             <ul class="nav nav-tabs justify-content-end">
-                <li class="nav-item">
+                <li class="nav-item p-2">
                     <button
                         type="button"
-                        class="m-2 btn btn-light"
+                        :class="`btn ${
-                        @click="
+                            activeTab === 'set_motive'
-                            activeTab === 'add_comment'
+                                ? 'btn-primary'
-                                ? (activeTab = '')
+                                : 'btn-light'
-                                : (activeTab = 'add_comment')
+                        }`"
-                        "
-                    >
-                        <i :class="actionIcons['add_comment']"></i>
-                        {{ $t("add_comment.title") }}
-                    </button>
-                </li>
-                <li class="nav-item">
-                    <button
-                        type="button"
-                        class="m-2 btn btn-light"
-                        @click="
-                            activeTab === 'add_addressee'
-                                ? (activeTab = '')
-                                : (activeTab = 'add_addressee')
-                        "
-                    >
-                        <i :class="actionIcons['add_addressee']"></i>
-                        {{ $t("add_addressee.title") }}
-                    </button>
-                </li>
-                <li class="nav-item">
-                    <button
-                        type="button"
-                        class="m-2 btn btn-light"
                         @click="
                             activeTab === 'set_motive'
                                 ? (activeTab = '')
@@ -89,10 +65,47 @@
                         {{ $t("set_motive.title") }}
                     </button>
                 </li>
-                <li class="nav-item">
+                <li class="nav-item p-2">
                     <button
                         type="button"
-                        class="m-2 btn btn-light"
+                        :class="`btn ${
+                            activeTab === 'add_comment'
+                                ? 'btn-primary'
+                                : 'btn-light'
+                        }`"
+                        @click="
+                            activeTab === 'add_comment'
+                                ? (activeTab = '')
+                                : (activeTab = 'add_comment')
+                        "
+                    >
+                        <i :class="actionIcons['add_comment']"></i>
+                        {{ $t("add_comment.title") }}
+                    </button>
+                </li>
+                <li class="nav-item p-2">
+                    <button
+                        type="button"
+                        :class="`btn ${
+                            activeTab === 'add_addressee'
+                                ? 'btn-primary'
+                                : 'btn-light'
+                        }`"
+                        @click="
+                            activeTab === 'add_addressee'
+                                ? (activeTab = '')
+                                : (activeTab = 'add_addressee')
+                        "
+                    >
+                        <i :class="actionIcons['add_addressee']"></i>
+                        {{ $t("add_addressee.title") }}
+                    </button>
+                </li>
+
+                <li class="nav-item p-2">
+                    <button
+                        type="button"
+                        class="btn btn-light"
                         @click="handleClick()"
                     >
                         <i class="fa fa-bolt"></i>
@@ -220,11 +233,8 @@ export default defineComponent({
     },
 });
 </script>
+
 <style lang="scss" scoped>
-ul.record_actions.sticky-form-buttons {
-    padding-left: 0px;
-    padding-right: 0px;
-}
 .sticky-form-buttons {
     margin-top: 0px;
     background: none;
@@ -236,4 +246,9 @@ div.footer-ticket-main {
 div.footer-ticket-details {
     background: none repeat scroll 0 0 #efe2ca;
 }
+
+.fixed-bottom {
+    max-width: 1272px;
+    margin: 0 auto;
+}
 </style>

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/BannerComponent.vue

@@ -99,7 +99,7 @@ export default defineComponent({
 
         setInterval(function () {
             today.value = new Date();
-        }, 5000);
+        }, 1000);
 
         const since = computed(() => {
             const date = new Date(createdAt.value.date);
@@ -112,20 +112,21 @@ export default defineComponent({
             const minutesDiff = Math.floor(
                 (timeDiff % (1000 * 3600)) / (1000 * 60)
             );
+            const secondsDiff = Math.floor((timeDiff % (1000 * 60)) / 1000);
 
-            if (daysDiff < 1) {
+            if (daysDiff < 1 && hoursDiff < 1 && minutesDiff < 1) {
-                return `${t("banner.hours", { count: hoursDiff })} ${t(
+                return `${t("banner.seconds", { count: secondsDiff })}`;
-                    "banner.and"
+            } else if (daysDiff < 1) {
-                )} ${t("banner.minutes", {
+                return `${t("banner.hours", { count: hoursDiff })}
-                    count: minutesDiff,
+                ${t("banner.minutes", { count: minutesDiff })}
-                })}`;
+                ${t("banner.seconds", { count: secondsDiff })}`;
             } else {
                 return `${t("banner.days", { count: daysDiff })}, ${t(
                     "banner.hours",
                     {
                         count: hoursDiff,
                     }
-                )} ${t("banner.and")} ${t("banner.minutes", {
+                )}  ${t("banner.minutes", {
                     count: minutesDiff,
                 })}`;
             }

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveSelectorComponent.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="row">
-        <div class="col-12 col-lg-4 col-md-6">
+        <div class="col-12">
             <vue-multiselect
                 name="selectMotive"
                 id="selectMotive"
@@ -16,6 +16,7 @@
                 :selected-label="$t('multiselect.selected_label')"
                 :options="motives"
                 v-model="motive"
+                class="mb-4"
             />
         </div>
     </div>
@@ -64,4 +65,8 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+#selectMotive {
+    margin-bottom: 1.5em;
+}
+</style>

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryAddresseeComponent.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { PropType, defineComponent, ref } from "vue";
+import { PropType, defineComponent } from "vue";
 
 // Types
 import { UserGroupOrUser } from "../../../../../../../ChillMainBundle/Resources/public/types";
@@ -14,7 +14,7 @@ import { UserGroupOrUser } from "../../../../../../../ChillMainBundle/Resources/
 import AddresseeComponent from "./AddresseeComponent.vue";
 
 export default defineComponent({
-    name: "TicketHistoryAddresseeComponent",
+    name: "TicketHistoryAddresseeComponenvt",
     props: {
         addressees: {
             type: Array as PropType<UserGroupOrUser[]>,
@@ -24,7 +24,7 @@ export default defineComponent({
     components: {
         AddresseeComponent,
     },
-    setup(props, ctx) {
+    setup() {
         return {};
     },
 });

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryCommentComponent.vue

@@ -1,6 +1,8 @@
 <template>
     <div class="col-12">
-        <div v-html="convertMarkdownToHtml(commentHistory.content)"></div>
+        <blockquote class="chill-user-quote">
+            <p v-html="convertMarkdownToHtml(commentHistory.content)"></p>
+        </blockquote>
     </div>
 </template>
 

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryMotiveComponent.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="col-12">
+    <div class="col-12 fw-bolder">
         {{ motiveHistory.motive.label.fr }}
     </div>
 </template>

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryPersonComponent.vue

@@ -36,7 +36,7 @@ import { PropType, defineComponent } from "vue";
 import PersonRenderBox from "../../../../../../../ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue";
 
 // Type
-import { PersonHistory, Ticket } from "../../../types";
+import { PersonHistory } from "../../../types";
 
 export default defineComponent({
     name: "TicketHistoryPersonComponent",

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/i18n/messages.ts

@@ -39,9 +39,10 @@ const messages = {
             open: "Ouvert",
             since: "Depuis {time}",
             and: "et",
-            days: "1 jour | {count} jours",
+            days: "‎|1 jour|{count} jours",
-            hours: "1 heure | {count} heures",
+            hours: "‎|1 heure et|{count} heures",
-            minutes: "1 minute | {count} minutes",
+            minutes: "‎|1 minute|{count} minutes",
+            seconds: "‎|1 seconde|{count} secondes",
             no_motive: "Pas de motif",
         },
     },