Merge branch 'feature/Theme'

This commit is contained in:
2020-07-26 22:21:41 +02:00
28 changed files with 350 additions and 210 deletions

View File

@@ -17,29 +17,29 @@
"cross-env": "^7.0", "cross-env": "^7.0",
"eslint": "^6.8.0", "eslint": "^6.8.0",
"eslint-config-standard": "^14.1.1", "eslint-config-standard": "^14.1.1",
"eslint-loader": "^3.0.3", "eslint-loader": "^3.0.4",
"eslint-plugin-import": "^2.20.2", "eslint-plugin-import": "^2.22.0",
"eslint-plugin-node": "^11.1.0", "eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1", "eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1", "eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^6.2.2", "eslint-plugin-vue": "^6.2.2",
"laravel-mix": "^5.0.1", "laravel-mix": "^5.0.1",
"laravel-mix-eslint": "^0.1.3", "laravel-mix-eslint": "^0.1.3",
"laravel-mix-purgecss": "^5.0.0-rc.2", "laravel-mix-purgecss": "^5.0.0",
"lodash": "^4.17.13", "lodash": "^4.17.19",
"resolve-url-loader": "^2.3.1", "resolve-url-loader": "^2.3.1",
"sass": "^1.20.1", "sass": "^1.26.10",
"sass-loader": "^8.0.0", "sass-loader": "^8.0.0",
"vue": "^2.5.17", "vue": "^2.5.17",
"vue-router": "^3.1.6", "vue-router": "^3.3.4",
"vue-template-compiler": "^2.6.10", "vue-template-compiler": "^2.6.10",
"vuex": "^3.1.3" "vuex": "^3.5.1"
}, },
"dependencies": { "dependencies": {
"dropzone": "^5.7.0", "dropzone": "^5.7.2",
"laravel-mix-svg-vue": "^0.2.6", "laravel-mix-svg-vue": "^0.2.6",
"markdown-it": "^10.0.0", "markdown-it": "^10.0.0",
"markdown-it-checkbox": "^1.1.0", "markdown-it-checkbox": "^1.1.0",
"tailwindcss": "^1.3.5" "tailwindcss": "^1.5.2"
} }
} }

View File

@@ -4,6 +4,12 @@
* Released under the MIT License. * Released under the MIT License.
*/ */
/*!
* vuex v3.5.1
* (c) 2020 Evan You
* @license MIT
*/
/*! https://mths.be/punycode v1.4.1 by @mathias */ /*! https://mths.be/punycode v1.4.1 by @mathias */
/** /**
@@ -14,9 +20,3 @@
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE> * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
* Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
*/ */
/**
* vuex v3.1.3
* (c) 2020 Evan You
* @license MIT
*/

View File

@@ -4,7 +4,7 @@
<div v-if="authUser" class="w-full overflow-y-auto"> <div v-if="authUser" class="w-full overflow-y-auto">
<TopBar /> <TopBar />
<main> <main>
<router-view :key="$route.fullPath"></router-view> <router-view :key="$route.fullPath" class="bg-gray-200"></router-view>
</main> </main>
</div> </div>
</div> </div>

View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="relative mb-2"> <div class="relative mb-2">
<label v-if="label" :for="name" class="pb-2 font-bold text-xl ml-1">{{ label }}</label> <label v-if="label" :for="name" class="pb-2 font-bold text-xl ml-1">{{ label }}</label>
<input :id="name" :type="type" :placeholder="placeholder" v-model="value" @input="updateField()" :class="'w-full rounded p-2 ' + classes + ' ' + errorClassObject()"> <input :id="name" :type="type" :placeholder="placeholder" v-model="value" @input="updateField()" :class="'w-full p-2 ' + classes + ' ' + errorClassObject()">
<p class="text-red-600 m-0" v-text="errorMessage()">Error Here</p> <p class="text-red-600 m-0" v-text="errorMessage()">Error Here</p>
</div> </div>
</template> </template>

