Adding IE11 Grid support for admin dashboard

This commit is contained in:
Kris 2018-11-05 12:51:26 -05:00
parent 78954672f9
commit d7e38d2be8
2 changed files with 80 additions and 1 deletions

View File

@ -6,6 +6,30 @@
grid-template-rows: repeat(auto-fit, minmax(32px, 1fr));
align-items: center;
// IE11 grid support
display: -ms-grid;
-ms-grid-columns: 2fr 1fr 1fr 1fr 1fr;
.cell {
-ms-grid-row: 1;
-ms-grid-column-span: 1;
&:nth-of-type(1) {
-ms-grid-column: 1;
}
&:nth-of-type(2) {
-ms-grid-column: 2;
}
&:nth-of-type(3) {
-ms-grid-column: 3;
}
&:nth-of-type(4) {
-ms-grid-column: 4;
}
&:nth-of-type(5) {
-ms-grid-column: 5;
}
}
.cell {
padding: 0.25em;
text-align: right;

View File

@ -130,6 +130,38 @@
grid-column-gap: 1em;
grid-row-gap: 1em;
// IE11 grid support
display: -ms-grid;
-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-ms-grid-rows: 1fr 1fr;
.admin-report {
-ms-grid-column-span: 4;
&:nth-of-type(1) {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
&:nth-of-type(2) {
-ms-grid-row: 1;
-ms-grid-column: 5;
}
&:nth-of-type(3) {
-ms-grid-row: 1;
-ms-grid-column: 9;
}
&:nth-of-type(4) {
-ms-grid-row: 2;
-ms-grid-column: 1;
}
&:nth-of-type(5) {
-ms-grid-row: 2;
-ms-grid-column: 5;
}
&:nth-of-type(6) {
-ms-grid-row: 2;
-ms-grid-column: 9;
}
}
.admin-report {
grid-column: span 4;
}
@ -255,7 +287,7 @@
.counters-header {
display: grid;
flex: 1;
flex: 1 0 auto;
grid-template-columns: 33% repeat(auto-fit, minmax(20px, 1fr));
border: 1px solid $primary-low;
border-bottom: 0;
@ -263,6 +295,29 @@
text-align: right;
align-items: center;
padding: 0.65em 0.25em;
// IE11 grid support
display: -ms-grid;
-ms-grid-columns: 2fr 1fr 1fr 1fr 1fr;
.counters-cell {
-ms-grid-row: 1;
-ms-grid-column-span: 1;
&:nth-of-type(1) {
-ms-grid-column: 1;
}
&:nth-of-type(2) {
-ms-grid-column: 2;
}
&:nth-of-type(3) {
-ms-grid-column: 3;
}
&:nth-of-type(4) {
-ms-grid-column: 4;
}
&:nth-of-type(5) {
-ms-grid-column: 5;
}
}
}
.admin-report .main {