feat: incorrect margin on alerts (#431)

* feat: added margin bottom to alert * fix: removed duplicate margin-bottom for alert * feat: added flex and spacing
netwerk-digitaal-erfgoed · Aug 18, 2021 · 241e08e · 241e08e
1 parent be9d425
commit 241e08e
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 14 deletions.
diff --git a/packages/solid-crs-components/lib/alerts/alert.component.ts b/packages/solid-crs-components/lib/alerts/alert.component.ts
@@ -35,6 +35,9 @@ export class AlertComponent extends LitElement {
     return [
       unsafeCSS(Theme),
       css`
+        :host {
+          margin-bottom: var(--gap-large);
+        }
         .alert {
           padding: var(--gap-normal) var(--gap-small);
           display: flex;

diff --git a/packages/solid-crs-manage/lib/features/collection/collection-root.component.ts b/packages/solid-crs-manage/lib/features/collection/collection-root.component.ts
@@ -269,6 +269,8 @@ export class CollectionRootComponent extends RxLitElement {
           padding: var(--gap-large);
           height: 100%;
           overflow-y: auto;
+          display:flex; 
+          flex-direction: column;
         }
         nde-progress-bar {
           position: absolute;

diff --git a/packages/solid-crs-manage/lib/features/object/object-root.component.ts b/packages/solid-crs-manage/lib/features/object/object-root.component.ts
@@ -489,7 +489,7 @@ export class ObjectRootComponent extends RxLitElement {
           margin-top: 1px;
           display: flex;
           flex-direction: row;
-        height: 1px;
+          height: 1px;
           flex: 1 1;
         }
         .content {
@@ -499,7 +499,11 @@ export class ObjectRootComponent extends RxLitElement {
           overflow-x: clip;
           display: flex;
           flex-direction: column;
-          gap: var(--gap-large);
+          display:flex; 
+          flex-direction: column;
+        }
+        .content > *:not(:last-child) {
+          margin-bottom: var(--gap-large);
         }
         nde-progress-bar {
           position: absolute;

diff --git a/packages/solid-crs-presentation/lib/features/about/about-root.component.ts b/packages/solid-crs-presentation/lib/features/about/about-root.component.ts
@@ -182,9 +182,6 @@ export class AboutRootComponent extends RxLitElement {
           flex-direction: column;
           height: 100%;
         }
-        nde-alert {
-          margin-bottom: var(--gap-large);
-        }
         .content {
           margin: 0 var(--gap-large);
           margin-top: 41px;

diff --git a/packages/solid-crs-presentation/lib/features/collection/collection-root.component.ts b/packages/solid-crs-presentation/lib/features/collection/collection-root.component.ts
@@ -184,9 +184,6 @@ export class CollectionRootComponent extends RxLitElement {
           flex-direction: column;
           height: 100%;
         }
-        nde-alert {
-          margin-bottom: var(--gap-large);
-        }
         .content {
           margin-top: 1px;
           padding: var(--gap-large);

diff --git a/packages/solid-crs-presentation/lib/features/object/object-root.component.ts b/packages/solid-crs-presentation/lib/features/object/object-root.component.ts
@@ -347,9 +347,6 @@ export class ObjectRootComponent extends RxLitElement {
           height: 100%;
           width: 100%;
         }
-        nde-alert {
-          margin-bottom: var(--gap-large);
-        }
         #info-popup {
           height: auto;
           width: auto;

diff --git a/packages/solid-crs-presentation/lib/features/search/search-root.component.ts b/packages/solid-crs-presentation/lib/features/search/search-root.component.ts
@@ -205,9 +205,6 @@ export class SearchRootComponent extends RxLitElement {
           flex-direction: column;
           height: 100%;
         }
-        nde-alert {
-          margin-bottom: var(--gap-large);
-        }
         .content {
           margin-top: 1px;
           padding: var(--gap-large);