Added meet.item_actions for adding context-based actions in page #meet
This commit is contained in:
Niko
parent
c048de384b
commit
5833357c12
|
|
@ -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 ?>
|
||||
>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
|
|
|
|||
|
|
@ -2,24 +2,42 @@ 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');
|
||||
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 item = json[i];
|
||||
var icon = app.vars.default_icon;
|
||||
if (item.account.avatar !== undefined &&
|
||||
item.account.avatar.length > 0)
|
||||
icon = item.account.avatar[0].url[0];
|
||||
tpl = tpl.replaceAll('{avatar}', htmlescape(icon));
|
||||
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], 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;
|
||||
if (item.account.avatar !== undefined &&
|
||||
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();
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue