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

almost finish tailwind transform

Browse Source
This commit is contained in:
Romulus21
2020-04-26 19:23:18 +02:00
parent ca7177f676
commit 578c51eb1a
20 changed files with 188 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -1,7 +1,7 @@
<template> <template>
<div class="flex justify-center items-center"> <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"> <img v-if="avatar" src="avatar" alt="alt" class="avatar" v-bind:class="'avatar' + size">
<span v-else class="text-2xl font-bold" 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> </div>
</template> </template>

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

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

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

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

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

@@ -1,8 +1,8 @@
<template> <template>
<div class="relative mt-1"> <div class="relative mb-2">
<label v-if="label" :for="name" class="pb-1">{{ label }}</label> <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> <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-alert 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>

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

@@ -1,7 +1,7 @@
<template> <template>
<div class="top-bar flex justify-between bg-orange-300"> <div class="top-bar flex justify-between bg-orange-300">
<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.avatar" size="small" :alt="authUser.data.attributes.name" class="bg-orange-600 hover:bg-orange-800 w-10 h-10 rounded-full"/> <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> <span class="ml-2 hover:text-orange-900">{{ authUser.data.attributes.name }}</span>
</router-link> </router-link>
<form v-if="authUser && search" class="m-2"> <form v-if="authUser && search" class="m-2">

8
resources/js/views/DashBoard.vue
View File

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

8
resources/js/views/Games/GameIndex.vue
View File

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

6
resources/js/views/Games/HangMan/Hangman.vue
View File

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

10
resources/js/views/Memo/MemoCreate.vue
View File

@@ -1,14 +1,14 @@
<template> <template>
<div class="memo-edit p-2"> <div class="p-4">
<div class="flex-between mb-1"> <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 @click="$router.back()" class="btn-alert mr-1">Cancel</button> <button @click="$router.back()" class="btn-alert">Cancel</button>
</div> </div>
<form @submit.prevent="submitForm"> <form @submit.prevent="submitForm">
<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="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> <button class="btn-primary">Add New Memo</button>
</div> </div>
</form> </form>

10
resources/js/views/Memo/MemoEdit.vue
View File

@@ -12,15 +12,15 @@
:model="form.type" :model="form.type"
classes="cover" classes="cover"
:alt="form.name"/> :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>
<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"> <form @submit.prevent="submitForm">
<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" />
<div class="flex-end mt-1"> <div class="flex justify-end mt-2">
<button class="btn-primary">Save</button> <button class="btn-primary">Save</button>
</div> </div>

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

@@ -5,17 +5,19 @@
<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>
</div> </div>
<Loader v-if="loading" /> <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"> <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="lg:w-1/4 p-2 max-w-lg rounded overflow-hidden shadow-lg bg-white"> <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">
<img :src="memo.data.attributes.cover_image.data.attributes.path" alt="" class="w-full"> <div class="m-2 max-w-lg rounded overflow-hidden shadow-lg bg-white">
<div class="px-6 py-4"> <img :src="memo.data.attributes.cover_image.data.attributes.path" alt="" class="w-full">
<h1 class="text-gray-700 text-">{{ memo.data.name }}</h1> <div class="px-6 py-4">
</div> <h1 class="text-gray-700 text-">{{ memo.data.name }}</h1>
<div class="px-6 py-4"> </div>
<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> <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>
</router-link> </router-link>
</div> </div>

16
resources/js/views/Memo/MemoShow.vue
View File

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

8
resources/js/views/User/ProfileUser.vue
View File

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

10
resources/js/views/User/UserAdmin.vue
View File

@@ -1,10 +1,10 @@
<template> <template>
<div v-if="authUser"> <div v-if="authUser">
<div class="flex mb-4"> <div class="flex m-4">
<div class="avatar mr-2"> <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>
<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.name }}</strong></div>
<div><strong>{{ authUser.data.attributes.email }}</strong></div> <div><strong>{{ authUser.data.attributes.email }}</strong></div>
</div> </div>
@@ -18,10 +18,10 @@
<transition name="fade"> <transition name="fade">
<form @submit.prevent="addMember" v-if="userAddToggle" class="box-toggle-content" > <form @submit.prevent="addMember" v-if="userAddToggle" class="box-toggle-content" >
<AlertBox v-if="alertType" :type="alertType" :message="alertMessage" class="mb-1" /> <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="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" /> <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> <button class="btn-primary">Ajouter</button>
</div> </div>
</div> </div>

5
resources/sass/app.scss vendored
View File

