Commit d70002fb authored by Manuel Tancoigne's avatar Manuel Tancoigne

Add vue-bar

parent e6f21c79
......@@ -16,7 +16,8 @@
"markdown-it": "^9.1.0",
"vue": "^2.6.10",
"vue-i18n": "^8.0.0",
"vue-router": "^3.0.3"
"vue-router": "^3.0.3",
"vuebar": "^0.0.20"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.10.0",
......
<template>
<i-layout id="app">
<i-navbar variant="dark" class="_margin-bottom-1">
<i-navbar-brand to="/">
<logo variant="navbar" />
Typing Monkey
</i-navbar-brand>
<i-navbar-items>
<i-nav />
<i-nav>
<i-nav-item href="https://experimentslabs.com/projects/typing-monkey"
target="_blank"
rel="noopener norefferer">
{{ $t('app.news') }}
</i-nav-item>
<i-nav-item :to="{ name: 'about' }">
{{ $t('app.about') }}
</i-nav-item>
<i-nav-item :to="{ name: 'help' }">
{{ $t('app.help_on_templates') }}
</i-nav-item>
<locale-selector />
</i-nav>
</i-navbar-items>
</i-navbar>
<router-view />
<i-layout-footer class="_margin-top-1">
<i-container>
<i-row>
<i-column>
<div>
<i18n path="app.by_elabs">
<a href="https://experimentslabs.com">ExperimentsLabs</a>
</i18n>
</div>
<small>Build <code><a href="https://gitlab.com/experimentslabs/typing-monkey/commit/CI_COMMIT_SHA" target="_blank" rel="noopener noreferrer">CI_COMMIT_SHORT_SHA</a></code></small>
</i-column>
<i-column class="_text-right">
<a href="https://gitlab.com/experimentslabs/typing-monkey" target="_blank">{{ $t('app.propose') }}</a>
</i-column>
</i-row>
</i-container>
</i-layout-footer>
</i-layout>
<div id="app" v-bar="">
<i-layout>
<i-navbar variant="dark" class="_margin-bottom-1">
<i-navbar-brand to="/">
<logo variant="navbar" />
Typing Monkey
</i-navbar-brand>
<i-navbar-items>
<i-nav />
<i-nav>
<i-nav-item href="https://experimentslabs.com/projects/typing-monkey"
target="_blank"
rel="noopener norefferer">
{{ $t('app.news') }}
</i-nav-item>
<i-nav-item :to="{ name: 'about' }">
{{ $t('app.about') }}
</i-nav-item>
<i-nav-item :to="{ name: 'help' }">
{{ $t('app.help_on_templates') }}
</i-nav-item>
<locale-selector />
</i-nav>
</i-navbar-items>
</i-navbar>
<router-view />
<i-layout-footer class="_margin-top-1">
<i-container>
<i-row>
<i-column>
<div>
<i18n path="app.by_elabs">
<a href="https://experimentslabs.com">ExperimentsLabs</a>
</i18n>
</div>
<small>Build <code><a href="https://gitlab.com/experimentslabs/typing-monkey/commit/CI_COMMIT_SHA"
target="_blank"
rel="noopener noreferrer">CI_COMMIT_SHORT_SHA</a></code></small>
</i-column>
<i-column class="_text-right">
<a href="https://gitlab.com/experimentslabs/typing-monkey" target="_blank">{{ $t('app.propose') }}</a>
</i-column>
</i-row>
</i-container>
</i-layout-footer>
</i-layout>
</div>
</template>
<script>
import Logo from './components/Logo'
......
......@@ -4,10 +4,12 @@ import router from './router'
import Inkline from '@inkline/inkline'
import '@inkline/inkline/dist/inkline.css'
import i18n from './i18n'
import Vuebar from 'vuebar'
Vue.config.productionTip = false
Vue.use(Inkline)
Vue.use(Vuebar)
new Vue({
router,
......
......@@ -9,3 +9,4 @@
@import "app/elements/block";
@import "app/elements/logo";
// Other libs
@import "lib/vuebar";
html {
background-color: #F8F9FA;
}
table {
width: 100%;
}
#app{
height: 100vh;
overflow: hidden;
background-color: #F8F9FA;
}
$vue-bar-color: #333;
.vb > .vb-dragger {
z-index: 5000;
width: 12px;
right: 0;
}
.vb > .vb-dragger > .vb-dragger-styler {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: rotate3d(0, 0, 0, 0);
transform: rotate3d(0, 0, 0, 0);
-webkit-transition: background-color 100ms ease-out,
margin 100ms ease-out,
height 100ms ease-out;
transition: background-color 100ms ease-out,
margin 100ms ease-out,
height 100ms ease-out;
background-color: rgba($vue-bar-color, .1);
margin: 5px 5px 5px 0;
border-radius: 20px;
height: calc(100% - 10px);
display: block;
}
.vb.vb-scrolling-phantom > .vb-dragger > .vb-dragger-styler {
background-color: rgba($vue-bar-color, .3);
}
.vb > .vb-dragger:hover > .vb-dragger-styler {
background-color: rgba($vue-bar-color, .5);
margin: 0px;
height: 100%;
}
.vb.vb-dragging > .vb-dragger > .vb-dragger-styler {
background-color: rgba($vue-bar-color, .5);
margin: 0px;
height: 100%;
}
.vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler {
background-color: rgba($vue-bar-color, .5);
}
......@@ -8780,6 +8780,11 @@ vue@^2.5.16, vue@^2.6.10:
resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
integrity sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==
vuebar@^0.0.20:
version "0.0.20"
resolved "https://registry.yarnpkg.com/vuebar/-/vuebar-0.0.20.tgz#fd6313c2d3a2202c49e42419fe1d9ef126134200"
integrity sha512-Pq72X10Yl5QyQPcX4hR8KdhA2o+qpqzOdwkoIHUnAJfXWLODBKJhUPAnWvKvBcgst0HuHASLDrcFBSQz98gd9g==
w3c-hr-time@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"
......
Markdown is supported
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