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

toggle box

Browse Source
This commit is contained in:
Romulus21
2020-04-12 08:37:16 +02:00
parent 85d20dfe4d
commit 0a535c165d
6 changed files with 77 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
deploy.sh
View File

@@ -38,6 +38,6 @@ then
php artisan migrate --force php artisan migrate --force
php artisan optimize php artisan optimize
npm install npm install --no-progress
npm run prod npm run prod
fi fi

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

@@ -10,23 +10,35 @@
</div> </div>
</div> </div>
<div v-if="authUser.data.attributes.is_admin"> <div v-if="authUser.data.attributes.is_admin">
<h2 class="mb-1">Ajouter un membre</h2> <div class="box-toggle">
<AlertBox v-if="alertType" :type="alertType" :message="alertMessage" class="mb-1" /> <div class="box-toggle-header" @click="userAddToggle = !userAddToggle">
<form @submit.prevent="addMember" class="mb-2"> <h2 class="mb-1">Ajouter un membre</h2>
<div class="flex"> <svg-vue icon="arrow" v-bind:class="{ open: userAddToggle }" />
<InputField name="name" label="Nom du nouveau membre" placeholder="Nom" required :errors="errors" @update:field="form.name = $event" class="mr-1" /> </div>
<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" /> <transition name="fade">
<div class="flex-middle mt-4"> <form @submit.prevent="addMember" v-if="userAddToggle" class="box-toggle-content" >
<button class="btn-primary">Ajouter</button> <AlertBox v-if="alertType" :type="alertType" :message="alertMessage" class="mb-1" />
</div> <div class="flex mb-1">
</div> <InputField name="name" label="Nom du nouveau membre" placeholder="Nom" required :errors="errors" @update:field="form.name = $event" class="mr-1" />
</form> <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="mb-2"> <div class="flex-middle mt-4">
<h2>Liste des utilisateurs</h2> <button class="btn-primary">Ajouter</button>
<ul> </div>
</div>
</form>
</transition>
</div>
<div class="mb-2 box-toggle">
<div class="box-toggle-header" @click="userListToggle = !userListToggle">
<h2>Liste des utilisateurs</h2>
<svg-vue icon="arrow" v-bind:class="{ open: userListToggle }" />
</div>
<transition name="fade">
<ul v-if="userListToggle" class="box-toggle-content">
<Loader v-if="loading" /> <Loader v-if="loading" />
<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>
</transition>
</div> </div>
<div>Css Testeur pour constituer un thème : <router-link to="/css-testeur">Css Testeur</router-link></div> <div>Css Testeur pour constituer un thème : <router-link to="/css-testeur">Css Testeur</router-link></div>
</div> </div>
@@ -56,6 +68,8 @@
errors: null, errors: null,
loading: true, loading: true,
users: null, users: null,
userListToggle: false,
userAddToggle: false,
} }
}, },
computed: { computed: {

1
resources/sass/app.scss vendored
View File

@@ -6,6 +6,7 @@
@import "setup/containers"; @import "setup/containers";
@import "setup/effects"; @import "setup/effects";
@import "components/transitions";
@import "components/btn"; @import "components/btn";
@import "components/elements"; @import "components/elements";
@import "components/loader"; @import "components/loader";

6
resources/sass/components/_transitions.scss vendored Normal file
View File

@@ -0,0 +1,6 @@
.fade-enter-active, .fade-leave-active {
transition: opacity .3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}

31
resources/sass/setup/_containers.scss vendored
View File

@@ -46,3 +46,34 @@
} }
} }
.box-toggle {
box-shadow: 1px 2px 5px rgba(0,0,0,0.2);
&-header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: $light;
padding: 0.5rem 1rem;
border-radius: 0.2rem;
svg {
width: 2rem;
}
}
svg {
transform: rotate(270deg);
transition: transform 0.3s;
&.open {
transform: rotate(90deg);
}
}
&-content {
padding: 0.5rem 1rem;
}
}

10
resources/sass/setup/_reset.scss vendored
View File

@@ -13,3 +13,13 @@ body {
margin: 0; margin: 0;
} }
} }
ul {
margin-top:0;
margin-bottom: 0;
padding-left: 0;
li {
list-style: none;
}
}