@@ -10,11 +10,10 @@
//@import "setup/containers"; //@import "setup/containers";
//@import "setup/effects"; //@import "setup/effects";
// //
//@import "components/transitions"; @import "components/transitions";
@import "components/btn"; @import "components/btn";
//@import "components/elements"; @import "components/elements";
//@import "components/loader"; //@import "components/loader";
//@import "components/events";
//@import "components/main"; //@import "components/main";
@import "components/nav"; @import "components/nav";
//@import "components/topbar"; //@import "components/topbar";

24
resources/sass/components/_btn.scss vendored
View File

@@ -68,11 +68,15 @@
//} //}
.btn { .btn {
@apply border bg-orange-400 py-2 px-4 shadow-sm rounded-md; @apply border bg-orange-400 text-white py-2 px-4 shadow-sm rounded-md;
&:hover { &:hover {
@apply text-white bg-orange-600 transition-all duration-300; @apply text-white bg-orange-600 transition-all duration-300;
} }
svg {
@apply w-4 fill-current mr-2 inline;
}
} }
.btn-primary { .btn-primary {
@@ -83,3 +87,21 @@
@apply bg-orange-800; @apply bg-orange-800;
} }
} }
.btn-secondary {
@extend .btn;
@apply bg-orange-600;
&:hover {
@apply bg-orange-800;
}
}
.btn-alert {
@extend .btn;
@apply bg-red-600 text-white;
&:hover {
@apply bg-red-800;
}
}

104
resources/sass/components/_elements.scss vendored
View File

@@ -1,42 +1,94 @@
// Elements // Elements
label { .text-shadow {
display: block; text-shadow: 1px 1px 2px #000;
} }
textarea, .left-8 {
input { left: 2rem;
width: 100%;
border: 1px solid $light;
background-color: $greyLight;
font-size: 1.6rem;
font-family: $fontMain;
padding: 0.5rem 1rem;
border-radius: 0.2rem;
&:focus {
background-color: $white;
border-color: $dark;
}
} }
input[type="checkbox"] { .left-80 {
width: unset; left: 20rem;
}
& + label { .-bottom-12 {
display: inline; bottom: -3rem;
} }
.max-h-64 {
max-height: 16rem;
}
.page-title {
@apply text-3xl font-bold text-orange-900;
} }
a { a {
color: $mediumDark; @apply text-orange-700;
&:focus, &:hover {
&:visited { @apply text-orange-900;
color: $dark;
} }
} }
pre { $modal-duration: 1s;
.modal-container {
@apply top-0 bottom-0 left-0 right-0 fixed bg-black opacity-50 z-10;
}
.modal {
@apply bg-white absolute rounded z-20 overflow-hidden shadow max-w-full;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
animation-name: modalopen;
animation-duration: $modal-duration;
}
.box-toggle {
@apply shadow;
&-header {
@apply flex justify-between items-center px-4 py-2 rounded bg-orange-400 font-bold cursor-pointer;
svg {
@apply w-8 text-orange-600 fill-current;
}
}
svg {
transform: rotate(270deg);
transition: transform 0.3s;
&.open {
transform: rotate(90deg);
}
}
&-content {
padding: 0.5rem 1rem;
}
}
.card {
@apply bg-orange-300 rounded;
svg {
@apply max-w-full max-h-64 m-auto fill-current;
}
h2 {
@apply text-2xl text-center font-bold;
}
&:hover {
@apply bg-orange-500;
h2 {
@apply text-orange-700;
}
}
} }

10
resources/sass/components/_transitions.scss vendored
View File

@@ -4,3 +4,13 @@
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0; opacity: 0;
} }
@keyframes modalopen {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

26
resources/sass/components/modal.scss vendored
View File

@@ -1,27 +1,25 @@
$modal-duration: 1s; $modal-duration: 1s;
.modal-container { .modal-container {
background-color: rgba(0,0,0,0.6); @apply top-0 bottom-0 left-0 right-0 fixed bg-black opacity-50 z-10;
position: fixed;
z-index: 10;
top: 0;
bottom: 0;
left: 0;
right: 0;
} }
.modal { .modal {
background-color: #fff; @apply bg-white absolute rounded z-20 overflow-hidden shadow max-w-full;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
position: absolute;
z-index: 20;
overflow: hidden;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
max-width: 100%;
width: 400px; width: 400px;
animation-name: modalopen; animation-name: modalopen;
animation-duration: $modal-duration; animation-duration: $modal-duration;
} }
@keyframes modalopen {
from {
opacity: 0;
}
to {
opacity: 1;
}
}