fix: support for Safari and mobile browsers (#134)

* fix: fixed gaps on safari * refactor: simplified layout * fix: scale on mobile
netwerk-digitaal-erfgoed · May 3, 2021 · e512cfe · e512cfe
1 parent 83b4f71
commit e512cfe
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 11 deletions.
diff --git a/packages/nde-erfgoed-manage/lib/app.root.ts b/packages/nde-erfgoed-manage/lib/app.root.ts
@@ -112,15 +112,13 @@ export class AppRootComponent extends RxLitElement {
       unsafeCSS(Theme),
       css`
         :host {
-          height: 100%;
           background-color: var(--colors-background-normal);
           display: flex;
           flex-direction: row;
-          align-items: stretch;
         }
 
         :host * {
-          flex: 1 0;
+          flex: 1 1;
         }
 
         :host nde-sidebar {

diff --git a/packages/nde-erfgoed-manage/lib/features/authenticate/authenticate-root.component.ts b/packages/nde-erfgoed-manage/lib/features/authenticate/authenticate-root.component.ts
@@ -176,23 +176,25 @@ export class AuthenticateRootComponent extends RxLitElement {
       unsafeCSS(Theme),
       css`
         :host {
-          height: 100%;
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
-          gap: var(--gap-huge);
           background-color: var(--colors-primary-dark);
         }
         
+        :host > * {
+          margin-bottom: var(--gap-huge);
+          width: 400px;
+        }
+
         .title-container {
           height: 50px;
           display: flex;
           flex-direction: row;
           justify-content: space-between;
           align-items: center;
           color: var(--colors-foreground-inverse);
-          width: 400px;
         }
         
         .title-container svg {
@@ -223,14 +225,16 @@ export class AuthenticateRootComponent extends RxLitElement {
         }
 
         .form-container {
-          width: 400px;
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: stretch;
-          gap: var(--gap-large);
         }
-      `,
+
+        .form-container > * {
+          margin-bottom: var(--gap-large);
+        }
+        `,
     ];
   }
 

diff --git a/packages/nde-erfgoed-manage/lib/index.html b/packages/nde-erfgoed-manage/lib/index.html
@@ -8,6 +8,7 @@
   <script>
     var global = globalThis;
   </script>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
 

diff --git a/packages/nde-erfgoed-manage/lib/styles.module.css b/packages/nde-erfgoed-manage/lib/styles.module.css
@@ -8,6 +8,8 @@ body {
   background-color: var(--colors-background-normal);
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: stretch;
+}
+
+body > * {
+  flex: 1 1;
 }