From aff41035187c2083732c692edf461c4c514fc40f Mon Sep 17 00:00:00 2001 From: Thomas Lange Date: Sat, 10 Jul 2021 19:13:34 +0200 Subject: Fix unequal grid item widths (and use fr unit) This commit fixes the inconsistent grid item widths in the form and item overview grid layout. It now also makes use of the fraction unit "fr". See: https://css-tricks.com/introduction-fr-css-unit/ --- theme/admin/rsrc/css/dark.css | 23 ++++++++++------------- theme/admin/rsrc/css/import/_responsive.scss | 11 +++++------ theme/admin/rsrc/css/import/_styles.scss | 12 +++++------- theme/admin/rsrc/css/main.css | 23 ++++++++++------------- 4 files changed, 30 insertions(+), 39 deletions(-) diff --git a/theme/admin/rsrc/css/dark.css b/theme/admin/rsrc/css/dark.css index 1477bac..ece8bba 100644 --- a/theme/admin/rsrc/css/dark.css +++ b/theme/admin/rsrc/css/dark.css @@ -456,7 +456,7 @@ img { .item-container.grid { width: 100%; display: grid; - grid-template-columns: auto auto auto; + grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 1rem; grid-row-gap: 1rem; column-gap: 1rem; @@ -498,12 +498,12 @@ img { ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ .form-grid { display: grid; - grid-template-columns: 8rem auto 8rem auto; + grid-template-columns: repeat(2, 7.5rem minmax(0, 1fr)); border-left: 0.05rem solid #1D232B; border-bottom: 0.05rem solid #1D232B; } .form-grid.two-columns { - grid-template-columns: auto auto; + grid-template-columns: 1fr 2fr; } .form-grid.no-bottom-border { border-bottom: none; @@ -514,8 +514,7 @@ img { background: #4D535B; } .form-grid > label .fa { - margin-left: 0.5rem; - margin-right: 1rem; + margin: 0 0.5rem; } .form-grid-item, .form-grid > label { @@ -524,8 +523,7 @@ img { border-right: 0.05rem solid #1D232B; } .form-grid-item.first { - grid-column-start: 2; - grid-column-end: 5; + grid-column: span 3; } .form-border-box { @@ -697,7 +695,7 @@ label:after { ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ @media only screen and (max-width: 90em) { .item-container.grid { - grid-template-columns: auto auto; + grid-template-columns: 1fr 1fr; } } @media only screen and (min-width: 62.5em) { @@ -709,7 +707,7 @@ label:after { } @media only screen and (max-width: 62.5em) { .item-container.grid { - grid-template-columns: auto; + grid-template-columns: 1fr; } } @media only screen and (max-width: 50em) { @@ -748,11 +746,10 @@ label:after { } .form-grid { - grid-template-columns: auto auto; + grid-template-columns: 7rem 1fr; } - .form-grid-item.first { - grid-column-start: 2; - grid-column-end: 3; + .form-grid-item, .form-grid-item.first, .form-grid label { + grid-column: unset; } .actions { diff --git a/theme/admin/rsrc/css/import/_responsive.scss b/theme/admin/rsrc/css/import/_responsive.scss index f6e0b5a..9675071 100644 --- a/theme/admin/rsrc/css/import/_responsive.scss +++ b/theme/admin/rsrc/css/import/_responsive.scss @@ -1,6 +1,6 @@ @media only screen and (max-width: 90em /*1440px*/) { .item-container.grid { - grid-template-columns: auto auto; + grid-template-columns: 1fr 1fr; } } @@ -14,7 +14,7 @@ @media only screen and (max-width: 62.5em /*1000px*/) { .item-container.grid { - grid-template-columns: auto; + grid-template-columns: 1fr; } } @@ -61,11 +61,10 @@ } .form-grid { - grid-template-columns: auto auto; + grid-template-columns: 7rem 1fr; - &-item.first { - grid-column-start: 2; - grid-column-end: 3; + &-item, &-item.first, label { + grid-column: unset; } } diff --git a/theme/admin/rsrc/css/import/_styles.scss b/theme/admin/rsrc/css/import/_styles.scss index 0462a20..88ef8b4 100644 --- a/theme/admin/rsrc/css/import/_styles.scss +++ b/theme/admin/rsrc/css/import/_styles.scss @@ -472,7 +472,7 @@ img { &-container.grid { width: 100%; display: grid; - grid-template-columns: auto auto auto; + grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 1rem; grid-row-gap: 1rem; column-gap: 1rem; @@ -520,13 +520,13 @@ img { ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ .form-grid { display: grid; - grid-template-columns: 8rem auto 8rem auto; + grid-template-columns: repeat(2, 7.5rem minmax(0, 1fr)); border-left: 0.05rem solid $borderColor; border-bottom: 0.05rem solid $borderColor; &.two-columns { - grid-template-columns: auto auto; + grid-template-columns: 1fr 2fr; } &.no-bottom-border { @@ -539,8 +539,7 @@ img { background: $formBackgroundColorEmphasize; .fa { - margin-left: 0.5rem; - margin-right: 1rem; + margin: 0 0.5rem; } } @@ -552,8 +551,7 @@ img { } &-item.first { - grid-column-start: 2; - grid-column-end: 5; + grid-column: span 3; } } diff --git a/theme/admin/rsrc/css/main.css b/theme/admin/rsrc/css/main.css index c1fbc29..95fce4b 100644 --- a/theme/admin/rsrc/css/main.css +++ b/theme/admin/rsrc/css/main.css @@ -456,7 +456,7 @@ img { .item-container.grid { width: 100%; display: grid; - grid-template-columns: auto auto auto; + grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 1rem; grid-row-gap: 1rem; column-gap: 1rem; @@ -498,12 +498,12 @@ img { ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ .form-grid { display: grid; - grid-template-columns: 8rem auto 8rem auto; + grid-template-columns: repeat(2, 7.5rem minmax(0, 1fr)); border-left: 0.05rem solid #AAA; border-bottom: 0.05rem solid #AAA; } .form-grid.two-columns { - grid-template-columns: auto auto; + grid-template-columns: 1fr 2fr; } .form-grid.no-bottom-border { border-bottom: none; @@ -514,8 +514,7 @@ img { background: #DDD; } .form-grid > label .fa { - margin-left: 0.5rem; - margin-right: 1rem; + margin: 0 0.5rem; } .form-grid-item, .form-grid > label { @@ -524,8 +523,7 @@ img { border-right: 0.05rem solid #AAA; } .form-grid-item.first { - grid-column-start: 2; - grid-column-end: 5; + grid-column: span 3; } .form-border-box { @@ -697,7 +695,7 @@ label:after { ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ @media only screen and (max-width: 90em) { .item-container.grid { - grid-template-columns: auto auto; + grid-template-columns: 1fr 1fr; } } @media only screen and (min-width: 62.5em) { @@ -709,7 +707,7 @@ label:after { } @media only screen and (max-width: 62.5em) { .item-container.grid { - grid-template-columns: auto; + grid-template-columns: 1fr; } } @media only screen and (max-width: 50em) { @@ -748,11 +746,10 @@ label:after { } .form-grid { - grid-template-columns: auto auto; + grid-template-columns: 7rem 1fr; } - .form-grid-item.first { - grid-column-start: 2; - grid-column-end: 3; + .form-grid-item, .form-grid-item.first, .form-grid label { + grid-column: unset; } .actions { -- cgit v1.2.3