Created keret

This commit is contained in:
Pünkösd Marcell 2021-06-11 23:51:58 +02:00
parent 2388a5a587
commit bac428238d
12 changed files with 157 additions and 137 deletions

56
package-lock.json generated
View File

@ -7,8 +7,8 @@
"": { "": {
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"bootstrap": "^5.0.1", "bootstrap": "^4.5.2",
"bootstrap-vue": "^2.21.2", "bootstrap-vue": "^2.16.0",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-router": "^3.2.0", "vue-router": "^3.2.0",
@ -1777,16 +1777,6 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/@popperjs/core": {
"version": "2.9.2",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
"integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==",
"peer": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@soda/friendly-errors-webpack-plugin": { "node_modules/@soda/friendly-errors-webpack-plugin": {
"version": "1.8.0", "version": "1.8.0",
"resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.0.tgz", "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.0.tgz",
@ -3865,15 +3855,16 @@
"dev": true "dev": true
}, },
"node_modules/bootstrap": { "node_modules/bootstrap": {
"version": "5.0.1", "version": "4.6.0",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.1.tgz", "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
"integrity": "sha512-Fl79+wsLOZKoiU345KeEaWD0ik8WKRI5zm0YSPj2oF1Qr+BO7z0fco6GbUtqjoG1h4VI89PeKJnMsMMVQdKKTw==", "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
"funding": { "funding": {
"type": "opencollective", "type": "opencollective",
"url": "https://opencollective.com/bootstrap" "url": "https://opencollective.com/bootstrap"
}, },
"peerDependencies": { "peerDependencies": {
"@popperjs/core": "^2.9.2" "jquery": "1.9.1 - 3",
"popper.js": "^1.16.1"
} }
}, },
"node_modules/bootstrap-vue": { "node_modules/bootstrap-vue": {
@ -3889,19 +3880,6 @@
"vue-functional-data-merge": "^3.1.0" "vue-functional-data-merge": "^3.1.0"
} }
}, },
"node_modules/bootstrap-vue/node_modules/bootstrap": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
"integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
},
"peerDependencies": {
"jquery": "1.9.1 - 3",
"popper.js": "^1.16.1"
}
},
"node_modules/brace-expansion": { "node_modules/brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -17085,12 +17063,6 @@
} }
} }
}, },
"@popperjs/core": {
"version": "2.9.2",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
"integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==",
"peer": true
},
"@soda/friendly-errors-webpack-plugin": { "@soda/friendly-errors-webpack-plugin": {
"version": "1.8.0", "version": "1.8.0",
"resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.0.tgz", "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.0.tgz",
@ -18827,9 +18799,9 @@
"dev": true "dev": true
}, },
"bootstrap": { "bootstrap": {
"version": "5.0.1", "version": "4.6.0",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.1.tgz", "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
"integrity": "sha512-Fl79+wsLOZKoiU345KeEaWD0ik8WKRI5zm0YSPj2oF1Qr+BO7z0fco6GbUtqjoG1h4VI89PeKJnMsMMVQdKKTw==", "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
"requires": {} "requires": {}
}, },
"bootstrap-vue": { "bootstrap-vue": {
@ -18842,14 +18814,6 @@
"popper.js": "^1.16.1", "popper.js": "^1.16.1",
"portal-vue": "^2.1.7", "portal-vue": "^2.1.7",
"vue-functional-data-merge": "^3.1.0" "vue-functional-data-merge": "^3.1.0"
},
"dependencies": {
"bootstrap": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
"integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
"requires": {}
}
} }
}, },
"brace-expansion": { "brace-expansion": {

View File

@ -8,8 +8,8 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"bootstrap": "^5.0.1", "bootstrap": "^4.5.2",
"bootstrap-vue": "^2.21.2", "bootstrap-vue": "^2.16.0",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-router": "^3.2.0", "vue-router": "^3.2.0",

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -1,32 +1,50 @@
<template> <template>
<div id="app"> <div id="app">
<div id="nav">
<router-link to="/">Home</router-link> | <navbar/>
<router-link to="/about">About</router-link>
</div> <div id="content">
<b-container>
<router-view/> <router-view/>
</b-container>
</div>
<div id="footer">
<b-container>
<footer-content/>
</b-container>
</div>
</div> </div>
</template> </template>
<script>
import Navbar from "@/components/Navbar";
import FooterContent from "@/components/FooterContent";
export default {
components: {
FooterContent,
Navbar
},
}
</script>
<style> <style>
#content {
margin-top: 70px;
margin-bottom: 20px;
}
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; display: flex;
-webkit-font-smoothing: antialiased; flex-direction: column;
-moz-osx-font-smoothing: grayscale; min-height: 100vh;
text-align: center;
color: #2c3e50;
} }
#nav { #footer {
padding: 30px; padding: 1em;
} margin-top: auto;
background: #E9ECEF;
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
} }
</style> </style>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 21 KiB

View File

@ -0,0 +1,23 @@
<template>
<div>
<b-row align-h="between">
<b-col cols="auto p-0">
<div><b>Birbnetes</b></div>
<div>
<router-link :to="{ name: 'About'}">About</router-link>
</div>
</b-col>
<b-col cols="auto p-0">
<div class="text-center">
System status: Cool&Good
</div>
</b-col>
</b-row>
</div>
</template>
<style scoped>
</style>

View File

@ -1,60 +0,0 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

33
src/components/Navbar.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div id="navbar">
<b-navbar toggleable="sm" type="light" variant="light" fixed="top">
<b-navbar-brand>
<b-img src="@/assets/logo.png" height="30" class="pr-2"/>
<b>BirbController</b>
</b-navbar-brand>
<b-navbar-toggle target="nav-text-collapse"></b-navbar-toggle>
<b-collapse id="nav-text-collapse" is-nav>
<b-navbar-nav>
<b-nav-item :to="{ name: 'Home'}">Home</b-nav-item>
<b-nav-item :to="{ name: 'Devices'}">Devices</b-nav-item>
<b-nav-item :to="{ name: 'About'}">About</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
</template>
<script>
export default {
name: "Navbar"
}
</script>
<style scoped>
</style>

View File

@ -1,6 +1,7 @@
import Vue from 'vue' import Vue from 'vue'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import Home from '../views/Home.vue' import Home from '../views/Home.vue'
import Devices from '../views/Devices.vue'
Vue.use(VueRouter) Vue.use(VueRouter)
@ -10,6 +11,11 @@ const routes = [
name: 'Home', name: 'Home',
component: Home component: Home
}, },
{
path: '/devices',
name: 'Devices',
component: Devices
},
{ {
path: '/about', path: '/about',
name: 'About', name: 'About',

14
src/views/Devices.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<div class="devices">
</div>
</template>
<script>
export default {
name: "Devices"
}
</script>
<style scoped>
</style>

View File

@ -1,18 +1,10 @@
<template> <template>
<div class="home"> <div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div> </div>
</template> </template>
<script> <script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default { export default {
name: 'Home', name: 'Home'
components: {
HelloWorld
}
} }
</script> </script>

30
vue.config.js Normal file
View File

@ -0,0 +1,30 @@
module.exports = {
publicPath: "/",
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.transformAssetUrls = {
img: 'src',
image: 'xlink:href',
'b-avatar': 'src',
'b-img': 'src',
'b-img-lazy': ['src', 'blank-src'],
'b-card': 'img-src',
'b-card-img': 'src',
'b-card-img-lazy': ['src', 'blank-src'],
'b-carousel-slide': 'img-src',
'b-embed': 'src'
}
return options
}),
config.plugin('html')
.tap(args => {
args[0].title = "BirbController"
return args
})
}
}