App.vue 4.08 KB
Newer Older
1
2
<template>
    <div id="app">
3
        <Navbar/>
4
        <div id="wrapper" :class="$store.state.show_sidebar ? 'squished' : null">
5
6
            <div id="page-content-wrapper">
                <div class="container">
janis.streib's avatar
janis.streib committed
7
8
9
10
11
12
13
14
15
16
17
                    <b-alert show variant="warning">
                      <b-row>
                        <b-col cols="1" style="margin-top: auto; margin-bottom: auto" class="vertical-center">
                      <font-awesome-icon :icon="['fas', 'dumpster-fire']" size="3x"></font-awesome-icon>
                        </b-col>
                        <b-col style="margin-top: auto; margin-bottom: auto">
                      <span><b> WIP!</b>
                        Diese Anwendung befindet sich in aktiver Entwicklung. Einige Features könnten eingeschränkt funktionieren oder unerwartete Ergebnisse liefern.</span>
                        </b-col>
                      </b-row>
                    </b-alert>
18
                    <b-breadcrumb :items="breadcrumbs"/>
janis.streib's avatar
janis.streib committed
19
                    <router-view v-bind:key="$store.state.reload_count"/>
20
                    <Footer/>
21
22
                </div>
            </div>
23
            <b-card id="sidebar-wrapper" no-body :class="$store.state.show_sidebar ? 'hide' : null">
24
                <Sidebar/>
gj4210's avatar
gj4210 committed
25
            </b-card>
26
27
28
29
30
        </div>
    </div>
</template>

<script>
janis.streib's avatar
janis.streib committed
31
32
33
import Navbar from './components/Navbar'
import Footer from './components/Footer'
import Sidebar from './components/Sidebar'
34

janis.streib's avatar
janis.streib committed
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
export default {
  components: { Sidebar, Footer, Navbar },
  data () {
    return {
      breadcrumbs: []
    }
  },
  watch: {
    $route () {
      let m = this.$router.currentRoute.matched
      m = m[m.length - 1]
      this.breadcrumbs = this.getBreadcrumbs(m)
    }
  },
  methods: {
    getBreadcrumbs (m) {
      const res = [{ text: m.meta.resolveName(this.$route.params), path: m.path }]
      while ((m.meta && m.meta.resolveParents) || m.parent) {
        if (m.meta && m.meta.resolveParents) {
          const parents = m.meta.resolveParents(this.$route.params)
          for (let i = 0; i < parents.length; i++) {
            if (typeof parents[i] === 'object' && 'text' in parents[i] && 'to' in parents[i]) {
              res.unshift(parents[i])
              continue
59
            }
janis.streib's avatar
janis.streib committed
60
61
62
63
64
65
66
            m = this.$router.resolve(parents[i]).resolved.matched
            m = m[m.length - 1]
            res.unshift({ text: m.meta.resolveName(this.$route.params), to: parents[i] })
          }
        } else {
          m = m.parent
          res.unshift({ text: m.meta.resolveName(this.$route.params), to: m.path })
67
        }
janis.streib's avatar
janis.streib committed
68
69
      }
      return res
70
    }
janis.streib's avatar
janis.streib committed
71
72
73
74
75
  },
  mounted () {
    window.console.log('%c ', `font-size:0px; padding: 200px; background:url(${window.location.protocol}//${window.location.hostname}:${window.location.port}/important.webp) no-repeat; background-position: center; background-size: contain;`)
  }
}
76
</script>
gj4210's avatar
gj4210 committed
77
78
79
80
81
82
83
84

<style lang="scss">
    @import '../node_modules/bootstrap/scss/bootstrap.scss';
    @import '../node_modules/bootstrap-vue/dist/bootstrap-vue.css';
    @import 'assets/css/net-suite.css';
    @import 'assets/css/net-suite-devel.css';
    @import 'assets/css/net-suite-test.css';

gj4210's avatar
gj4210 committed
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
    $sidebar-width: 380px;

    @media screen and (min-width: 981px) {
        #wrapper {
            transition: padding-right .5s;
        }

        #wrapper.squished {
            padding-right: $sidebar-width;
        }

        #sidebar-wrapper {
            height: 100%;
            width: $sidebar-width;
            position: fixed;
            z-index: 1;
            top: 0;
            right: -$sidebar-width;
            transition: right .5s;
            padding-top: 50px;
            background: #F7F7F7;
        }

        #sidebar-wrapper.hide {
            right: 0px;
        }
gj4210's avatar
gj4210 committed
111
112
    }

gj4210's avatar
gj4210 committed
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
    @media screen and (max-width: 980px) {
        #sidebar-wrapper {
            height: 100%;
            width: 100%;
            position: fixed;
            z-index: 999;
            top: -100%;
            transition: top .5s;
            padding-top: 50px;
            background: #F7F7F7;
        }

        #sidebar-wrapper.hide {
            top: 0;
        }
gj4210's avatar
gj4210 committed
128
    }
janis.streib's avatar
janis.streib committed
129
</style>