Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Various tweaks (margins and otherwise) around responsiveness

Browse Source
This commit is contained in:
JC Brand 2018-01-26 15:32:31 +01:00
parent 808155bc3c
commit 24afd73842
11 changed files with 65 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
css/converse.css
View File

@ -4757,16 +4757,15 @@
#converse-embedded-chat,
#conversejs {
height: 0;
width: 100vw;
bottom: 0;
height: auto;
width: 100vw;
color: #777;
direction: ltr;
display: block;
font-family: "Helvetica", "Arial", sans-serif;
font-size: 14px;
position: fixed;
right: 0;
z-index: 1031; }
#converse-embedded-chat ::-webkit-input-placeholder,
#conversejs ::-webkit-input-placeholder {
@ -5178,14 +5177,13 @@
@media screen and (max-width: 480px) {
#conversejs {
width: auto; } }
#conversejs .row {
flex-direction: row-reverse;
flex-wrap: nowrap; }
#conversejs > .row {
flex-direction: row-reverse; }
#converse-embedded-chat .flyout,
#conversejs .flyout {
border-radius: 4px;
bottom: 3em;
bottom: 1em;
position: absolute; }
@media screen and (max-height: 450px) {
#converse-embedded-chat .flyout,
@ -5205,6 +5203,7 @@
bottom: 0; } }
#converse-embedded-chat .chat-head,
#conversejs .chat-head {
flex-wrap: nowrap;
color: #ffffff;
font-size: 100%;
height: 55px;
@ -5252,8 +5251,7 @@
#converse-embedded-chat .chatbox,
#conversejs .chatbox {
text-align: left;
height: 35px;
margin: 0 1em; }
margin: 0 0.5em; }
@media screen and (max-height: 450px) {
#converse-embedded-chat .chatbox,
#conversejs .chatbox {
@ -5672,10 +5670,12 @@
padding: 2px; }
@media (max-width: 767.98px) {
#conversejs:not(.fullscreen) .row {
flex-direction: column; } }
#conversejs:not(.fullscreen) > .row {
flex-direction: column; }
#conversejs:not(.fullscreen) > .row.no-gutters {
margin: -1em; } }
#conversejs #controlbox {
margin-right: 2em; }
margin-right: 1.5em; }
#conversejs #controlbox .pure-form.converse-form {
padding: 0; }
#conversejs #controlbox.logged-out .box-flyout .controlbox-pane {
@ -6030,7 +6030,7 @@
color: #0a0a0a;
float: right;
height: 100%;
margin: 0 1em;
margin: 0 0.5em;
padding: 10px 8px 0 8px; }
#conversejs .toggle-controlbox span {
color: white; }
@ -6508,12 +6508,11 @@
border-radius: 4px; }
#conversejs:not(.fullscreen) #minimized-chats {
margin-bottom: -1em;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: white;
height: 100%;
margin-right: 1em;
bottom: 3em;
margin-right: 0.5em;
padding: 0; }
#conversejs:not(.fullscreen) #minimized-chats .badge {
bottom: 8px;
@ -6527,6 +6526,7 @@
text-align: center;
color: white; }
#conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout {
flex-direction: column-reverse;
width: 100%; }
#conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout .chat-head {
padding: 0.3em;

48
css/inverse.css
View File

@ -4757,16 +4757,15 @@
#converse-embedded-chat,
#conversejs {
height: 0;
width: 100vw;
bottom: 0;
height: auto;
width: 100vw;
color: #777;
direction: ltr;
display: block;
font-family: "Helvetica", "Arial", sans-serif;
font-size: 16px;
position: fixed;
right: 0;
z-index: 1031; }
#converse-embedded-chat ::-webkit-input-placeholder,
#conversejs ::-webkit-input-placeholder {
@ -5219,28 +5218,23 @@ body {
padding-right: 10%;
font-size: 120%; }
#conversejs.fullscreen {
height: auto;
bottom: 0;
left: 0;
right: 0; }
#conversejs.fullscreen form.pure-form.converse-form {
margin: 1em; }
#conversejs.fullscreen form.pure-form.converse-form input[type=checkbox] {
margin-left: 1em;
display: inline;
margin-bottom: 2em; }
#conversejs.fullscreen form.pure-form.converse-form input[type=text],
#conversejs.fullscreen form.pure-form.converse-form input[type=password],
#conversejs.fullscreen form.pure-form.converse-form input[type=number],
#conversejs.fullscreen form.pure-form.converse-form input[type=button],
#conversejs.fullscreen form.pure-form.converse-form input[type=submit] {
height: 2.2em; }
#conversejs.fullscreen form.pure-form.converse-form input[type=button],
#conversejs.fullscreen form.pure-form.converse-form input[type=submit] {
padding-left: 1em;
padding-right: 1em;
margin-right: 1em; }
#conversejs.fullscreen form.pure-form.converse-form {
margin: 1em; }
#conversejs.fullscreen form.pure-form.converse-form input[type=checkbox] {
margin-left: 1em;
display: inline;
margin-bottom: 2em; }
#conversejs.fullscreen form.pure-form.converse-form input[type=text],
#conversejs.fullscreen form.pure-form.converse-form input[type=password],
#conversejs.fullscreen form.pure-form.converse-form input[type=number],
#conversejs.fullscreen form.pure-form.converse-form input[type=button],
#conversejs.fullscreen form.pure-form.converse-form input[type=submit] {
height: 2.2em; }
#conversejs.fullscreen form.pure-form.converse-form input[type=button],
#conversejs.fullscreen form.pure-form.converse-form input[type=submit] {
padding-left: 1em;
padding-right: 1em;
margin-right: 1em; }
#converse-embedded-chat .flyout,
#conversejs .flyout {
@ -5265,6 +5259,7 @@ body {
bottom: 0; } }
#converse-embedded-chat .chat-head,
#conversejs .chat-head {
flex-wrap: nowrap;
color: #ffffff;
font-size: 100%;
height: 62px;
@ -5312,7 +5307,6 @@ body {
#converse-embedded-chat .chatbox,
#conversejs .chatbox {
text-align: left;
height: 35px;
margin: 0 0.5em; }
@media screen and (max-height: 450px) {
#converse-embedded-chat .chatbox,
@ -5755,7 +5749,7 @@ body {
#conversejs.fullscreen .chatbox .row {
width: calc(100% - 50px); } }
#conversejs #controlbox {
margin-right: 1em; }
margin-right: 1.5em; }
#conversejs #controlbox .pure-form.converse-form {
padding: 0; }
#conversejs #controlbox.logged-out .box-flyout .controlbox-pane {

