diff --git a/frontend/assets/scss/abstract/placeholders/_placeholders.scss b/frontend/assets/scss/abstract/placeholders/_placeholders.scss index 8d92b38593..181864afb9 100644 --- a/frontend/assets/scss/abstract/placeholders/_placeholders.scss +++ b/frontend/assets/scss/abstract/placeholders/_placeholders.scss @@ -82,7 +82,7 @@ padding: 4em; } %collapsable-if-metrics { - padding-right: calc($sidebarMenuWidth + 15px); + padding-right: calc($sidebarMenuWidth + 56px); transition: padding 0.25s linear 0.2s; .--metrics & { @include media(">desktop") { diff --git a/frontend/assets/scss/abstract/variables/_variables.scss b/frontend/assets/scss/abstract/variables/_variables.scss index 8e09e253f9..edb7b93895 100644 --- a/frontend/assets/scss/abstract/variables/_variables.scss +++ b/frontend/assets/scss/abstract/variables/_variables.scss @@ -107,6 +107,7 @@ $maxwidth: 980px; // Utilities //----------- $border-radius: 5px; +$border-radius-m: 10px; $radius: 0.5em; // Shadows //----------- diff --git a/frontend/components/commons/header/filters/FiltersArea.vue b/frontend/components/commons/header/filters/FiltersArea.vue index 13164785a2..f50598e159 100644 --- a/frontend/components/commons/header/filters/FiltersArea.vue +++ b/frontend/components/commons/header/filters/FiltersArea.vue @@ -136,7 +136,7 @@ export default { align-items: center; } &__content { - padding: 0.5em 0 0.5em 0; + padding: 32px 0; position: relative; width: 100%; } diff --git a/frontend/components/commons/header/global-actions/GlobalActions.vue b/frontend/components/commons/header/global-actions/GlobalActions.vue index b64347b9ad..ff12176148 100644 --- a/frontend/components/commons/header/global-actions/GlobalActions.vue +++ b/frontend/components/commons/header/global-actions/GlobalActions.vue @@ -54,10 +54,10 @@ export default { text-align: left; padding: 1em 1.4em; background: $lighter-color; - border-radius: 3px 3px 1px 1px; - border: 1px solid palette(grey, smooth); + border-radius: $border-radius-m; position: relative; - margin-bottom: -1px; + box-shadow: 0 1px 2px 0 rgba(185, 185, 185, 0.5); + margin-bottom: 16px; &--exploration { position: relative; } diff --git a/frontend/components/commons/results/ResultsList.vue b/frontend/components/commons/results/ResultsList.vue index 7044444e7c..a637d09bad 100644 --- a/frontend/components/commons/results/ResultsList.vue +++ b/frontend/components/commons/results/ResultsList.vue @@ -195,7 +195,6 @@ export default { .vue-recycle-scroller__item-view { box-sizing: border-box; } - $maxItemsperPage: 20; @for $i from 0 through $maxItemsperPage { .vue-recycle-scroller__item-view:nth-of-type(#{$i}) { diff --git a/frontend/components/commons/results/ResultsLoading.vue b/frontend/components/commons/results/ResultsLoading.vue index 29a4964d60..cc14907b50 100644 --- a/frontend/components/commons/results/ResultsLoading.vue +++ b/frontend/components/commons/results/ResultsLoading.vue @@ -41,7 +41,8 @@ export default { height: 2px; position: absolute; top: 0; - left: 0; + left: 10px; + right: 10px; background: $primary-color; animation: load 0.8s ease-in-out infinite; } @@ -51,7 +52,8 @@ export default { width: 100%; background: white; border: 1px solid palette(grey, smooth); - margin-bottom: -1px; + margin-bottom: 8px; + border-radius: $border-radius-m; } @keyframes load { 0% { diff --git a/frontend/components/commons/results/ResultsRecord.vue b/frontend/components/commons/results/ResultsRecord.vue index 4ddb99dd5d..05b80a17db 100644 --- a/frontend/components/commons/results/ResultsRecord.vue +++ b/frontend/components/commons/results/ResultsRecord.vue @@ -118,18 +118,17 @@ export default { &__item { position: relative; background: $lighter-color; - border-radius: 1px; + border-radius: $border-radius-m; display: inline-block; width: 100%; transition: 0.3s ease-in-out; border: 1px solid palette(grey, smooth); - border-bottom: 0; + margin-bottom: 8px; &__asterisk { @include font-size(24px); color: $secondary-color; } &--annotation-mode { - // padding-left: 4em; @extend .list__item !optional; &.discarded { opacity: 0.5; @@ -148,7 +147,6 @@ export default { } } } - .list-enter-active, .list-leave-active { transition: all 0.5s ease; diff --git a/frontend/components/core/RePagination.vue b/frontend/components/core/RePagination.vue index f1416dc350..7e4026ae99 100644 --- a/frontend/components/core/RePagination.vue +++ b/frontend/components/core/RePagination.vue @@ -228,7 +228,7 @@ $pagination-size: 30px; border-top: 1px solid palette(grey, smooth); min-height: 63px; z-index: 99; - padding-right: 1em; + padding-right: 56px; padding-left: 4em; .--metrics & { @include media(">desktop") { diff --git a/frontend/components/token-classifier/results/EntitiesHeader.vue b/frontend/components/token-classifier/results/EntitiesHeader.vue index 9bdd146adb..df3443e8ae 100755 --- a/frontend/components/token-classifier/results/EntitiesHeader.vue +++ b/frontend/components/token-classifier/results/EntitiesHeader.vue @@ -116,7 +116,7 @@ export default { .container { @extend %container; padding-top: 0; - padding-bottom: 0.7em; + padding-bottom: 0; margin-left: 0; @extend %collapsable-if-metrics !optional; } @@ -126,8 +126,9 @@ export default { } &__container { padding: 0.4em 0.5em; + margin-bottom: 16px; background: palette(white); - border-radius: $border-radius; + border-radius: $border-radius-m; box-shadow: 0 1px 2px 0 rgba(185, 185, 185, 0.5); min-height: 48px; max-height: 189px;