Added meet.item_actions for adding context-based actions in page #meet

web/src/_templates/buttons/menu.php

@@ -15,7 +15,6 @@ if ($id !== false)
 	<?php endif ?>
 	<?php if (isset($href)): ?>
 	href="<?php echo $href ?>"
-	style="text-decoration: none; color: initial;"
 	<?php endif ?>
 	>
 

web/src/app/app.php

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

web/src/app/css/app.css

@@ -21,12 +21,23 @@ img.avatar {
 	width: 2.6em;
 }
 
+a.button {
+	text-decoration: none;
+	color: initial;
+}
 header .component.button .fa {
 	font-size: 1.3em;
 }
 .component.button span {
 	margin: auto;
 }
+.button.light:hover {
+	background: #ffffff17 !important;
+}
+.button.light:active,
+.button.light:focus {
+	background: #ffffff4f !important;
+}
 
 main {
 	margin: .8em .4em;
@@ -69,6 +80,13 @@ main {
 	background: #000;
 }
 
+#page-meet #content {
+	overflow: auto;
+}
+#page-meet #actions .button.light .fa {
+	color: #fff;
+}
+
 .meet.item {
 	max-width: 40em;
 	margin-bottom: 1em;
@@ -90,8 +108,6 @@ main {
 }
 .meet.item .status {
 	padding: 1em;
-	position: fixed;
-	bottom: 0;
 	color: #fff;
 }
 .item .acct {

web/src/app/css/base.css

@@ -11,6 +11,10 @@ body {
 
 .width-max { width: 100% }
 .height-max { height: 100% }
+.size-max {
+	width: 100%;
+	height: 100%;
+}
 
 .fixed-top { position: fixed; top: 0 }
 .fixed-bottom { position: fixed; bottom: 0 }

web/src/app/js/pages/meet.js

@@ -2,14 +2,16 @@ app.pages.meet = {
 	load: function(args) {
 		http.get('/api/v1/feed/meet', {}, function(json) {
 			if (json === undefined) return;
-			app.template.load('meet.item', function(TPL) {
+			app.template.loadMany(['meet.item','meet.item_actions'], function(_) {
 				document.querySelector('#page-meet').removeAttribute('style');
+				var _;
+				_ = function () {
 					const dom = document.querySelector('#page-meet #content');
 					dom.innerHTML = '';
 					for (var i = 0; i < json.length; i++) {
-					var tpl = app.template.fill(json[i], TPL, function (k,v) {
-						if (k === 'account.name')
-							return capitalize(v);
+						var tpl = app.template.fill(json[i], app.template.get('meet.item'),
+						function (k,v) {
+							if (k === 'account.name') return capitalize(v);
 						});
 						var item = json[i];
 						var icon = app.vars.default_icon;
@@ -17,9 +19,25 @@ app.pages.meet = {
 							item.account.avatar.length > 0)
 							icon = item.account.avatar[0].url[0];
 						tpl = tpl.replaceAll('{avatar}', htmlescape(icon));
+						tpl = tpl.replaceAll('{actionsHeight}', '6em');
 						dom.innerHTML += tpl;
 					}
+				}; _();
+				_ = function () {
+					const dom = document.querySelector('#page-meet #actions');
+					dom.innerHTML = '';
+					dom.style.height = '6em';
+					var tpl = app.template.get('meet.item_actions');
+					dom.innerHTML += tpl;
+				}; _();
+
+				// TODO: just for testing
+				document.querySelectorAll('.meet.item')[2].style.display = 'inherit';
 			});
 		});
 	},
+	exit: function() {
+		window.location.href = '#';
+		app.overlay.hideAll();
+	},
 };

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

@@ -3,10 +3,12 @@
 	<div class="absolute-top width-max height-max black"></div>
 	<div class="absolute-top width-max height-max content">
 		<div class="flex">
-			<img class="center" src="{avatar}"/>
+			<img class="center" style="max-width: 20em"
+				src="{avatar}"/>
 		</div>
 		<div>
-		<div class="status">
+		<div class="status fixed-bottom"
+			style="bottom: {actionsHeight}">
 			<p class="status-content">{.text}</p>
 			<div class="profile flex">
 				<div class="user">

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

@@ -0,0 +1,10 @@
+<div class="height-max flex">
+	<div class="flex center">
+		<a class="component icon button light round" title="{s:alt_nav-close}"
+			href="javascript:app.pages.meet.exit()">
+			<div class="flex" style="min-width: 3em; min-height: 3em">
+				<i class="center fa fa-close fa-fw"></i>
+			</div>
+		</a>
+	</div>
+</div>