Romain/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix merge with tailwindcss

Browse Source
This commit is contained in:
Romulus21
2020-04-27 22:39:32 +02:00
parent 28dc709748 8ce0f34cd6
commit af9f42d29e
27 changed files with 512 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
resources/js/components/App.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="flex">
<div class="flex bg-orange-200 h-screen overflow-y-hidden">
<Nav />
<div v-if="authUser" class="w-100">
<div v-if="authUser" class="w-full overflow-y-auto">
<TopBar />
<main>
<router-view :key="$route.fullPath" class="main"></router-view>
<router-view :key="$route.fullPath"></router-view>
</main>
</div>
</div>

4
resources/js/components/Avatar.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div class="flex justify-center items-center rounded-full bg-orange-600 hover:bg-orange-800">
<img v-if="avatar" src="avatar" alt="alt" class="avatar" v-bind:class="'avatar' + size">
<span v-else class="avatar" v-bind:class="'avatar-' + size">{{ alt[0] }}</span>
<span v-else class="text-2xl font-bold" v-bind:class="'text-' + size">{{ alt[0] }}</span>
</div>
</template>

8
resources/js/components/InputField.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="relative mt-1" :classes="classes">
<label :for="name" class="pb-1">{{ label }}</label>
<input :id="name" :type="type" :placeholder="placeholder" v-model="value" @input="updateField()" :class="errorClassObject()">
<p class="text-alert m-0" v-text="errorMessage()">Error Here</p>
<div class="relative mb-2">
<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="errorClassObject()" class="w-full rounded p-2">
<p class="text-red-600 m-0" v-text="errorMessage()">Error Here</p>
</div>
</template>

2
resources/js/components/Loader.vue
View File

@@ -1,5 +1,5 @@
<template>
<div v-if="loading" class="flex-center">
<div v-if="loading" class="flex items-center">
<svg-vue icon="loader" class="loader"/>
</div>
</template>

38
resources/js/components/Nav.vue
View File

@@ -1,22 +1,24 @@
<template>
<nav v-bind:class="{ small: !toggleNav }">
<router-link to="/" class="site-logo-main" v-bind:class="{ small: !toggleNav }">
<svg-vue icon="logo" />
</router-link>
<hr>
<router-link to="/memos" class="nav-item">
<svg-vue icon="memos" />
<span v-bind:class="{ navhidden: !toggleNav }">Memos</span>
</router-link>
<router-link to="/to-do-lists" class="nav-item">
<svg-vue icon="list" />
<span v-bind:class="{ navhidden: !toggleNav }">To Do Lists</span>
</router-link>
<router-link to="/jeux" class="nav-item">
<svg-vue icon="games" />
<span v-bind:class="{ navhidden: !toggleNav }">Jeux</span>
</router-link>
<div @click="toggleNavBar" class="nav-toggle mt-5">
<nav v-bind:class="{ small: !toggleNav }" class="h-screen bg-orange-400 flex flex-col justify-between">
<div class="">
<router-link to="/" class="logo" v-bind:class="{ small: !toggleNav }">
<svg-vue icon="logo" />
</router-link>
<hr>
<router-link to="/memos" class="nav-item p-2">
<svg-vue icon="memos" />
<span>Memos</span>
</router-link>
<router-link to="/to-do-lists" class="nav-item">
<svg-vue icon="list" />
<span>To Do Lists</span>
</router-link>
<router-link to="/jeux" class="nav-item p-2">
<svg-vue icon="games" />
<span>Jeux</span>
</router-link>
</div>
<div @click="toggleNavBar" class="nav-toggle flex ml-2">
<svg-vue icon="arrow" v-bind:class="{ small: !toggleNav }" />
</div>
</nav>

6
resources/js/components/TextAreaField.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="relative mt-1">
<div class="relative mb-2">
<label v-if="label" :for="name" class="pb-1">{{ label }}</label>
<textarea :id="name" type="text" v-model="value" :placeholder="placeholder" @input="updateField()" :class="errorClassObject()" class="p-1">{{ data }}</textarea>
<p class="text-alert m-0" v-text="errorMessage()">Error Here</p>
<textarea :id="name" type="text" v-model="value" :placeholder="placeholder" @input="updateField()" :class="errorClassObject()" class="w-full h-64 rounded p-2">{{ data }}</textarea>
<p class="text-red-600 m-0" v-text="errorMessage()">Error Here</p>
</div>
</template>

14
resources/js/components/TopBar.vue
View File

@@ -1,17 +1,17 @@
<template>
<div class="flex-between flex-middle py-1 px-2 topbar">
<router-link v-if="authUser" :to="'/profile'" class="flex-middle avatar-box">
<Avatar :avatar="authUser.data.attributes.avatar" size="small" :alt="authUser.data.attributes.name" class="mr-1"/>
{{ authUser.data.attributes.name }}
<div class="top-bar flex justify-between bg-orange-300">
<router-link v-if="authUser" :to="'/profile'" class="flex items-center m-2">
<Avatar :avatar="authUser.data.attributes.avatar" size="small" :alt="authUser.data.attributes.name" class="w-10 h-10"/>
<span class="ml-2 hover:text-orange-900">{{ authUser.data.attributes.name }}</span>
</router-link>
<form v-if="authUser && search" class="search-box">
<form v-if="authUser && search" class="m-2">
<input type="search" name="search" placeholder="Search">
<button type="submit" value="S">
<svg-vue icon="search" />
</button>
</form>
<router-link to="/dashboard" v-if="authUser" class="mr-1">
<svg-vue icon="params" />
<router-link to="/dashboard" v-if="authUser" class="text-orange-600 hover:text-orange-800">
<svg-vue icon="params" class="w-10 m-2 fill-current" />
</router-link>
<router-link v-else to="/login">
Se connecter

8
resources/js/views/DashBoard.vue
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>

8
resources/js/views/Games/GameIndex.vue
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>

6
resources/js/views/Games/HangMan/Hangman.vue
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>

10
resources/js/views/Memo/MemoCreate.vue
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>

10
resources/js/views/Memo/MemoEdit.vue
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>

20
resources/js/views/Memo/MemoIndex.vue
View File

@@ -1,20 +1,24 @@
<template>
<div class="p-2">
<div class="flex-between flex-center mb-1">
<div class="p-4">
<div class="flex justify-between flex-center mb-4">
<a href="#" class="btn" @click="$router.back()">< Back</a>
<router-link :to="'/memos/create'" class="btn-primary">Add New Memo</router-link>
</div>
<Loader v-if="loading" />
<div v-else class="container-cards-list">
<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="card">
<div>
<img :src="memo.data.attributes.cover_image.data.attributes.path" alt="" class="cover">
<h1 class="p-1">{{ memo.data.name }}</h1>
<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>
<div class="memo-date p-1">{{ memo.data.last_updated }}</div>
</router-link>
</div>
</div>

17
resources/js/views/Memo/MemoShow.vue
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,23 +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>

8
resources/js/views/User/ProfileUser.vue
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>

10
resources/js/views/User/UserAdmin.vue
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>