View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="top-bar flex justify-between bg-gray-600"> <div class="top-bar relative z-10 flex justify-between bg-marine h-16">
<router-link v-if="authUser" :to="'/profile'" class="flex items-center m-2"> <router-link v-if="authUser" :to="'/profile'" class="flex items-center m-2">
<Avatar :avatar="authUser.data.attributes.thumbnail_cover_image.data.attributes.path" size="small" :alt="authUser.data.attributes.name" class="w-10 h-10"/> <Avatar :avatar="authUser.data.attributes.thumbnail_cover_image.data.attributes.path" size="small" :alt="authUser.data.attributes.name" class="w-10 h-10"/>
<span class="ml-2 text-gray-100 hover:text-white">{{ authUser.data.attributes.name }}</span> <span class="ml-2 text-gray-100 hover:text-white">{{ authUser.data.attributes.name }}</span>
@@ -11,7 +11,7 @@
</button> </button>
</form> </form>
<router-link to="/dashboard" v-if="authUser" class="text-gray-100 hover:text-white"> <router-link to="/dashboard" v-if="authUser" class="text-gray-100 hover:text-white">
<svg-vue icon="params" class="w-10 m-2 fill-current" /> <svg-vue icon="params" class="w-10 m-3 fill-current" />
</router-link> </router-link>
<router-link v-else to="/login"> <router-link v-else to="/login">
Se connecter Se connecter

View File

@@ -1,16 +1,12 @@
<template> <template>
<div> <div>
<div class="m-2"> <div class="card block">
<div class="card">
<div class="text-black m-2 p-2 flex flex-col">
<h2>Raspberry Links</h2> <h2>Raspberry Links</h2>
<ul class="mt-2"> <ul class="mt-2">
<li><a v-for="(link, index) in links" :href="link.link" :key="index" target="_blank" class="block text-lg">{{ link.name }}</a></li> <li><a v-for="(link, index) in links" :href="link.link" :key="index" target="_blank" class="block text-lg">{{ link.name }}</a></li>
</ul> </ul>
</div> </div>
</div> </div>
</div>
</div>
</template> </template>
<script> <script>

View File

@@ -1,8 +1,6 @@
<template> <template>
<div> <div>
<div class="m-2"> <div class="card flex flex-col">
<div class="card">
<div class="text-black m-2 p-2 flex flex-col">
<h2>Météo Home</h2> <h2>Météo Home</h2>
<ul class="mt-2"> <ul class="mt-2">
<li v-for="(captor, index) in captors" :key="index" class="block mb-4"> <li v-for="(captor, index) in captors" :key="index" class="block mb-4">
@@ -20,8 +18,6 @@
</ul> </ul>
</div> </div>
</div> </div>
</div>
</div>
</template> </template>
<script> <script>

View File

