nobigtech
/
fedilove
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Code improvements using css properties

This commit is contained in:
Niko 2022-02-20 04:07:59 +01:00
parent 1bc1ac3a34
commit 95adab3ad4
5 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/_templates/app/js.php
View File

@ -24,5 +24,6 @@ var app = {
}; };
var cssprops = { var cssprops = {
meet_max_width: '40em', meet_max_width: '40em',
meet_actions_height: '6em',
}; };
</script> </script>

3
web/src/app/app.php
View File

@ -21,8 +21,7 @@ $actor = $database->getActorByUsername($user->username);
<div class="center size-max" <div class="center size-max"
style="max-width: var(--meet_max_width)"> style="max-width: var(--meet_max_width)">
<div id="content" class="size-max"></div> <div id="content" class="size-max"></div>
<div id="actions" class="absolute-bottom width-max" <div id="actions" class="absolute-bottom width-max"></div>
style="max-width: var(--meet_max_width)"></div>
</div> </div>
</div> </div>

5
web/src/app/css/app.css
View File

@ -80,6 +80,10 @@ main {
background: #000; background: #000;
} }
#page-meet #actions {
height: var(--meet_actions_height);
max-width: var(--meet_max_width);
}
#page-meet #actions .button.light .fa { #page-meet #actions .button.light .fa {
color: #fff; color: #fff;
} }
@ -138,6 +142,7 @@ main {
.meet.item .status { .meet.item .status {
color: #fff; color: #fff;
max-width: var(--meet_max_width); max-width: var(--meet_max_width);
margin-bottom: var(--meet_actions_height);
} }
.meet.item .status-content { .meet.item .status-content {
box-shadow: 0px 2px 1px #0000008c; box-shadow: 0px 2px 1px #0000008c;

2
web/src/app/js/pages/meet.js
View File

@ -75,7 +75,6 @@ app.pages.meet = {
if (item.props.pcolors.bg !== undefined) if (item.props.pcolors.bg !== undefined)
postBgColor = item.props.pcolors.bg; postBgColor = item.props.pcolors.bg;
tpl = tpl.replaceAll('{actionsHeight}', '6em');
tpl = tpl.replaceAll('{postFgColor}', htmlescape(postFgColor)); tpl = tpl.replaceAll('{postFgColor}', htmlescape(postFgColor));
tpl = tpl.replaceAll('{postBgColor}', htmlescape(postBgColor)); tpl = tpl.replaceAll('{postBgColor}', htmlescape(postBgColor));
dom.innerHTML += tpl; dom.innerHTML += tpl;
@ -116,7 +115,6 @@ app.pages.meet = {
_ = function () { _ = function () {
const dom = document.querySelector('#page-meet #actions'); const dom = document.querySelector('#page-meet #actions');
dom.innerHTML = ''; dom.innerHTML = '';
dom.style.height = '6em';
var tpl = app.template.fill({}, app.template.get('meet.actions')); var tpl = app.template.fill({}, app.template.get('meet.actions'));
dom.innerHTML += tpl; dom.innerHTML += tpl;
}; _(); }; _();

3
web/src/app/js/templates/meet/item.html
View File

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