aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorThomas Lange <code@nerdmind.de>2021-07-10 19:13:34 +0200
committerThomas Lange <code@nerdmind.de>2021-07-10 19:13:34 +0200
commitaff41035187c2083732c692edf461c4c514fc40f (patch)
tree09330b09dc80f44254362761fc76b9172e549918
parent8886f16a767e1f74b270befb4342857eeacc0fc6 (diff)
downloadblog-aff41035187c2083732c692edf461c4c514fc40f.tar.gz
blog-aff41035187c2083732c692edf461c4c514fc40f.tar.xz
blog-aff41035187c2083732c692edf461c4c514fc40f.zip
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/
-rw-r--r--theme/admin/rsrc/css/dark.css23
-rw-r--r--theme/admin/rsrc/css/import/_responsive.scss11
-rw-r--r--theme/admin/rsrc/css/import/_styles.scss12
-rw-r--r--theme/admin/rsrc/css/main.css23
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 {