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

add small menu

Browse Source
This commit is contained in:
Romulus21
2020-04-07 23:43:50 +02:00
parent edf96000b0
commit eb28a0a577
16 changed files with 132 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
<template> <template>
<div class="flex"> <div class="flex">
<Nav /> <Nav />
<div> <div v-if="authUser" class="w-100">
<TopBar /> <TopBar />
<main> <main>
<router-view :key="$route.fullPath" class="main"></router-view> <router-view :key="$route.fullPath" class="main"></router-view>
@@ -13,6 +13,7 @@
<script> <script>
import Nav from "./Nav"; import Nav from "./Nav";
import TopBar from "./TopBar"; import TopBar from "./TopBar";
import { mapGetters } from 'vuex'
export default { export default {
name: "App", name: "App",
@@ -25,6 +26,11 @@
created() { created() {
this.$store.dispatch('setPageTitle', this.$route.meta.title) this.$store.dispatch('setPageTitle', this.$route.meta.title)
}, },
computed: {
...mapGetters({
authUser: 'authUser',
})
},
watch: { watch: {
$route(to, from) { $route(to, from) {
this.$store.dispatch('setPageTitle', to.meta.title) this.$store.dispatch('setPageTitle', to.meta.title)

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

@@ -1,22 +1,30 @@
<template> <template>
<nav> <nav v-bind:class="{ small: !toggleNav }">
<router-link to="/" class="site-logo-main"> <router-link to="/" class="site-logo-main" v-bind:class="{ small: !toggleNav }">
<svg-vue icon="logo" /> <svg-vue icon="logo" />
</router-link> </router-link>
<hr> <hr>
<router-link to="/memos" class="nav-item"> <router-link to="/memos" class="nav-item">
<svg-vue icon="memos" /> <svg-vue icon="memos" />
Memos <span v-bind:class="{ navhidden: !toggleNav }">Memos</span>
</router-link> </router-link>
<router-link to="/jeux" class="nav-item"> <router-link to="/jeux" class="nav-item">
<svg-vue icon="games" /> <svg-vue icon="games" />
Jeux <span v-bind:class="{ navhidden: !toggleNav }">Jeux</span>
</router-link> </router-link>
<div @click="toggleNav = !toggleNav" class="nav-toggle mt-5">
<svg-vue icon="arrow" v-bind:class="{ small: !toggleNav }" />
</div>
</nav> </nav>
</template> </template>
<script> <script>
export default { export default {
name: "Nav", name: "Nav",
data: function () {
return {
toggleNav: true,
}
}
} }
</script> </script>

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

@@ -4,7 +4,7 @@
<Avatar :avatar="authUser.data.attributes.avatar" size="small" :alt="authUser.data.attributes.name" class="mr-1"/> <Avatar :avatar="authUser.data.attributes.avatar" size="small" :alt="authUser.data.attributes.name" class="mr-1"/>
{{ authUser.data.attributes.name }} {{ authUser.data.attributes.name }}
</router-link> </router-link>
<form v-if="authUser" class="search-box"> <form v-if="authUser && search" class="search-box">
<input type="search" name="search" placeholder="Search"> <input type="search" name="search" placeholder="Search">
<button type="submit" value="S"> <button type="submit" value="S">
<svg-vue icon="search" /> <svg-vue icon="search" />
@@ -33,6 +33,11 @@
components: { components: {
Avatar Avatar
}, },
data: function () {
return {
search: false,
}
},
computed: { computed: {
...mapGetters({ ...mapGetters({
authUser: 'authUser', authUser: 'authUser',

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

@@ -4,13 +4,13 @@
<a href="#" @click="$router.back()" class="link"> <a href="#" @click="$router.back()" class="link">
< Back < Back
</a> </a>
<button @click="$router.back()" class="btn-alert mr-1">Cancel</button>
</div> </div>
<form @submit.prevent="submitForm"> <form @submit.prevent="submitForm">
<InputField name="name" label="Title" placeholder="Your Title" @update:field="form.name = $event" :errors="errors" /> <InputField name="name" label="Title" placeholder="Your Title" @update:field="form.name = $event" :errors="errors" />
<TextAreaField class="memo-text-area" name="memo" placeholder="Your Memo" @update:field="form.memo = $event" :errors="errors" /> <TextAreaField class="memo-text-area" name="memo" placeholder="Your Memo" @update:field="form.memo = $event" :errors="errors" />
<div class="flex-end"> <div class="flex-end">
<button @click="$router.back()" class="btn-alert mr-1">Cancel</button>
<button class="btn-primary">Add New Memo</button> <button class="btn-primary">Add New Memo</button>
</div> </div>
</form> </form>

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

@@ -4,13 +4,13 @@
<a href="#" @click="$router.back()" class="link"> <a href="#" @click="$router.back()" class="link">
< Back < Back
</a> </a>
<button class="btn-alert mr-1">Cancel</button>
</div> </div>
<form @submit.prevent="submitForm"> <form @submit.prevent="submitForm">
<InputField name="name" :data="form.name" label="Title" placeholder="Your Title" @update:field="form.name = $event" :errors="errors" /> <InputField name="name" :data="form.name" label="Title" placeholder="Your Title" @update:field="form.name = $event" :errors="errors" />
<TextAreaField class="memo-text-area" name="memo" :data="form.memo" placeholder="Your Memo" @update:field="form.memo = $event" :errors="errors" /> <TextAreaField class="memo-text-area" name="memo" :data="form.memo" placeholder="Your Memo" @update:field="form.memo = $event" :errors="errors" />
<div class="flex-end"> <div class="flex-end">
<button class="btn-alert mr-1">Cancel</button>
<button class="btn-primary">Save</button> <button class="btn-primary">Save</button>
</div> </div>

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

@@ -7,16 +7,15 @@
<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>
<div v-if="loading">> Loading...</div> <div v-if="loading">> Loading...</div>
<div v-else> <div v-else class="container-cards-list">
<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>
<div v-for="memo in memos" class="memo-list"> <div v-for="memo in memos" class="card">
<router-link :to="'/memos/' + memo.data.memo_id" class="relative flex-center flex-between p-1"> <router-link :to="'/memos/' + memo.data.memo_id">
<h1>{{ memo.data.name }}</h1> <h1>{{ memo.data.name }}</h1>
<div class="memo-date">{{ memo.data.last_updated }}</div> <div class="memo-date">{{ memo.data.last_updated }}</div>
</router-link> </router-link>
</div> </div>
</div> </div>
</div> </div>

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

@@ -1,12 +1,8 @@
<template> <template>
<div> <div v-if="authUser">
<div class="flex mb-4"> <div class="flex mb-4">
<div class="avatar mr-2"> <div class="avatar mr-2">
<Avatar <Avatar :avatar="authUser.data.attributes.avatar" size="large" :alt="authUser.data.attributes.name" />
:avatar="authUser.data.attributes.avatar"
size="large"
:alt="authUser.data.attributes.name"
/>
</div> </div>
<div class="flex-col flex-center"> <div class="flex-col flex-center">
<div><strong>{{ authUser.data.attributes.name }}</strong></div> <div><strong>{{ authUser.data.attributes.name }}</strong></div>
@@ -14,26 +10,14 @@
</div> </div>
</div> </div>
<div v-if="authUser.data.attributes.is_admin"> <div v-if="authUser.data.attributes.is_admin">
<h2 class="mb-1"> <h2 class="mb-1">Ajouter un membre</h2>
Ajouter un membre <AlertBox v-if="alertType" :type="alertType" :message="alertMessage" class="mb-1" />
</h2>
<AlertBox
v-if="alertType"
:type="alertType"
:message="alertMessage"
class="mb-1"
/>
<form @submit.prevent="addMember" class="mb-2"> <form @submit.prevent="addMember" class="mb-2">
<InputField <div class="flex">
name="name" <InputField name="name" type="text" label="Nom du nouveau membre" placeholder="Nom" :errors="errors" @update:field="form.name = $event" class="mr-1" />
type="text" <InputField name="email" type="email" label="Adresse email du nouveau membre" placeholder="E-mail" :errors="errors" @update:field="form.email = $event" class="mr-1" />
label="Nom du nouveau membre" <button class="btn-primary inline">Ajouter</button>
placeholder="Nom" </div>
:errors="errors"
@update:field="form.name = $event"
/>
<InputField name="email" type="email" label="Adresse email du nouveau membre" placeholder="E-mail" :errors="errors" @update:field="form.email = $event" />
<button class="btn-primary">Ajouter</button>
</form> </form>
<div class="mb-2"> <div class="mb-2">
<h2>Liste des utilisateurs</h2> <h2>Liste des utilisateurs</h2>
@@ -42,9 +26,7 @@
<li v-else v-for="user in users"><a :href="user.links.self">{{ user.data.attributes.name }}</a> - {{ user.data.attributes.email }} - {{ user.data.attributes.is_admin }}</li> <li v-else v-for="user in users"><a :href="user.links.self">{{ user.data.attributes.name }}</a> - {{ user.data.attributes.email }} - {{ user.data.attributes.is_admin }}</li>
</ul> </ul>
</div> </div>
<div> <div>Css Testeur pour constituer un thème : <router-link to="/css-testeur">Css Testeur</router-link></div>
Css Testeur pour constituer un thème : <router-link to="/css-testeur">Css Testeur</router-link>
</div>
</div> </div>
</div> </div>
</template> </template>

3
resources/sass/app.scss vendored
View File

@@ -3,11 +3,12 @@
@import "setup/colors"; @import "setup/colors";
@import "setup/fonts"; @import "setup/fonts";
@import "setup/positions"; @import "setup/positions";
@import "setup/containers";
@import "setup/effects";
@import "components/btn"; @import "components/btn";
@import "components/elements"; @import "components/elements";
@import "components/main"; @import "components/main";
@import "components/boxes";
@import "components/nav"; @import "components/nav";
@import "components/topbar"; @import "components/topbar";
@import "components/avatar"; @import "components/avatar";

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

@@ -12,7 +12,7 @@ input {
font-size: 1.6rem; font-size: 1.6rem;
font-family: $fontMain; font-family: $fontMain;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: 0.5rem; border-radius: 0.2rem;
&:focus { &:focus {
background-color: $white; background-color: $white;

6
resources/sass/components/boxes.scss vendored
View File

@@ -1,6 +0,0 @@
.card {
display: inline-block;
padding: 1rem;
box-shadow: 1px 1px 2px $grey;
border-radius: 2px;
}

4
resources/sass/components/main.scss vendored
View File

@@ -8,7 +8,3 @@ main {
width: 100%; width: 100%;
height: calc(100vh - 4.5rem); height: calc(100vh - 4.5rem);
} }
.main-top {
}

38
resources/sass/components/nav.scss vendored
View File

@@ -4,7 +4,14 @@ nav {
height: 100vh; height: 100vh;
width: 15rem; width: 15rem;
flex-shrink: 0; flex-shrink: 0;
display: flex;
flex-direction: column;
box-shadow: inset -3px -2px 3px rgba(0,0,0,0.2); box-shadow: inset -3px -2px 3px rgba(0,0,0,0.2);
transition: width $transition-delay;
&.small {
width: 5.5rem;
}
hr { hr {
width: 90%; width: 90%;
@@ -20,6 +27,10 @@ nav {
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
span {
overflow: hidden;
}
svg { svg {
margin: 0 1rem; margin: 0 1rem;
width: 3rem; width: 3rem;
@@ -55,15 +66,38 @@ nav {
} }
} }
.navhidden {
width: 0;
}
.site-logo-main { .site-logo-main {
@extend .site-logo; @extend .site-logo;
display: block; display: block;
padding: 1rem 2rem; margin: 1rem;
width: 100%; width: 13rem;
transition: width $transition-delay;
svg { svg {
width: 100%; width: 100%;
} }
&.small {
//padding-bottom: 10rem;
width: 3.5rem;
}
}
.nav-toggle {
@extend .site-logo;
align-self: center;
svg {
transition: transform $transition-delay;
}
svg.small {
transform: rotate(-180deg);
}
} }

2
resources/sass/components/topbar.scss vendored
View File

@@ -1,6 +1,6 @@
.topbar { .topbar {
background-color: $medium; background-color: $medium;
width: calc(100vw - 15rem); width: initial;
box-shadow: 3px 2px 3px rgba(0,0,0,0.2); box-shadow: 3px 2px 3px rgba(0,0,0,0.2);
svg { svg {

40
resources/sass/setup/_containers.scss vendored Normal file
View File

@@ -0,0 +1,40 @@
.container-cards-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.card {
background-color: $light;
display: flex;
padding: 1rem;
box-shadow: 1px 1px 2px $grey;
border-radius: 2px;
a {
display: flex;
flex-direction: column;
justify-content: space-between;
text-decoration: none;
}
}
.bg-b {
background-color: royalblue;
}
@media (max-width: 1200px) {
.container-cards-list {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 800px) {
.container-cards-list {
grid-template-columns: repeat(2, 1fr);
}
}

1
resources/sass/setup/_effects.scss vendored Normal file
View File

@@ -0,0 +1 @@
$transition-delay: 0.2s;

11
resources/svg/arrow.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="100mm"
height="100mm"
viewBox="0 0 100 100">
<g transform="translate(0,-197)">
<path
d="M 188.97656,0 C 84.607647,-9.9411436e-5 -9.9411436e-5,84.607647 0,188.97656 -9.9411436e-5,293.34547 84.607647,377.95322 188.97656,377.95312 293.34547,377.95322 377.95322,293.34547 377.95312,188.97656 377.95322,84.607647 293.34547,-9.9411436e-5 188.97656,0 Z m 92.66933,188.99525 c 0,3.81088 -136.06751,141.15219 -139.19531,139.34635 -3.1278,-1.80584 -3.91755,-276.707749 -0.13033,-278.69755 3.78721,-1.989802 139.32564,135.54032 139.32564,139.3512 z"
transform="matrix(0.26458333,0,0,0.26458333,0,197)" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 687 B