almost finish tailwind transform

This commit is contained in:
2020-04-26 19:23:18 +02:00
parent ca7177f676
commit 578c51eb1a
20 changed files with 188 additions and 105 deletions

View File

@@ -1,8 +1,8 @@
<template>
<div class="m-2">
<div class="flex-between">
<h1 class="mb-3">Administration</h1>
<a href="#" @click.prevent="logout" class="btn btn-icon">
<div class="p-4">
<div class="flex justify-between">
<h1 class="page-title">Administration</h1>
<a href="#" @click.prevent="logout" class="btn">
<svg-vue icon="logout" /> Déconnexion
</a>
</div>

View File

@@ -1,8 +1,8 @@
<template>
<div class="p-2">
<h1>Liste des jeux</h1>
<div class="container-cards-list mt-2">
<HangmanIndex link="/jeux/pendu" class="card" />
<div class="p-4">
<h1 class="page-title">Liste des jeux</h1>
<div class="flex flex-wrap mt-4">
<HangmanIndex link="/jeux/pendu" class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 card" />
</div>
</div>
</template>

View File

@@ -1,8 +1,8 @@
<template>
<div class="p-2 game-container">
<h1 class="text-center">Pendu</h1>
<p class="text-center">Trouve le mot du pendu - Saisi les lettres</p>
<div class="flex-center dic-select">
<h1 class="text-3xl text-center text-orange-900 font-bold">Pendu</h1>
<p class="text-center mb-4">Trouve le mot du pendu - Saisi les lettres</p>
<div class="flex justify-center dic-select">
<div v-for="(dic, key) in dictionary">
<a v-if="!selectedWord" class="btn-primary mr-1" @click="selectWord">{{ key }}</a>
</div>

View File

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

View File

@@ -12,15 +12,15 @@
:model="form.type"
classes="cover"
:alt="form.name"/>
<div class="flex-between ml-2 mt-1 absolute t-0">
<router-link :to="'/memos/' + this.$route.params.id" class="btn-secondary">< Back</router-link>
</div>
</div>
<div class="p-2">
<div class="p-4">
<div class="flex justify-between mb-4">
<router-link :to="'/memos/' + this.$route.params.id" class="btn">< Back</router-link>
</div>
<form @submit.prevent="submitForm">
<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" />
<div class="flex-end mt-1">
<div class="flex justify-end mt-2">
<button class="btn-primary">Save</button>
</div>

View File

@@ -5,17 +5,19 @@
<router-link :to="'/memos/create'" class="btn-primary">Add New Memo</router-link>
</div>
<Loader v-if="loading" />
<div v-else class="flex flex-wrap mb-4">
<div v-else class="flex flex-wrap -m-2">
<div v-if="memos.lenght === 0">
<p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p>
</div>
<router-link v-for="memo in memos" :key="memo.data.memo_id" :to="'/memos/' + memo.data.memo_id" class="lg:w-1/4 p-2 max-w-lg rounded overflow-hidden shadow-lg bg-white">
<img :src="memo.data.attributes.cover_image.data.attributes.path" alt="" class="w-full">
<div class="px-6 py-4">
<h1 class="text-gray-700 text-">{{ memo.data.name }}</h1>
</div>
<div class="px-6 py-4">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">{{ memo.data.last_updated }}</span>
<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">
<div class="m-2 max-w-lg rounded overflow-hidden shadow-lg bg-white">
<img :src="memo.data.attributes.cover_image.data.attributes.path" alt="" class="w-full">
<div class="px-6 py-4">
<h1 class="text-gray-700 text-">{{ memo.data.name }}</h1>
</div>
<div class="flex justify-end py-2">
<span class="inline-block bg-orange-400 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">{{ memo.data.last_updated }}</span>
</div>
</div>
</router-link>
</div>

View File

@@ -4,8 +4,8 @@
<div v-else>
<div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
<div v-if="modal" class="modal">
<p class="m-1 text-center">Are you sure you want to delete this record ?</p>
<div class="flex-center m-1 mt-2">
<p class="m-2 text-center">Are you sure you want to delete this record ?</p>
<div class="flex justify-center mx-2 my-4">
<button class="btn-secondary mr-2" @click="modal = ! modal">Cancel</button>
<button class="btn-alert" @click="destroy"> Delete</button>
</div>
@@ -16,22 +16,22 @@
class="cover"
:src="memo.attributes.cover_image.data.attributes.path"
/>
<div class="flex-col flex-between absolute memo-cover">
<div class="flex-between px-2 py-1">
<div class="absolute flex flex-col justify-between w-full top-0 bottom-0">
<div class="flex items-center justify-between p-4">
<router-link to="/memos/" class="btn-secondary">< Back</router-link>
<div class="flex-middle">
<router-link :to="'/memos/' + memo.memo_id + '/edit'" class="btn-secondary mr-1" >Edit</router-link>
<a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
</div>
</div>
<h1 class="memo-title flex-center">{{ memo.name }}</h1>
<h1 class="flex justify-center text-white text-3xl px-4 font-bold text-shadow">{{ memo.name }}</h1>
</div>
</div>
<!-- <TagBox :memo="memo" />-->
<div class="p-2">
<div class="p-4">
<p class="memo-style pt-1" v-html="memoMarkdown"></p>
<div class="memo-change">@last update : {{ memo.last_updated }}</div>
<p class="pt-2" v-html="memoMarkdown"></p>
<div class="bg-orange-400 rounded mt-2 px-2 py-1 flex justify-end">@last update {{ memo.last_updated }}</div>
</div>
</div>
</div>

View File

@@ -9,9 +9,9 @@
:author="authUser"
:id="authUser.data.user_id"
:model="authUser.data.type"
classes="cover"
classes=""
:alt="authUser.data.attributes.name"/>
<div class="absolute b-0">
<div class="absolute w-64 bottom-0">
<UploadableImage
:image-width=750
:image-height=750
@@ -20,9 +20,9 @@
:author="authUser"
:id="authUser.data.user_id"
:model="authUser.data.type"
classes="profile absolute"
classes="absolute w-64 h-64 -bottom-12 left-8 rounded-full"
:alt="authUser.data.attributes.name"/>
<h1 class="profile-title">{{ 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>

View File

@@ -1,10 +1,10 @@
<template>
<div v-if="authUser">
<div class="flex mb-4">
<div class="flex m-4">
<div class="avatar mr-2">
<Avatar :avatar="authUser.data.attributes.avatar" size="large" :alt="authUser.data.attributes.name" />
<Avatar :avatar="authUser.data.attributes.avatar" size="6xl" :alt="authUser.data.attributes.name" class="w-24 h-24" />
</div>
<div class="flex-col flex-center">
<div class="flex flex-col justify-center ml-2">
<div><strong>{{ authUser.data.attributes.name }}</strong></div>
<div><strong>{{ authUser.data.attributes.email }}</strong></div>
</div>
@@ -18,10 +18,10 @@
<transition name="fade">
<form @submit.prevent="addMember" v-if="userAddToggle" class="box-toggle-content" >
<AlertBox v-if="alertType" :type="alertType" :message="alertMessage" class="mb-1" />
<div class="flex mb-1">
<div class="flex mb-2">
<InputField name="name" label="Nom du nouveau membre" placeholder="Nom" required :errors="errors" @update:field="form.name = $event" class="mr-1" />
<InputField name="email" type="email" label="Adresse email du nouveau membre" placeholder="E-mail" required :errors="errors" @update:field="form.email = $event" class="mr-1" />
<div class="flex-middle mt-4">
<div class="flex items-end mb-2">
<button class="btn-primary">Ajouter</button>
</div>
</div>