Elements-SY

modify

......@@ -8,7 +8,7 @@
<navbar />
<tags-view v-if="needTagsView" />
</div>
<app-main />
<app-main ref="appMainBlock" />
<right-panel v-if="false">
<settings />
</right-panel>
......
......@@ -6,6 +6,7 @@ const WIDTH = 992; // refer to Bootstrap's responsive design
export default {
watch: {
$route(route) {
this.getBlockCurrentHeight();
if (this.device === "mobile" && this.sidebar.opened) {
store.dispatch("app/closeSideBar", { withoutAnimation: false });
}
......@@ -22,7 +23,10 @@ export default {
if (isMobile) {
store.dispatch("app/toggleDevice", "mobile");
store.dispatch("app/closeSideBar", { withoutAnimation: true });
}
};
this.$nextTick(() => {
this.getBlockCurrentHeight();
});
},
methods: {
// use $_ for mixins properties
......@@ -41,5 +45,11 @@ export default {
}
}
},
getBlockCurrentHeight() {
let appHeaderHeight = this.$refs.headerRef.clientHeight;
let appMainHeight = this.$refs.appMainBlock.$el.clientHeight;
this.$store.dispatch("app/setAppHeaderBlockCH", appHeaderHeight);
this.$store.dispatch("app/setAppMainBlockCH", appMainHeight);
},
},
};
......
......@@ -10,6 +10,8 @@ const state = {
device: "desktop",
//size: Cookies.get('size') || 'medium'
size: localStorage.getItem("size") || "medium",
headerBlockClientHeight: null,
appMainBlockClientHeight: null,
};
const mutations = {
......@@ -41,7 +43,10 @@ const mutations = {
SET_APPHEADERBLOCKCH: (state, height) => {
state.headerBlockClientHeight = height;
},
}
SET_APPMAINBLOCKCH: (state, height) => {
state.appMainBlockClientHeight = height;
},
};
const actions = {
toggleSideBar({ commit }) {
......@@ -56,6 +61,12 @@ const actions = {
setSize({ commit }, size) {
commit("SET_SIZE", size);
},
setAppHeaderBlockCH({ commit }, height) {
commit("SET_APPHEADERBLOCKCH", height);
},
setAppMainBlockCH({ commit }, height) {
commit("SET_APPMAINBLOCKCH", height);
},
};
export default {
......