fraport/fradrive
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(hide-columns): fadein transformation

Browse Source
This commit is contained in:
Sarah Vaupel 2019-11-29 14:24:58 +01:00 committed by Gregor Kleen
parent 9e449ddaed
commit 506f94e5d4
2 changed files with 10 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/utils/hide-columns/hide-columns.js
View File

@ -103,6 +103,7 @@ export class HideColumns {
hider.addEventListener('click', (event) => {
event.preventDefault();
this.switchColumnDisplay(th, hider);
this._tableHiderContainer.getElementsByClassName(TABLE_HIDER_CLASS).forEach(hider => this.hideHiderBehindHeader(hider));
});
th.addEventListener('mouseover', () => {

26
frontend/src/utils/hide-columns/hide-columns.scss
View File

@ -5,13 +5,15 @@
.table-hider {
background-color: #fff;
color: var(--color-link);
padding: 0 10px;
height: 0;
padding: 10px;
cursor: pointer;
box-shadow: 0 0 2px 0 rgba(0,0,0,0.6);
position: absolute;
overflow: hidden;
transition: .3s;
transition: transform .2s ease 1s;
transform: scaleY(0);
transform-origin: top;
&:hover {
background-color: var(--color-grey-light);
@ -22,25 +24,20 @@
}
&.table-hider--visible {
display: flex;
padding: 10px;
height: auto;
transform: scaleY(1);
}
}
}
[table-utils] {
margin-bottom: 20px;
line-height: 1.4;
max-width: 85vw;
margin-bottom: 20px;
min-height: 0;
.table-pill {
background-color: var(--color-dark);
color: #fff;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
padding: 10px;
border-radius: 20px 20px 20px 20px / 50% 50% 50% 50%;
margin-right: 20px;
cursor: pointer;
@ -51,11 +48,6 @@
margin-left: 5px;
}
}
.table-pill.table-pill--hide {
/* -webkit-animation: fadeout 0.5s linear forwards; */
/* animation: fadeout 0.5s linear forwards; */
/* animation-delay: 2s; */
}
}
.hide-columns--hidden-cell {