@@ -1,5 +1,111 @@
<template> <template>
<div class="m-2 p-2 bg-white"> <div class="mx-2 p-2">
<div class="flex flex-wrap -mx-2">
<div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 mb-4">
<div class="card bg-marine text-white shadow">
<div class="flex flex-col justify-between h-full">
<div class="text-xl">Active Users</div>
<div class="text-3xl font-bold">72</div>
<div class="mt-4">
<a href="#" class="text-white hover:text-marine-light uppercase">View Refferals -></a>
</div>
</div>
</div>
</div>
<div class="w-full sm:w-1/2 md:w-2/3 lg:w-3/4 mb-4">
<div class="card">
<div class="flex justify-between">
<span>Users</span>
<span class="flex-none text-green text-sm">268 %</span>
</div>
<div class="text-2xl font-bold">15K</div>
</div>
</div>
</div>
<div class="flex flex-wrap -mx-2">
<div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 mb-4">
<div class="card">
<div class="flex justify-between">
<span>Users</span>
<span class="flex-none text-green text-sm">268 %</span>
</div>
<div class="text-2xl font-bold">15K</div>
</div>
</div>
<div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 mb-4">
<div class="card">
<div class="flex justify-between">
<span>Sessions</span>
<span class="flex-none text-green text-sm">268 %</span>
</div>
<div class="text-2xl font-bold">17K</div>
</div>
</div>
<div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 mb-4">
<div class="card">
<div class="flex justify-between items-start">
<span>Bouncing Rate</span>
<span class="flex-none text-red text-sm">- 158 %</span>
</div>
<div class="text-2xl font-bold">62.7 %</div>
</div>
</div>
<div class="flex-initial sm:w-1/2 md:w-1/3 lg:w-1/4 mb-4">
<div class="card">
<div class="flex justify-between">
<span>Session duration best of</span>
<span class="flex-none text-green text-sm">189 %</span>
</div>
<div class="text-2xl font-bold">1 m 32 s</div>
</div>
</div>
<div class="flex-initial sm:w-1/2 md:w-1/3 lg:w-1/4 mb-4">
<div class="card">
<div class="flex justify-between">
<span>Session duration best of</span>
<span class="flex-none text-green text-sm">189 %</span>
</div>
<div class="text-2xl font-bold">1 m 32 s</div>
</div>
</div>
<div class="flex-initial sm:w-1/2 md:w-1/3 lg:w-1/4 mb-4">
<div class="card">
<div class="-m-4">
<img src="https://portal.bricooli.fr/storage/images/default-cover.jpg" alt="" class="w-full rounded rounded-b-none">
</div>
<div class="h-full flex flex-col mt-6">
<h1 class="text-xl text-marine">Memo Name test</h1>
<span class="mt-auto self-end bg-gray-400 text-white tag">Il y a 3 mois</span>
</div>
</div>
</div>
<div class="flex-initial sm:w-1/2 md:w-1/3 lg:w-1/4 mb-4">
<div class="card">
<div class="-m-4">
<img src="https://portal.bricooli.fr/storage/images/default-cover.jpg" alt="" class="w-full rounded rounded-b-none">
</div>
<div class="h-full flex flex-col mt-6">
<h1 class="text-xl text-marine">Memo Name test</h1>
<p class="no-indent">Anim consequat duis culpa in anim aliquip dolore amet laboris eu fugiat commodo reprehenderit aute amet velit sit culpa et proident irure pariatur</p>
<span class="mt-auto self-end bg-gray-400 text-white tag">Il y a 3 mois</span>
</div>
</div>
</div>
<div class="flex-initial sm:w-1/2 md:w-1/3 lg:w-1/4 mb-4">
<div class="card">
<div class="-m-4">
<img src="https://portal.bricooli.fr/storage/images/default-cover.jpg" alt="" class="w-full rounded rounded-b-none">
</div>
<div class="h-full flex flex-col mt-6">
<h1 class="text-xl text-marine">Memo Name test</h1>
<p class="no-indent">Anim consequat duis culpa in anim aliquip dolore amet laboris eu fugiat commodo reprehenderit</p>
<span class="mt-auto self-end bg-gray-400 text-white tag">Il y a 3 mois</span>
</div>
</div>
</div>
</div>
<div class="box">
<h1>testeur CSS</h1> <h1>testeur CSS</h1>
<h2>testeur CSS</h2> <h2>testeur CSS</h2>
<h3>testeur CSS</h3> <h3>testeur CSS</h3>
@@ -64,6 +170,7 @@
<input type="submit" class="mb-1"> <input type="submit" class="mb-1">
</form> </form>
</div> </div>
</div>
</template> </template>
<script> <script>

View File

@@ -1,5 +1,6 @@
<template> <template>
<div class="p-4"> <div class="mx-2 p-2">
<div class="box">
<div class="flex justify-between"> <div class="flex justify-between">
<h1 class="page-title">Administration</h1> <h1 class="page-title">Administration</h1>
<a href="#" @click.prevent="logout" class="btn"> <a href="#" @click.prevent="logout" class="btn">
@@ -8,6 +9,7 @@
</div> </div>
<UserAdmin /> <UserAdmin />
</div> </div>
</div>
</template> </template>
<script> <script>

