search_ui/components/search/view/ItemShowForm.vue

1408 lines
44 KiB
Vue
Raw Normal View History

2025-02-01 11:06:10 +00:00
<template>
<div class="main-page" ref="myInput3">
<div v-if="showMainpag">
<div class="home-list p-3 main" id="main">
<div class="row">
<div class="col-md-12 col-sm-12 main-button">
<div class="button-change">
<div @click="nextNumber" title="پهنای بیشتر">
<span>
<svg
data-testid="chevron-double-lg-left-icon"
class="s12 icon-chevron-double-lg-right span1"
>
<use
data-v-46e9fe5b=""
href="/assets/img/icons.d6ff8c17.svg#chevron-double-lg-left"
></use>
</svg>
</span>
</div>
<p>پهنای {{ numberPag }}</p>
<div @click="beforeNumber" title="پهنای کمتر">
<span>
<svg
data-testid="chevron-double-lg-left-icon"
class="s12 icon-chevron-double-lg-right"
>
<use
data-v-46e9fe5b=""
href="/assets/img/icons.d6ff8c17.svg#chevron-double-lg-left"
></use>
</svg>
</span>
</div>
</div>
<button
title="بستن"
@click="hidenPanel()"
type="button"
class="popUp-tab__clear btn button-hiden"
style="margin-right: -20px"
>
<span class="tavasi tavasi-Component-21--1"></span>
</button>
<button
:class="{ 'text-primary borderBottom': showNavigation }"
type="button"
class="popUp-tab__clear btn p-2 ms-2"
style="font-size: 11px"
@click.prevent="showNavigation = true"
>
مشخصات
</button>
<button
:class="{ 'text-primary borderBottom': !showNavigation }"
type="button"
class="popUp-tab__clear btn p-2 me-2"
@click.prevent="showNavigation = false"
style="font-size: 11px"
>
موضوعات
</button>
</div>
</div>
<hr />
<div class="row mt-4" style="position: relative">
<div class="col-md-12">
<div v-if="showNavigation">
<div class="collapses-main">
<div class="accordion" id="accordionExample">
<div class="card rounded-0">
<div
class="card-header"
id="headingOne"
style="height: 3rem"
>
<div class="d-flex justify-content-between">
<p style="font-size: 12px; color: black">مشخصات اصلی</p>
<button
class="btn btn-link btn-block text-end collapsed button-meno"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne"
aria-expanded="false"
aria-controls="collapseOne"
>
<span class="tavasi tavasi-Component-358--1"></span>
</button>
</div>
</div>
<div
id="collapseOne"
class="collapse"
aria-labelledby="headingOne"
data-parent="#accordionExample"
>
<div class="card-body">
<form>
<div class="form-group">
<label
for="formGroupExampleInput"
style="font-size: 11px"
>عنوان
</label>
<input
type="text"
class="form-control select-text"
id="formGroupExampleInput"
placeholder="عنوان را وارد نمایید."
v-model="cloneItem.title"
style="font-size: 11px"
/>
</div>
<div class="form-group">
<label
for="formGroupExampleInput2"
style="font-size: 11px"
>صاحب اثر
</label>
<input
type="text"
class="form-control select-text"
id="formGroupExampleInput2"
placeholder=" عنوان را وارد نمایید."
v-model="cloneItem.author"
style="font-size: 11px"
/>
</div>
<div class="d-flex">
<div class="form-group">
<label
for="formGroupExampleInput2"
style="font-size: 11px"
>
کد داخلی
</label>
<input
type="text"
class="form-control select-text"
id="formGroupExampleInput2"
placeholder="کد داخلی را وارد کنید "
v-model="cloneItem.meet_lid"
style="font-size: 11px"
/>
</div>
<div class="form-group me-1">
<label
for="formGroupExampleInput2"
style="font-size: 11px"
>
نوع
</label>
<select
type="text"
class="custom-select select-text"
id="formGroupExampleInput2"
v-model="cloneItem.format"
style="
font-size: 11px;
border-color: rgba(
150,
243,
243,
0.4588235294
);
"
placeholder="نوع جلسه را وارد کنید ."
>
<option
v-if="cloneOptions"
v-for="(cloneOption, index) in cloneOptions"
:key="index"
>
{{ cloneOption.title }}
</option>
</select>
</div>
</div>
<div class="form-group">
<label
for="formGroupExampleInput"
style="font-size: 11px"
>دوره
</label>
<input
type="text"
class="form-control select-text"
id="formGroupExampleInput"
placeholder="نام دوره را وارد فرمایید"
v-model="cloneItem.branch"
style="font-size: 11px"
/>
</div>
<div class="form-group">
<label
for="formGroupExampleInput2"
style="font-size: 11px"
>
تاریخ
</label>
<input
type="text"
class="form-control select-text"
id="formGroupExampleInput2"
placeholder="تاریخ را وارد کنید ."
:value="datefa()"
style="font-size: 11px"
/>
</div>
<div class="" style="position: relative; right: 80%">
<button
type="submit"
class="btn btn-primary"
style="font-size: 11px"
@click.prevent="save2()"
>
ثبت
</button>
</div>
</form>
</div>
</div>
</div>
<div class="card rounded-0">
<div
class="card-header"
id="headingTwo"
style="height: 3rem"
>
<div class="d-flex justify-content-between">
<p style="font-size: 12px; color: black">مشخصات فرعی</p>
<button
class="btn btn-link btn-block text-end collapsed button-meno"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
<span class="tavasi tavasi-Component-358--1"></span>
</button>
</div>
</div>
<div
id="collapseTwo"
class="collapse"
aria-labelledby="headingTwo"
data-parent="#accordionExample"
>
<div class="card-body">
<form>
<div class="form-group">
<label
for="formGroupExampleInput"
style="font-size: 11px"
>عنوان موضوعی
</label>
<input
type="text"
class="form-control select-text"
id="formGroupExampleInput"
placeholder="عنوان را وارد کنید"
v-model="cloneItem.subtitle"
style="font-size: 11px"
/>
</div>
<div class="form-group">
<label
for="formGroupExampleInput2"
style="font-size: 11px"
>
پیوند
</label>
<input
type="text"
class="form-control select-text"
id="formGroupExampleInput2"
placeholder="پیوند اینترنتی را وارد کنید "
v-model="cloneItem.link"
style="font-size: 11px"
/>
</div>
<div class="d-flex">
<div class="form-group">
<label
for="formGroupExampleInput2"
style="font-size: 11px"
>
شهر
</label>
<input
type="text"
class="form-control select-text"
id="formGroupExampleInput2"
placeholder=" شهر"
v-model="cloneItem.city"
style="font-size: 11px"
/>
</div>
<div class="form-group me-1">
<label
for="formGroupExampleInput2"
style="font-size: 11px"
>
مکان
</label>
<input
type="text"
class="form-control select-text"
id="formGroupExampleInput2"
placeholder=" مکان"
v-model="cloneItem.place"
style="font-size: 11px"
/>
</div>
</div>
<div class="form-group">
<label
for="formGroupExampleInput"
style="font-size: 11px"
>
نشانی
</label>
<input
type="text"
class="form-control select-text"
id="formGroupExampleInput"
placeholder="نشانی را وارد کنید"
v-model="cloneItem.address"
style="font-size: 11px"
/>
</div>
<div class="form-group">
<label
for="formGroupExampleInput2"
style="font-size: 11px"
>
تاریخ پایان
</label>
<input
type="text"
class="form-control select-text"
id="formGroupExampleInput2"
placeholder=" تاریخ پایان را وارد کنید"
v-model="cloneItem.end_date"
style="font-size: 11px"
/>
</div>
<div class="" style="position: relative; right: 80%">
<button
type="submit"
class="btn btn-primary"
style="font-size: 11px"
@click.prevent="save2()"
>
ثبت
</button>
</div>
</form>
</div>
</div>
</div>
<div class="card rounded-0">
<div
class="card-header"
id="headingThree"
style="height: 3rem"
>
<div class="d-flex justify-content-between">
<p style="font-size: 12px; color: black">
اطلاعات جلسه
</p>
<button
class="btn btn-link btn-block text-end collapsed button-meno"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree"
>
<span class="tavasi tavasi-Component-358--1"></span>
</button>
</div>
</div>
<div
id="collapseThree"
class="collapse"
aria-labelledby="headingThree"
data-parent="#accordionExample"
>
<div class="card-body">
<form>
<div class="form-group">
<label
for="formGroupExampleInput"
style="font-size: 11px"
>نوع مخاطب
</label>
<input
type="text"
class="form-control select-text"
id="formGroupExampleInput"
placeholder="عنوان را وارد کنید."
v-model="cloneItem.audience"
style="font-size: 11px"
/>
</div>
<div class="form-group">
<label
for="formGroupExampleInput2"
style="font-size: 11px"
>
مناسبت
</label>
<input
type="text"
class="form-control select-text"
id="formGroupExampleInput2"
placeholder="عنوان را وارد کنید."
v-model="cloneItem.ralation"
style="font-size: 11px"
/>
</div>
<div class="form-group">
<label
for="formGroupExampleInput"
style="font-size: 11px"
>حاضرین
</label>
<input
type="text"
class="form-control select-text"
id="formGroupExampleInput"
placeholder="عنوان را با ، جدا کنید"
v-model="cloneItem.attendees"
style="font-size: 11px"
/>
</div>
<div class="" style="position: relative; right: 80%">
<button
type="submit"
class="btn btn-primary"
style="font-size: 11px"
@click.prevent="save2()"
>
ثبت
</button>
</div>
</form>
</div>
</div>
</div>
<div class="card rounded-0">
<div
class="card-header"
id="headingFour"
style="height: 3rem"
>
<div class="d-flex justify-content-between">
<p style="font-size: 12px; color: black">کدها</p>
<button
class="btn btn-link btn-block text-end collapsed button-meno"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseFour"
aria-expanded="false"
aria-controls="collapseFour"
>
<span class="tavasi tavasi-Component-358--1"></span>
</button>
</div>
</div>
<div
id="collapseFour"
class="collapse"
aria-labelledby="headingFour"
data-parent="#accordionExample"
>
<div class="card-body">
<form>
<div class="form-group">
<label
for="formGroupExampleInput"
style="font-size: 11px"
>
کد جلسه
</label>
<input
type="text"
class="form-control select-text"
id="formGroupExampleInput"
placeholder="کد جلسه را وارد کنید "
v-model="cloneItem.meet_code"
style="font-size: 11px"
/>
</div>
<div class="form-group">
<label
for="formGroupExampleInput2"
style="font-size: 11px"
>
کد شخصی
</label>
<input
type="text"
class="form-control select-text"
id="formGroupExampleInput2"
placeholder="کد شخصی را وارد کنید "
v-model="cloneItem.person_code"
style="font-size: 11px"
/>
</div>
<div class="form-group">
<label
for="formGroupExampleInput"
style="font-size: 11px"
>کد پژوهش
</label>
<input
type="text"
class="form-control select-text"
id="formGroupExampleInput"
placeholder="کد پژوهش را وارد کنید "
v-model="cloneItem.research_code"
style="font-size: 11px"
/>
</div>
<div class="form-group">
<label
for="formGroupExampleInput"
style="font-size: 11px"
>کد 1
</label>
<input
type="text"
class="form-control select-text"
id="formGroupExampleInput"
placeholder="کد داخلی را وارد کنید "
v-model="cloneItem.meet_lid"
style="font-size: 11px"
/>
</div>
<div class="" style="position: relative; right: 80%">
<button
type="submit"
class="btn btn-primary"
style="font-size: 11px"
@click.prevent="save2()"
>
ثبت
</button>
</div>
</form>
</div>
</div>
</div>
<div class="card rounded-0">
<div
class="card-header"
id="headingFive"
style="height: 3rem"
>
<div class="d-flex justify-content-between">
<p style="font-size: 12px; color: black">خلاصه</p>
<button
class="btn btn-link btn-block text-end collapsed button-meno"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseFive"
aria-expanded="false"
aria-controls="collapseFive"
>
<span class="tavasi tavasi-Component-358--1"></span>
</button>
</div>
</div>
<div
id="collapseFive"
class="collapse"
aria-labelledby="headingFive"
data-parent="#accordionExample"
>
<div class="card-body">
<form>
<div class="form-group">
<label
for="formGroupExampleInput"
style="font-size: 11px"
>فعل
</label>
<input
type="text"
class="form-control select-text"
id="formGroupExampleInput"
placeholder="عنوان را وارد کنید"
v-model="cloneItem.verb"
style="font-size: 11px"
/>
</div>
<div class="form-group">
<label
for="formGroupExampleInput2"
style="font-size: 11px"
>
واژگان
</label>
<input
type="text"
class="form-control select-text"
id="formGroupExampleInput2"
placeholder=" عنوان را با , جدا کنید"
v-model="cloneItem.keywords"
style="font-size: 11px"
/>
</div>
<div class="form-group">
<label
for="formGroupExampleInput"
style="font-size: 11px"
>چکیده
</label>
<textarea
type="text"
class="form-control select-text"
id="formGroupExampleInput"
rows="4"
placeholder="متن را اینجا بنویسید"
v-model="cloneItem.mintro"
style="font-size: 11px"
></textarea>
</div>
<div class="" style="position: relative; right: 80%">
<button
type="submit"
class="btn btn-primary"
style="font-size: 11px"
@click.prevent="save2()"
>
ثبت
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-else>
<div class="container">
<div
class="navigation mt-3"
style="max-height: 400px; position: relative"
>
<subject-form style="font-size: 13px"></subject-form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-else>
<div>
<div class="button-main">
<button @click="showfilter()">
<span class="tavasi tavasi-Component-160--1"></span>
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapState, mapActions } from "pinia";
import apis from "~/apis/listApi";
import formBuilderMixin from "~/extensions/formBuilderExtension.js";
export default {
extends: formBuilderMixin,
props: {
listPanelUrl: {
default: "",
},
},
beforeCreate() {
ApiService.init(import.meta.env.VITE_REPO_BASE_URL);
},
emits: ["show-paragraph"],
watch: {
selectedItemGetter(newVal) {
this.chengTextMain();
},
},
mounted() {
if (this.selectedProjectGetter) {
this.getListItem();
this.chengTextMain();
// this.listMindex();
this.cloneItem = structuredClone(this.selectedItemGetter);
if (window.location.href.includes("list")) {
this.cloneOptions = structuredClone(
this.selectedProjectGetter.meta[0].items[4].options
);
}
this.$emit("statusPag", (this.statuspag = 1));
}
},
data() {
return {
cloneItem: {},
cloneOptions: [],
numberPag: 1,
statuspag: 1,
showpag: true,
showMainpag: true,
showNavigation: true,
prevActiveIndex: 0,
loading: false,
fetchingData: false,
items: [],
lists: [],
textlists: "",
// pagination: {
// pages: 0,
// total: 0,
// page: 1,
// offset: 0, // page * per_page
// limit: 50, //per_page
// },
};
},
computed: {
...mapState(["isSidebarCollapsed"]),
...mapState("list", [
"selectedProjectGetter",
"listIdGetter",
"selectedItemGetter",
"listGetter",
]),
},
methods: {
...mapActions(["sidebarCollapsedSetter"]),
...mapActions("list", ["SET_IS_RETURN_FROM_ITEM_SHOW_PAGE"]),
// mehdi
showMenoBarSm() {
// this.$refs.myInput3.classList.add("menuBar-sm");
// this.$refs.myInput3.classList.remove("menuBar-lg" , "menuBar-xl");
this.statuspag = 1;
this.$emit("statusPag", (this.statuspag = 1));
},
chengTextMain() {
this.cloneItem = structuredClone(this.selectedItemGetter);
},
showMenoBarLg() {
// this.$refs.myInput3.classList.add("menuBar-lg");
// this.$refs.myInput3.classList.remove("menuBar-sm" , "menuBar-xl");
this.statuspag = 2;
this.$emit("statusPag", (this.statuspag = 2));
},
showMenoBarXl() {
this.statuspag = 3;
this.$emit("statusPag", (this.statuspag = 3));
},
nextNumber() {
if (this.numberPag > 3) {
this.numberPag = 3;
} else {
this.numberPag++;
}
switch (this.numberPag) {
case (this.numberPag = 0):
this.numberPag = 0;
this.$emit("statusPag", (this.statuspag = 0));
this.showMainpag = false;
break;
case (this.numberPag = 1):
this.showMenoBarSm();
break;
case (this.numberPag = 2):
this.showMenoBarLg();
break;
case (this.numberPag = 3):
this.showMenoBarXl();
break;
}
},
beforeNumber() {
if (this.numberPag <= 0) {
this.numberPag = 0;
} else {
this.numberPag--;
}
switch (this.numberPag) {
case (this.numberPag = 0):
this.numberPag = 0;
this.$emit("statusPag", (this.statuspag = 0));
this.showMainpag = false;
break;
case (this.numberPag = 1):
this.showMenoBarSm();
break;
case (this.numberPag = 2):
this.showMenoBarLg();
break;
case (this.numberPag = 3):
this.showMenoBarXl();
break;
}
},
hidenPanel() {
//this.$emit("hide-panel");
this.showMainpag = false;
// this.showpag= false;
},
showfilter() {
// this.$refs.myInput3.classList.remove("d-md-none");
// document.getElementById("main").classList.toggle("d-main-none");
// document.getElementById("main").style.display = "inline-block";
this.showMainpag = true;
this.numberPag = 1;
this.$emit("statusPag", (this.statuspag = 1));
},
// listMindex() {
// this.lists = this.selectedItemGetter.mindex.split("\n");
// var tt = "";
// this.lists.forEach((list) => {
// tt = tt + "<p>" + list + "</p>";
// });
// this.textlists = tt;
// },
// showfilter() {
// this.$ref.myInput.classList.remove("hide");
// this.showpag1=true
// },
// hidefilter() {
// this.$ref.myInput.classList.add("hide");
// this.showpag1=false
// },
save2() {
if (window.location.href.includes("search")) {
const formData = {
id_store: this.selectedItemGetter._id,
item_state: 1,
meta: JSON.stringify(this.cloneItem),
};
const url = this.selectedItemGetter.id
? apis.item.edit
: apis.item.addbylist;
ApiService.formData(url, formData)
.then((res) => {
this.mySwalToast({
title: "تبریک",
html: res.data.message,
icon: "success",
});
this.$emit("update-list");
})
.finally(() => {
this.buttonLoading = false;
});
} else if (window.location.href.includes("list")) {
const formData = {
id_store: this.selectedItemGetter?.id_store,
item_state: this.selectedItemGetter?.item_state,
meta: JSON.stringify(this.cloneItem),
};
const url = this.selectedItemGetter.id
? apis.item.edit
: apis.item.addbylist;
ApiService.formData(url, formData)
.then((res) => {
this.mySwalToast({
title: "تبریک",
html: res.data.message,
icon: "success",
});
this.$emit("update-list");
})
.finally(() => {
this.buttonLoading = false;
});
} else {
}
},
save() {
const formData = {
id_store: this.selectedItemGetter?.id_store,
item_state: this.selectedItemGetter?.item_state,
meta: JSON.stringify(this.cloneItem),
};
const url = this.selectedItemGetter.id
? apis.item.edit
: apis.item.addbylist;
ApiService.formData(url, formData)
.then((res) => {
this.mySwalToast({
title: "تبریک",
html: res.data.message,
icon: "success",
});
this.$emit("update-list");
})
.finally(() => {
this.buttonLoading = false;
});
},
// mehdi
showParagraphs(item, index) {
this.$emit("show-paragraph", item);
this.items[this.prevActiveIndex]["active"] = false;
this.items[index]["active"] = true;
this.prevActiveIndex = index;
},
getListItem() {
if (this.fetchingData) return;
this.fetchingData = true;
const payload = {
projectid: this.selectedProjectGetter?.id,
item_state: this.selectedProjectGetter?.item_state,
listid: this.listIdGetter,
subjectid: this.listIdGetter,
bychilds: 0,
...this.pagination,
// offset: offset,
// limit: this.pagination.limit,
};
let url = apis.listItem.list;
if (this.$route.params.prevPage == "subjects")
url = apis.subjectRelation.list;
ApiService.formData(url, payload)
.then((res) => {
this.items = res.data.data;
this.items.forEach((element, index) => {
if (element.id == this.selectedItemGetter.id) {
element["active"] = true;
this.prevActiveIndex = index;
}
});
this.pagination = { ...this.pagination, ...res.data.pagination };
})
.catch((err) => {
this.mySwalToast({
title: err.response.data.message,
html: "",
text: "",
icon: "error",
});
})
.finally(() => {
this.fetchingData = false;
});
},
goToListPage() {
this.SET_IS_RETURN_FROM_ITEM_SHOW_PAGE(this.listGetter.parent);
const routeName = this.$route.params.prevPage;
this.$router.push({
name: routeName,
});
},
loadMore($event) {
// const listElm = document.querySelector("#last-search");
const listElm = $event.target;
const vm = this;
if (vm.busy) return;
if (listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
this.busy = true;
vm.pagination.offset = vm.pagination.offset + vm.pagination.limit;
if (vm.pagination.total > vm.pagination.offset) {
setTimeout(() => {
vm.getListOnScroll();
}, 300);
} else {
vm.mySwalToast({
title: "کاربر محترم",
html: "دیگر رکوردی جهت بارگزاری وجود ندارد.",
icon: "info",
position: "bottom-start",
});
vm.busy = false;
}
} else vm.busy = false;
},
getListOnScroll() {
if (this.fetchingData) return;
this.fetchingData = true;
const payload = {
projectid: this.selectedProjectGetter?.id,
item_state: this.selectedProjectGetter?.item_state,
listid: this.listIdGetter,
subjectid: this.listIdGetter,
bychilds: 0,
...this.pagination,
};
let url = apis.listItem.list;
if (this.$route.params.prevPage == "subjects")
url = apis.subjectRelation.list;
ApiService.formData(url, payload)
.then((res) => {
this.items = [...this.items, ...res.data.data];
this.pagination = { ...this.pagination, ...res.data.pagination };
})
.finally(() => {
this.busy = false;
});
},
datefa(item) {
var m = this.cloneItem.begin_date;
var d = new Date(m).toLocaleDateString("fa-IR");
return d;
},
},
};
</script>
<style scoped lang="scss">
.select-text {
text-align: right;
background-color: #fff;
font-size: 14px;
border-radius: 8px;
border-color: #f1f1f1;
padding: 6px;
&:hover {
border-color: #afbac6;
}
}
.open-sub-folder {
text-decoration: none;
&:hover {
background-color: #eee;
}
}
.menu-bar-content {
position: static;
flex: 1 1 100%;
width: auto;
height: 180px;
&.show-list-panel {
right: 0px !important;
}
}
.home-list__content {
/*max-height: calc(100vh - 12em);*/
height: calc(100vh - 8.5em);
position: relative;
overflow-x: hidden;
padding-left: 0.3em;
&.loading {
//background-image: url('./img/item-loading.svg');
background-repeat: repeat-y;
background-position: top right;
background-size: 12em;
&::before {
content: "";
clear: both;
position: absolute;
right: 0;
width: 0.5em;
height: 100%;
background-color: #fff;
animation-name: example;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
}
}
.sidebar-toggler {
right: 2.6em;
&.expanded {
right: 11.1em;
}
}
.meta-list {
display: flex;
align-items: ceter;
flex-wrap: nowrap;
white-space: nowrap;
overflow: auto;
}
//mehdi
.button-meno {
font-size: 12px;
transform: rotate(90deg);
width: 10px;
height: 10px;
margin-top: 15px;
text-decoration: none;
span:hover {
color: #00b6e3;
}
}
.main-button {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
}
.button-change {
display: flex;
div {
margin: 5px;
}
p {
width: 33px;
text-align: center;
font-size: 11px;
position: relative;
top: 8px;
}
svg {
font-size: 11px;
&:hover {
fill: #00b6e3;
}
}
.span1 {
transform: rotate(180deg);
}
}
.main {
position: relative;
&::before {
content: "";
height: 35em;
border-right: solid #f1f1f1 1px;
position: absolute;
top: 0px;
left: 0px;
right: 10px;
bottom: 0px;
}
}
.borderBottom {
position: relative;
&::before {
content: "";
border-bottom: solid #00b6e3 2px;
position: absolute;
top: 31px !important;
left: 0px;
right: 0px;
bottom: 0px;
}
}
hr {
margin: 0px;
}
.lists {
overflow-y: scroll;
}
.borderBottom::before {
content: "";
border-bottom: solid #00b6e3 2px;
position: absolute;
top: 46px;
left: 0px;
right: 0px;
bottom: 0px;
}
.active {
position: relative;
background-color: #d8f8fd;
text-decoration: none;
color: #212529;
}
.Breadcrumbs {
//width: 230px;
margin: 2px auto;
position: relative;
right: 10px;
}
.btnHide svg {
transform: rotate(180deg);
}
.button-main {
position: relative;
& button {
border: 0px;
background-color: #f8f8f8;
text-align: center;
& span {
color: #333238;
}
}
}
@media (min-width: 992px) {
.navigation {
overflow-x: hidden;
overflow-y: scroll;
width: 100%;
height: 450px;
margin-right: 5px;
min-width: 200px;
}
.collapses-main {
width: 100%;
height: 80vh;
margin-right: 5px;
min-width: 200px;
//background-color: #00b6e3;
overflow: hidden;
overflow-y: scroll;
}
.d-main-none {
display: none;
}
.button-main {
top: 5px;
// left: -24vh ;
}
.button-hiden {
display: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
.Breadcrumbs {
position: relative !important;
top: 0px !important;
}
.menu-bar-content {
max-width: 220px !important;
position: relative;
top: 0px;
right: 0px;
}
.navigation {
width: 200px !important;
& div {
width: 190px !important;
}
}
.hide {
display: none;
}
.d-main-none {
display: none;
}
.button-main {
top: 20px;
}
.main-page {
position: fixed;
left: 0rem;
background-color: #fff;
}
.button-change {
display: none;
}
}
@media only screen and (min-width: 576px) and (max-width: 766.98px) {
.Breadcrumbs {
position: relative !important;
top: 0px !important;
}
.navigation {
width: 200px !important;
& div {
width: 190px !important;
}
}
.menu-bar-content {
max-width: 220px !important;
position: fixed;
top: 0px;
right: 0px !important;
background-color: #fff;
z-index: 999999;
}
.button-main {
display: none;
}
.main-page {
position: fixed;
left: 0rem;
background-color: #fff;
}
.button-change {
display: none;
}
}
@media (max-width: 575.98px) {
.Breadcrumbs {
position: relative !important;
top: 0px !important;
}
.menu-bar-content {
max-width: 220px !important;
position: relative;
top: 0px;
right: 0px !important;
background-color: #fff;
}
.navigation {
width: 200px !important;
& div {
width: 190px !important;
}
}
.menu-bar-content {
max-width: 220px !important;
position: fixed;
top: 0px;
right: 0px !important;
background-color: #fff;
z-index: 9999999;
}
.button-main {
display: none;
}
.main-page {
position: fixed;
left: 0rem;
background-color: #fff;
}
.button-change {
display: none;
}
}
//mehdi
</style>