Fix filter layout in IE #160

bkd-mba-fbi · Apr 28, 2020 · ae2e9ad · ae2e9ad
1 parent c57a0d0
commit ae2e9ad
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 20 deletions.
diff --git a/doc/browser-support.md b/doc/browser-support.md
@@ -43,3 +43,16 @@ When using CSS Grid, add the following comment at the top of the .scss file to e
 ```
 
 Checkout the following table for the supported features: https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/#article-header-id-1
+
+## Testing with BrowserStack
+
+When testing browser compatiblity with [BrowserStack](https://www.browserstack.com/), consider the following combination of Dev Server and URL to use.
+
+| OS        | Browser               | Dev Server                   | URL                        |
+| --------- | --------------------- | ---------------------------- | -------------------------- |
+| Windows   | Chrome, Firefox, Edge | `npm start`                  | `http://localhost:4200`    |
+| Android   | Chrome                | `npm start`                  | `http://localhost:4200`    |
+| Windows   | IE11                  | `npm run start:es5`          | `http://localhost:4200`    |
+| macOS/iOS | Safari                | `npm run start:browserstack` | `http://bs-local.com:8000` |
+
+With all browsers you must store a valid token in localStorage to be able to use the app.
diff --git a/src/app/edit-absences/components/edit-absences-header/edit-absences-header.component.scss b/src/app/edit-absences/components/edit-absences-header/edit-absences-header.component.scss
@@ -1,4 +1,5 @@
 @import "../../../../bootstrap-variables";
+@import "node_modules/bootstrap/scss/mixins";
 
 :host {
   display: flex;
@@ -8,23 +9,20 @@
 }
 
 .filters {
-  display: block;
-  flex-direction: row;
-  align-items: flex-end;
+  display: flex;
+  flex-wrap: wrap;
 }
-
 .form-group {
   flex: 1;
+  min-width: 15rem;
+  max-width: 30rem;
   margin-right: $spacer;
-  margin-bottom: 0.5rem;
-  float: left;
+  margin-bottom: $spacer / 2;
 }
 .buttons {
   flex: none;
+  margin-top: $font-size-base * $line-height-base + $label-margin-bottom;
   margin-right: 0;
-  padding-top: 31px;
-  float: left;
-  margin-bottom: 1rem;
 }
 
 .extended-filters-header {
@@ -35,3 +33,14 @@
   color: $body-color;
   text-decoration: none;
 }
+
+/**
+ * Wrap button to separate line on small screens
+ */
+@include media-breakpoint-down(sm) {
+  .buttons {
+    width: 100%;
+    margin-top: $spacer;
+    margin-bottom: $spacer;
+  }
+}
diff --git a/...uate-absences/components/evaluate-absences-header/evaluate-absences-header.component.scss b/...uate-absences/components/evaluate-absences-header/evaluate-absences-header.component.scss
@@ -1,29 +1,37 @@
 @import "../../../../bootstrap-variables";
+@import "node_modules/bootstrap/scss/mixins";
 
 :host {
   display: flex;
-  flex-direction: row;
-  align-items: flex-end;
+  flex-direction: column;
   padding: $spacer;
   border-bottom: 1px solid $border-color;
 }
 
 .filters {
-  display: block;
-  flex-direction: row;
-  align-items: flex-end;
+  display: flex;
+  flex-wrap: wrap;
 }
-
 .form-group {
   flex: 1;
+  min-width: 15rem;
+  max-width: 30rem;
   margin-right: $spacer;
-  margin-bottom: 0.5rem;
-  float: left;
+  margin-bottom: $spacer / 2;
 }
 .buttons {
   flex: none;
+  margin-top: $font-size-base * $line-height-base + $label-margin-bottom;
   margin-right: 0;
-  padding-top: 31px;
-  float: left;
-  margin-bottom: 1rem;
+}
+
+/**
+ * Wrap button to separate line on small screens
+ */
+@include media-breakpoint-down(sm) {
+  .buttons {
+    width: 100%;
+    margin-top: $spacer;
+    margin-bottom: $spacer;
+  }
 }