From 5e5b2527f33331be4e289ff66ff6bbbb719f88bf Mon Sep 17 00:00:00 2001 From: Shakhrizoda Yusupova Date: Fri, 27 Oct 2023 12:18:50 +0000 Subject: [PATCH 1/5] Update markup for comparison table --- .../comparison_table_block.html | 27 +++++++++++++------ .../sass/components/_comparison-table.scss | 4 +++ 2 files changed, 23 insertions(+), 8 deletions(-) diff --git a/wagtailio/project_styleguide/templates/patterns/components/streamfields/comparison_table_block/comparison_table_block.html b/wagtailio/project_styleguide/templates/patterns/components/streamfields/comparison_table_block/comparison_table_block.html index 0424a44da..2f44b596b 100644 --- a/wagtailio/project_styleguide/templates/patterns/components/streamfields/comparison_table_block/comparison_table_block.html +++ b/wagtailio/project_styleguide/templates/patterns/components/streamfields/comparison_table_block/comparison_table_block.html @@ -8,19 +8,30 @@ {% for col in value.comparison_table.columns %} - {{ col.heading }} + {% if col.heading %} + {{ col.heading }} + {% else %} + + {% endif %} {% endfor %} + {% else %} + + {% for block in row %} + {% if forloop.first %} + + {{ block }} + + {% else %} + + {% include_block block %} + + {% endif %} + {% endfor %} + {% endif %} - - {% for block in row %} - - {% include_block block %} - - {% endfor %} - {% endfor %} diff --git a/wagtailio/static/sass/components/_comparison-table.scss b/wagtailio/static/sass/components/_comparison-table.scss index 7fc3a4926..a907d75fa 100644 --- a/wagtailio/static/sass/components/_comparison-table.scss +++ b/wagtailio/static/sass/components/_comparison-table.scss @@ -61,5 +61,9 @@ .theme-dark & { border-color: $color--black; } + + &[scope="row"] { + text-align: left; + } } } From 7c71048e6772b303d374318a58767f5bea158578 Mon Sep 17 00:00:00 2001 From: Shakhrizoda Yusupova Date: Sun, 29 Oct 2023 18:13:59 +0000 Subject: [PATCH 2/5] Remove color change on hover for modal cancel icons --- wagtailio/static/sass/components/_modal.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/wagtailio/static/sass/components/_modal.scss b/wagtailio/static/sass/components/_modal.scss index b8d541b3f..b8ee1b320 100644 --- a/wagtailio/static/sass/components/_modal.scss +++ b/wagtailio/static/sass/components/_modal.scss @@ -113,10 +113,12 @@ } } - &:hover, - &:focus { - #{$root}__close-icon { - fill: var(--color--interaction); + .theme-dark & { + &:hover, + &:focus { + #{$root}__close-icon { + fill: var(--color--interaction); + } } } } From bb8c3576df855d87081bffa39886507ab54111cf Mon Sep 17 00:00:00 2001 From: Shakhrizoda Yusupova Date: Sun, 29 Oct 2023 18:54:29 +0000 Subject: [PATCH 3/5] Remove color change for mobile header --- wagtailio/static/sass/layout/_header.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/wagtailio/static/sass/layout/_header.scss b/wagtailio/static/sass/layout/_header.scss index 378e26b5c..31ef021af 100644 --- a/wagtailio/static/sass/layout/_header.scss +++ b/wagtailio/static/sass/layout/_header.scss @@ -213,10 +213,12 @@ } } - &:hover, - &:focus { - color: var(--color--interaction); - } + .theme-dark & { + &:hover, + &:focus { + color: var(--color--interaction); + } + } } &__menu-toggle { From feada0ad9c238d6582ed0aaea2af99f0c1c0f9eb Mon Sep 17 00:00:00 2001 From: shyusu4 Date: Wed, 21 Feb 2024 20:08:56 +0300 Subject: [PATCH 4/5] Update previous comparison table fix --- .../comparison_table_block.html | 27 +++++++++---------- .../sass/components/_comparison-table.scss | 27 +++++++++---------- 2 files changed, 25 insertions(+), 29 deletions(-) diff --git a/wagtailio/project_styleguide/templates/patterns/components/streamfields/comparison_table_block/comparison_table_block.html b/wagtailio/project_styleguide/templates/patterns/components/streamfields/comparison_table_block/comparison_table_block.html index 2f44b596b..30e150085 100644 --- a/wagtailio/project_styleguide/templates/patterns/components/streamfields/comparison_table_block/comparison_table_block.html +++ b/wagtailio/project_styleguide/templates/patterns/components/streamfields/comparison_table_block/comparison_table_block.html @@ -17,21 +17,20 @@ - {% else %} - - {% for block in row %} - {% if forloop.first %} - - {{ block }} - - {% else %} - - {% include_block block %} - - {% endif %} - {% endfor %} - {% endif %} + + {% for block in row %} + {% if forloop.first %} + + {{ block }} + + {% else %} + + {% include_block block %} + + {% endif %} + {% endfor %} + {% endfor %} diff --git a/wagtailio/static/sass/components/_comparison-table.scss b/wagtailio/static/sass/components/_comparison-table.scss index a907d75fa..0d17bcf05 100644 --- a/wagtailio/static/sass/components/_comparison-table.scss +++ b/wagtailio/static/sass/components/_comparison-table.scss @@ -13,15 +13,6 @@ grid-column: 2 / span 5; } - td:first-child { - font-weight: $weight--bold; - width: 150px; - - @include media-query(large) { - width: 250px - } - } - tbody { grid-column: 2 / span 2; grid-gap: 20px; @@ -34,14 +25,24 @@ grid-column: 2 / span 5; } + th { + // stylelint-disable-next-line declaration-property-value-allowed-list + text-align: left; + font-weight: $weight--bold; + width: 150px; + + @include media-query(large) { + width: 250px + } + } + > tr:last-child { - td { + td, th { border: unset; } } } - td, th { padding: 20px 20px 20px 0; @@ -61,9 +62,5 @@ .theme-dark & { border-color: $color--black; } - - &[scope="row"] { - text-align: left; - } } } From 5e0033270ddc6150e7a99929f795a3c8ed708b8b Mon Sep 17 00:00:00 2001 From: shyusu4 Date: Wed, 21 Feb 2024 20:19:52 +0300 Subject: [PATCH 5/5] Revert icons style changes --- wagtailio/static/sass/components/_modal.scss | 10 ++++------ wagtailio/static/sass/layout/_header.scss | 10 ++++------ 2 files changed, 8 insertions(+), 12 deletions(-) diff --git a/wagtailio/static/sass/components/_modal.scss b/wagtailio/static/sass/components/_modal.scss index b8ee1b320..b8d541b3f 100644 --- a/wagtailio/static/sass/components/_modal.scss +++ b/wagtailio/static/sass/components/_modal.scss @@ -113,12 +113,10 @@ } } - .theme-dark & { - &:hover, - &:focus { - #{$root}__close-icon { - fill: var(--color--interaction); - } + &:hover, + &:focus { + #{$root}__close-icon { + fill: var(--color--interaction); } } } diff --git a/wagtailio/static/sass/layout/_header.scss b/wagtailio/static/sass/layout/_header.scss index 31ef021af..378e26b5c 100644 --- a/wagtailio/static/sass/layout/_header.scss +++ b/wagtailio/static/sass/layout/_header.scss @@ -213,12 +213,10 @@ } } - .theme-dark & { - &:hover, - &:focus { - color: var(--color--interaction); - } - } + &:hover, + &:focus { + color: var(--color--interaction); + } } &__menu-toggle {