From c6a5c8d7f2aaa0fd3a6634d576ccd22751997a01 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 24 Mar 2022 16:25:32 +0000 Subject: [PATCH 1/5] Responsive BetaCard on Labs Signed-off-by: Suguru Hirahara --- res/css/views/beta/_BetaCard.scss | 20 +++++++++++++------- src/components/views/beta/BetaCard.tsx | 6 +++--- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/res/css/views/beta/_BetaCard.scss b/res/css/views/beta/_BetaCard.scss index 80a70ad0d62..aa8f93225f5 100644 --- a/res/css/views/beta/_BetaCard.scss +++ b/res/css/views/beta/_BetaCard.scss @@ -23,8 +23,13 @@ limitations under the License. .mx_BetaCard_columns { display: flex; + flex-flow: wrap; + gap: 12px 20px; + justify-content: center; + + .mx_BetaCard_columns_description { + flex: 1; - > div { .mx_BetaCard_title { font-weight: $font-semi-bold; font-size: $font-18px; @@ -32,9 +37,9 @@ limitations under the License. color: $primary-content; margin: 4px 0 14px; - .mx_BetaCard_betaPill { - margin-left: 12px; - } + display: flex; + align-items: center; + column-gap: 12px; } .mx_BetaCard_caption { @@ -67,9 +72,10 @@ limitations under the License. } } - > img { - margin: auto 0 auto 20px; - width: 300px; + .mx_BetaCard_columns_image { + margin: auto 0; + width: 100%; + max-width: 300px; object-fit: contain; height: 100%; border-radius: 4px; diff --git a/src/components/views/beta/BetaCard.tsx b/src/components/views/beta/BetaCard.tsx index 561de940d2a..ee4e2db59c0 100644 --- a/src/components/views/beta/BetaCard.tsx +++ b/src/components/views/beta/BetaCard.tsx @@ -101,9 +101,9 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => { return
-
+

- { titleOverride || _t(title) } + { titleOverride || _t(title) }

{ caption() } @@ -132,7 +132,7 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => { { disclaimer(value) }
}
- +
{ extraSettings && value &&
{ extraSettings.map(key => ( From 36ea18a49083df01a1b2cd5dc9cd6583d544aad3 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 25 Mar 2022 13:26:55 +0000 Subject: [PATCH 2/5] Wrap buttons Signed-off-by: Suguru Hirahara --- res/css/views/beta/_BetaCard.scss | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/res/css/views/beta/_BetaCard.scss b/res/css/views/beta/_BetaCard.scss index aa8f93225f5..9ecd46b91cf 100644 --- a/res/css/views/beta/_BetaCard.scss +++ b/res/css/views/beta/_BetaCard.scss @@ -24,7 +24,7 @@ limitations under the License. .mx_BetaCard_columns { display: flex; flex-flow: wrap; - gap: 12px 20px; + gap: 20px; justify-content: center; .mx_BetaCard_columns_description { @@ -49,18 +49,24 @@ limitations under the License. margin-bottom: 20px; } - .mx_BetaCard_buttons .mx_AccessibleButton { - display: block; - margin: 12px 0; - padding: 7px 40px; - width: auto; + .mx_BetaCard_buttons { + display: flex; + flex-wrap: wrap; + gap: 12px; + margin: 20px auto; + + .mx_AccessibleButton { + padding: 7px 40px; + width: auto; + flex: 1; + white-space: nowrap; // text might overflow + } } .mx_BetaCard_disclaimer { font-size: $font-12px; line-height: $font-15px; color: $secondary-content; - margin-top: 20px; > h4 { margin: 0; From ae846dba43c329325d27e7d147812ade5500bf49 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 25 Mar 2022 13:30:49 +0000 Subject: [PATCH 3/5] Remove margin setting that has not been effective Signed-off-by: Suguru Hirahara --- res/css/views/beta/_BetaCard.scss | 1 - src/components/views/beta/BetaCard.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/res/css/views/beta/_BetaCard.scss b/res/css/views/beta/_BetaCard.scss index 9ecd46b91cf..cfbdafbb448 100644 --- a/res/css/views/beta/_BetaCard.scss +++ b/res/css/views/beta/_BetaCard.scss @@ -46,7 +46,6 @@ limitations under the License. font-size: $font-15px; line-height: $font-20px; color: $secondary-content; - margin-bottom: 20px; } .mx_BetaCard_buttons { diff --git a/src/components/views/beta/BetaCard.tsx b/src/components/views/beta/BetaCard.tsx index ee4e2db59c0..00ffc3268b0 100644 --- a/src/components/views/beta/BetaCard.tsx +++ b/src/components/views/beta/BetaCard.tsx @@ -106,7 +106,7 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => { { titleOverride || _t(title) } - { caption() } +
{ caption() }
{ feedbackButton } Date: Fri, 25 Mar 2022 14:04:32 +0000 Subject: [PATCH 4/5] Wrap img element and remove redundant margin from disclaimer Signed-off-by: Suguru Hirahara --- res/css/views/beta/_BetaCard.scss | 19 +++++++++++-------- src/components/views/beta/BetaCard.tsx | 4 +++- 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/res/css/views/beta/_BetaCard.scss b/res/css/views/beta/_BetaCard.scss index cfbdafbb448..0b538f01a39 100644 --- a/res/css/views/beta/_BetaCard.scss +++ b/res/css/views/beta/_BetaCard.scss @@ -68,22 +68,25 @@ limitations under the License. color: $secondary-content; > h4 { - margin: 0; + margin: 12px 0 0; } > p { - margin-top: 0; + margin: 0; } } } - .mx_BetaCard_columns_image { + .mx_BetaCard_columns_image_wrapper { margin: auto 0; - width: 100%; - max-width: 300px; - object-fit: contain; - height: 100%; - border-radius: 4px; + + .mx_BetaCard_columns_image { + width: 100%; + max-width: 300px; + object-fit: contain; + height: 100%; + border-radius: 4px; + } } } diff --git a/src/components/views/beta/BetaCard.tsx b/src/components/views/beta/BetaCard.tsx index 00ffc3268b0..1d625fc8431 100644 --- a/src/components/views/beta/BetaCard.tsx +++ b/src/components/views/beta/BetaCard.tsx @@ -132,7 +132,9 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => { { disclaimer(value) }
}
- +
+ +
{ extraSettings && value &&
{ extraSettings.map(key => ( From f7a0f740537d330fa71d4c0e6f2bc4c8adaf334c Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 25 Mar 2022 14:27:54 +0000 Subject: [PATCH 5/5] Place feedback button top and right Place "Feedback" button above "Leave the beta" when the gif image is not wrapped, and right of it when wrapped. Signed-off-by: Suguru Hirahara --- res/css/views/beta/_BetaCard.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/res/css/views/beta/_BetaCard.scss b/res/css/views/beta/_BetaCard.scss index 0b538f01a39..aa87d9fea68 100644 --- a/res/css/views/beta/_BetaCard.scss +++ b/res/css/views/beta/_BetaCard.scss @@ -50,7 +50,7 @@ limitations under the License. .mx_BetaCard_buttons { display: flex; - flex-wrap: wrap; + flex-wrap: wrap-reverse; gap: 12px; margin: 20px auto; @@ -59,6 +59,10 @@ limitations under the License. width: auto; flex: 1; white-space: nowrap; // text might overflow + + &:nth-child(1) { + order: 2; // Place feedback button top and right + } } }