View File

@@ -1,11 +1,10 @@
<template> <template>
<div class="p-4"> <div class="mx-2 p-2">
<h1 class="page-title">Home</h1> <div class="flex flex-wrap -mx-2">
<div class="flex flex-wrap -m-2 mt-2"> <OpenWeatherCard class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 mb-4" />
<OpenWeatherCard class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4" /> <MemoHome class="w-full sm:w-1/2 md:w-1/3 lg:w-1/3 mb-4" />
<MemoHome class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4" /> <AutomaticLinksHome class="w-full sm:w-1/2 md:w-1/3 lg:w-5/12 mb-4" />
<AutomaticLinksHome class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4" /> <AutomaticMeteoHome class="w-full sm:w-1/2 md:w-1/3 lg:w-1/3 mb-4" />
<AutomaticMeteoHome class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4" />
</div> </div>
</div> </div>
</template> </template>

View File

@@ -1,12 +1,12 @@
<template> <template>
<div class="p-4"> <div class="mx-2 p-2">
<form @submit.prevent="submitForm">
<div class="flex justify-between flex-center mb-4"> <div class="flex justify-between flex-center mb-4">
<router-link to="/memos/" class="btn">Back</router-link> <router-link to="/memos/" class="btn">Back</router-link>
<button class="btn-primary">Add New Memo</button> <button class="btn-primary">Add New Memo</button>
</div> </div>
<form @submit.prevent="submitForm" class="box">
<InputField name="name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" /> <InputField name="name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
<TextAreaField class="" name="memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" /> <TextAreaField name="memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
</form> </form>
</div> </div>
</template> </template>

View File

@@ -13,12 +13,12 @@
classes="cover" classes="cover"
:alt="form.name"/> :alt="form.name"/>
</div> </div>
<div class="p-4"> <div class="mx-2 p-2">
<form @submit.prevent="submitForm">
<div class="flex justify-between mb-4"> <div class="flex justify-between mb-4">
<router-link :to="'/memos/' + this.$route.params.id" class="btn">Back</router-link> <router-link :to="'/memos/' + this.$route.params.id" class="btn">Back</router-link>
<button class="btn-primary">Save</button> <button class="btn-primary">Save</button>
</div> </div>
<form @submit.prevent="submitForm" class="box">
<InputField name="name" :data="form.name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" /> <InputField name="name" :data="form.name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
<TextAreaField class="memo-text-area" name="memo" :data="form.memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" /> <TextAreaField class="memo-text-area" name="memo" :data="form.memo" placeholder="Your Memo" required @update:field="form.memo = $event" :errors="errors" />
</form> </form>

View File

@@ -1,21 +1,21 @@
<template> <template>
<div> <div>
<div class="card m-2"> <div class="card">
<div v-if="loading" class="p-2"> <div v-if="loading">
<h2>Memos</h2> <h2>Memos</h2>
<Loader /> <Loader />
</div> </div>
<div v-else class="p-2"> <div v-else>
<router-link to="/memos"><h2 class="mb-4 text-gray-900">{{ memos.count }} Memos</h2></router-link> <router-link to="/memos" class="mb-4 no-underline"><h2>{{ memos.count }} Memos</h2></router-link>
<router-link :to="memos.last_updated.links.self" class="m-2 block"> <router-link :to="memos.last_updated.links.self" class="m-2 block no-underline">
<div class="flex justify-between text-black"> <div class="flex justify-between text-black">
Dernier édité Dernier édité
<span class="inline-block bg-gray-400 text-white text-center rounded-full px-3 py-1 text-sm font-semibold">{{ memos.last_updated.data.last_updated }}</span> <span class="inline-block bg-gray-400 text-white text-center rounded-full px-3 py-1 text-sm font-semibold">{{ memos.last_updated.data.last_updated }}</span>
</div> </div>
<div class="text-2xl font-bold">{{ memos.last_updated.data.name }}</div> <div class="text-2xl font-bold">{{ memos.last_updated.data.name }}</div>
</router-link> </router-link>
<hr class="border border-gray-900"> <hr class="border border-marine">
<router-link :to="memos.last_created.links.self" class="m-2 block"> <router-link :to="memos.last_created.links.self" class="m-2 block no-underline">
<div class="flex justify-between text-black"> <div class="flex justify-between text-black">
Dernier créé Dernier créé
<span class="inline-block bg-gray-400 text-white text-center rounded-full px-3 py-1 text-sm font-semibold">{{ memos.last_created.data.last_updated }}</span> <span class="inline-block bg-gray-400 text-white text-center rounded-full px-3 py-1 text-sm font-semibold">{{ memos.last_created.data.last_updated }}</span>

