Merge pull request #15 from built-on-openfin/web/bugfix/fill-sizing

Resolve layout shrink
built-on-openfin · Sep 17, 2024 · 6c6b45c · 6c6b45c
2 parents 58d5c62 + f5933d9
commit 6c6b45c
Show file tree

Hide file tree

Showing 12 changed files with 110 additions and 50 deletions.
diff --git a/how-to/cloud-interop/public/common/style/app.css b/how-to/cloud-interop/public/common/style/app.css
@@ -17,6 +17,10 @@
 	--brand-success: var(--theme-status-success, #35c759);
 
 	accent-color: var(--brand-primary);
+
+	--header-height: 75px;
+	--body-padding: 20px;
+	--left-panel-width: 300px;
 }
 
 .theme-light {
@@ -36,6 +40,19 @@
 	--brand-success: var(--theme-status-success, #35c759);
 }
 
+.left-panel {
+	width: var(--left-panel-width);
+}
+
+#layout_container {
+	width: calc(100dvw - var(--left-panel-width) - (var(--body-padding) * 2));
+	height: calc(100dvh - var(--header-height) - (var(--body-padding) * 2));
+}
+
+.header {
+	height: var(--header-height);
+}
+
 .primary {
 	color: var(--brand-primary);
 }
@@ -67,14 +84,14 @@ body {
 	justify-content: stretch;
 	align-items: stretch;
 	overflow: hidden;
-	padding: 20px;
+	padding: var(--body-padding);
 	margin: 0;
 	background-color: var(--brand-background);
 	color: var(--brand-text);
 }
 
 body.border {
-	padding: 20px;
+	padding: var(--body-padding);
 	margin: 0;
 	background-color: var(--brand-background);
 	color: var(--brand-text);

diff --git a/how-to/cloud-interop/public/platform/provider.html b/how-to/cloud-interop/public/platform/provider.html
@@ -12,8 +12,8 @@
 		<script defer="defer" src="../js/provider.bundle.js"></script>
 		<link rel="manifest" href="../manifest.json" />
 	</head>
-	<body class="col fill gap20">
-		<header class="row spread middle">
+	<body class="col gap20">
+		<header class="row spread middle header">
 			<div class="col">
 				<h1>Web Interop Example</h1>
 				<h1 class="tag">Demonstrate web interop usage with a layout</h1>
@@ -24,9 +24,9 @@ <h2 class="error" id="error"></h2>
 			</div>
 		</header>
 		<main class="row fill gap10">
-			<div class="row fill hidden" id="main-page">
+			<div class="row hidden gap10" id="main-page">
 				<div class="col"><iframe id="left-panel" class="fill"></iframe></div>
-				<div id="layout_container" class="col fill"></div>
+				<div id="layout_container"></div>
 			</div>
 			<div class="col fill" id="cloud-details">
 				<div class="row fill gap20">

diff --git a/how-to/web-interop-support-context-and-intents/client/src/platform/layout/layout-override.ts b/how-to/web-interop-support-context-and-intents/client/src/platform/layout/layout-override.ts
@@ -218,7 +218,7 @@ export function makeOverride(
 				// Create a new div container for the layout.
 				const container = document.createElement("div");
 				container.id = layoutName;
-				container.className = "col layout-container workspace-container hidden";
+				container.className = "col layout-container hidden";
 				this._layoutContainer?.append(container);
 				await fin.Platform.Layout.create({ layoutName, layout, container });
 				if (entry === length) {

diff --git a/how-to/web-interop-support-context-and-intents/public/common/style/app.css b/how-to/web-interop-support-context-and-intents/public/common/style/app.css
@@ -19,6 +19,7 @@
 	accent-color: var(--brand-primary);
 
 	--header-height: 60px;
+	--body-padding: 20px;
 }
 
 .theme-light {
@@ -38,6 +39,14 @@
 	--brand-success: var(--theme-status-success, #35c759);
 }
 
+.layout-container {
+	height: calc(100dvh - var(--header-height) - (var(--body-padding) * 2));
+}
+
+.header {
+	height: var(--header-height);
+}
+
 .primary {
 	color: var(--brand-primary);
 }
@@ -69,14 +78,14 @@ body {
 	justify-content: stretch;
 	align-items: stretch;
 	overflow: hidden;
-	padding: 20px;
+	padding: var(--body-padding);
 	margin: 0;
 	background-color: var(--brand-background);
 	color: var(--brand-text);
 }
 
 body.border {
-	padding: 20px;
+	padding: var(--body-padding);
 	margin: 0;
 	background-color: var(--brand-background);
 	color: var(--brand-text);

diff --git a/how-to/web-interop-support-context-and-intents/public/platform/provider.html b/how-to/web-interop-support-context-and-intents/public/platform/provider.html
@@ -13,7 +13,7 @@
 		<script type="module" src="../common/lib/wc-fin/wc-fin.esm.js"></script>
 		<link rel="manifest" href="../manifest.json" />
 	</head>
-	<body class="col width-viewport height-viewport">
+	<body class="col gap20">
 		<header class="row spread middle header">
 			<div class="col">
 				<h1 id="title">OpenFin - Support Context & Intents</h1>
@@ -43,6 +43,8 @@ <h1 id="subTitle" class="tag">
 				<img id="logo" src="../common/images/icon-blue.png" alt="OpenFin" height="40px" />
 			</div>
 		</header>
-		<main id="layout_container" class="col workspace-container"></main>
+		<main id="main-page">
+			<div id="layout_container"></div>
+		</main>
 	</body>
 </html>
diff --git a/how-to/web-interop/public/common/style/app.css b/how-to/web-interop/public/common/style/app.css
@@ -17,6 +17,10 @@
 	--brand-success: var(--theme-status-success, #35c759);
 
 	accent-color: var(--brand-primary);
+
+	--header-height: 60px;
+	--body-padding: 20px;
+	--left-panel-width: 300px;
 }
 
 .theme-light {
@@ -36,6 +40,19 @@
 	--brand-success: var(--theme-status-success, #35c759);
 }
 
+.left-panel {
+	width: var(--left-panel-width);
+}
+
+#layout_container {
+	width: calc(100dvw - var(--left-panel-width) - (var(--body-padding) * 2));
+	height: calc(100dvh - var(--header-height) - (var(--body-padding) * 2));
+}
+
+.header {
+	height: var(--header-height);
+}
+
 .primary {
 	color: var(--brand-primary);
 }
@@ -67,14 +84,14 @@ body {
 	justify-content: stretch;
 	align-items: stretch;
 	overflow: hidden;
-	padding: 20px;
+	padding: var(--body-padding);
 	margin: 0;
 	background-color: var(--brand-background);
 	color: var(--brand-text);
 }
 
 body.border {
-	padding: 20px;
+	padding: var(--body-padding);
 	margin: 0;
 	background-color: var(--brand-background);
 	color: var(--brand-text);

diff --git a/how-to/web-interop/public/platform/provider.html b/how-to/web-interop/public/platform/provider.html
@@ -12,8 +12,8 @@
 		<script defer="defer" src="../js/provider.bundle.js"></script>
 		<link rel="manifest" href="../manifest.json" />
 	</head>
-	<body class="col fill gap20">
-		<header class="row spread middle">
+	<body class="col gap20">
+		<header class="row spread middle header">
 			<div class="col">
 				<h1>Web Interop Example</h1>
 				<h1 class="tag">Demonstrate web interop usage with a layout</h1>
@@ -22,11 +22,9 @@ <h1 class="tag">Demonstrate web interop usage with a layout</h1>
 				<image src="../common/images/icon-blue.png" alt="OpenFin" height="40px"></image>
 			</div>
 		</header>
-		<main class="row fill gap10">
-			<div class="row fill" id="main-page">
-				<div class="col"><iframe id="left-panel" class="fill"></iframe></div>
-				<div id="layout_container" class="col fill"></div>
-			</div>
+		<main class="row gap10" id="main-page">
+			<div class="col left-panel"><iframe id="left-panel" class="fill"></iframe></div>
+			<div id="layout_container"></div>
 		</main>
 	</body>
 </html>
diff --git a/how-to/web-layout-basic/public/common/style/app.css b/how-to/web-layout-basic/public/common/style/app.css
@@ -17,6 +17,9 @@
 	--brand-success: var(--theme-status-success, #35c759);
 
 	accent-color: var(--brand-primary);
+
+	--header-height: 60px;
+	--body-padding: 20px;
 }
 
 .theme-light {
@@ -36,6 +39,14 @@
 	--brand-success: var(--theme-status-success, #35c759);
 }
 
+#layout_container {
+	height: calc(100dvh - var(--header-height) - (var(--body-padding) * 2));
+}
+
+.header {
+	height: var(--header-height);
+}
+
 .primary {
 	color: var(--brand-primary);
 }
@@ -67,14 +78,14 @@ body {
 	justify-content: stretch;
 	align-items: stretch;
 	overflow: hidden;
-	padding: 20px;
+	padding: var(--body-padding);
 	margin: 0;
 	background-color: var(--brand-background);
 	color: var(--brand-text);
 }
 
 body.border {
-	padding: 20px;
+	padding: var(--body-padding);
 	margin: 0;
 	background-color: var(--brand-background);
 	color: var(--brand-text);

diff --git a/how-to/web-layout-basic/public/platform/provider.html b/how-to/web-layout-basic/public/platform/provider.html
@@ -12,8 +12,8 @@
 		<script defer="defer" src="../js/provider.bundle.js"></script>
 		<link rel="manifest" href="../manifest.json" />
 	</head>
-	<body class="col fill gap20">
-		<header class="row spread middle">
+	<body class="col gap20">
+		<header class="row spread middle header">
 			<div class="col">
 				<h1>Web Layout Basic Example</h1>
 				<h1 class="tag">Demonstrate a very basic layout with generic content</h1>
@@ -22,10 +22,8 @@ <h1 class="tag">Demonstrate a very basic layout with generic content</h1>
 				<image src="../common/images/icon-blue.png" alt="OpenFin" height="40px"></image>
 			</div>
 		</header>
-		<main class="row fill gap10">
-			<div class="row fill" id="main-page">
-				<div id="layout_container" class="col fill"></div>
-			</div>
+		<main id="main-page">
+			<div id="layout_container"></div>
 		</main>
 	</body>
 </html>
diff --git a/how-to/web-layout/client/src/provider.ts b/how-to/web-layout/client/src/provider.ts
@@ -181,7 +181,7 @@ async function createLayout(
 	// Create a new div container for the layout.
 	const container = document.createElement("div");
 	container.id = layoutName;
-	container.className = "col fill";
+	container.className = "col layout-container";
 	container.style.display = order === 0 ? "block" : "none";
 	PARENT_CONTAINER?.append(container);
 

diff --git a/how-to/web-layout/public/common/style/app.css b/how-to/web-layout/public/common/style/app.css
@@ -17,6 +17,11 @@
 	--brand-success: var(--theme-status-success, #35c759);
 
 	accent-color: var(--brand-primary);
+
+	--header-height: 60px;
+	--left-panel-width: 300px;
+	--tab-height: 30px;
+	--body-padding: 20px;
 }
 
 .theme-light {
@@ -36,6 +41,19 @@
 	--brand-success: var(--theme-status-success, #35c759);
 }
 
+.left-panel {
+	width: var(--left-panel-width);
+}
+
+.layout-container {
+	height: calc(100dvh - var(--header-height) - (var(--body-padding) * 2) - var(--tab-height));
+	width: calc(100dvw - var(--left-panel-width) - (var(--body-padding) * 2));
+}
+
+.header {
+	height: var(--header-height);
+}
+
 .primary {
 	color: var(--brand-primary);
 }
@@ -67,15 +85,15 @@ body {
 	justify-content: stretch;
 	align-items: stretch;
 	overflow: hidden;
-	padding: 20px;
+	padding: var(--body-padding);
 	margin: 0;
 	background-color: var(--brand-background);
 	color: var(--brand-text);
 	width: 100%;
 }
 
 body.border {
-	padding: 20px;
+	padding: var(--body-padding);
 	margin: 0;
 	background-color: var(--brand-background);
 	color: var(--brand-text);
@@ -975,11 +993,3 @@ td,
 	color: var(--brand-text-secondary);
 	cursor: pointer;
 }
-
-.main-container {
-	display: flex;
-	justify-content: stretch;
-	align-items: stretch;
-	height: 100%;
-	width: 100%;
-}
diff --git a/how-to/web-layout/public/platform/provider.html b/how-to/web-layout/public/platform/provider.html
@@ -12,8 +12,8 @@
 		<script defer="defer" src="../js/provider.bundle.js"></script>
 		<link rel="manifest" href="../manifest.json" />
 	</head>
-	<body class="col fill gap20">
-		<header class="row spread middle">
+	<body class="col gap20">
+		<header class="row spread middle header">
 			<div class="col">
 				<h1>Web Multiple Layout Example</h1>
 				<h1 class="tag">Demonstrate web interop usage with multiple layouts</h1>
@@ -23,15 +23,13 @@ <h1 class="tag">Demonstrate web interop usage with multiple layouts</h1>
 				<image src="../common/images/icon-blue.png" alt="OpenFin" height="40px"></image>
 			</div>
 		</header>
-		<main class="row fill gap10">
-			<div class="row fill gap10" id="main-page">
-				<div class="col hidden" id="left-panel-container">
-					<iframe id="left-panel" class="fill"></iframe>
-				</div>
-				<div class="col fill_3" id="right-container">
-					<div class="tabs-row row tabs" id="tabs"></div>
-					<div id="layout_container" class="main-container"></div>
-				</div>
+		<main class="row gap10" id="main-page">
+			<div class="col hidden left-panel" id="left-panel-container">
+				<iframe id="left-panel" class="fill"></iframe>
+			</div>
+			<div class="col" id="right-container">
+				<div class="tabs-row row tabs" id="tabs"></div>
+				<div id="layout_container" class="main-container"></div>
 			</div>
 		</main>
 	</body>