fix some css

This commit is contained in:
2020-03-28 12:04:27 +01:00
parent 80c5eb53b6
commit 53ad9586a2
12 changed files with 114 additions and 97 deletions

View File

@@ -7,13 +7,13 @@
</svg>
</router-link>
<hr>
<router-link to="/memos" class="nav-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current site-logo">
<title>Paramètres</title>
<path d="M22.9 10.1c-.1-.1-.2-.2-.3-.2L20 9.5c-.1-.5-.3-.9-.6-1.4.2-.2.4-.6.8-1 .3-.4.6-.8.7-1 .1 0 .1-.2.1-.3 0-.1 0-.2-.1-.3-.3-.5-1.1-1.3-2.4-2.4-.1-.1-.2-.1-.4-.1-.1 0-.3 0-.3.1l-2 1.5c-.4-.2-.8-.4-1.3-.5l-.4-2.6c0-.1-.1-.2-.2-.3-.1-.2-.2-.2-.3-.2h-3.2c-.3 0-.4.1-.5.4-.1.5-.3 1.4-.4 2.7-.5.1-.9.3-1.3.5l-2-1.5c-.1-.1-.3-.2-.4-.2-.2 0-.7.3-1.4 1-.6.7-1.1 1.3-1.4 1.6-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.6.8 1.2 1.4 1.5 2-.2.5-.3.9-.5 1.4l-2.6.4c-.1 0-.2.1-.3.2-.1.1-.1.2-.1.3v3.2c0 .1 0 .2.1.3.1.1.2.2.3.2l2.6.4c.1.5.3.9.6 1.4-.2.2-.4.6-.8 1-.3.4-.6.8-.7 1-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.4.5 1.2 1.3 2.4 2.4.1.1.2.2.4.2.1 0 .3 0 .4-.1l2-1.5c.3.1.7.3 1.2.5l.4 2.6c0 .1.1.2.2.3.1.1.2.1.4.1h3.2c.3 0 .4-.1.5-.4.1-.5.3-1.4.4-2.7.4-.1.9-.3 1.3-.5l2 1.5c.1.1.3.1.4.1.2 0 .7-.3 1.3-1 .7-.7 1.2-1.2 1.4-1.5.1-.1.1-.2.1-.3 0-.1 0-.2-.1-.4-.7-.8-1.2-1.5-1.5-2 .2-.4.4-.8.6-1.3l2.7-.4c.1 0 .2-.1.3-.2.1-.1.1-.2.1-.3v-3.2c-.2-.1-.2-.2-.3-.3zm-8.3 4.5c-.7.7-1.6 1.1-2.6 1.1s-1.9-.4-2.6-1.1c-.7-.7-1.1-1.6-1.1-2.6s.4-1.9 1.1-2.6c.7-.7 1.6-1.1 2.6-1.1s1.9.4 2.6 1.1c.7.7 1.1 1.6 1.1 2.6s-.4 1.9-1.1 2.6z"/>
</svg>
Activitées
</router-link>
<!-- <router-link to="/memos" class="nav-item">-->
<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current site-logo">-->
<!-- <title>Paramètres</title>-->
<!-- <path d="M22.9 10.1c-.1-.1-.2-.2-.3-.2L20 9.5c-.1-.5-.3-.9-.6-1.4.2-.2.4-.6.8-1 .3-.4.6-.8.7-1 .1 0 .1-.2.1-.3 0-.1 0-.2-.1-.3-.3-.5-1.1-1.3-2.4-2.4-.1-.1-.2-.1-.4-.1-.1 0-.3 0-.3.1l-2 1.5c-.4-.2-.8-.4-1.3-.5l-.4-2.6c0-.1-.1-.2-.2-.3-.1-.2-.2-.2-.3-.2h-3.2c-.3 0-.4.1-.5.4-.1.5-.3 1.4-.4 2.7-.5.1-.9.3-1.3.5l-2-1.5c-.1-.1-.3-.2-.4-.2-.2 0-.7.3-1.4 1-.6.7-1.1 1.3-1.4 1.6-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.6.8 1.2 1.4 1.5 2-.2.5-.3.9-.5 1.4l-2.6.4c-.1 0-.2.1-.3.2-.1.1-.1.2-.1.3v3.2c0 .1 0 .2.1.3.1.1.2.2.3.2l2.6.4c.1.5.3.9.6 1.4-.2.2-.4.6-.8 1-.3.4-.6.8-.7 1-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.4.5 1.2 1.3 2.4 2.4.1.1.2.2.4.2.1 0 .3 0 .4-.1l2-1.5c.3.1.7.3 1.2.5l.4 2.6c0 .1.1.2.2.3.1.1.2.1.4.1h3.2c.3 0 .4-.1.5-.4.1-.5.3-1.4.4-2.7.4-.1.9-.3 1.3-.5l2 1.5c.1.1.3.1.4.1.2 0 .7-.3 1.3-1 .7-.7 1.2-1.2 1.4-1.5.1-.1.1-.2.1-.3 0-.1 0-.2-.1-.4-.7-.8-1.2-1.5-1.5-2 .2-.4.4-.8.6-1.3l2.7-.4c.1 0 .2-.1.3-.2.1-.1.1-.2.1-.3v-3.2c-.2-.1-.2-.2-.3-.3zm-8.3 4.5c-.7.7-1.6 1.1-2.6 1.1s-1.9-.4-2.6-1.1c-.7-.7-1.1-1.6-1.1-2.6s.4-1.9 1.1-2.6c.7-.7 1.6-1.1 2.6-1.1s1.9.4 2.6 1.1c.7.7 1.1 1.6 1.1 2.6s-.4 1.9-1.1 2.6z"/>-->
<!-- </svg>-->
<!-- Activitées-->
<!-- </router-link>-->
<router-link to="/memos" class="nav-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current site-logo">
<title>Paramètres</title>