View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="p-4"> <div class="mx-2 p-2">
<div class="flex justify-between flex-center mb-4"> <div class="flex justify-between flex-center mb-4">
<a href="#" class="btn" @click="$router.back()">Back</a> <a href="#" class="btn" @click="$router.back()">Back</a>
<router-link :to="'/memos/create'" class="btn-primary">Add New Memo</router-link> <router-link :to="'/memos/create'" class="btn-primary">Add New Memo</router-link>
@@ -9,14 +9,14 @@
<div v-if="memos.lenght === 0"> <div v-if="memos.lenght === 0">
<p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p> <p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p>
</div> </div>
<router-link v-for="memo in memos" :key="memo.data.memo_id" :to="'/memos/' + memo.data.memo_id" class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4"> <router-link v-for="memo in memos" :key="memo.data.memo_id" :to="'/memos/' + memo.data.memo_id" class="flex-initial sm:mx-auto md:w-1/2 md:mx-0 lg:w-1/3 xl:w-1/4 mb-4 no-underline">
<div class="m-2 max-w-lg rounded overflow-hidden shadow-lg bg-white"> <div class="card">
<img :src="memo.data.attributes.thumbnail_cover_image.data.attributes.path" alt="" class="w-full"> <div class="-m-4">
<div class="px-6 py-4"> <img :src="memo.data.attributes.thumbnail_cover_image.data.attributes.path" alt="" class="w-full rounded rounded-b-none">
<h1 class="text-gray-700">{{ memo.data.name }}</h1>
</div> </div>
<div class="flex justify-end py-2"> <div class="h-full flex flex-col mt-6">
<span class="inline-block bg-gray-400 text-white rounded-full px-3 py-1 text-sm font-semibold mr-2">{{ memo.data.last_updated }}</span> <h1 class="text-xl text-marine">{{ memo.data.name }}</h1>
<span class="mt-auto self-end bg-gray-400 text-white tag">{{ memo.data.last_updated }}</span>
</div> </div>
</div> </div>
</router-link> </router-link>

View File

@@ -30,7 +30,7 @@
<!-- <TagBox :memo="memo" />--> <!-- <TagBox :memo="memo" />-->
<div class="p-4"> <div class="p-4">
<div class="memo-style rounded-t-sm p-4 pb-3 -mb-1 bg-white" v-html="memoMarkdown"></div> <div class="box memo-style rounded-t-sm p-4 pb-3 -mb-1 bg-white" v-html="memoMarkdown"></div>
<div class="bg-gray-400 text-white rounded-b-sm px-2 py-1 flex justify-end">@last update<span class="font-semibold ml-1">{{ memo.last_updated }}</span></div> <div class="bg-gray-400 text-white rounded-b-sm px-2 py-1 flex justify-end">@last update<span class="font-semibold ml-1">{{ memo.last_updated }}</span></div>
</div> </div>
</div> </div>

View File

