{!displayLayer1 ?
Loading :
}
diff --git a/src/s1/components/banner/bannerVendors.jsx b/src/s1/components/banner/bannerVendors.jsx
index 86ffb5ff..965c9205 100644
--- a/src/s1/components/banner/bannerVendors.jsx
+++ b/src/s1/components/banner/bannerVendors.jsx
@@ -11,6 +11,8 @@ class LocalLabel extends Label {
static defaultProps = {
prefix: 'layer3Vendors',
isShowing: false,
+ maxHeightModal: 0, // starting modalHeight
+ onMaxHeightChange: () => {},
};
}
@@ -19,6 +21,15 @@ export default class BannerVendors extends Component {
super(props);
}
+ componentDidMount() {
+ const { store, onMaxHeightChange } = this.props;
+ const { theme } = store;
+ const { maxHeightModal: maxHeightModalTheme } = theme;
+ setTimeout(() => {
+ onMaxHeightChange(maxHeightModalTheme);
+ }, 1);
+ }
+
handleBack = () => {
const { store } = this.props;
const {
@@ -65,7 +76,7 @@ export default class BannerVendors extends Component {
};
render(props) {
- const { isShowing, store } = props;
+ const { isShowing, store, maxHeightModal } = props;
const {
config: { theme },
isSaveShowing,
@@ -75,7 +86,7 @@ export default class BannerVendors extends Component {
const {
isBannerModal,
isBannerInline,
- maxHeightModal,
+ // maxHeightModal,
primaryColor,
primaryTextColor,
backgroundColor,
diff --git a/src/s1/components/banner/purposeList.less b/src/s1/components/banner/purposeList.less
index 0b3a0d60..4891ca69 100644
--- a/src/s1/components/banner/purposeList.less
+++ b/src/s1/components/banner/purposeList.less
@@ -1,7 +1,7 @@
@import '../../../style/variables.less';
.purposeList {
- margin: 0;
+ margin-top: 20px;
padding: 0;
display: flex;
flex-wrap: wrap;
@@ -43,6 +43,10 @@
.itemPurpose {
padding: 0;
+
+ @media @smartphone {
+ font-size: 12px;
+ }
}
.itemInteractive {
@@ -67,6 +71,7 @@
.itemInteractiveAnchor {
display: flex;
+ margin-right: 5px;
span {
flex: 1;
@@ -99,7 +104,7 @@
fill: @color-linkColor;
@media @smartphone {
- top: -2px;
+ top: -1px;
}
}
@@ -110,7 +115,7 @@
.privacyPolicy {
svg {
- top: -2px;
+ top: -1px;
}
}
@@ -142,6 +147,7 @@
ul {
margin: 0;
+ padding-left: 20px;
}
p {
diff --git a/src/s1/lib/config.js b/src/s1/lib/config.js
index 65581d0f..e5b2a1be 100644
--- a/src/s1/lib/config.js
+++ b/src/s1/lib/config.js
@@ -15,7 +15,8 @@ export const theme = {
boxShadow: 'none',
secondaryColor: '#869cc0',
featuresColor: '#d0d3d7',
- maxHeightModal: '50vh',
+ shouldAutoResizeModal: false,
+ maxHeightModal: '40vh',
};
export const config = {
diff --git a/src/s1/reference/tcf-2.0.html b/src/s1/reference/tcf-2.0.html
index 4058f4ce..88b03599 100644
--- a/src/s1/reference/tcf-2.0.html
+++ b/src/s1/reference/tcf-2.0.html
@@ -128,6 +128,10 @@
TCFString
>System1 CMP Github
+
+ Autoresize:
+
@@ -143,6 +147,7 @@
TCFString
const domTcfString = document.querySelector('#domTcfString');
const selectLanguage = document.querySelector('#selectLanguage');
const selectVendors = document.querySelector('#selectVendors');
+ const domShouldAutoResize = document.querySelector('#domShouldAutoResize');
const setupQaTools = function (store) {
const LANGUAGES = store.LANGUAGES;
@@ -161,9 +166,14 @@
TCFString
domTcfString.value = (store.tcData && store.tcData.tcString) || 'N/A';
};
+ const shouldAutoResize = function () {
+ return window.location.search.indexOf('resize') >= 0 ? true : false;
+ };
+
const config = {
theme: {
- maxHeightModal: '60vh',
+ shouldAutoResizeModal: shouldAutoResize(),
+ maxHeightModal: '40vh',
},
business: 'reference',
gdprApplies: true,
@@ -177,7 +187,7 @@
TCFString
// polyfillSrc: './polyfills.js',
publisherCountryCode: 'US',
language: 'en', // default
- narrowedVendors: [1, 2, 3, 4, 5, 6],
+ // narrowedVendors: [1, 2, 3, 4, 5, 6],
};
__tcfapi('addEventListener', 2, function (tcData, success) {
@@ -221,6 +231,11 @@
TCFString
selectLanguage.value
);
});
+
+ domShouldAutoResize.checked = shouldAutoResize();
+ domShouldAutoResize.addEventListener('change', function () {
+ window.location.search = domShouldAutoResize.checked ? '?resize=true' : '';
+ });