feat (stacks: autoresize) configurable flag to autoresize to push purposes below fold / tighten styles to reduce required size (#46)

* feat (stacks: autoresize) configurable flag to autoresize to push purposes below fold / tighten styles to reduce required size

* add to reference page

Author: potench

CHANGELOG.md

@@ -1,3 +1,12 @@
+## [2.0.4](https://github.com/openmail/system1-cmp/compare/v2.0.3...v2.0.4) (2020-09-17)
+
+### Styling
+
+- [x] Downsize fonts and spacing mobile
+- [x] Downsize spacing desktop
+- [x] Add scroll bar
+- [x] Auto-position CMP vertically based on purposes
+
 ## [2.0.3](https://github.com/openmail/system1-cmp/compare/v2.0.2...v2.0.3) (2020-09-15)
 
 ### Fix

README.md

@@ -9,7 +9,6 @@ TCF 2.0 Consent Management Platform (CMP) UI tool. We are in the process of vali
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-
 - [Installation / Use](#installation--use)
 - [API](#api)
   - [Customized API](#customized-api)
@@ -64,6 +63,8 @@ API signatures have changed from the CMP TCF 1.1, but we've tried to keep the co
 				boxShadow: 'none',
 				secondaryColor: '#869cc0',
 				featuresColor: '#d0d3d7',
+				shouldAutoResizeModal: true, // resizes modal on stacks screen to push stacks below fold
+				maxHeightModal: '40vh',
 			},
 			ccpaApplies: true,
 			gdprApplies: true,
@@ -175,6 +176,7 @@ Set configuration for your CMP during the `init` phase.
 __tcfapi('init', 2, () => {}, {
 	theme: {
 		maxHeightModal: '50vh',
+		shouldAutoResizeModal: true,
 		primaryColor: '#0099ff',
 	},
 	canLog: true, // pixel logging for monitoring and alerting
@@ -210,6 +212,8 @@ Override styling choices using the following properties:
 - `textLinkColor`: '#0099ff'
 - `secondaryColor`: '#869cc0'
 - `featuresColor`: '#d0d3d7'
+- `maxHeightModal`: '40vh' // 40vh by default; enforce a maxheight as a %,px,vh
+- `shouldAutoResizeModal`: true // false by default; auto resize modal on stacks screen to push purposes below fold. Works in conjunction with `maxHeightModal`
 
 ## Initialize from URL Param
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "system1-cmp",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"description": "System1 Consent Management Platform for TCF 1.1 GDPR Compliance",
 	"scripts": {
 		"clean": "rimraf ./dist",
@@ -13,10 +13,11 @@
 		"deploy": "yarn clean  && yarn deploy:original && yarn deploy:s1",
 		"build:original": "cross-env NODE_ENV=production webpack --progress --config config/webpack.config.babel.js",
 		"deploy:original": "yarn build:original && yarn upload:original",
-		"upload:original": "cross-var s3-deploy './dist/{*.?(js|html),docs/**}' --cwd './dist' --region us-west-2 --bucket s1-layout-cdn/cmp --gzip --cache 1440 --distId E5JQ1CRXXPTKM --invalidate '/cmp/*.js /cmp/* /cmp/docs/*'",
+		"upload:original": "cross-var s3-deploy './dist/{*.?(js|html),docs/**}' --cwd './dist' --region us-west-2 --bucket s1-layout-cdn/cmp --gzip html,js,css,json --cache 1440 --distId E5JQ1CRXXPTKM --invalidate '/cmp/*.js /cmp/* /cmp/docs/*'",
 		"build:s1": "cross-env NODE_ENV=production webpack --progress --config config/s1.webpack.config.babel.js",
 		"deploy:s1": "yarn build:s1 && yarn upload:s1",
-		"upload:s1": "cross-var s3-deploy './dist/$npm_package_version/**' --cwd './dist/$npm_package_version' --region us-west-2 --bucket s1-layout-cdn/cmp/$npm_package_version --gzip --preventUpdates --immutable",
+		"upload:s1": "cross-var s3-deploy './dist/$npm_package_version/**' --cwd './dist/$npm_package_version' --region us-west-2 --bucket s1-layout-cdn/cmp/$npm_package_version --gzip html,js,css,json --preventUpdates --cache 604800 --distId E5JQ1CRXXPTKM --invalidate '/cmp/$npm_package_version/*",
+		"upload:s1:again": "cross-var s3-deploy './dist/$npm_package_version/**' --cwd './dist/$npm_package_version' --region us-west-2 --bucket s1-layout-cdn/cmp/$npm_package_version --gzip html,js,css,json --cache 604800 --distId E5JQ1CRXXPTKM --invalidate '/cmp/$npm_package_version/*'",
 		"deploy:test": "yarn build:s1 && yarn upload:test",
 		"upload:test": "cross-var s3-deploy './dist/$npm_package_version/**' --cwd './dist/$npm_package_version' --region us-west-2 --bucket s1-layout-cdn/cmp/test --gzip --cache 1440 --distId E5JQ1CRXXPTKM --invalidate '/cmp/test/* /cmp/test/*.html'",
 		"prebuild": "npm run clean && mkdirp dist",
@@ -115,6 +116,7 @@
 		"handlebars-loader": "^1.7.1",
 		"js-beautify": "^1.7.5",
 		"lodash": "^4.17.11",
+		"lodash.debounce": "^4.0.8",
 		"no-case": "^3.0.3",
 		"preact": "^8.4.2",
 		"preact-compat": "^3.18.4",

src/s1/components/app.jsx

@@ -13,6 +13,17 @@ export default class App extends Component {
 	state = {
 		store: this.props.store,
 		shouldShowModal: false,
+		maxHeightModal: 0,
+	};
+
+	handleMaxHeightChange = (newMaxHeightModal) => {
+		const { maxHeightModal } = this.state;
+		if (typeof maxHeightModal !== 'string') {
+			// once we switch to %/vh based max-height, keep it
+			this.setState({
+				maxHeightModal: newMaxHeightModal,
+			});
+		}
 	};
 
 	updateState(store) {
@@ -25,6 +36,13 @@ export default class App extends Component {
 
 	componentDidMount() {
 		const { store } = this.props;
+		const {
+			config: { theme },
+		} = store;
+		const { shouldAutoResizeModal, maxHeightModal } = theme;
+		if (!shouldAutoResizeModal) {
+			this.handleMaxHeightChange(maxHeightModal);
+		}
 		store.subscribe(this.updateState.bind(this));
 		setTimeout(this.componentDidUpdate.bind(this), 100); // delay reveal on first load
 	}
@@ -42,23 +60,38 @@ export default class App extends Component {
 	}
 
 	render(props, state) {
-		const { store, shouldShowModal } = state;
+		const { store, shouldShowModal, maxHeightModal } = state;
 		const { tcModel } = store;
 		const { consentScreen } = tcModel;
 
 		return (
 			<div class={style.gdpr}>
 				{!consentScreen ||
 					(consentScreen === CONSENT_SCREENS.STACKS_LAYER1 && (
-						<BannerStacks store={store} isShowing={shouldShowModal && tcModel} />
+						<BannerStacks
+							store={store}
+							isShowing={shouldShowModal && tcModel}
+							maxHeightModal={maxHeightModal}
+							onMaxHeightChange={this.handleMaxHeightChange}
+						/>
 					))}
 
 				{consentScreen === CONSENT_SCREENS.PURPOSES_LAYER2 && (
-					<BannerPurposes store={store} isShowing={shouldShowModal && tcModel} />
+					<BannerPurposes
+						store={store}
+						isShowing={shouldShowModal && tcModel}
+						maxHeightModal={maxHeightModal}
+						onMaxHeightChange={this.handleMaxHeightChange}
+					/>
 				)}
 
 				{consentScreen === CONSENT_SCREENS.VENDORS_LAYER3 && (
-					<BannerVendors store={store} isShowing={shouldShowModal && tcModel} />
+					<BannerVendors
+						store={store}
+						isShowing={shouldShowModal && tcModel}
+						maxHeightModal={maxHeightModal}
+						onMaxHeightChange={this.handleMaxHeightChange}
+					/>
 				)}
 			</div>
 		);

src/s1/components/app.less

@@ -25,17 +25,42 @@
 		margin: 0;
 	}
 
-	input:not([type]), input[type="text"], input[type="password"] {
+	input:not([type]),
+	input[type='text'],
+	input[type='password'] {
 		box-sizing: border-box;
 		box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05) inset;
 		background-color: #fff;
 		border-radius: 4px;
 		border: 1px solid #c5c5c5;
 		color: #333;
-		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+		font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 		font-size: 1em;
 		margin: 0;
 		padding: 0 9px;
 		height: 28px;
 	}
+
+	::-webkit-scrollbar {
+		-webkit-appearance: none;
+	}
+
+	::-webkit-scrollbar:vertical {
+		width: 11px;
+	}
+
+	::-webkit-scrollbar:horizontal {
+		height: 11px;
+	}
+
+	::-webkit-scrollbar-thumb {
+		border-radius: 8px;
+		border: 2px solid white; /* should match background, can't be transparent */
+		background-color: rgba(0, 0, 0, 0.5);
+	}
+
+	::-webkit-scrollbar-track {
+		background-color: rgba(0, 0, 0, 0.02);
+		border-radius: 8px;
+	}
 }

src/s1/components/banner/banner.less

@@ -10,12 +10,14 @@
 	right: 0;
 	left: 0;
 	bottom: 0;
+	padding-top: 25px;
+	padding-right: 15px;
+	padding-left: 30px;
 	z-index: 99999;
 	color: @color-textLight;
 	background: white;
 	font-size: 16px;
 	transition: transform 350ms ease-in-out, opacity 350ms linear;
-	padding-right: 10px;
 	box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.12), 0 -2px 2px rgba(0, 0, 0, 0.12), 0 -4px 4px rgba(0, 0, 0, 0.12),
 		0 -8px 8px rgba(0, 0, 0, 0.12), 0 -16px 16px rgba(0, 0, 0, 0.12);
 	border-top-left-radius: 25px;
@@ -80,8 +82,12 @@
 	.content {
 		max-height: 60vh;
 		overflow: auto;
-		padding: 20px 30px;
+		padding-top: 0px;
+		padding-left: 0px;
+		padding-right: 20px;
+		padding-bottom: 0px;
 		-webkit-overflow-scrolling: touch;
+		transition: max-height 350ms ease-in-out;
 
 		@media @smartphone {
 			padding: 0px 5px;
@@ -97,42 +103,47 @@
 
 				@media @smartphone {
 					font-size: 12px;
-					line-height: 20px;
+					line-height: 18px;
 				}
 
 				.title {
 					font-size: 32px;
 					font-weight: bold;
 					color: @color-text;
-					padding: 15px 0;
+					padding: 5px 0;
 					margin-bottom: 10px;
 					line-height: 32px;
 
 					@media @smartphone {
-						font-size: 28px;
-						line-height: 28px;
+						font-size: 22px;
+						line-height: 22px;
 						font-weight: bold;
+						padding: 5px 0;
+						margin-bottom: 5px;
 					}
 				}
 			}
 
 			.consent {
 				flex-basis: 100%;
 				text-align: left;
-				margin-top: 30px;
-				margin-bottom: 30px;
+				margin-top: 20px;
+				padding-bottom: 20px;
+				margin-bottom: 10px;
 				font-size: 20px;
 				display: flex;
 
 				@media @smartphone {
 					display: flex; /* primary flex container */
 					flex-direction: row; /* horizontal alignment of flex items (default value; can be omitted) */
 					align-items: stretch; /* will apply equal heights to flex items (default value; can be omitted) */
-					font-size: 1em;
-					line-height: 1.2em;
+					font-size: 12px;
+					line-height: 12px;
 					text-align: center;
-					margin-top: 20px;
-					margin-bottom: 20px;
+					padding-top: 15px;
+					padding-bottom: 10px;
+					margin-top: 0;
+					margin-bottom: 10px;
 				}
 
 				a {