@@ -3,9 +3,8 @@
<div v-if="loading"> <div v-if="loading">
<Loader /> <Loader />
</div> </div>
<div v-else class="m-2"> <div v-else class="card">
<div class="card"> <div class="flex flex-col">
<div class="text-black m-2 p-2 flex flex-col">
<h2>{{ meteo.city.name }}</h2> <h2>{{ meteo.city.name }}</h2>
<div class="flex"> <div class="flex">
<div class="flex flex-col justify-end"> <div class="flex flex-col justify-end">
@@ -15,14 +14,13 @@
<div><strong>{{ meteo.list[0].main.pressure }}</strong> hPa</div> <div><strong>{{ meteo.list[0].main.pressure }}</strong> hPa</div>
</div> </div>
<div class="flex flex-col flex-1 justify-end items-end"> <div class="flex flex-col flex-1 justify-end items-end">
<i v-bind:class="'owf owf-5x owf-' + meteo.list[0].weather[0].id"></i> <i v-bind:class="'current-fill text-marine owf owf-5x owf-' + meteo.list[0].weather[0].id"></i>
<div><strong>{{ meteo.list[0].weather[0].description }}</strong></div> <div><strong>{{ meteo.list[0].weather[0].description }}</strong></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>

View File

@@ -15,7 +15,7 @@
<input type="text" <input type="text"
v-model="toDo.data.attributes.data.name" v-model="toDo.data.attributes.data.name"
@keypress.enter="updateToDo" @keypress.enter="updateToDo"
class="flex-1 rounded-sm border border-primary-600 pl-1"> class="flex-1 rounded-sm border border-primary-600 p-0 pl-1">
<span @click="edit = !edit"> <span @click="edit = !edit">
<svg-vue icon="close" class="inline w-4 fill-current cursor-pointer mx-2" /> <svg-vue icon="close" class="inline w-4 fill-current cursor-pointer mx-2" />
</span> </span>

View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="p-4"> <div class="mx-2 p-2">
<div v-if="modal" class="modal-container" @click="modal = ! modal"></div> <div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
<div v-if="modal" class="modal px-2"> <div v-if="modal" class="modal px-2">
<p class="m-2 text-center">Add a new to-do list ?</p> <p class="m-2 text-center">Add a new to-do list ?</p>
@@ -22,8 +22,8 @@
:key="index" :key="index"
:to="'/to-do-lists/' + toDoList.data.to_do_list_id" :to="'/to-do-lists/' + toDoList.data.to_do_list_id"
:to-do-list="toDoList" :to-do-list="toDoList"
class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4" > class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 no-underline" >
<div class="bg-gray-300 rounded text-black m-2 p-2"> <div class="rounded bg-white text-black m-2 p-2">
<div class="flex justify-between"> <div class="flex justify-between">
<span class="font-bold">{{ toDoList.data.attributes.data.name }}</span> <span class="font-bold">{{ toDoList.data.attributes.data.name }}</span>
<span> <span>

