From 19411f42eb67d2cefec2bba1a2f23d0db5f413da Mon Sep 17 00:00:00 2001
From: Florent Poittevin <florent.poittevin@unige.ch>
Date: Thu, 24 Oct 2019 16:17:55 +0200
Subject: [PATCH] style: fix display of banner in width
---
.../deposit-detail.routable.html | 2 +-
.../deposit-detail.routable.scss | 103 ++++++++++--------
2 files changed, 61 insertions(+), 44 deletions(-)
diff --git a/src/app/features/deposit/components/routables/deposit-detail/deposit-detail.routable.html b/src/app/features/deposit/components/routables/deposit-detail/deposit-detail.routable.html
index 45b4a7fcf..20854e16f 100644
--- a/src/app/features/deposit/components/routables/deposit-detail/deposit-detail.routable.html
+++ b/src/app/features/deposit/components/routables/deposit-detail/deposit-detail.routable.html
@@ -1,6 +1,6 @@
<div class="alert-wrapper">
<div *ngIf="filesRetrieve(listDataFileObs | async) && !canSubmit(listDataFileObs | async)"
- class="alert"
+ class="alert warn"
>
{{message| translate}}
</div>
diff --git a/src/app/features/deposit/components/routables/deposit-detail/deposit-detail.routable.scss b/src/app/features/deposit/components/routables/deposit-detail/deposit-detail.routable.scss
index 452aee319..689e07123 100644
--- a/src/app/features/deposit/components/routables/deposit-detail/deposit-detail.routable.scss
+++ b/src/app/features/deposit/components/routables/deposit-detail/deposit-detail.routable.scss
@@ -2,63 +2,80 @@
@import "../../../../../../sass/abstracts/mixins";
@import "../../../../../shared/components/routables/shared-abstract-detail/shared-abstract-detail.routable.scss";
+$height-alert: 30px;
+
:host {
- .tab-header-icon {
+ $padding-top: $height-alert + 10px;
+ padding-top: $padding-top;
+
+ @include respond-to-breakpoint("xs") {
+ $padding-top: $height-alert + 10px + 20px;
+ padding-top: $padding-top;
}
- .tab-header-label {
- padding-left: 10px;
+ .alert-wrapper {
+ height: $height-alert;
+ padding-bottom: 10px;
+ top: 0;
+ width: 100vw;
+ position: absolute;
+ right: 0;
- @include respond-to-breakpoint("xs") {
- display: none;
- }
- }
-}
+ .alert {
+ color: $white;
+ font-weight: bold;
+ text-align: center;
+ padding: 5px 10px;
+ box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.05);
+ animation: appear 0.25s;
-.alert-wrapper {
- height: 30px;
- padding-bottom: 10px;
- margin: -25px -25px 0;
+ &.warn {
+ background-color: $warning;
+ }
- .alert {
- background-color: $warning;
- color: $white;
- font-weight: bold;
- text-align: center;
- padding: 5px;
- box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.05);
- animation: appear 0.25s;
+ &.error {
+ background-color: $red;
+ }
- &.error {
- background-color: $red;
- }
+ &.success {
+ background-color: $success;
+ }
- &.success {
- background-color: $success;
+ &.info {
+ background-color: $info;
+ }
}
- &.info {
- background-color: $info;
+ @-webkit-keyframes appear {
+ 0% {
+ -webkit-transform: scaleY(0);
+ height: 0;
+ padding: 0;
+ opacity: 0;
+ display: none;
+ -webkit-animation-play-state: paused;
+ }
+ 100% {
+ -webkit-transform: scaleY(1);
+ opacity: 1;
+ }
}
}
-}
-.success {
- background-color: $green !important;
- color: $white !important;;
-}
+ .tab-header-icon {
+ }
+
+ .tab-header-label {
+ padding-left: 10px;
-@-webkit-keyframes appear {
- 0% {
- -webkit-transform: scaleY(0);
- height: 0;
- padding: 0;
- opacity: 0;
- display: none;
- -webkit-animation-play-state: paused;
+ @include respond-to-breakpoint("xs") {
+ display: none;
+ }
}
- 100% {
- -webkit-transform: scaleY(1);
- opacity: 1;
+
+ button.success {
+ background-color: $green !important;
+ color: $white !important;;
}
}
+
--
GitLab