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

add Tailwing & CssPurge

Browse Source
This commit is contained in:
Romulus21
2020-04-26 11:50:06 +02:00
parent fb9a1432c1
commit ca7177f676
11 changed files with 317 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -1,7 +1,7 @@
<template>
<div>
<div class="flex justify-center items-center">
<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="'avatar-' + size">{{ alt[0] }}</span>
</div>
</template>

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

@@ -1,18 +1,20 @@
<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="/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 v-bind:class="{ navhidden: !toggleNav }">Memos</span>
</router-link>
<router-link to="/jeux" class="nav-item p-2">
<svg-vue icon="games" />
<span v-bind:class="{ navhidden: !toggleNav }">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>

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="bg-orange-600 hover:bg-orange-800 w-10 h-10 rounded-full"/>
<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

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

@@ -1,20 +1,22 @@
<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 mb-4">
<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="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>
</div>
<div class="memo-date p-1">{{ memo.data.last_updated }}</div>
</router-link>
</div>
</div>