28
mockup/converse.html
View File

@ -217,37 +217,37 @@
</div>
<div id="minimized-chats" class="col col-1 w-100">
<a id="toggle-minimized-chats" href="#" class="row no-gutters">
<div class="col"><span id="minimized-count">0</span> Minimized</div>
<span class="badge badge-light">322</span>
</a>
<div class="flyout minimized-chats-flyout">
<div class="flyout minimized-chats-flyout row">
<a id="toggle-minimized-chats" href="#" class="row no-gutters">
<span class="badge badge-light">322</span>
<div class="col"> Minimized</div>
</a>
<div class="chat-head chat-head-chatroom row no-gutters">
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Restricted Chatroom</a>
<span class="badge badge-light">42</span>
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Restricted Chatroom</a>
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
</div>
<div class="chat-head chat-head-chatbox row no-gutters">
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">JC Brand</a>
<span class="badge badge-light">4</span>
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">JC Brand</a>
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
</div>
<div class="chat-head chat-head-chatroom row no-gutters">
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">My Chatroom</a>
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
</div>
<div class="chat-head chat-head-chatbox row no-gutters">
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Annegreet Gomez</a>
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
</div>
<div class="chat-head chat-head-chatbox row no-gutters">
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Asmaa Haakman</a>
<span class="badge badge-light">842</span>
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Asmaa Haakman</a>
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
</div>
<div class="chat-head chat-head-chatbox row no-gutters">
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
<a href="#" class="restore-chat w-100 align-self-center">Lena Grunewald</a>
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
</div>
</div>
</div>

2
sass/_chatbox.scss
View File

@ -19,6 +19,7 @@
}
}
.chat-head {
flex-wrap: nowrap;
color: #ffffff;
font-size: 100%;
height: $chat-head-height;
@ -66,7 +67,6 @@
}
.chatbox {
text-align: left;
height: $bottom-gutter-height;
margin: 0 $chat-gutter;
@media screen and (max-height: $mobile-landscape-height) {

2
sass/_controlbox.scss
View File

@ -1,6 +1,6 @@
#conversejs {
#controlbox {
margin-right: 2*$chat-gutter;
margin-right: 3*$chat-gutter;
.pure-form.converse-form {
padding: 0;

5
sass/_core.scss
View File

@ -8,16 +8,15 @@
#converse-embedded-chat,
#conversejs {
height: 0;
width: 100vw;
bottom: 0;
height: auto;
width: 100vw;
color: $text-color;
direction: ltr;
display: block;
font-family: "Helvetica", "Arial", sans-serif;
font-size: $font-size;
position: fixed;
right: 0;
z-index: 1031; // One more than bootstrap navbar
::-webkit-input-placeholder { /* Chrome/Opera/Safari */

6
sass/converse/_chatbox.scss
View File

@ -61,8 +61,12 @@
@include media-breakpoint-down(sm) {
#conversejs:not(.fullscreen) {
.row {
> .row {
flex-direction: column;
&.no-gutters {
margin: -1em;
}
}
}
}

3
sass/converse/_core.scss
View File

@ -1,6 +1,5 @@
#conversejs {
.row {
> .row {
flex-direction: row-reverse;
flex-wrap: nowrap;
}
}

4
sass/converse/_minimized_chats.scss
View File

@ -1,11 +1,10 @@
#conversejs:not(.fullscreen) {
#minimized-chats {
margin-bottom: -2*$chat-gutter;
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
color: $inverse-link-color;
height: 100%;
margin-right: $chat-gutter;
bottom: 3*$chat-gutter;
padding: 0;
.badge {
@ -24,6 +23,7 @@
}
.minimized-chats-flyout {
flex-direction: column-reverse;
width: 100%;
.chat-head {

4
sass/converse/_variables.scss
View File

@ -87,7 +87,7 @@ $info-color: $dark-green !default;
$button-border-radius: 5px !default;
$chatbox-border-radius: 4px !default;
$bottom-gutter-height: 35px !default;
$chatbox-hover-height: 3em !default;
$chatbox-hover-height: 1em !default;
$mobile_landscape_height: 450px !default;
$mobile_portrait_length: 480px !default;
@ -111,7 +111,7 @@ $line-height-large: 20px !default;
$controlbox-width: 200px !default;
$chat-width: 200px !default;
$chat-height: 450px !default;
$chat-gutter: 1em !default;
$chat-gutter: 0.5em !default;
$minimized-chats-width: 130px !default;
$mobile-chat-width: 100% !default;

4
sass/inverse/_core.scss
View File

@ -35,10 +35,6 @@ body {
}
#conversejs.fullscreen {
height: auto;
bottom: 0;
left: 0;
right: 0;
form {
&.pure-form.converse-form {