Layout adaptation

This commit is contained in:
Boris Waaub 2024-05-22 11:12:22 +02:00
parent a20f9b4f86
commit ca05e3d979
9 changed files with 79 additions and 55 deletions

View File

@ -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"
@click="
activeTab === 'add_comment'
? (activeTab = '')
: (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"
:class="`btn ${
activeTab === 'set_motive'
? 'btn-primary'
: '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>

View File

@ -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) {
return `${t("banner.hours", { count: hoursDiff })} ${t(
"banner.and"
)} ${t("banner.minutes", {
count: minutesDiff,
})}`;
if (daysDiff < 1 && hoursDiff < 1 && minutesDiff < 1) {
return `${t("banner.seconds", { count: secondsDiff })}`;
} else if (daysDiff < 1) {
return `${t("banner.hours", { count: hoursDiff })}
${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,
})}`;
}

View File

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

View File

@ -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 {};
},
});

View File

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

View File

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

View File

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

View File

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