tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Displays search bar when reaching the top of items list.

This commit is contained in:
mateuswetah 2020-03-27 11:36:27 -03:00
parent 09f2101b40
commit 3f79f48d84
4 changed files with 49 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/admin/components/modals/exposers-modal.vue
View File

@ -624,7 +624,7 @@ export default {
position: relative; position: relative;
} }
.exposer-copy-popup { .exposer-copy-popup {
animation-name: appear-from-top; animation-name: appear-from-top-tooltip;
animation-duration: 0.3s; animation-duration: 0.3s;
position: absolute; position: absolute;
background: var(--tainacan-gray1); background: var(--tainacan-gray1);

2
src/views/admin/components/other/processes-popup.vue
View File

@ -291,7 +291,7 @@ export default {
top: 48px; top: 48px;
right: 40px; right: 40px;
border-radius: 5px; border-radius: 5px;
animation-name: appear-from-top; animation-name: appear-from-top-tooltip;
animation-duration: 0.3s; animation-duration: 0.3s;
font-size: 0.75em; font-size: 0.75em;

39
src/views/admin/pages/lists/items-page.vue
View File

@ -1200,11 +1200,26 @@
}, 500), }, 500),
handleMouseMoveOverList: _.debounce( function($event) { handleMouseMoveOverList: _.debounce( function($event) {
// Handles search control bar
if (this.$refs['search-control']) {
const bounding = this.$refs['search-control'].getBoundingClientRect();
const isHidden = !(bounding.top >= 0 && bounding.bottom <= ((window.innerHeight || document.documentElement.clientHeight) + 136));
if (isHidden && ($event.screenY <= 286)) {
if (!(this.$refs['search-control'].classList.contains('floating-search-control')))
this.$refs['search-control'].classList.add('floating-search-control');
} else {
if ((this.$refs['search-control'].classList.contains('floating-search-control')))
this.$refs['search-control'].classList.remove('floating-search-control');
}
}
// Handles pagination bar
if (this.$refs['items-pagination']) { if (this.$refs['items-pagination']) {
const bounding = this.$refs['items-pagination'].getBoundingClientRect(); const bounding = this.$refs['items-pagination'].getBoundingClientRect();
const isHidden = !(bounding.top >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight)); const isHidden = !(bounding.top >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight));
if (isHidden && ($event.screenY + 150 >= window.screen.height)) { if (isHidden && ($event.screenY + 100 >= window.screen.height)) {
if (!(this.$refs['items-pagination'].classList.contains('floating-pagination'))) { if (!(this.$refs['items-pagination'].classList.contains('floating-pagination'))) {
this.$refs['items-pagination'].classList.add('floating-pagination'); this.$refs['items-pagination'].classList.add('floating-pagination');
if (this.$refs['items-pagination'].children[0]) { if (this.$refs['items-pagination'].children[0]) {
@ -1405,6 +1420,26 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
transition: top 0.3s, opacity 0.3s, padding 0.3s, height 0.3s, position 0.3s;
&.floating-search-control {
position: sticky;
top: 0;
z-index: 99999999;
background: var(--tainacan-background-color);
animation: appear-from-top 0.2s;
opacity: 0.85;
border-bottom: 1px solid var(--tainacan-gray2);
padding: 20px var(--tainacan-one-column) 2px var(--tainacan-one-column);
&:hover {
opacity: 1;
}
.search-area .is-pulled-right {
display: none;
}
}
.search-control-item { .search-control-item {
display: inline-block; display: inline-block;
@ -1606,7 +1641,7 @@
min-height: 42px; min-height: 42px;
.pagination-area { .pagination-area {
opacity: 0.75; opacity: 0.85;
background: var(--tainacan-background-color); background: var(--tainacan-background-color);
position: fixed; position: fixed;
z-index: 99999; z-index: 99999;

10
src/views/admin/scss/_variables.scss
View File

@ -280,7 +280,7 @@ $modal-z: 9999999;
} }
// Animations for background processes popup and url copy popup // Animations for background processes popup and url copy popup
@keyframes appear-from-top { @keyframes appear-from-top-tooltip {
from { from {
top: 24px; top: 24px;
opacity: 0; opacity: 0;
@ -290,6 +290,14 @@ $modal-z: 9999999;
opacity: 1; opacity: 1;
} }
} }
@keyframes appear-from-top {
from {
top: -48px;
}
to {
top: 0px;
}
}
@keyframes appear-from-bottom { @keyframes appear-from-bottom {
from { from {
bottom: -48px; bottom: -48px;