Commit cb10e841 authored by Kenzo-Hugo Hillion's avatar Kenzo-Hugo Hillion
Browse files

add bootstrap-vue bootstrap chartjs to package for npm

parent af72cfdc
Pipeline #12809 passed with stage
in 1 minute and 18 seconds
This diff is collapsed.
......@@ -10,6 +10,9 @@
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.0.0-rc.24",
"chart.js": "^2.8.0",
"core-js": "^2.6.5",
"register-service-worker": "^1.6.2",
"vue": "^2.6.10",
......
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<div>
<b-navbar toggleable="lg" type="dark" variant="dark">
<b-navbar-brand to="/">MetageneDB</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item to="/">Home</b-nav-item>
<b-nav-item to="/about">About</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<router-view/>
</div>
</template>
<style lang="scss">
@import './assets/bootstrap/css/bootstrap.min.css';
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
\ No newline at end of file
</style>
import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './registerServiceWorker';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
Vue.config.productionTip = false;
Vue.use(BootstrapVue);
new Vue({
router,
......
<template>
<div class="jumbotron">
<img alt="Vue logo" src="../assets/logo.png">
<h3>Genes</h3>
<p> The catalog currently contains <span class="badge badge-secondary"> {{ count }} </span> genes.</p>
<div v-for="(gene, i) in genes" :key="i">
......@@ -14,7 +13,7 @@
<div class="card-body">
<histogram v-bind:geneLengthData="geneLengthData"></histogram>
<label for="geneLengthWindowSize">Gene size window</label>
<input type="range" class="custom-range" min="1000" max="20000" step="1000" v-model="geneLengthWindowSize" v-on:input="fetchGeneLength(geneLengthWindowSize)" debounce="500">
<input type="range" class="custom-range" min="200" max="10000" step="200" v-model="geneLengthWindowSize" v-on:input="fetchGeneLength(geneLengthWindowSize)" debounce="500">
{{geneLengthWindowSize}}
</div>
</div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment