From b51b0417d002cfc55413508802cbf250ae998f16 Mon Sep 17 00:00:00 2001 From: Jakob Date: Wed, 21 Aug 2024 23:14:42 -0400 Subject: [PATCH 1/7] Add align to img, p, and div Signed-off-by: Jakob --- packages/utils/parse.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/utils/parse.ts b/packages/utils/parse.ts index aa53d64ef..a944e2697 100644 --- a/packages/utils/parse.ts +++ b/packages/utils/parse.ts @@ -14,7 +14,7 @@ export const configuredXss = new FilterXSS({ kbd: ['id'], input: ['checked', 'disabled', 'type'], iframe: ['width', 'height', 'allowfullscreen', 'frameborder', 'start', 'end'], - img: [...(whiteList.img || []), 'usemap', 'style'], + img: [...(whiteList.img || []), 'usemap', 'style', 'align'], map: ['name'], area: [...(whiteList.a || []), 'coords'], a: [...(whiteList.a || []), 'rel'], @@ -22,6 +22,8 @@ export const configuredXss = new FilterXSS({ th: [...(whiteList.th || []), 'style'], picture: [], source: ['media', 'sizes', 'src', 'srcset', 'type'], + p: [...xss.whiteList.p, 'align'], + div: [...xss.whiteList.p, 'align'], }, css: { whiteList: { From 0145c5dcdaac46834b264ddfc89cc86e4ab767d2 Mon Sep 17 00:00:00 2001 From: Jakob Date: Wed, 21 Aug 2024 23:21:59 -0400 Subject: [PATCH 2/7] fixed issue from porting pr Signed-off-by: Jakob --- packages/utils/parse.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/utils/parse.ts b/packages/utils/parse.ts index a944e2697..ef0a631b8 100644 --- a/packages/utils/parse.ts +++ b/packages/utils/parse.ts @@ -22,8 +22,8 @@ export const configuredXss = new FilterXSS({ th: [...(whiteList.th || []), 'style'], picture: [], source: ['media', 'sizes', 'src', 'srcset', 'type'], - p: [...xss.whiteList.p, 'align'], - div: [...xss.whiteList.p, 'align'], + p: [...(whiteList.p || []), 'align'], + div: [...(whiteList.p || []), 'align'], }, css: { whiteList: { From 6525c833a82e705e6e9f68c9f390399e1d53a08d Mon Sep 17 00:00:00 2001 From: Jakob Date: Wed, 21 Aug 2024 23:32:54 -0400 Subject: [PATCH 3/7] attempt to fix overflow of aligned imgs Signed-off-by: Jakob --- packages/assets/styles/classes.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/assets/styles/classes.scss b/packages/assets/styles/classes.scss index 1089df818..d410b58cd 100644 --- a/packages/assets/styles/classes.scss +++ b/packages/assets/styles/classes.scss @@ -833,6 +833,7 @@ a, // MARKDOWN .markdown-body { + overflow-y: auto; h1:first-child { margin-top: 0; } From 14a8afb680a64ac02f0df8f8692343f995061ccb Mon Sep 17 00:00:00 2001 From: Jakob Date: Wed, 21 Aug 2024 23:40:18 -0400 Subject: [PATCH 4/7] Allow h1 to be centered Signed-off-by: Jakob --- packages/assets/styles/classes.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/assets/styles/classes.scss b/packages/assets/styles/classes.scss index d410b58cd..61875ba6a 100644 --- a/packages/assets/styles/classes.scss +++ b/packages/assets/styles/classes.scss @@ -857,6 +857,10 @@ a, line-height: 1.5; } + h1 { + display: block; + } + h1, h2 { padding: 10px 0 5px; From aaa168a736cafcd32d66c1cfb238670ea6170802 Mon Sep 17 00:00:00 2001 From: Jakob Date: Thu, 22 Aug 2024 16:45:36 -0400 Subject: [PATCH 5/7] Excluded markdown-body from universal-card styling in components --- .../src/assets/styles/components.scss | 170 +++++++++--------- 1 file changed, 86 insertions(+), 84 deletions(-) diff --git a/apps/frontend/src/assets/styles/components.scss b/apps/frontend/src/assets/styles/components.scss index b475972b2..91c5c3aaa 100644 --- a/apps/frontend/src/assets/styles/components.scss +++ b/apps/frontend/src/assets/styles/components.scss @@ -190,13 +190,14 @@ } .universal-body { - @extend .universal-labels; + :not(.markdown-body) { + @extend .universal-labels; - .multiselect { - width: 15rem; - } + .multiselect { + width: 15rem; + } - > :where( + > :where( input + *, .input-group + *, .textarea-wrapper + *, @@ -204,115 +205,116 @@ .resizable-textarea-wrapper + *, .input-div + * ) { - &:not(:empty) { - margin-block-start: var(--spacing-card-md); + &:not(:empty) { + margin-block-start: var(--spacing-card-md); + } } - } - :where(button, .button, .iconified-button) { - width: fit-content; - } - - .input-group { - input { - width: auto; - flex-basis: 0; + :where(button, .button, .iconified-button) { + width: fit-content; } - } - - :where(input) { - box-sizing: border-box; - max-height: 40px; - &:not(.stylized-toggle) { - max-width: 100%; + .input-group { + input { + width: auto; + flex-basis: 0; + } } - } - :where(.adjacent-input, &.adjacent-input) { - display: flex; - flex-direction: row; - align-items: center; - flex-wrap: wrap; - gap: var(--spacing-card-sm); - margin-bottom: calc(var(--spacing-card-sm) + var(--spacing-card-md)); + :where(input) { + box-sizing: border-box; + max-height: 40px; - .iconified-button, - .input-group { - flex-shrink: 0; + &:not(.stylized-toggle) { + max-width: 100%; + } } - input { - flex-shrink: 1; - } + :where(.adjacent-input, &.adjacent-input) { + display: flex; + flex-direction: row; + align-items: center; + flex-wrap: wrap; + gap: var(--spacing-card-sm); + margin-bottom: calc(var(--spacing-card-sm) + var(--spacing-card-md)); - > :first-child { - flex-shrink: 2; - flex-grow: 1; - flex-basis: min-content; - } + .iconified-button, + .input-group { + flex-shrink: 0; + } - label, - .label { - .label__title { - margin-block: 0; + input { + flex-shrink: 1; } - .label__description { - margin-block-end: 0; + > :first-child { + flex-shrink: 2; + flex-grow: 1; + flex-basis: min-content; } - .label__description:not(:first-child) { - margin-top: var(--spacing-card-sm); + label, + .label { + .label__title { + margin-block: 0; + } + + .label__description { + margin-block-end: 0; + } + + .label__description:not(:first-child) { + margin-top: var(--spacing-card-sm); + } } - } - @media screen and (max-width: 750px) { - &:not(&.small) { - flex-direction: column; - align-items: flex-start; + @media screen and (max-width: 750px) { + &:not(&.small) { + flex-direction: column; + align-items: flex-start; - .stylized-toggle { - flex-basis: 0; + .stylized-toggle { + flex-basis: 0; + } } } } - } - h1 { - display: flex; - align-items: center; - } + h1 { + display: flex; + align-items: center; + } + + > :first-child { + :first-child { + margin-block-start: 0; + } - > :first-child { - :first-child { margin-block-start: 0; } - margin-block-start: 0; - } - - > :last-child { - margin-block-end: 0; - } + > :last-child { + margin-block-end: 0; + } - :where(.header__row) { - display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: var(--spacing-card-sm); + :where(.header__row) { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: var(--spacing-card-sm); - * { - flex-shrink: 0; - } + * { + flex-shrink: 0; + } - .header__title { - margin: 0; - flex-grow: 1; - } + .header__title { + margin: 0; + flex-grow: 1; + } - &:not(:last-child) { - margin-bottom: var(--spacing-card-md); + &:not(:last-child) { + margin-bottom: var(--spacing-card-md); + } } } } From 46a25517804241b0bbdb04ed2688f52580eb034c Mon Sep 17 00:00:00 2001 From: Jakob Date: Thu, 22 Aug 2024 17:01:30 -0400 Subject: [PATCH 6/7] Fixed it in editor? --- apps/frontend/src/assets/styles/components.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/frontend/src/assets/styles/components.scss b/apps/frontend/src/assets/styles/components.scss index 91c5c3aaa..b0fc293ee 100644 --- a/apps/frontend/src/assets/styles/components.scss +++ b/apps/frontend/src/assets/styles/components.scss @@ -190,7 +190,7 @@ } .universal-body { - :not(.markdown-body) { + *:not(.markdown-body) { @extend .universal-labels; .multiselect { From 46f0083e1f4c99a28bcf76ed96a2ff1d2481951f Mon Sep 17 00:00:00 2001 From: Jakob Date: Thu, 22 Aug 2024 17:12:46 -0400 Subject: [PATCH 7/7] undid previous attempt, did something simpler --- .../src/assets/styles/components.scss | 172 +++++++++--------- 1 file changed, 87 insertions(+), 85 deletions(-) diff --git a/apps/frontend/src/assets/styles/components.scss b/apps/frontend/src/assets/styles/components.scss index b0fc293ee..03ba15e3c 100644 --- a/apps/frontend/src/assets/styles/components.scss +++ b/apps/frontend/src/assets/styles/components.scss @@ -190,14 +190,13 @@ } .universal-body { - *:not(.markdown-body) { - @extend .universal-labels; + @extend .universal-labels; - .multiselect { - width: 15rem; - } + .multiselect { + width: 15rem; + } - > :where( + > :where( input + *, .input-group + *, .textarea-wrapper + *, @@ -205,116 +204,119 @@ .resizable-textarea-wrapper + *, .input-div + * ) { - &:not(:empty) { - margin-block-start: var(--spacing-card-md); - } + &:not(:empty) { + margin-block-start: var(--spacing-card-md); } + } - :where(button, .button, .iconified-button) { - width: fit-content; + :where(button, .button, .iconified-button) { + width: fit-content; + } + + .input-group { + input { + width: auto; + flex-basis: 0; } + } - .input-group { - input { - width: auto; - flex-basis: 0; - } + :where(input) { + box-sizing: border-box; + max-height: 40px; + + &:not(.stylized-toggle) { + max-width: 100%; } + } - :where(input) { - box-sizing: border-box; - max-height: 40px; + :where(.adjacent-input, &.adjacent-input) { + display: flex; + flex-direction: row; + align-items: center; + flex-wrap: wrap; + gap: var(--spacing-card-sm); + margin-bottom: calc(var(--spacing-card-sm) + var(--spacing-card-md)); - &:not(.stylized-toggle) { - max-width: 100%; - } + .iconified-button, + .input-group { + flex-shrink: 0; } - :where(.adjacent-input, &.adjacent-input) { - display: flex; - flex-direction: row; - align-items: center; - flex-wrap: wrap; - gap: var(--spacing-card-sm); - margin-bottom: calc(var(--spacing-card-sm) + var(--spacing-card-md)); + input { + flex-shrink: 1; + } - .iconified-button, - .input-group { - flex-shrink: 0; - } + > :first-child { + flex-shrink: 2; + flex-grow: 1; + flex-basis: min-content; + } - input { - flex-shrink: 1; + label, + .label { + .label__title { + margin-block: 0; } - > :first-child { - flex-shrink: 2; - flex-grow: 1; - flex-basis: min-content; + .label__description { + margin-block-end: 0; } - label, - .label { - .label__title { - margin-block: 0; - } - - .label__description { - margin-block-end: 0; - } - - .label__description:not(:first-child) { - margin-top: var(--spacing-card-sm); - } + .label__description:not(:first-child) { + margin-top: var(--spacing-card-sm); } + } - @media screen and (max-width: 750px) { - &:not(&.small) { - flex-direction: column; - align-items: flex-start; + @media screen and (max-width: 750px) { + &:not(&.small) { + flex-direction: column; + align-items: flex-start; - .stylized-toggle { - flex-basis: 0; - } + .stylized-toggle { + flex-basis: 0; } } } + } - h1 { - display: flex; - align-items: center; - } + h1 { + display: flex; + align-items: center; + } - > :first-child { - :first-child { - margin-block-start: 0; - } + .markdown-body h1 { + display: block; + } + > :first-child { + :first-child { margin-block-start: 0; } - > :last-child { - margin-block-end: 0; - } + margin-block-start: 0; + } - :where(.header__row) { - display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: var(--spacing-card-sm); + > :last-child { + margin-block-end: 0; + } - * { - flex-shrink: 0; - } + :where(.header__row) { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: var(--spacing-card-sm); - .header__title { - margin: 0; - flex-grow: 1; - } + * { + flex-shrink: 0; + } - &:not(:last-child) { - margin-bottom: var(--spacing-card-md); - } + .header__title { + margin: 0; + flex-grow: 1; + } + + &:not(:last-child) { + margin-bottom: var(--spacing-card-md); } } }