View File

@@ -1,7 +1,7 @@
<template>
<div class="relative pb-2">
<label :for="name" class="form-label absolute pt-1">{{ label }}</label>
<textarea :id="name" type="text" v-model="value" @input="updateField()" :class="errorClassObject()" class="form-textarea pt-4 pb-1">
<div class="relative">
<label v-if="label" :for="name" class="pb-1">{{ label }}</label>
<textarea :id="name" type="text" v-model="value" @input="updateField()" :class="errorClassObject()" class="p-1">
{{ placeholder }}
</textarea>
<p class="text-alert" v-text="errorMessage()">Error Here</p>

View File

@@ -18,7 +18,7 @@ const actions = {
const mutations = {
setTitle(state, title) {
state.title = title + ' | Facebook'
state.title = title + ' | Portal'
}
}

View File

@@ -1,11 +1,16 @@
<template>
<div class="p-2">
<div class="memo-edit p-2">
<div class="flex-between mb-1">
<a href="#" @click="$router.back()" class="link">
< Back
</a>
</div>
<form @submit.prevent="submitForm">
<InputField name="name" label="Memo Title" placeholder="Your Title" @update:field="form.name = $event" :errors="errors" />
<TextAreaField name="memo" label="Memo" placeholder="Your Memo" @update:field="form.memo = $event" :errors="errors" />
<InputField name="name" label="Title" placeholder="Your Title" @update:field="form.name = $event" :errors="errors" />
<TextAreaField class="memo-text-area" name="memo" placeholder="Your Memo" @update:field="form.memo = $event" :errors="errors" />
<div class="flex-end">
<button @click="$router.back()" class="btn-alert mr-3">Cancel</button>
<button @click="$router.back()" class="btn-alert mr-1">Cancel</button>
<button class="btn-primary">Add New Memo</button>
</div>
</form>

View File

@@ -1,16 +1,16 @@
<template>
<div class="p-2">
<div class="flex-between">
<div class="memo-edit p-2">
<div class="flex-between mb-1">
<a href="#" @click="$router.back()" class="link">
< Back
</a>
</div>
<form @submit.prevent="submitForm">
<InputField name="name" :data="form.name" label="Memo Title" placeholder="Your Title" @update:field="form.name = $event" :errors="errors" />
<TextAreaField name="memo" :data="form.memo" label="Memo" placeholder="Your Memo" @update:field="form.memo = $event" :errors="errors" />
<InputField name="name" :data="form.name" label="Title" placeholder="Your Title" @update:field="form.name = $event" :errors="errors" />
<TextAreaField class="memo-text-area" name="memo" :data="form.memo" placeholder="Your Memo" @update:field="form.memo = $event" :errors="errors" />
<div class="flex-end">
<button class="btn-alert mr-3">Cancel</button>
<button class="btn-alert mr-1">Cancel</button>
<button class="btn-primary">Save</button>
</div>

View File

@@ -23,7 +23,7 @@
:message="alertMessage"
class="mb-1"
/>
<form @submit.prevent="addMember">
<form @submit.prevent="addMember" class="mb-2">
<InputField
name="name"
type="text"
@@ -33,9 +33,9 @@
@update:field="form.name = $event"
/>
<InputField name="email" type="email" label="Adresse email du nouveau membre" placeholder="E-mail" :errors="errors" @update:field="form.email = $event" />
<button>Ajouter</button>
<button class="btn-primary">Ajouter</button>
</form>
<div>
<div class="mb-2">
<h2>Liste des utilisateurs</h2>
<ul>
<li v-if="loading">> Loading...</li>
@@ -79,31 +79,27 @@
})
},
mounted() {
if(authUser.data.attributes.is_admin) {
axios.get('/api/users')
.then(response => {
this.users = response.data.data
this.loading = false
})
.catch(error => {
this.loading = false
alert('Unable to fetch users.')
})
}
axios.get('/api/users')
.then(response => {
this.users = response.data.data
this.loading = false
})
.catch(error => {
this.loading = false
alert('Unable to fetch users.')
})
},
methods: {
addMember: function () {
if(authUser.data.attributes.is_admin && this.form.name.length >= 4 && this.form.email.length >= 12) {
if(this.form.name.length >= 4 && this.form.email.length >= 12) {
axios.post('/api/users', {name: this.form.name, email: this.form.email})
.then(res => {
console.log(res)
this.form.name = ''
this.form.email = ''
this.alertType = 'success'
this.alertMessage = `${res.data.data.attributes.name} a bien été créé`
})
.catch(errors => {
console.log(errors)
this.alertType = 'error'
this.alertMessage = 'L\'utilisateur n\'a pas été créé'
})

View File

@@ -11,7 +11,7 @@ input {
background-color: $greyLight;
font-size: 1.6rem;
font-family: $fontMain;
padding: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
&:focus {

View File

@@ -26,5 +26,13 @@
&-date {
opacity: 0.6;
}
}
.memo-edit {
.memo-text-area textarea {
height: 50vh;
}
}

View File

@@ -30,6 +30,10 @@ $base: 1rem;
.flex-center {
display: flex;
justify-content: center;
}
.flex-middle {
display: flex;
align-items: center;
}