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

refact front

Browse Source
This commit is contained in:
Romulus21
2020-07-25 17:22:58 +02:00
parent a4af2abb69
commit 8f66aee23d
19 changed files with 247 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/components/App.vue
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="mx-2 p-2 bg-gray-200"></router-view>
</main> </main>
</div> </div>
</div> </div>

2
resources/js/components/InputField.vue
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>

4
resources/js/components/TopBar.vue
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

6
resources/js/views/Automation/AutomaticLinksHome.vue
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>

6
resources/js/views/Automation/AutomaticMeteoHome.vue
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>

65
resources/js/views/CssTesteur.vue
View File

@@ -1,5 +1,67 @@
<template> <template>
<div class="m-2 p-2 bg-white"> <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 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>
<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 +126,7 @@
<input type="submit" class="mb-1"> <input type="submit" class="mb-1">
</form> </form>
</div> </div>
</div>
</template> </template>
<script> <script>

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

@@ -1,5 +1,6 @@
<template> <template>
<div class="p-4"> <div>
<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>

13
resources/js/views/Home.vue
View File

@@ -1,11 +1,10 @@
<template> <template>
<div class="p-4"> <div>
<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>

14
resources/js/views/Memo/MemoHome.vue
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>

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

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

@@ -1,5 +1,5 @@
<template> <template>
<div> <div class="-mx-2 -mt-2">
<div class="relative"> <div class="relative">
<UploadableImage <UploadableImage
:image-width=1500 :image-width=1500
@@ -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>

7
resources/js/views/User/ShowUser.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div> <div class="-mx-2 -mt-2">
<div class="relative"> <div class="relative">
<img <img
class="cover" class="cover"
@@ -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>

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

32
resources/sass/components/_base.scss vendored
View File

@@ -1,3 +1,35 @@
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 {
@apply border py-2 px-4 rounded;
}
.text-shadow { .text-shadow {
text-shadow: 1px 1px 2px #000; text-shadow: 1px 1px 2px #000;
} }

2
resources/sass/components/_btn.scss vendored
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;

13
resources/sass/components/_elements.scss vendored
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,7 @@ a {
@apply text-2xl text-center font-bold; @apply text-2xl text-center font-bold;
} }
} }
.box {
@apply bg-white rounded p-4 my-2;
}

8
resources/sass/components/nav.scss vendored
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 {

28
resources/sass/pages/memos.scss vendored
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',