Code improvements: added a way to add html var (properties)

web/src/_templates/app/js.php

@@ -22,4 +22,7 @@ var app = {
 		collapse_text_size: 80,
 	},
 };
+var cssprops = {
+	meet_max_width: '40em',
+};
 </script>

web/src/app/app.php

@@ -16,16 +16,13 @@ $actor = $database->getActorByUsername($user->username);
 	'actor' => $actor,
 ]) ?>
 
-<?php
-$width = '40em';
-?>
 <div id="page-meet" style="display:none"
 	class="flex overlay height-mobile">
 	<div class="center size-max"
-		style="max-width: <?php echo $width ?>">
+		style="max-width: var(--meet_max_width)">
 		<div id="content" class="size-max"></div>
 		<div id="actions" class="absolute-bottom width-max"
-			style="max-width: <?php echo $width ?>"></div>
+			style="max-width: var(--meet_max_width)"></div>
 	</div>
 </div>
 

web/src/app/css/app.css

@@ -106,7 +106,7 @@ main {
 }
 
 .meet.item {
-	max-width: 40em;
+	max-width: var(--meet_max_width);
 }
 .meet.item .back-avatar {
 	display: grid;
@@ -135,7 +135,10 @@ main {
 	position: relative;
 	top: 3px;
 }
-.meet.item .status { color: #fff }
+.meet.item .status {
+	color: #fff;
+	max-width: var(--meet_max_width);
+}
 .meet.item .status-content {
 	box-shadow: 0px 2px 1px #0000008c;
 	margin-bottom: 1em;
@@ -145,6 +148,7 @@ main {
 	display: flex;
 	top: 0;
 	height: 100%;
+	width: var(--meet_max_width);
 	z-index: 10;
 }
 .meet.item .status-content.full .text { margin: auto !important }

web/src/app/js/base.js

@@ -253,3 +253,14 @@ function calcHeightMobile() {
 }
 window.addEventListener('load', function(e) { calcHeightMobile() });
 window.addEventListener('resize', function(e) { calcHeightMobile() });
+(function() {
+	if (window.cssprops !== undefined) {
+		const keys = Object.keys(window.cssprops);
+		for (var i in keys) {
+			const k = keys[i];
+			document.querySelector(':root').style
+				.setProperty('--'+k, window.cssprops[k]);
+		}
+		window.cssprops = undefined;
+	}
+})();

web/src/app/js/templates/meet/item.html

@@ -12,7 +12,7 @@
 		</div>
 		<div style="height: 40%">
 		<div class="status absolute-bottom width-max"
-			style="margin-bottom: {actionsHeight}; max-width: 40em">
+			style="margin-bottom: {actionsHeight}">
 			<div class="flex width-max">
 				<div class="absolute width-max">
 					<div class="date">