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 optimize
npm install
npm install --no-progress
npm run prod
fi

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

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

1
resources/sass/app.scss vendored
View File

@@ -6,6 +6,7 @@
@import "setup/containers";
@import "setup/effects";
@import "components/transitions";
@import "components/btn";
@import "components/elements";
@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;
}
}
ul {
margin-top:0;
margin-bottom: 0;
padding-left: 0;
li {
list-style: none;
}
}