From 0b98a661ab0bd24936fb14b40f335d038dfc2ffa Mon Sep 17 00:00:00 2001 From: shaniuk Date: Thu, 25 Nov 2021 14:19:27 +0100 Subject: [PATCH 1/3] fix title scroll behavior --- src/components/popup/intro/intro.jsx | 9 +- src/components/popup/intro/intro.less | 217 ++++++++++++++------------ 2 files changed, 119 insertions(+), 107 deletions(-) diff --git a/src/components/popup/intro/intro.jsx b/src/components/popup/intro/intro.jsx index ce3b7761..e6990811 100644 --- a/src/components/popup/intro/intro.jsx +++ b/src/components/popup/intro/intro.jsx @@ -42,14 +42,13 @@ export default class Intro extends Component { prefix={LocalLabel.defaultProps.prefix} /> -
+
- -
-
- Thanks for visiting +
+
+ Thanks for visiting In order to run a successful website, we and certain third parties are setting cookies and accessing and storing information on your device for various purposes. Various third parties are also collecting data to show you personalized content and ads. Some third parties require your consent to collect data to serve you personalized content and ads.
diff --git a/src/components/popup/intro/intro.less b/src/components/popup/intro/intro.less index 7ddac2f5..c8eb991b 100644 --- a/src/components/popup/intro/intro.less +++ b/src/components/popup/intro/intro.less @@ -1,134 +1,147 @@ @import '../../../style/variables.less'; div.intro { + display: block; + padding: 0 6%; + max-height: 100%; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -moz-font-smoothing: grayscale; + + @media @mobile { display: block; - padding: 0 6%; - max-height: 100%; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -moz-font-smoothing: grayscale; + padding: 0; + } - @media @mobile { - display: block; - padding: 0; - } + .portalLogo { + display: block; + } - .portalLogo { - display: block; - } + .owner { + font-size: 1.1em; + background-repeat: no-repeat; + background-position-y: center; + align-items: center; + display: none; + } - .owner { - font-size: 1.1em; - background-repeat: no-repeat; - background-position-y: center; - align-items: center; - display: none; + .title { + font-weight: bold; + font-size: 30px; + text-align: left; + + @media @mobile { + font-size: 18px; + line-height: 26px; + padding: 20px 4% 0 } + } - .title { - font-weight: bold; - font-size: 30px; - text-align: left; + .mainTitle { + font-weight: bold; + font-size: 30px; + text-align: left; + line-height: 33px; - @media @mobile { - font-size: 18px; - line-height: 26px; - padding: 20px 4% 0 - } + @media @mobile { + font-size: 18px; + line-height: 26px; + padding: 20px 4% 0 } + } + + .description { + margin: 4% 0; + font-family: Helvetica Neue, Arial, sans-serif; + height: 320px; + overflow: auto; + font-size: 12px; + line-height: 1; + text-align: left; + -webkit-overflow-scrolling: touch; - .description { - margin: 4% 0; - font-family: Helvetica Neue, Arial, sans-serif; - height: 320px; - overflow: auto; - font-size: 12px; - line-height: 1; - text-align: left; - -webkit-overflow-scrolling: touch; - - @media @tablet { - margin: 2% 0; - } + @media @tablet { + margin: 2% 0; } + } + + .options { + display: flex; + flex-shrink: 0; + width: 100%; + padding-bottom: 10px; - .options { - display: flex; - flex-shrink: 0; + @media @mobile { + display: block; + padding: 0 10px; + background: #fff; + + button { width: 100%; - padding-bottom: 10px; - - @media @mobile { - display: block; - padding: 0 10px; - background: #fff; - - button { - width: 100%; - display: block; - margin: 15px 0; - } - } - @media @tablet { - display: flex; - - button { - margin: 5px; - } - } + display: block; + margin: 15px 0; + } } + @media @tablet { + display: flex; - .rejectAll { - flex: 1; - margin-right: 10px; + button { + margin: 5px; + } } + } - .acceptAll { - flex: 1; - } + .rejectAll { + flex: 1; + margin-right: 10px; + } + + .acceptAll { + flex: 1; + } } .intro { - .title { - text-align: left; - } + .title { + text-align: left; + } - .title::before { - content: ""; - display: block; - margin-bottom: 20px; - background-repeat: no-repeat; - } + .title::before { + content: ""; + display: block; + margin-bottom: 20px; + background-repeat: no-repeat; + } - @media @mobile { - padding: 0; - font-size: 13px; - padding-bottom: 50px; - - .description { - height: 40vh; - padding: 0 4%; - text-align: left; - } - - .portalLogo, .owner { - margin: 0 4%; - } + @media @mobile { + padding: 0; + font-size: 13px; + padding-bottom: 50px; + + .description { + height: 40vh; + padding: 0 4%; + text-align: left; } - @media @tablet { - .description { - height: 17vh; - } + .portalLogo, .owner { + margin: 0 4%; } + } + @media @tablet { .description { - -webkit-overflow-scrolling: touch; + height: 17vh; } + } - .closeSection { - width: 100%; - display: flex; - justify-content: flex-end; - } + .description { + -webkit-overflow-scrolling: touch; + } + + .closeSection { + width: 100%; + display: flex; + justify-content: flex-end; + } } From 53eeae10537b35518b751acffdd70e33445c9b5f Mon Sep 17 00:00:00 2001 From: shaniuk Date: Thu, 25 Nov 2021 19:24:26 +0100 Subject: [PATCH 2/3] title class renamed --- src/components/popup/intro/intro.jsx | 2 +- src/components/popup/intro/intro.less | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/popup/intro/intro.jsx b/src/components/popup/intro/intro.jsx index e6990811..f75e3a84 100644 --- a/src/components/popup/intro/intro.jsx +++ b/src/components/popup/intro/intro.jsx @@ -48,7 +48,7 @@ export default class Intro extends Component {
- Thanks for visiting + Thanks for visiting In order to run a successful website, we and certain third parties are setting cookies and accessing and storing information on your device for various purposes. Various third parties are also collecting data to show you personalized content and ads. Some third parties require your consent to collect data to serve you personalized content and ads.
diff --git a/src/components/popup/intro/intro.less b/src/components/popup/intro/intro.less index c8eb991b..9a7d3147 100644 --- a/src/components/popup/intro/intro.less +++ b/src/components/popup/intro/intro.less @@ -37,7 +37,7 @@ div.intro { } } - .mainTitle { + .descriptionTitle { font-weight: bold; font-size: 30px; text-align: left; @@ -46,7 +46,6 @@ div.intro { @media @mobile { font-size: 18px; line-height: 26px; - padding: 20px 4% 0 } } From 001db46de04aeac58b71d9cac1e83c35264a16fa Mon Sep 17 00:00:00 2001 From: shaniuk Date: Thu, 25 Nov 2021 19:44:00 +0100 Subject: [PATCH 3/3] title add margin --- src/components/popup/intro/intro.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/popup/intro/intro.less b/src/components/popup/intro/intro.less index 9a7d3147..ac2f3052 100644 --- a/src/components/popup/intro/intro.less +++ b/src/components/popup/intro/intro.less @@ -42,6 +42,8 @@ div.intro { font-size: 30px; text-align: left; line-height: 33px; + display: block; + margin: 0 0 10px; @media @mobile { font-size: 18px;