Mercurial > gemma
changeset 1286:ac6edfb83cf1
improved contextBox animations
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 22 Nov 2018 11:48:30 +0100 |
parents | 09dfbead8d70 |
children | 54b7d8e2b224 |
files | client/src/assets/application.sass client/src/components/map/Search.vue client/src/components/map/contextbox/Contextbox.vue |
diffstat | 3 files changed, 22 insertions(+), 32 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/assets/application.sass Thu Nov 22 10:24:37 2018 +0100 +++ b/client/src/assets/application.sass Thu Nov 22 11:48:30 2018 +0100 @@ -74,12 +74,3 @@ max-width: 999px margin-left: 0.5rem margin-right: 0.5rem - -.fade-enter-active, .fade-leave-active - transition: opacity 0.1s - -.fade-leave, .fade-enter-to - opacity: 1 - -.fade-enter, .fade-leave-to - opacity: 0
--- a/client/src/components/map/Search.vue Thu Nov 22 10:24:37 2018 +0100 +++ b/client/src/components/map/Search.vue Thu Nov 22 11:48:30 2018 +0100 @@ -1,23 +1,23 @@ <template> <div :class="searchbarContainerStyle"> - <div class="input-group-prepend"> + <div class="input-group-prepend m-0"> <span @click="toggleSearchbar" :class="searchButtonStyle" for="search"> <i class="fa fa-search d-print-none"></i> </span> </div> - <div class="searchgroup flex-fill"> + <div :class="['searchgroup', {'searchgroup-collapsed': !showSearchbar}]"> <input @keyup.enter="takeFirstSearchresult" - v-if="showSearchbar" id="search" v-model="searchQuery" type="text" :class="searchInputStyle" > - <div v-if="showSearchbar && searchResults !== null && !showContextBox" class="searchresults border-top ui-element bg-white rounded-bottom d-print-none"> - <div v-for="entry of searchResults" :key="entry.name" class="border-top py-2"> - <a href="#" @click.prevent="moveToSearchResult(entry)">{{ entry.name }}</a> - </div> + </div> + <div v-if="showSearchbar && searchResults !== null && !showContextBox" + class="searchresults border-top ui-element bg-white rounded-bottom d-print-none position-absolute"> + <div v-for="entry of searchResults" :key="entry.name" class="border-top py-2"> + <a href="#" @click.prevent="moveToSearchResult(entry)">{{ entry.name }}</a> </div> </div> </div> @@ -25,18 +25,19 @@ <style lang="sass" scoped> .searchcontainer - height: $icon-height opacity: $slight-transparent - - .searchbar-expanded - min-width: 600px .searchbar border-top-left-radius: 0 !important border-bottom-left-radius: 0 !important - .searchbar-collapsed - width: $icon-width !important - transition: $transition-fast + .searchgroup + margin-left: -3px + transition: width 0.3s + width: 571px + overflow: hidden + + .searchgroup-collapsed + width: 0 .searchbar height: $icon-height !important @@ -59,7 +60,9 @@ color: #666 .searchresults - margin-left: -31px + top: $icon-height + left: 0 + right: 0 max-height: 20rem overflow: auto > div:first-child @@ -125,10 +128,8 @@ return [ "input-group searchcontainer shadow-xs", { - "searchbar-collapsed": !this.showSearchbar, - "searchbar-expanded": this.showSearchbar, "d-flex": this.contextBoxContent !== "imports", - "d-none": this.contextBoxContent === "imports" + "d-none": this.contextBoxContent === "imports" && this.showContextBox } ]; },
--- a/client/src/components/map/contextbox/Contextbox.vue Thu Nov 22 10:24:37 2018 +0100 +++ b/client/src/components/map/contextbox/Contextbox.vue Thu Nov 22 11:48:30 2018 +0100 @@ -3,11 +3,9 @@ <div @click="close" class="ui-element close-contextbox text-muted"> <i class="fa fa-close"></i> </div> - <transition name="fade" mode="out-in"> - <Bottlenecks v-if="contextBoxContent === 'bottlenecks'"></Bottlenecks> - <Importsounding v-if="contextBoxContent === 'imports'"></Importsounding> - <Staging v-if="contextBoxContent === 'staging'"></Staging> - </transition> + <Bottlenecks v-if="contextBoxContent === 'bottlenecks'"></Bottlenecks> + <Importsounding v-if="contextBoxContent === 'imports'"></Importsounding> + <Staging v-if="contextBoxContent === 'staging'"></Staging> </div> </template>