View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="px-4 py-2"> <div class="mx-2 p-2">
<div v-if="modal" class="modal-container" @click="modal = ! modal"></div> <div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
<div v-if="modal" class="modal"> <div v-if="modal" class="modal">
<p class="m-2 text-center">Are you sure you want to delete this list ?</p> <p class="m-2 text-center">Are you sure you want to delete this list ?</p>
@@ -12,15 +12,18 @@
<router-link to="/to-do-lists/" class="btn">Back</router-link> <router-link to="/to-do-lists/" class="btn">Back</router-link>
<a href="#" class="btn-alert" @click="modal = ! modal">Delete</a> <a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
</div> </div>
<div v-if="!loading" class="bg-gray-400 rounded p-1"> <div v-if="!loading" class="bg-marine-medium rounded p-1">
<h1 class="mb-2 ml-2 todo" > <h1 class="mb-2 ml-2 h-10 todo text-white flex items-center" >
<span v-if="!listNameEdit" class="text-2xl font-bold flex items-center">{{ toDoList.data.attributes.data.name }} <span v-if="!listNameEdit" class="text-2xl font-bold flex items-center">{{ toDoList.data.attributes.data.name }}
<span @click="listNameEdit = !listNameEdit"> <span @click="listNameEdit = !listNameEdit">
<svg-vue icon="edit" class="edit-icon inline w-4 fill-current cursor-pointer ml-2" /> <svg-vue icon="edit" class="edit-icon inline w-4 fill-current cursor-pointer ml-2" />
</span> </span>
</span> </span>
<span v-else class="flex items-center"> <span v-else class="flex items-center">
<input type="text" class="p-1 rounded-sm mt-1 -ml-1" v-model="listName" @keydown.enter="updateList"> <input type="text"
class="px-1 py-0 text-2xl text-white font-bold bg-marine-medium rounded-sm -ml-1"
v-model="listName"
@keydown.enter="updateList">
<span @click="listNameEdit = !listNameEdit"> <span @click="listNameEdit = !listNameEdit">
<svg-vue icon="close" class="inline w-4 fill-current cursor-pointer ml-2" /> <svg-vue icon="close" class="inline w-4 fill-current cursor-pointer ml-2" />
</span> </span>

View File

@@ -25,6 +25,11 @@
<h1 class="relative z-10 text-white text-shadow text-3xl left-80 bottom-0">{{ authUser.data.attributes.name }}</h1> <h1 class="relative z-10 text-white text-shadow text-3xl left-80 bottom-0">{{ authUser.data.attributes.name }}</h1>
</div> </div>
</div> </div>
<div class="m-2">
<div class="box">
Texte
</div>
</div>
</div> </div>
</template> </template>

View File

@@ -7,6 +7,11 @@
:alt="user.attributes.name"/> :alt="user.attributes.name"/>
</div> </div>
<h1>{{ user.attributes.name }}</h1> <h1>{{ user.attributes.name }}</h1>
<div class="m-2">
<div class="box">
Texte
</div>
</div>
</div> </div>
</template> </template>

View File

@@ -10,7 +10,7 @@
</div> </div>
</div> </div>
<div v-if="authUser.data.attributes.is_admin"> <div v-if="authUser.data.attributes.is_admin">
<div class="box-toggle"> <div class="-mx-4 box-toggle">
<div class="box-toggle-header" @click="userAddToggle = !userAddToggle"> <div class="box-toggle-header" @click="userAddToggle = !userAddToggle">
<h2 class="mb-1">Ajouter un membre</h2> <h2 class="mb-1">Ajouter un membre</h2>
<svg-vue icon="arrow" v-bind:class="{ open: userAddToggle }" /> <svg-vue icon="arrow" v-bind:class="{ open: userAddToggle }" />
@@ -28,7 +28,7 @@
</form> </form>
</transition> </transition>
</div> </div>
<div class="mb-2 box-toggle"> <div class="-mx-4 mb-2 box-toggle">
<div class="box-toggle-header" @click="userListToggle = !userListToggle"> <div class="box-toggle-header" @click="userListToggle = !userListToggle">
<h2>Liste des utilisateurs</h2> <h2>Liste des utilisateurs</h2>
<svg-vue icon="arrow" v-bind:class="{ open: userListToggle }" /> <svg-vue icon="arrow" v-bind:class="{ open: userListToggle }" />

View File

@@ -1,3 +1,40 @@
h1,
h2,
h3,
h4 {
@apply font-bold;
}
h1 {
@apply text-4xl;
}
h2 {
@apply text-3xl;
}
h3 {
@apply text-2xl;
}
h4 {
@apply text-xl;
}
p {
@apply mb-2 mt-1;
text-indent: 2rem;
}
input,
textarea {
@apply border py-2 px-4 rounded;
}
textarea {
@apply ;
}
.text-shadow { .text-shadow {
text-shadow: 1px 1px 2px #000; text-shadow: 1px 1px 2px #000;
} }
@@ -33,3 +70,11 @@
.min-h-16 { .min-h-16 {
min-height: 4rem; min-height: 4rem;
} }
.indent {
text-indent: 2rem;
}
.no-indent {
text-indent: unset;
}

