mirror of
https://github.com/matrix-construct/construct
synced 2024-12-25 23:14:13 +01:00
client: Fixes to style; fix bugs.
This commit is contained in:
parent
c8d3550a43
commit
51672cdf2d
5 changed files with 82 additions and 39 deletions
|
@ -25,11 +25,14 @@
|
|||
/* Font size ratios */
|
||||
--fs: (1vw + 0.5625vh) * 0.5625;
|
||||
|
||||
/* Icon size ratios */
|
||||
--fsI: (1vh + 0.5625vw) * 0.5625;
|
||||
|
||||
/* Headers */
|
||||
--fsA: var(--fs) * 2.5;
|
||||
--fsB: var(--fs) * 1.5;
|
||||
--fsC: var(--fs) * 1.25;
|
||||
--fsD: var(--fs) * 1.00;
|
||||
--fsD: var(--fs) * 0.95;
|
||||
--fsE: var(--fs) * 0.80;
|
||||
--fsF: 11px;
|
||||
--fsG: 9px;
|
||||
|
@ -38,12 +41,12 @@
|
|||
--fsP: 15px;
|
||||
|
||||
/* Icons */
|
||||
--fsIA: var(--fs) * 5.0;
|
||||
--fsIB: var(--fs) * 3.25;
|
||||
--fsIC: var(--fs) * 2.75;
|
||||
--fsID: var(--fs) * 2.50;
|
||||
--fsIE: var(--fs) * 1.75;
|
||||
--fsIF: var(--fs) * 1.5;
|
||||
--fsIA: var(--fsI) * 5.0;
|
||||
--fsIB: var(--fsI) * 3.25;
|
||||
--fsIC: var(--fsI) * 2.75;
|
||||
--fsID: var(--fsI) * 2.40;
|
||||
--fsIE: var(--fsI) * 1.75;
|
||||
--fsIF: var(--fsI) * 1.5;
|
||||
|
||||
/* Text shadows */
|
||||
--tsA: 1px 1px #484848;
|
||||
|
@ -2343,6 +2346,7 @@ div.main div.list div.item div.head div.focus:hover.selected
|
|||
justify-content: stretch;
|
||||
margin: 1px 0px 1px 0px;
|
||||
padding: 0px 0px 0px 0px;
|
||||
color: var(--pal-AA);
|
||||
}
|
||||
|
||||
.ircd .room div.event.control div.state div.slots div.slot > h4
|
||||
|
@ -2350,12 +2354,17 @@ div.main div.list div.item div.head div.focus:hover.selected
|
|||
min-width: 22ch;
|
||||
justify-content: flex-end;
|
||||
padding: 1px 5px 1px 1px;
|
||||
color: var(--pal-AE);
|
||||
color: var(--pal-AA);
|
||||
}
|
||||
|
||||
.ircd .room div.event.control div.state div.slots div.slot.active > h4
|
||||
{
|
||||
color: var(--pal-DD);
|
||||
color: var(--pal-AA);
|
||||
}
|
||||
|
||||
.ircd .room div.event.control div.state div.slots div.slot.disabled > h4
|
||||
{
|
||||
color: var(--pal-AE);
|
||||
}
|
||||
|
||||
.ircd .room div.event.control div.state div.slots div.slot input,
|
||||
|
@ -2378,13 +2387,13 @@ div.main div.list div.item div.head div.focus:hover.selected
|
|||
.ircd .room div.event.control div.state div.slots div.slot.empty input
|
||||
{
|
||||
border: 1px solid var(--pal-CE);
|
||||
background-color: var(--pal-AD);
|
||||
background-color: var(--pal-DE);
|
||||
}
|
||||
|
||||
.ircd .room div.event.control div.state div.slots div.slot.disabled input
|
||||
{
|
||||
background-color: var(--pal-AE);
|
||||
border: 0px solid var(--pal-CE);
|
||||
background-color: var(--pal-DE);
|
||||
}
|
||||
|
||||
.ircd .room div.event.control div.state div.slots div.slot .id
|
||||
|
@ -2397,7 +2406,7 @@ div.main div.list div.item div.head div.focus:hover.selected
|
|||
.ircd .room div.event.control div.state div.slots div.slot .sender
|
||||
{
|
||||
font-weight: bold;
|
||||
font-size: calc(var(--fsE));
|
||||
font-size: calc(var(--fsF));
|
||||
}
|
||||
|
||||
.ircd .room div.event.control div.capstan
|
||||
|
@ -2498,6 +2507,7 @@ div.main div.list div.item div.head div.focus:hover.selected
|
|||
flex-shrink: 0;
|
||||
align-items: stretch;
|
||||
align-content: stretch;
|
||||
background-color: var(--pal-AA);
|
||||
}
|
||||
|
||||
.ircd .room form.event.player button
|
||||
|
@ -2758,8 +2768,8 @@ div.main div.list div.item div.head div.focus:hover.selected
|
|||
flex-shrink: 0;
|
||||
flex-flow: column nowrap;
|
||||
align-items: stretch;
|
||||
padding: 0px 0px 5px 0px;
|
||||
margin: 0px 0px 5px 0px;
|
||||
padding: 0px 0px 0px 0px;
|
||||
margin: 0px 0px 0px 0px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
@ -2775,6 +2785,9 @@ div.main div.list div.item div.head div.focus:hover.selected
|
|||
.ircd .room div.members div.list .member .info div.mxid p
|
||||
{
|
||||
font-weight: bold;
|
||||
flex-basis: 100%;
|
||||
letter-spacing: 1px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ircd .room div.members div.list .member div.info div.data
|
||||
|
@ -2791,6 +2804,7 @@ div.main div.list div.item div.head div.focus:hover.selected
|
|||
{
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.ircd .room div.members div.list .member .info div.avatar img
|
||||
|
@ -2808,24 +2822,21 @@ div.main div.list div.item div.head div.focus:hover.selected
|
|||
{
|
||||
flex-flow: column nowrap;
|
||||
align-items: stretch;
|
||||
padding: 0px 5px 0px 5px;
|
||||
padding: 5px 5px 5px 5px;
|
||||
}
|
||||
|
||||
.ircd .room div.members div.list .member div.info div.data div.attrs > div
|
||||
.ircd .room div.members div.list .member div.info div.attrs div.attr
|
||||
{
|
||||
flex-grow: 1;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
flex-flow: column nowrap;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
padding: 0px 0px 0px 0px;
|
||||
padding: 5px 0px 0px 0px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ircd .room div.members div.list .member .info h3
|
||||
{
|
||||
flex-basis: 20%;
|
||||
justify-content: flex-end;
|
||||
margin-right: 8px;
|
||||
justify-content: flex-start;
|
||||
font-size: calc(var(--fsE));
|
||||
font-weight: bold;
|
||||
color: var(--pal-AC);
|
||||
|
@ -2835,6 +2846,7 @@ div.main div.list div.item div.head div.focus:hover.selected
|
|||
|
||||
.ircd .room div.members div.list .member .info p
|
||||
{
|
||||
margin: 5px 5px 5px 5px;
|
||||
font-size: calc(var(--fsD));
|
||||
color: var(--pal-AB);
|
||||
line-break: normal;
|
||||
|
@ -2844,15 +2856,20 @@ div.main div.list div.item div.head div.focus:hover.selected
|
|||
|
||||
.ircd .room div.members div.list .member .info div.event
|
||||
{
|
||||
align-self: flex-end;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 0px 5px 0px 5px;
|
||||
background-color: var(--pal-AA);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ircd .room div.members div.list .member .info div.event p
|
||||
{
|
||||
font-size: calc(var(--fsE));
|
||||
font-family: courier;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ircd .room div.members div.list .member .info div.event p:hover
|
||||
|
@ -2866,8 +2883,8 @@ div.main div.list div.item div.head div.focus:hover.selected
|
|||
flex-flow: column nowrap;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
background-color: var(--pal-AA);
|
||||
padding: 3px 2px 3px 2px;
|
||||
padding: 0px 0px 4px 0px;
|
||||
border-top: 1px solid var(--pal-AD);
|
||||
}
|
||||
|
||||
.ircd .room div.members div.list .member .info .menu .item
|
||||
|
@ -2876,7 +2893,9 @@ div.main div.list div.item div.head div.focus:hover.selected
|
|||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--pal-AD);
|
||||
background-color: var(--pal-AA);
|
||||
margin: 4px 4px 0px 4px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.ircd .room div.members div.list .member .info .menu .item:hover
|
||||
|
@ -3309,6 +3328,7 @@ div.main div.list div.item div.head div.focus:hover.selected
|
|||
{
|
||||
align-self: stretch;
|
||||
font-weight: bold;
|
||||
font-family: NixieOne;
|
||||
padding: 5px 5px 5px 5px;
|
||||
font-size: calc(var(--fsD));
|
||||
color: black;
|
||||
|
@ -3317,6 +3337,7 @@ div.main div.list div.item div.head div.focus:hover.selected
|
|||
.ircd .room .main .event .message .image.zoom .label
|
||||
{
|
||||
background-color: var(--pal-DD);
|
||||
/* justify-content: center; */ /* detracts */ /* (art) */
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -231,8 +231,11 @@ value:
|
|||
{
|
||||
"NAME":
|
||||
{
|
||||
show: (room, member) =>
|
||||
!empty(member.content.displayname),
|
||||
|
||||
value: (room, member) =>
|
||||
member.content.displayname,
|
||||
member.content.displayname? member.content.displayname : "",
|
||||
},
|
||||
|
||||
"POWER":
|
||||
|
@ -246,6 +249,9 @@ value:
|
|||
|
||||
"IDLE":
|
||||
{
|
||||
show: (room, member) =>
|
||||
defined(maybe(() => mc.users[member.user_id].last_active_ago)),
|
||||
|
||||
value: (room, member) =>
|
||||
mc.date.describe.elapsed(mc.users[member.user_id].last_active_ago),
|
||||
},
|
||||
|
|
|
@ -95,21 +95,34 @@ room.scroll.on = function(event)
|
|||
{
|
||||
let e = event.delegateTarget;
|
||||
let pos = this.scroll.at(e);
|
||||
|
||||
let at_top = this.scroll.at.top(e);
|
||||
let at_bottom = this.scroll.at.bottom(e);
|
||||
let pcts = this.scroll.pct(e);
|
||||
//debug.object({pos: pos, at_top: at_top, at_bottom: at_bottom, pcts: pcts}, 3);
|
||||
if(this.control.scroll_pos_last == pos)
|
||||
return;
|
||||
|
||||
let going_up = pos < this.control.scroll_pos_last;
|
||||
let going_down = pos > this.control.scroll_pos_last;
|
||||
|
||||
if(going_up && !at_bottom && this.control.mode == "LIVE")
|
||||
let at_top = this.scroll.at.top(e);
|
||||
let at_bottom = this.scroll.at.bottom(e);
|
||||
let pcts = this.scroll.pct(e);
|
||||
|
||||
/*
|
||||
debug.object(
|
||||
{
|
||||
pos: pos,
|
||||
at_top: at_top,
|
||||
at_bottom: at_bottom,
|
||||
pcts: pcts,
|
||||
going_up: going_up,
|
||||
going_down: going_down
|
||||
}, 3);
|
||||
*/
|
||||
|
||||
if(going_up && !at_bottom && this.control.mode == "LIVE" && pcts.bottom > 0.05)
|
||||
{
|
||||
this.control.mode = "PAST";
|
||||
mc.ng.apply();
|
||||
}
|
||||
else if(at_bottom && this.control.mode == "PAST")
|
||||
else if(at_bottom && this.control.mode == "PAST" && pcts.bottom < 0.025)
|
||||
{
|
||||
this.control.mode = "LIVE";
|
||||
mc.ng.apply();
|
||||
|
|
|
@ -33,6 +33,11 @@
|
|||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
*/
|
||||
let defined = (value) =>
|
||||
value !== undefined;
|
||||
|
||||
/** typeif - Functional if(typeof(foo) == "bar") { ... }
|
||||
*/
|
||||
let typeif = (value, type, closure) =>
|
||||
|
|
|
@ -776,11 +776,9 @@ type="text/ng-template"
|
|||
ng-if="!attr.show || attr.show(room, member) !== false"
|
||||
>
|
||||
<h3>
|
||||
{{ attr.name? attr.name(room, member) : name }}
|
||||
{{ attr.name? attr.name(room, member) : name; }}
|
||||
</h3>
|
||||
<p>
|
||||
{{ attr.value(room, member) }}
|
||||
</p>
|
||||
<p>{{attr.value(room, member)}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
Loading…
Reference in a new issue