switch to buefy and change primary color
This commit is contained in:
vincent
parent
c344dd2316
commit
20cd5269aa
@ -3,7 +3,8 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
8
client/package-lock.json
generated
8
client/package-lock.json
generated
@ -1797,6 +1797,14 @@
|
||||
"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": {
|
||||
"version": "4.9.1",
|
||||
"resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.18.1",
|
||||
"buefy": "^0.8.13",
|
||||
"bulma": "^0.7.5",
|
||||
"bulma-slider": "^2.0.0",
|
||||
"vue": "^2.6.11",
|
||||
|
||||
@ -10,28 +10,30 @@ export default {
|
||||
name: 'App',
|
||||
};
|
||||
</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 {
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
h1,h2 {
|
||||
font-weight: normal;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
);
|
||||
$link: $primary;
|
||||
$link-invert: $primary-invert;
|
||||
$link-focus-border: $primary;
|
||||
|
||||
}
|
||||
// Import Bulma and Buefy styles
|
||||
@import "~bulma";
|
||||
@import "~buefy/src/scss/buefy";
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
|
||||
.hero {
|
||||
background-color: #00858C;
|
||||
color: white;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<section class="hero has-text-centered is-fullheigh">
|
||||
<section class="hero is-primary has-text-centered is-fullheigh">
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
@ -11,18 +11,17 @@
|
||||
<div class="field is-grouped-centered">
|
||||
<div class="control">
|
||||
<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">
|
||||
<output for="humeur">{{humeur}}</output>
|
||||
<b-slider rounded title="humeur" v-model="humeur" id="humeur" :step="1" :min="0" :max="5" ></b-slider>
|
||||
</div>
|
||||
<div class="control">
|
||||
<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">
|
||||
<output for="stress">{{stress}}</output>
|
||||
<b-slider rounded title="stress" v-model="stress" id="stress" :step="1" :min="0" :max="5"></b-slider>
|
||||
|
||||
</div>
|
||||
<div class="control">
|
||||
<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">
|
||||
<output for="fatigue">{{fatigue}}</output>
|
||||
<b-slider rounded title="fatigue" v-model="fatigue" id="fatigue" :step="1" :min="0" :max="5" ></b-slider>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -73,7 +72,7 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
console.log(this)
|
||||
|
||||
if(!this.$store.getters.name){
|
||||
this.showModalname=true;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="modal is-active">
|
||||
<div :width="640" class="modal is-active">
|
||||
<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">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!-- components/Login.vue -->
|
||||
<template>
|
||||
<modal @close="$emit('close')">
|
||||
<div class="hero">
|
||||
<div class="hero-body has-text-centered">
|
||||
<div class="hero is-primary ">
|
||||
<div class="hero-body has-text-centered">
|
||||
<h2 class="has-text-white-bis title ">Entrer votre Nom.</h2>
|
||||
<p class="subtitle error-msg">{{ errorMsg }}</p>
|
||||
</div>
|
||||
|
||||
@ -4,8 +4,9 @@ import Vue from 'vue';
|
||||
import App from './App';
|
||||
import router from './router';
|
||||
import store from './store';
|
||||
import './../node_modules/bulma/css/bulma.css';
|
||||
import './../node_modules/bulma-slider/dist/css/bulma-slider.min.css';
|
||||
import Buefy from 'buefy'
|
||||
import 'buefy/dist/buefy.css'
|
||||
Vue.use(Buefy)
|
||||
Vue.config.productionTip = false;
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user