View File

@@ -1,7 +1,7 @@
// Button // Button
.btn { .btn {
@apply border border-transparent inline-block bg-gray-600 text-white font-semibold whitespace-no-wrap py-2 px-4 shadow-sm rounded cursor-pointer; @apply border border-transparent inline-block bg-gray-600 text-white font-semibold whitespace-no-wrap py-2 px-4 shadow-sm rounded cursor-pointer no-underline;
&:hover { &:hover {
@apply text-white bg-gray-800 transition-all duration-300; @apply text-white bg-gray-800 transition-all duration-300;

View File

@@ -5,10 +5,10 @@
} }
a { a {
@apply text-gray-700; @apply text-marine underline;
&:hover { &:hover {
@apply text-gray-900; @apply text-marine;
} }
} }
@@ -27,10 +27,9 @@ a {
} }
.box-toggle { .box-toggle {
@apply shadow;
&-header { &-header {
@apply flex justify-between items-center px-4 py-2 text-white bg-gray-800 font-bold cursor-pointer; @apply flex justify-between items-center px-4 py-2 text-white bg-marine font-bold cursor-pointer;
svg { svg {
@apply w-8 fill-current; @apply w-8 fill-current;
@@ -53,7 +52,7 @@ a {
} }
.card { .card {
@apply bg-gray-300 rounded text-black; @apply bg-white rounded m-2 p-4 h-full flex flex-col justify-between;
svg { svg {
@apply max-w-full max-h-48 max-w-48 m-auto fill-current; @apply max-w-full max-h-48 max-w-48 m-auto fill-current;
@@ -63,3 +62,11 @@ a {
@apply text-2xl text-center font-bold; @apply text-2xl text-center font-bold;
} }
} }
.box {
@apply bg-white rounded p-4 my-2;
}
.tag {
@apply inline-block rounded-full px-3 py-1 text-sm font-semibold;
}

View File

@@ -1,10 +1,10 @@
nav { nav {
@apply w-48 h-screen bg-gray-800 flex flex-col justify-between shadow; @apply w-48 h-screen bg-marine flex flex-col justify-between shadow;
transition: width 0.3s; transition: width 0.3s;
svg { svg {
@apply fill-current text-gray-300 w-12 p-2; @apply fill-current text-white w-12 p-2;
transition: color 0.3s; transition: color 0.3s;
&:hover { &:hover {
@@ -13,7 +13,7 @@ nav {
} }
.logo { .logo {
@apply block; @apply block text-white;
svg { svg {
@apply w-40 m-2; @apply w-40 m-2;
@@ -22,7 +22,7 @@ nav {
} }
.nav-item { .nav-item {
@apply flex items-center text-gray-100; @apply flex items-center text-white;
transition: background-color 0.3s; transition: background-color 0.3s;
span { span {

View File

@@ -1,34 +1,6 @@
.memo-style { .memo-style {
h1,
h2,
h3,
h4 {
@apply font-bold;
}
h1 {
@apply text-4xl;
}
h2 {
@apply text-3xl;
}
h3 {
@apply text-2xl;
}
h4 {
@apply text-xl;
}
p {
@apply mb-2 mt-1;
text-indent: 2rem;
}
pre, pre,
code { code {
@apply bg-gray-700 text-white p-1; @apply bg-gray-700 text-white p-1;

5
tailwind.config.js vendored
View File

@@ -8,6 +8,11 @@ module.exports = {
}, },
extend: { extend: {
colors: { colors: {
marine: {
light: '#364f80',
medium:'#2e446e',
default: '#223251',
},
cyan: '#9cdbff', cyan: '#9cdbff',
green: { green: {
light: '#333', light: '#333',