diff --git a/package-lock.json b/package-lock.json index a0b0d016fa8a592eee3720a160f8ce89058d0278..1864053cfd1959c6302b03b10d49dce6af71d220 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "geocontrib-frontend", - "version": "2.3.2-rc2", + "version": "2.3.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/components/Projects/ProjectsMenu.vue b/src/components/Projects/ProjectsMenu.vue index 8eea8a9a7fb4354dd571bbea1ac0a9ce636c3b42..9baad025de922013a9c43dabde877b0ebfa66a3a 100644 --- a/src/components/Projects/ProjectsMenu.vue +++ b/src/components/Projects/ProjectsMenu.vue @@ -1,36 +1,53 @@ <template> - <div class="ui menu projects"> - <div class="item"> - <label> - Modération - </label> - <DropdownMenuItem - :options="moderationOptions" - v-on="$listeners" - /> + <div class="filters-container"> + <div class="ui styled accordion"> + <div class="title collapsible-filters"> + FILTRES + <i + :class="isFiltersVisible ? 'caret down' : 'caret right'" + class="ui icon" + /> + </div> </div> - <div class="item"> - <label> - Niveau d'autorisation requis - </label> - <DropdownMenuItem - :options="accessLevelOptions" - v-on="$listeners" - /> - </div> - <div class="item"> - <label> - Mon niveau d'autorisation - </label> - <DropdownMenuItem - :options="userAccessLevelOptions" - v-on="$listeners" - /> - </div> - <div class="right item"> - <search-projects - :search-function="SEARCH_PROJECTS" - /> + <div + :class="isFiltersVisible ? '' : 'hidden'" + class="ui menu filters" + > + <div class="item"> + <label> + Niveau d'autorisation requis + </label> + <DropdownMenuItem + :options="accessLevelOptions" + v-on="$listeners" + /> + </div> + <div class="item"> + <label> + Mon niveau d'autorisation + </label> + <DropdownMenuItem + :options="userAccessLevelOptions" + v-on="$listeners" + /> + </div> + <div class="item"> + <label> + Modération + </label> + <DropdownMenuItem + :options="moderationOptions" + v-on="$listeners" + /> + </div> + <div class="right item"> + <label> + Rechercher un projet + </label> + <search-projects + :search-function="SEARCH_PROJECTS" + /> + </div> </div> </div> </template> @@ -51,6 +68,7 @@ export default { data() { return { + isFiltersVisible: false, moderationOptions: [ { label: 'Tous', @@ -125,6 +143,20 @@ export default { } }, + mounted() { + const el = document.getElementsByClassName('collapsible-filters'); + + el[0].addEventListener('click', function() { + const content = document.getElementsByClassName('filters'); + content[0].classList.toggle('hidden'); + if (content[0].style.maxHeight){ + content[0].style.maxHeight = null; + } else { + content[0].style.maxHeight = content[0].scrollHeight + 5 + "px"; + } + }); + }, + methods: { ...mapActions('projects', [ 'SEARCH_PROJECTS' @@ -134,22 +166,58 @@ export default { </script> <style lang="less" scoped> -.projects { - .item { - display: flex; - flex-direction: column; - align-items: flex-start !important; +.transition-properties(...) { + -webkit-transition: @arguments; + -moz-transition: @arguments; + -o-transition: @arguments; + transition: @arguments; +} - padding: 0.4em 0.6em; +.filters-container { + width: 100%; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-end; + .accordion { + width: fit-content; + .collapsible-filters { + cursor: pointer; + font-size: 1.25em; + padding-right: 0; + } + } + .filters { + width: 100%; + height:auto; + min-height: 0; + max-height:75px; + margin: 0 0 1em 0; + .transition-properties(max-height 0.2s ease-out;); + .item { + display: flex; + flex-direction: column; + align-items: flex-start !important; + + padding: 0.4em 0.6em; - label { - margin-bottom: 0.2em; - font-size: 0.9em; - font-weight: 600; + label { + margin-bottom: 0.2em; + font-size: 0.9em; + font-weight: 600; + } + } + .item { + width: 25%; + } + .right.item::before { + width: 0; } } - .item { - width: 25%; + .filters.hidden { + max-height: 0; + overflow: hidden; + border: none; } } </style> diff --git a/src/components/Projects/SearchProjects.vue b/src/components/Projects/SearchProjects.vue index 3fa8e94b4188ed80475c7d7c97628a87784d5b49..f27e41221f2bffb680cb169fe9ce04c637c4549c 100644 --- a/src/components/Projects/SearchProjects.vue +++ b/src/components/Projects/SearchProjects.vue @@ -55,7 +55,7 @@ export default { justify-content: flex-end; input { width: 100%; - height: 72%; + height: 98%; text-align: left; color: #35495e; padding: 8px 40px 0 8px; diff --git a/src/views/Projects.vue b/src/views/Projects.vue index d8bcb4a5bba05dd3e3f099b3f2ed96398e789266..e4a0f87648dc8505b0edf075440a3c96ec27e91f 100644 --- a/src/views/Projects.vue +++ b/src/views/Projects.vue @@ -44,7 +44,10 @@ </div> <!-- LISTE DES PROJETS --> - <div v-if="projects" class="ui divided items"> + <div v-if="projects" class="ui divided items dimmable dimmed"> + <div :class="{ active: loading }" class="ui inverted dimmer"> + <div class="ui loader" /> + </div> <div v-for="project in projects" class="item" :key="project.slug"> <div class="ui tiny image"> <img @@ -117,6 +120,7 @@ <!-- PAGINATION --> <pagination + v-if="count" :nbPages="Math.ceil(count/10)" :on-page-change="SET_CURRENT_PAGE" @change-page="changePage" @@ -141,6 +145,7 @@ export default { data() { return { + loading: false, displayForbiddenProjects: false } }, @@ -253,6 +258,11 @@ export default { justify-content: space-between; } +#filters-divider { + padding-top: 0; + color: gray !important; +} + #forbidden-projects.checkbox { font-size: 1.2em; font-weight: 600;