From 83378e4ade3d1f6761c027e6d4de1fc4bfaef364 Mon Sep 17 00:00:00 2001 From: sboursen-scinote Date: Tue, 10 Jan 2023 19:45:02 +0100 Subject: [PATCH 1/2] Fix clear due date x button not working - Reduce the width of the datetime-picker-container to prevent it from hiding the clear-date (x button). --- app/assets/stylesheets/experiment/table.scss | 37 +++++++++++--------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/app/assets/stylesheets/experiment/table.scss b/app/assets/stylesheets/experiment/table.scss index bc4c41015..6b03d40b2 100644 --- a/app/assets/stylesheets/experiment/table.scss +++ b/app/assets/stylesheets/experiment/table.scss @@ -8,7 +8,7 @@ .title-row { .header-actions { &.experiment-header { - column-gap: .25em; + column-gap: 0.25em; } .sort-task-menu { @@ -22,7 +22,10 @@ } .experiment-table-container { - height: calc(100vh - var(--content-header-size) - var(--navbar-height) - var(--toolbar-height)); + height: calc( + 100vh - var(--content-header-size) - var(--navbar-height) - + var(--toolbar-height) + ); overflow: auto; } @@ -35,7 +38,7 @@ display: flex; .btn { - margin-right: .25em; + margin-right: 0.25em; } } @@ -47,7 +50,9 @@ .experiment-table { display: grid; grid-auto-rows: 3em 1px; - grid-template-columns: max-content repeat(calc(var(--columns-count)), minmax(max-content, auto)) max-content; + grid-template-columns: + max-content repeat(calc(var(--columns-count)), minmax(max-content, auto)) + max-content; min-width: 100%; .table-header-cell { @@ -56,7 +61,7 @@ border: 1px solid $color-white; display: flex; height: 3em; - padding: 0 .5em; + padding: 0 0.5em; position: sticky; position: -webkit-sticky; top: 0; @@ -113,7 +118,7 @@ .table-body-cell { align-items: center; display: flex; - padding: 0 .5em; + padding: 0 0.5em; .my-module-users-link { color: $color-silver-chalice; @@ -127,7 +132,7 @@ color: $color-silver-chalice; height: 2em; line-height: 2em; - margin-right: .25em; + margin-right: 0.25em; width: 2em; } @@ -137,7 +142,7 @@ color: $color-white; height: 2em; line-height: 2em; - margin-right: .25em; + margin-right: 0.25em; text-align: center; text-decoration: none; width: 2em; @@ -181,7 +186,7 @@ .assign-users-dropdown { .dropdown-menu { - padding: .5em; + padding: 0.5em; width: 280px; } @@ -193,10 +198,10 @@ .user-container { align-items: center; display: flex; - padding: .5em; + padding: 0.5em; .user-avatar { - padding: 0 .75em; + padding: 0 0.75em; &.archived { padding-left: 0; @@ -287,14 +292,13 @@ width: 24px; } - @keyframes placeholder-pulsing { 0% { opacity: 1; } 50% { - opacity: .5; + opacity: 0.5; } 100% { @@ -380,7 +384,7 @@ left: 0; position: absolute; top: 0; - width: 100%; + width: 90%; .calendar-due-date { opacity: 0; @@ -388,10 +392,9 @@ } &:hover { - .date-text[data-editable=true] { + .date-text[data-editable="true"] { background-color: $color-concrete; border-radius: 4px; - } } } @@ -420,7 +423,7 @@ align-items: center; border-bottom: $border-default; display: flex; - padding: .5em 1em; + padding: 0.5em 1em; &:not(.visible) { color: $color-alto; From a7f17524d25b02e1978974c4c16788884b36e964 Mon Sep 17 00:00:00 2001 From: sboursen-scinote Date: Tue, 10 Jan 2023 20:33:25 +0100 Subject: [PATCH 2/2] Fix scss style issues --- app/assets/stylesheets/experiment/table.scss | 39 +++++++++----------- 1 file changed, 18 insertions(+), 21 deletions(-) diff --git a/app/assets/stylesheets/experiment/table.scss b/app/assets/stylesheets/experiment/table.scss index 6b03d40b2..f51589a19 100644 --- a/app/assets/stylesheets/experiment/table.scss +++ b/app/assets/stylesheets/experiment/table.scss @@ -8,7 +8,7 @@ .title-row { .header-actions { &.experiment-header { - column-gap: 0.25em; + column-gap: .25em; } .sort-task-menu { @@ -22,10 +22,7 @@ } .experiment-table-container { - height: calc( - 100vh - var(--content-header-size) - var(--navbar-height) - - var(--toolbar-height) - ); + height: calc(100vh - var(--content-header-size) - var(--navbar-height) - var(--toolbar-height)); overflow: auto; } @@ -38,7 +35,7 @@ display: flex; .btn { - margin-right: 0.25em; + margin-right: .25em; } } @@ -50,9 +47,7 @@ .experiment-table { display: grid; grid-auto-rows: 3em 1px; - grid-template-columns: - max-content repeat(calc(var(--columns-count)), minmax(max-content, auto)) - max-content; + grid-template-columns: max-content repeat(calc(var(--columns-count)), minmax(max-content, auto)) max-content; min-width: 100%; .table-header-cell { @@ -61,7 +56,7 @@ border: 1px solid $color-white; display: flex; height: 3em; - padding: 0 0.5em; + padding: 0 .5em; position: sticky; position: -webkit-sticky; top: 0; @@ -118,7 +113,7 @@ .table-body-cell { align-items: center; display: flex; - padding: 0 0.5em; + padding: 0 .5em; .my-module-users-link { color: $color-silver-chalice; @@ -132,7 +127,7 @@ color: $color-silver-chalice; height: 2em; line-height: 2em; - margin-right: 0.25em; + margin-right: .25em; width: 2em; } @@ -142,7 +137,7 @@ color: $color-white; height: 2em; line-height: 2em; - margin-right: 0.25em; + margin-right: .25em; text-align: center; text-decoration: none; width: 2em; @@ -186,7 +181,7 @@ .assign-users-dropdown { .dropdown-menu { - padding: 0.5em; + padding: .5em; width: 280px; } @@ -198,10 +193,10 @@ .user-container { align-items: center; display: flex; - padding: 0.5em; + padding: .5em; .user-avatar { - padding: 0 0.75em; + padding: 0 .75em; &.archived { padding-left: 0; @@ -292,13 +287,14 @@ width: 24px; } + @keyframes placeholder-pulsing { 0% { opacity: 1; } 50% { - opacity: 0.5; + opacity: .5; } 100% { @@ -353,7 +349,7 @@ .clear-date { cursor: pointer; - left: 90%; + left: calc(100% - 16px); position: absolute; text-align: center; top: 0; @@ -384,7 +380,7 @@ left: 0; position: absolute; top: 0; - width: 90%; + width: calc(100% - 16px); .calendar-due-date { opacity: 0; @@ -392,9 +388,10 @@ } &:hover { - .date-text[data-editable="true"] { + .date-text[data-editable=true] { background-color: $color-concrete; border-radius: 4px; + } } } @@ -423,7 +420,7 @@ align-items: center; border-bottom: $border-default; display: flex; - padding: 0.5em 1em; + padding: .5em 1em; &:not(.visible) { color: $color-alto;