You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
133 lines
3.7 KiB
133 lines
3.7 KiB
<template>
|
|
<div class="container-fluid d-flex h-100 flex-column px-0">
|
|
<app-header id="app_header" style="z-index: 5000;"></app-header>
|
|
<div class="row no-gutters" style="z-index: 2000; background-color: #FFFFFF">
|
|
<side-navigation v-if="show_side_navigation" :class="side_navigation_class_ob" :style="side_navigation_style_ob">
|
|
</side-navigation>
|
|
<div v-if="show_route_wrapper" :class="route_wrapper_class_ob" :style="route_wrapper_style_ob">
|
|
<router-view></router-view>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
const app_mixin = require("./su_client_js/mixins/AppMixin.vue").default
|
|
const height_changes_mixin = require("./su_client_js/mixins/HeightChangesMixin.vue").default
|
|
const lists_route_changes_mixin = require("./su_score_clock_js/mixins/RouteChangesMixin.vue").default
|
|
|
|
module.exports = {
|
|
mixins: [app_mixin, height_changes_mixin, lists_route_changes_mixin],
|
|
|
|
props: [],
|
|
|
|
components: {
|
|
"app-header": require("./su_score_clock_js/components/app_header/AppHeader.vue").default,
|
|
"app-background": require("./su_client_js/components/background/AppBackground.vue").default,
|
|
"side-navigation": () => import("./su_score_clock_js/components/side_navigation/SideNavigation.vue"),
|
|
},
|
|
|
|
data: function () {
|
|
return {}
|
|
},
|
|
|
|
methods: {},
|
|
|
|
computed: {
|
|
show_side_navigation: function () {
|
|
if (this.$store.getters.being_kind_to_mobile_mode_restarts) return false
|
|
if (this.$store.getters.in_mobile_mode) return this.$store.getters.is_hamburger_expanded
|
|
|
|
return this.$store.getters.is_hamburger_expanded
|
|
},
|
|
|
|
show_route_wrapper: function () {
|
|
if (this.$store.getters.being_kind_to_mobile_mode_restarts) return false
|
|
if (this.$store.getters.in_mobile_mode) return !this.$store.getters.is_hamburger_expanded
|
|
|
|
return true
|
|
},
|
|
|
|
side_navigation_class_ob: function () {
|
|
var _ob = {}
|
|
// _ob["mh-100"] = true
|
|
_ob[this.side_navigation_col_class] = true
|
|
return _ob
|
|
},
|
|
|
|
route_wrapper_class_ob: function () {
|
|
var _ob = {}
|
|
// _ob["mh-100"] = true
|
|
_ob["col-12"] = !this.show_side_navigation && this.show_route_wrapper
|
|
_ob["col-9"] = this.show_side_navigation && this.show_route_wrapper
|
|
return _ob
|
|
},
|
|
|
|
side_navigation_col_class: function () {
|
|
if (this.$store.getters.in_mobile_mode) if (this.$store.getters.is_hamburger_expanded) return "col-12"
|
|
|
|
return "col-3"
|
|
},
|
|
|
|
route_wrapper_col_class: function () {
|
|
if (this.$store.getters.in_mobile_mode) if (this.$store.getters.is_hamburger_expanded) return "col-12"
|
|
|
|
return "col-3"
|
|
},
|
|
|
|
side_navigation_style_ob: function () {
|
|
var _ob = {}
|
|
|
|
if (this.show_route_wrapper) {
|
|
_ob["position"] = "fixed"
|
|
_ob["top"] = this.header_height_px + "px"
|
|
_ob["left"] = "0%"
|
|
}
|
|
|
|
_ob["z-index"] = 500
|
|
_ob["overflow-y"] = "scroll"
|
|
_ob["height"] = this.window_height_px - this.header_height_px + "px"
|
|
return _ob
|
|
},
|
|
|
|
route_wrapper_style_ob: function () {
|
|
var _ob = {}
|
|
|
|
if (this.show_side_navigation) {
|
|
_ob["position"] = "fixed"
|
|
_ob["top"] = this.header_height_px + "px"
|
|
_ob["left"] = "25%"
|
|
}
|
|
|
|
_ob["z-index"] = 500
|
|
_ob["overflow-y"] = "scroll"
|
|
_ob["height"] = this.window_height_px - this.header_height_px + "px"
|
|
_ob["background-color"] = "#FFFFFF"
|
|
return _ob
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
html {
|
|
color: #ffffff;
|
|
background-color: #004181;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
background-color: #004181;
|
|
|
|
min-width: 500px;
|
|
height: 100%;
|
|
|
|
-webkit-touch-callout: none;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 0; /* Remove scrollbar space */
|
|
height: 0; /* Remove scrollbar space */
|
|
background: transparent; /* Optional: just make scrollbar invisible */
|
|
}
|
|
</style>
|
|
|