switch to buefy and change primary color
This commit is contained in:
vincent
parent
c344dd2316
commit
20cd5269aa
@ -3,7 +3,8 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
|
||||||
|
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css">
|
||||||
<title>client</title>
|
<title>client</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
8
client/package-lock.json
generated
8
client/package-lock.json
generated
@ -1797,6 +1797,14 @@
|
|||||||
"electron-to-chromium": "^1.3.30"
|
"electron-to-chromium": "^1.3.30"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"buefy": {
|
||||||
|
"version": "0.8.13",
|
||||||
|
"resolved": "https://registry.npmjs.org/buefy/-/buefy-0.8.13.tgz",
|
||||||
|
"integrity": "sha512-SpJq1Bl569mT6YujrEpyqn1al6U2PcBBQkVdgdKFrW+zjh1BAcs3+sNx7+r0tPSBsLYsSU2ZZsfkFzWOnOTX8A==",
|
||||||
|
"requires": {
|
||||||
|
"bulma": "0.7.5"
|
||||||
|
}
|
||||||
|
},
|
||||||
"buffer": {
|
"buffer": {
|
||||||
"version": "4.9.1",
|
"version": "4.9.1",
|
||||||
"resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
|
"resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
|
||||||
|
|||||||
@ -12,6 +12,7 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^0.18.1",
|
"axios": "^0.18.1",
|
||||||
|
"buefy": "^0.8.13",
|
||||||
"bulma": "^0.7.5",
|
"bulma": "^0.7.5",
|
||||||
"bulma-slider": "^2.0.0",
|
"bulma-slider": "^2.0.0",
|
||||||
"vue": "^2.6.11",
|
"vue": "^2.6.11",
|
||||||
|
|||||||
@ -10,28 +10,30 @@ export default {
|
|||||||
name: 'App',
|
name: 'App',
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
@import "~bulma/sass/utilities/_all";
|
||||||
|
$primary: #00858C;
|
||||||
|
$primary-invert: findColorInvert($primary);
|
||||||
|
$colors: (
|
||||||
|
"white": ($white, $black),
|
||||||
|
"black": ($black, $white),
|
||||||
|
"light": ($light, $light-invert),
|
||||||
|
"dark": ($dark, $dark-invert),
|
||||||
|
"primary": ($primary, $primary-invert),
|
||||||
|
"info": ($info, $info-invert),
|
||||||
|
"success": ($success, $success-invert),
|
||||||
|
"warning": ($warning, $warning-invert),
|
||||||
|
"danger": ($danger, $danger-invert),
|
||||||
|
|
||||||
<style>
|
);
|
||||||
#app {
|
$link: $primary;
|
||||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
$link-invert: $primary-invert;
|
||||||
-webkit-font-smoothing: antialiased;
|
$link-focus-border: $primary;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
h1,h2 {
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: 2em;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
// Import Bulma and Buefy styles
|
||||||
text-align: justify;
|
@import "~bulma";
|
||||||
}
|
@import "~buefy/src/scss/buefy";
|
||||||
|
|
||||||
|
|
||||||
.hero {
|
|
||||||
background-color: #00858C;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<section class="hero has-text-centered is-fullheigh">
|
<section class="hero is-primary has-text-centered is-fullheigh">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<h1 class="has-text-white-bis title">Teammood</h1>
|
<h1 class="title">Teammood</h1>
|
||||||
<h2 class="Subtitle">Bienvenue {{$store.getters.name}}</h2>
|
<h2 class="Subtitle">Bienvenue {{$store.getters.name}}</h2>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -11,18 +11,17 @@
|
|||||||
<div class="field is-grouped-centered">
|
<div class="field is-grouped-centered">
|
||||||
<div class="control">
|
<div class="control">
|
||||||
<label class="label">Humeur</label>
|
<label class="label">Humeur</label>
|
||||||
<input title="humeur" v-model="humeur" id="humeur" class="slider is-fullwidth is-medium is-success is-circle" step="1" min="0" max="5" type="range">
|
<b-slider rounded title="humeur" v-model="humeur" id="humeur" :step="1" :min="0" :max="5" ></b-slider>
|
||||||
<output for="humeur">{{humeur}}</output>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="control">
|
<div class="control">
|
||||||
<label class="label">stress</label>
|
<label class="label">stress</label>
|
||||||
<input title="stress" v-model="stress" id="stress" class="slider is-fullwidth is-medium is-success is-circle" step="1" min="0" max="5" type="range">
|
<b-slider rounded title="stress" v-model="stress" id="stress" :step="1" :min="0" :max="5"></b-slider>
|
||||||
<output for="stress">{{stress}}</output>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="control">
|
<div class="control">
|
||||||
<label class="label">fatigue</label>
|
<label class="label">fatigue</label>
|
||||||
<input title="fatigue" v-model="fatigue" id="fatigue" class="slider is-fullwidth is-medium is-success is-circle" step="1" min="0" max="5" type="range">
|
<b-slider rounded title="fatigue" v-model="fatigue" id="fatigue" :step="1" :min="0" :max="5" ></b-slider>
|
||||||
<output for="fatigue">{{fatigue}}</output>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
@ -73,7 +72,7 @@ export default {
|
|||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
|
console.log(this)
|
||||||
|
|
||||||
if(!this.$store.getters.name){
|
if(!this.$store.getters.name){
|
||||||
this.showModalname=true;
|
this.showModalname=true;
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="modal is-active">
|
<div :width="640" class="modal is-active">
|
||||||
<div class="modal-background"></div>
|
<div class="modal-background"></div>
|
||||||
<button class="modal-close is-large" aria-label="close" @click="$emit('close')"></button>
|
<button v-if="this.$store.getters.name" class="modal-close is-large" aria-label="close" @click="$emit('close')"></button>
|
||||||
<div class="modal-content box">
|
<div class="modal-content box">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
<!-- components/Login.vue -->
|
<!-- components/Login.vue -->
|
||||||
<template>
|
<template>
|
||||||
<modal @close="$emit('close')">
|
<modal @close="$emit('close')">
|
||||||
<div class="hero">
|
<div class="hero is-primary ">
|
||||||
<div class="hero-body has-text-centered">
|
<div class="hero-body has-text-centered">
|
||||||
<h2 class="has-text-white-bis title ">Entrer votre Nom.</h2>
|
<h2 class="has-text-white-bis title ">Entrer votre Nom.</h2>
|
||||||
<p class="subtitle error-msg">{{ errorMsg }}</p>
|
<p class="subtitle error-msg">{{ errorMsg }}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -4,8 +4,9 @@ import Vue from 'vue';
|
|||||||
import App from './App';
|
import App from './App';
|
||||||
import router from './router';
|
import router from './router';
|
||||||
import store from './store';
|
import store from './store';
|
||||||
import './../node_modules/bulma/css/bulma.css';
|
import Buefy from 'buefy'
|
||||||
import './../node_modules/bulma-slider/dist/css/bulma-slider.min.css';
|
import 'buefy/dist/buefy.css'
|
||||||
|
Vue.use(Buefy)
|
||||||
Vue.config.productionTip = false;
|
Vue.config.productionTip = false;
|
||||||
/* eslint-disable no-new */
|
/* eslint-disable no-new */
|
||||||
new Vue({
|
new Vue({
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user