767 lines
18 KiB
Vue
767 lines
18 KiB
Vue
|
<template>
|
|||
|
|
<div class="m1 main-page">
|
|||
|
|
<div v-if="showMainpag">
|
|||
|
|
<div class="home-list p-3 m2" ref="myInput3" id="main">
|
|||
|
|
<div class="row mt-1">
|
|||
|
|
<Breadcrumbs
|
|||
|
|
class="m-start mt-2 Breadcrumbs"
|
|||
|
|
style="font-size: 12px"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="row mt-2">
|
|||
|
|
<div
|
|||
|
|
class="col-md-12 col-sm-12 d-flex"
|
|||
|
|
style="justify-content: space-around"
|
|||
|
|
>
|
|||
|
|
<button
|
|||
|
|
v-if="listGetter && listGetter.length"
|
|||
|
|
:class="{ 'text-primary borderBottom': showNavigation }"
|
|||
|
|
type="button"
|
|||
|
|
class="popUp-tab__clear btn"
|
|||
|
|
style="font-size: 12px"
|
|||
|
|
@click.prevent="showNavigation = true"
|
|||
|
|
>
|
|||
|
|
پیمایش
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
:class="{ 'text-primary borderBottom': !showNavigation }"
|
|||
|
|
type="button"
|
|||
|
|
class="popUp-tab__clear btn"
|
|||
|
|
@click.prevent="showNavigation = false"
|
|||
|
|
style="margin-right: -20px; font-size: 12px"
|
|||
|
|
>
|
|||
|
|
فهرست
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
title="بستن"
|
|||
|
|
@click="showPanel()"
|
|||
|
|
type="button"
|
|||
|
|
class="popUp-tab__clear btn"
|
|||
|
|
style="margin-right: -20px"
|
|||
|
|
>
|
|||
|
|
<span class="tavasi tavasi-Component-21--1"></span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<hr />
|
|||
|
|
<div class="row" style="margin-top: 1.25rem !important">
|
|||
|
|
<div class="col-md-12">
|
|||
|
|
<div v-if="listGetter && listGetter.length">
|
|||
|
|
<div v-if="showNavigation">
|
|||
|
|
<div class="navigation">
|
|||
|
|
<div
|
|||
|
|
v-if="listGetter"
|
|||
|
|
v-for="(item, key) in listGetter"
|
|||
|
|
:key="key"
|
|||
|
|
class="item"
|
|||
|
|
:class="{ Active: activeItemClass(item) }"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
class="d-flex position-relative text-10 mt-2 item-navigation"
|
|||
|
|
>
|
|||
|
|
<a
|
|||
|
|
@click.prevent="showtext(item, key)"
|
|||
|
|
:href="item.branch"
|
|||
|
|
class=""
|
|||
|
|
:title="item.branch"
|
|||
|
|
style="
|
|||
|
|
font-size: 12px;
|
|||
|
|
text-decoration: none;
|
|||
|
|
color: black;
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
<i class="tavasi tavasi-Component-149--3 ms-1"></i>
|
|||
|
|
{{ item.title }}
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- <div
|
|||
|
|
v-for="(item, index, key) in items"
|
|||
|
|
:id="item.id"
|
|||
|
|
:key="item.id"
|
|||
|
|
class="item"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
class="d-flex position-relative text-10 mt-2"
|
|||
|
|
:class="{
|
|||
|
|
'is-selected': item.active ?? false,
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<a
|
|||
|
|
:class="{ active: item.active ?? false }"
|
|||
|
|
@click.prevent="showParagraphs(item, index, key)"
|
|||
|
|
:href="item.title"
|
|||
|
|
class="title"
|
|||
|
|
:title="item.title"
|
|||
|
|
style="font-size: 12px; text-decoration: none"
|
|||
|
|
>
|
|||
|
|
<i class="tavasi tavasi-Component-149--3 ms-1"></i>
|
|||
|
|
{{ item.title }}
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div> -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div v-else>
|
|||
|
|
<div class="navigation mt-3" style="max-height: 230px">
|
|||
|
|
<div
|
|||
|
|
class="text-truncate"
|
|||
|
|
style="max-width: 200px; font-size: 12px"
|
|||
|
|
v-html="textlists"
|
|||
|
|
></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div v-else>
|
|||
|
|
<div class="navigation mt-3" style="max-height: 230px">
|
|||
|
|
<div
|
|||
|
|
class="text-truncate"
|
|||
|
|
style="max-width: 200px; font-size: 12px"
|
|||
|
|
v-html="textlists"
|
|||
|
|
></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- <div v-else>
|
|||
|
|
<button @click="showpag=true">
|
|||
|
|
<span class="tavasi tavasi-menu"></span>
|
|||
|
|
</button>
|
|||
|
|
</div> -->
|
|||
|
|
<div v-else>
|
|||
|
|
<div class="button-show">
|
|||
|
|
<div class="button-main">
|
|||
|
|
<button @click="showfilter()">
|
|||
|
|
<span class="tavasi tavasi-Component-158--5"></span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { mapState, mapActions } from "pinia";
|
|||
|
|
import apis from "~/apis/listApi";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
props: {
|
|||
|
|
listPanelUrl: {
|
|||
|
|
default: "",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
emits: ["show-paragraph"],
|
|||
|
|
mounted() {
|
|||
|
|
// this.getListItem();
|
|||
|
|
this.listMindex();
|
|||
|
|
this.list();
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
id: this.$route.params.id,
|
|||
|
|
|
|||
|
|
searchText: this.$route.params.searchtext,
|
|||
|
|
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",
|
|||
|
|
]),
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
selectedItemGetter(newVal) {
|
|||
|
|
this.listMindex();
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
...mapActions(["sidebarCollapsedSetter"]),
|
|||
|
|
...mapActions("list", [
|
|||
|
|
"SET_IS_RETURN_FROM_ITEM_SHOW_PAGE",
|
|||
|
|
"SET_SELECTED_ITEM",
|
|||
|
|
"SET_LIST",
|
|||
|
|
]),
|
|||
|
|
activeItemClass(item) {
|
|||
|
|
if (item.id_store || item._id)
|
|||
|
|
return item.id_store == this.id || item._id == this.id;
|
|||
|
|
},
|
|||
|
|
//newMehdi
|
|||
|
|
list() {
|
|||
|
|
const storedList = localStorage.getItem("myList");
|
|||
|
|
if (storedList) {
|
|||
|
|
const myList = JSON.parse(storedList);
|
|||
|
|
this.SET_LIST(myList);
|
|||
|
|
} else {
|
|||
|
|
console.log("No list found in localStorage.");
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
showtext(item, key) {
|
|||
|
|
// let items = this.listGetter[key].mindex;
|
|||
|
|
// let cloneItem = structuredClone(item);
|
|||
|
|
// cloneItem = { ...item,mindex:items};
|
|||
|
|
|
|||
|
|
// this.SET_SELECTED_ITEM(cloneItem);
|
|||
|
|
|
|||
|
|
this.SET_SELECTED_ITEM(item);
|
|||
|
|
this.appendclass();
|
|||
|
|
},
|
|||
|
|
appendclass() {
|
|||
|
|
const listItems = document.querySelectorAll(".item");
|
|||
|
|
|
|||
|
|
listItems.forEach(function (item) {
|
|||
|
|
item.addEventListener("click", function () {
|
|||
|
|
// حذف کلاس "active" از همه المانهای لیست
|
|||
|
|
listItems.forEach(function (item) {
|
|||
|
|
item.classList.remove("Active");
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// اضافه کردن کلاس "active" به المانی که کاربر بر روی آن کلیک کرده است
|
|||
|
|
this.classList.add("Active");
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//newMehdi
|
|||
|
|
|
|||
|
|
getHighlight(text) {
|
|||
|
|
if (window.location.href.includes("search")) {
|
|||
|
|
var words = this.searchText.split(" ");
|
|||
|
|
|
|||
|
|
var index = 1;
|
|||
|
|
words.forEach((w) => {
|
|||
|
|
if (w == "" || w == " ") {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
let classname = `searchHilight${index}`;
|
|||
|
|
text = text.replaceAll(
|
|||
|
|
w,
|
|||
|
|
"<span class='" + classname + "'>" + w + "</span>"
|
|||
|
|
);
|
|||
|
|
var w1 = this.normalize(w);
|
|||
|
|
if (w1 != w) {
|
|||
|
|
text = text.replaceAll(
|
|||
|
|
w1,
|
|||
|
|
"<span class='" + classname + "'>" + w1 + "</span>"
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
index = index + 1;
|
|||
|
|
if (index > 5) index = 1;
|
|||
|
|
});
|
|||
|
|
return text;
|
|||
|
|
} else {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
normalize(item) {
|
|||
|
|
item = item.replaceAll("،", "");
|
|||
|
|
item = item.replaceAll(":", "");
|
|||
|
|
item = item.replaceAll(".", "");
|
|||
|
|
|
|||
|
|
item = item.replaceAll("ک", "ك");
|
|||
|
|
item = item.replaceAll("ی", "ي");
|
|||
|
|
item = item.replaceAll("إ", "ا");
|
|||
|
|
item = item.replaceAll("أ", "ا");
|
|||
|
|
item = item.replaceAll("آ", "ا");
|
|||
|
|
item = item.replaceAll("ة", "ت");
|
|||
|
|
return item;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// mehdi
|
|||
|
|
|
|||
|
|
showPanel() {
|
|||
|
|
// this.$emit("hide-panel");
|
|||
|
|
this.$emit("statusPagTest1", (this.statuspag = 2));
|
|||
|
|
this.showMainpag = false;
|
|||
|
|
|
|||
|
|
// this.showpag= false;
|
|||
|
|
},
|
|||
|
|
showfilter() {
|
|||
|
|
this.$emit("statusPagTest1", (this.statuspag = 1));
|
|||
|
|
// 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;
|
|||
|
|
},
|
|||
|
|
listMindex(key) {
|
|||
|
|
if (this.selectedItemGetter !== undefined) {
|
|||
|
|
if (window.location.href.includes("search")) {
|
|||
|
|
var list = this.getHighlight(this.selectedItemGetter.mindex).split(
|
|||
|
|
"\n"
|
|||
|
|
);
|
|||
|
|
var tt = "";
|
|||
|
|
list.forEach((list) => {
|
|||
|
|
tt = tt + "<p>" + list + "</p>";
|
|||
|
|
});
|
|||
|
|
this.textlists = tt;
|
|||
|
|
} else {
|
|||
|
|
var list = this.selectedItemGetter.mindex.split("\n");
|
|||
|
|
var tt = "";
|
|||
|
|
list.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
|
|||
|
|
// },
|
|||
|
|
|
|||
|
|
// mehdi
|
|||
|
|
showParagraphs(item, index) {
|
|||
|
|
this.$emit("show-paragraph", item);
|
|||
|
|
|
|||
|
|
this.items[this.prevActiveIndex]["active"] =false;
|
|||
|
|
this.items[index]["active"] =true;
|
|||
|
|
|
|||
|
|
this.prevActiveIndex = index;
|
|||
|
|
},
|
|||
|
|
showParagraphs1(item, key) {
|
|||
|
|
this.$emit("show-paragraph1", item);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 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;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.open-sub-folder {
|
|||
|
|
text-decoration: none;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
background-color: #eee;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-bar-content {
|
|||
|
|
position: static;
|
|||
|
|
flex: 1 1 100%;
|
|||
|
|
max-width: 250px;
|
|||
|
|
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;
|
|||
|
|
|
|||
|
|
.meta-list-item {
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//mehdi
|
|||
|
|
.close {
|
|||
|
|
width: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.m2 {
|
|||
|
|
// background-color: red;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
&::before {
|
|||
|
|
content: "";
|
|||
|
|
height: 35em;
|
|||
|
|
border-left: solid #f1f1f1 1px;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 15px;
|
|||
|
|
left: 0px;
|
|||
|
|
right: 0px;
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
.navigation {
|
|||
|
|
overflow-y: scroll;
|
|||
|
|
width: 200px;
|
|||
|
|
height: 70vh;
|
|||
|
|
|
|||
|
|
max-width: 300px;
|
|||
|
|
.item {
|
|||
|
|
position: relative;
|
|||
|
|
top: 10px;
|
|||
|
|
|
|||
|
|
.item-navigation a:hover {
|
|||
|
|
color: #00b6e3 !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.lists {
|
|||
|
|
overflow-y: scroll;
|
|||
|
|
}
|
|||
|
|
.borderBottom::before {
|
|||
|
|
content: "";
|
|||
|
|
border-bottom: solid #00b6e3 2px;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 46px;
|
|||
|
|
left: 0px;
|
|||
|
|
right: 0px;
|
|||
|
|
bottom: 0px;
|
|||
|
|
}
|
|||
|
|
.ctive {
|
|||
|
|
position: relative;
|
|||
|
|
background-color: #d8f8fd;
|
|||
|
|
text-decoration: none;
|
|||
|
|
}
|
|||
|
|
.Active {
|
|||
|
|
//text-decoration: none;
|
|||
|
|
color: #00b6e3 !important;
|
|||
|
|
.item-navigation a {
|
|||
|
|
color: #00b6e3 !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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) {
|
|||
|
|
.menu-bar-content {
|
|||
|
|
max-width: 220px !important;
|
|||
|
|
}
|
|||
|
|
.d-main-none {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.button-main {
|
|||
|
|
top: 5px;
|
|||
|
|
right: 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@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-show {
|
|||
|
|
}
|
|||
|
|
.button-main {
|
|||
|
|
top: 20px;
|
|||
|
|
right: 53px;
|
|||
|
|
}
|
|||
|
|
.main-page {
|
|||
|
|
position: fixed;
|
|||
|
|
right: 0rem;
|
|||
|
|
background-color: #fff;
|
|||
|
|
z-index: 9;
|
|||
|
|
height: 39rem;
|
|||
|
|
margin: 0px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@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;
|
|||
|
|
right: 0rem;
|
|||
|
|
background-color: #fff;
|
|||
|
|
z-index: 9;
|
|||
|
|
height: 39rem;
|
|||
|
|
margin: 0px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@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;
|
|||
|
|
right: 0rem;
|
|||
|
|
background-color: #fff;
|
|||
|
|
z-index: 9;
|
|||
|
|
|
|||
|
|
height: 39rem;
|
|||
|
|
margin: 0px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//mehdi
|
|||
|
|
</style>
|