diff --git a/app/assets/javascripts/fullscreenTable.js b/app/assets/javascripts/fullscreenTable.js index 27ff52636..f4ef998b6 100644 --- a/app/assets/javascripts/fullscreenTable.js +++ b/app/assets/javascripts/fullscreenTable.js @@ -52,7 +52,8 @@ 'height': this.nativeHeight, 'top': this.topOffset }) - ); + ) + .css('position', 'absolute'); this.$scrollableTable = this.$component.find('.fullscreen-scrollable-table'); this.$fixedTable = this.$component.find('.fullscreen-fixed-table'); @@ -100,6 +101,11 @@ this.$scrollableTable.scrollLeft() < (this.$table.width() - this.$scrollableTable.width()) ); + setTimeout( + () => this.$component.find('.fullscreen-right-shadow').addClass('with-transition'), + 3000 + ); + }; }; diff --git a/app/assets/stylesheets/components/fullscreen-table.scss b/app/assets/stylesheets/components/fullscreen-table.scss index b552fcbd8..d5c8f78fc 100644 --- a/app/assets/stylesheets/components/fullscreen-table.scss +++ b/app/assets/stylesheets/components/fullscreen-table.scss @@ -6,8 +6,7 @@ z-index: 10; overflow-y: hidden; box-sizing: border-box; - position: absolute; - margin: 5px 0 $gutter 0; + margin: 0 0 $gutter 0; padding: 0 0 0 0; overflow: hidden; border-bottom: 1px solid $border-colour; @@ -42,8 +41,13 @@ z-index: 200; &.visible { - transition: box-shadow 0.3s ease-in-out; + + &.with-transition { + transition: box-shadow 0.6s ease-out; + } + box-shadow: inset -1px 0 0 0 $border-colour, inset -3px 0 0 0 rgba($border-colour, 0.2); + } } diff --git a/app/assets/stylesheets/components/radio-select.scss b/app/assets/stylesheets/components/radio-select.scss index 19f835310..59586121a 100644 --- a/app/assets/stylesheets/components/radio-select.scss +++ b/app/assets/stylesheets/components/radio-select.scss @@ -1,5 +1,7 @@ .radio-select { + min-height: 39px; + &-column { display: inline-block;