FIX: More explicit grid layout

This commit is contained in:
Kris 2019-03-25 16:41:03 -04:00
parent 528a7c577a
commit b1d707b3bb
2 changed files with 10 additions and 5 deletions

View File

@ -8,12 +8,14 @@
grid-template-rows: auto auto 1fr auto; grid-template-rows: auto auto 1fr auto;
grid-row-gap: s(5); grid-row-gap: s(5);
.user-primary-navigation { .user-primary-navigation {
grid-column-start: span 2; grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1; grid-row-start: 1;
grid-row-end: 2; grid-row-end: 2;
} }
.user-secondary-navigation { .user-secondary-navigation {
grid-column-start: 1; grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2; grid-row-start: 2;
grid-row-end: 3; grid-row-end: 3;
} }
@ -21,14 +23,16 @@
.spinner { .spinner {
grid-row-start: 2; grid-row-start: 2;
grid-row-end: 4; grid-row-end: 4;
grid-column-end: span 2; grid-column-start: 1;
grid-column-end: 3;
} }
.user-content { .user-content {
min-width: 100%; min-width: 100%;
} }
.user-additional-controls + .user-content,
.user-secondary-navigation + .user-content { .user-secondary-navigation + .user-content {
grid-column-start: 2; grid-column-start: 2;
grid-column-end: span 1; grid-column-end: 3;
} }
.user-additional-controls { .user-additional-controls {
grid-row-start: 3; grid-row-start: 3;

View File

@ -9,14 +9,15 @@
.user-primary-navigation { .user-primary-navigation {
grid-column-start: 1; grid-column-start: 1;
grid-row-start: 1; grid-row-start: 1;
grid-column-end: 2;
} }
.user-secondary-navigation { .user-secondary-navigation {
grid-column-start: 2; grid-column-start: 2;
grid-row-start: 1; grid-row-start: 1;
} }
.user-additional-controls + .user-content,
.user-secondary-navigation + .user-content { .user-secondary-navigation + .user-content {
grid-column-start: 1; grid-column-start: 1;
grid-column-end: span 2;
} }
.user-additional-controls { .user-additional-controls {
grid-column-start: 1; grid-column-start: 1;
@ -25,7 +26,7 @@
.user-content, .user-content,
.spinner { .spinner {
grid-row-start: 3; grid-row-start: 3;
grid-column-start: span 2; grid-column-start: 1;
} }
} }