Skip to content

C
converse.js
Commit 2f2e687a authored by JC Brand's avatar JC Brand
Browse files
Options

Use flex column for occupant sidebar

parent 6bdf204b
Show whitespace changes
Inline Side-by-side
Showing with 98 additions and 59 deletions
css/converse.css
View file @ 2f2e687a
......@@ -5915,7 +5915,6 @@ body.reset {
font-size: 14px;
left: 0;
text-align: left;
overflow-y: scroll;
overflow-x: hidden;
border-radius: 4px; }
#conversejs #controlbox .controlbox-pane .add-converse-contact {
......@@ -6169,6 +6168,7 @@ body.reset {
width: 100%; } }
#converse-embedded-chat .chatroom .box-flyout,
#conversejs .chatroom .box-flyout {
overflow-y: hidden;
width: 100%; }
@media screen and (max-height: 450px) {
#converse-embedded-chat .chatroom .box-flyout,
......@@ -6235,6 +6235,9 @@ body.reset {
min-width: 100%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants,
#conversejs .chatroom .box-flyout .chatroom-body .occupants {
display: flex;
flex-direction: column;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
vertical-align: top;
......@@ -6246,9 +6249,12 @@ body.reset {
#conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
padding: 0.3em 0;
font-weight: bold; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.feature,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
font-size: 12px;
width: 100%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
bottom: 0.5em;
width: 100%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature {
......@@ -6273,8 +6279,8 @@ body.reset {
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list {
overflow-y: auto;
height: -webkit-calc(100% - 220px);
height: calc(100% - 220px); }
flex-basis: 0;
flex-grow: 1; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list {
padding-top: 0; }
......
css/inverse.css
View file @ 2f2e687a
......@@ -5981,7 +5981,6 @@ body {
font-size: 16px;
left: 0;
text-align: left;
overflow-y: scroll;
overflow-x: hidden;
border-radius: 4px; }
#conversejs #controlbox .controlbox-pane .add-converse-contact {
......@@ -6033,8 +6032,6 @@ body {
display: block; } }
#conversejs.fullscreen #controlbox {
margin: 0; }
#conversejs.fullscreen #controlbox .controlbox-panes {
overflow-y: hidden; }
#conversejs.fullscreen #controlbox .controlbox-pane {
border-radius: 0; }
#conversejs.fullscreen #controlbox .flyout {
......@@ -6288,6 +6285,7 @@ body {
width: 100%; } }
#converse-embedded-chat .chatroom .box-flyout,
#conversejs .chatroom .box-flyout {
overflow-y: hidden;
width: 100%; }
@media screen and (max-height: 450px) {
#converse-embedded-chat .chatroom .box-flyout,
......@@ -6354,6 +6352,9 @@ body {
min-width: 100%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants,
#conversejs .chatroom .box-flyout .chatroom-body .occupants {
display: flex;
flex-direction: column;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
vertical-align: top;
......@@ -6365,9 +6366,12 @@ body {
#conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
padding: 0.3em 0;
font-weight: bold; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.feature,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
font-size: 14px;
width: 100%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
bottom: 0.5em;
width: 100%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature {
......@@ -6392,8 +6396,8 @@ body {
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list {
overflow-y: auto;
height: -webkit-calc(100% - 220px);
height: calc(100% - 220px); }
flex-basis: 0;
flex-grow: 1; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list {
padding-top: 0; }
......@@ -6518,15 +6522,7 @@ body {
padding: 1em; }
#conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
font-size: 18px; }
#conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
bottom: 1em; }
#conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list {
height: -webkit-calc(100% - 212px);
height: calc(100% - 212px); }
#conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li {
font-size: 14px;
width: 100%; }
#conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
font-size: 14px; }
#conversejs.fullscreen .chatroom .room-invite span .invited-contact {
margin: 0 0 0.5em -1px; }
......
mockup/chatroom.html
View file @ 2f2e687a
......@@ -8,7 +8,7 @@
<link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
</head>
<body>
<body class="reset">
<div id="conversejs" class="fullscreen">
<div class="sidebar"></div>
<div class="row no-gutters">
......@@ -88,7 +88,7 @@
<div class="occupants col-md-3 col-4">
<p class="occupants-heading">Occupants:</p>
<form class="pure-form room-invite">
<form class="room-invite">
<input class="form-control" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto">
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
</form>
......@@ -102,16 +102,52 @@
<div class="occupant-status occupant-online circle" title="Online"></div>Obi-wan Kenobi, Jedi Master</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
</ul>
<div class="chatroom-features">
<p class="occupants-heading">Features</p>
<ul class="features-list">
<li class="feature" title="Unsecured: This room requires a password before entry"><span class="fa fa-unlock"></span>&nbsp;</li>
<li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span>&nbsp;</li>
<li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span>&nbsp;</li>
<li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span>&nbsp;</li>
<li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span>&nbsp;</li>
<li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span>&nbsp;</li>
<li class="feature" title="Secured: This room requires a password before entry"><span class="fa fa-unlock"></span>&nbsp;Password required</li>
<li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span>&nbsp;Public</li>
<li class="feature" title="Open: Anyone can join this room"><span class="fa fa-globe"></span>&nbsp;Open</li>
<li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span>&nbsp;Persistent</li>
<li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span>&nbsp;Non-anonymous</li>
<li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span>&nbsp;Unmoderated</li>
</ul>
</div>
</div>
......@@ -119,6 +155,7 @@
</div>
</div>
</div>
</div>
<div id="converse-modals" class="modals"></div>
</div>
......
sass/_chatrooms.scss
View file @ 2f2e687a
......@@ -68,6 +68,8 @@
}
.box-flyout {
overflow-y: hidden;
width: 100%;
@media screen and (max-height: $mobile-landscape-height) {
height: $mobile-chat-height;
......@@ -135,6 +137,9 @@
}
}
.occupants {
display: flex;
flex-direction: column;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
vertical-align: top;
......@@ -142,14 +147,23 @@
border-left: 1px solid $text-color;
border-bottom-right-radius: $chatbox-border-radius;
padding: 0.5em;
.occupants-heading {
padding: 0.3em 0;
font-weight: bold;
}
.chatroom-features {
bottom: 0.5em;
ul {
li {
&.feature {
font-size: $font-size-small;
width: 100%;
}
}
}
.chatroom-features {
width: 100%;
.feature {
float: left;
margin-right: 0.5em;
......@@ -175,7 +189,8 @@
&.occupant-list {
overflow-y: auto;
@include calc(height, '100% - 220px');
flex-basis: 0;
flex-grow: 1;
}
&.features-list {
padding-top: 0;
......
sass/_controlbox.scss
View file @ 2f2e687a
......@@ -371,7 +371,6 @@
font-size: $font-size;
left: 0;
text-align: left;
overflow-y: scroll;
overflow-x: hidden;
border-radius: $chatbox-border-radius;
......
sass/inverse/_chatrooms.scss
View file @ 2f2e687a
......@@ -45,19 +45,9 @@
.occupants-heading {
font-size: $font-size-large;
}
.chatroom-features {
bottom: $padding;
}
ul {
&.occupant-list {
@include calc(height, '100% - 212px');
li {
font-size: $font-size-small;
width: 100%;
}
}
li {
&.feature {
font-size: $font-size-small;
}
}
......
sass/inverse/_controlbox.scss
View file @ 2f2e687a
......@@ -2,10 +2,6 @@
#controlbox {
margin: 0;
.controlbox-panes {
overflow-y: hidden;
}
.controlbox-pane {
border-radius: 0;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7