Skip to content

C
converse.js
Commit 24afd738 authored by JC Brand's avatar JC Brand
Browse files
Options

Various tweaks (margins and otherwise) around responsiveness

parent 808155bc
Show whitespace changes
Inline Side-by-side
Showing with 65 additions and 73 deletions
css/converse.css
View file @ 24afd738
...@@ -4757,16 +4757,15 @@ ...@@ -4757,16 +4757,15 @@
#converse-embedded-chat, #converse-embedded-chat,
#conversejs { #conversejs {
height: 0;
width: 100vw;
bottom: 0; bottom: 0;
height: auto;
width: 100vw;
color: #777; color: #777;
direction: ltr; direction: ltr;
display: block; display: block;
font-family: "Helvetica", "Arial", sans-serif; font-family: "Helvetica", "Arial", sans-serif;
font-size: 14px; font-size: 14px;
position: fixed; position: fixed;
right: 0;
z-index: 1031; } z-index: 1031; }
#converse-embedded-chat ::-webkit-input-placeholder, #converse-embedded-chat ::-webkit-input-placeholder,
#conversejs ::-webkit-input-placeholder { #conversejs ::-webkit-input-placeholder {
...@@ -5178,14 +5177,13 @@ ...@@ -5178,14 +5177,13 @@
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
#conversejs { #conversejs {
width: auto; } } width: auto; } }
#conversejs .row { #conversejs > .row {
flex-direction: row-reverse; flex-direction: row-reverse; }
flex-wrap: nowrap; }
#converse-embedded-chat .flyout, #converse-embedded-chat .flyout,
#conversejs .flyout { #conversejs .flyout {
border-radius: 4px; border-radius: 4px;
bottom: 3em; bottom: 1em;
position: absolute; } position: absolute; }
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
#converse-embedded-chat .flyout, #converse-embedded-chat .flyout,
...@@ -5205,6 +5203,7 @@ ...@@ -5205,6 +5203,7 @@
bottom: 0; } } bottom: 0; } }
#converse-embedded-chat .chat-head, #converse-embedded-chat .chat-head,
#conversejs .chat-head { #conversejs .chat-head {
flex-wrap: nowrap;
color: #ffffff; color: #ffffff;
font-size: 100%; font-size: 100%;
height: 55px; height: 55px;
...@@ -5252,8 +5251,7 @@ ...@@ -5252,8 +5251,7 @@
#converse-embedded-chat .chatbox, #converse-embedded-chat .chatbox,
#conversejs .chatbox { #conversejs .chatbox {
text-align: left; text-align: left;
height: 35px; margin: 0 0.5em; }
margin: 0 1em; }
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
#converse-embedded-chat .chatbox, #converse-embedded-chat .chatbox,
#conversejs .chatbox { #conversejs .chatbox {
...@@ -5672,10 +5670,12 @@ ...@@ -5672,10 +5670,12 @@
padding: 2px; } padding: 2px; }
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
#conversejs:not(.fullscreen) .row { #conversejs:not(.fullscreen) > .row {
flex-direction: column; } } flex-direction: column; }
#conversejs:not(.fullscreen) > .row.no-gutters {
margin: -1em; } }
#conversejs #controlbox { #conversejs #controlbox {
margin-right: 2em; } margin-right: 1.5em; }
#conversejs #controlbox .pure-form.converse-form { #conversejs #controlbox .pure-form.converse-form {
padding: 0; } padding: 0; }
#conversejs #controlbox.logged-out .box-flyout .controlbox-pane { #conversejs #controlbox.logged-out .box-flyout .controlbox-pane {
...@@ -6030,7 +6030,7 @@ ...@@ -6030,7 +6030,7 @@
color: #0a0a0a; color: #0a0a0a;
float: right; float: right;
height: 100%; height: 100%;
margin: 0 1em; margin: 0 0.5em;
padding: 10px 8px 0 8px; } padding: 10px 8px 0 8px; }
#conversejs .toggle-controlbox span { #conversejs .toggle-controlbox span {
color: white; } color: white; }
...@@ -6508,12 +6508,11 @@ ...@@ -6508,12 +6508,11 @@
border-radius: 4px; } border-radius: 4px; }
#conversejs:not(.fullscreen) #minimized-chats { #conversejs:not(.fullscreen) #minimized-chats {
margin-bottom: -1em;
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-top-right-radius: 4px; border-top-right-radius: 4px;
color: white; color: white;
height: 100%; margin-right: 0.5em;
margin-right: 1em;
bottom: 3em;
padding: 0; } padding: 0; }
#conversejs:not(.fullscreen) #minimized-chats .badge { #conversejs:not(.fullscreen) #minimized-chats .badge {
bottom: 8px; bottom: 8px;
...@@ -6527,6 +6526,7 @@ ...@@ -6527,6 +6526,7 @@
text-align: center; text-align: center;
color: white; } color: white; }
#conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout { #conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout {
flex-direction: column-reverse;
width: 100%; } width: 100%; }
#conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout .chat-head { #conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout .chat-head {
padding: 0.3em; padding: 0.3em;
......
css/inverse.css
View file @ 24afd738
...@@ -4757,16 +4757,15 @@ ...@@ -4757,16 +4757,15 @@
#converse-embedded-chat, #converse-embedded-chat,
#conversejs { #conversejs {
height: 0;
width: 100vw;
bottom: 0; bottom: 0;
height: auto;
width: 100vw;
color: #777; color: #777;
direction: ltr; direction: ltr;
display: block; display: block;
font-family: "Helvetica", "Arial", sans-serif; font-family: "Helvetica", "Arial", sans-serif;
font-size: 16px; font-size: 16px;
position: fixed; position: fixed;
right: 0;
z-index: 1031; } z-index: 1031; }
#converse-embedded-chat ::-webkit-input-placeholder, #converse-embedded-chat ::-webkit-input-placeholder,
#conversejs ::-webkit-input-placeholder { #conversejs ::-webkit-input-placeholder {
...@@ -5219,12 +5218,7 @@ body { ...@@ -5219,12 +5218,7 @@ body {
padding-right: 10%; padding-right: 10%;
font-size: 120%; } font-size: 120%; }
#conversejs.fullscreen { #conversejs.fullscreen form.pure-form.converse-form {
height: auto;
bottom: 0;
left: 0;
right: 0; }
#conversejs.fullscreen form.pure-form.converse-form {
margin: 1em; } margin: 1em; }
#conversejs.fullscreen form.pure-form.converse-form input[type=checkbox] { #conversejs.fullscreen form.pure-form.converse-form input[type=checkbox] {
margin-left: 1em; margin-left: 1em;
...@@ -5265,6 +5259,7 @@ body { ...@@ -5265,6 +5259,7 @@ body {
bottom: 0; } } bottom: 0; } }
#converse-embedded-chat .chat-head, #converse-embedded-chat .chat-head,
#conversejs .chat-head { #conversejs .chat-head {
flex-wrap: nowrap;
color: #ffffff; color: #ffffff;
font-size: 100%; font-size: 100%;
height: 62px; height: 62px;
...@@ -5312,7 +5307,6 @@ body { ...@@ -5312,7 +5307,6 @@ body {
#converse-embedded-chat .chatbox, #converse-embedded-chat .chatbox,
#conversejs .chatbox { #conversejs .chatbox {
text-align: left; text-align: left;
height: 35px;
margin: 0 0.5em; } margin: 0 0.5em; }
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
#converse-embedded-chat .chatbox, #converse-embedded-chat .chatbox,
...@@ -5755,7 +5749,7 @@ body { ...@@ -5755,7 +5749,7 @@ body {
#conversejs.fullscreen .chatbox .row { #conversejs.fullscreen .chatbox .row {
width: calc(100% - 50px); } } width: calc(100% - 50px); } }
#conversejs #controlbox { #conversejs #controlbox {
margin-right: 1em; } margin-right: 1.5em; }
#conversejs #controlbox .pure-form.converse-form { #conversejs #controlbox .pure-form.converse-form {
padding: 0; } padding: 0; }
#conversejs #controlbox.logged-out .box-flyout .controlbox-pane { #conversejs #controlbox.logged-out .box-flyout .controlbox-pane {
......
mockup/converse.html
View file @ 24afd738
...@@ -217,37 +217,37 @@ ...@@ -217,37 +217,37 @@
</div> </div>
<div id="minimized-chats" class="col col-1 w-100"> <div id="minimized-chats" class="col col-1 w-100">
<div class="flyout minimized-chats-flyout row">
<a id="toggle-minimized-chats" href="#" class="row no-gutters"> <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> <span class="badge badge-light">322</span>
<div class="col"> Minimized</div>
</a> </a>
<div class="flyout minimized-chats-flyout">
<div class="chat-head chat-head-chatroom row no-gutters"> <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> <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>
<div class="chat-head chat-head-chatbox row no-gutters"> <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> <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>
<div class="chat-head chat-head-chatroom row no-gutters"> <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 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>
<div class="chat-head chat-head-chatbox row no-gutters"> <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 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>
<div class="chat-head chat-head-chatbox row no-gutters"> <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> <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>
<div class="chat-head chat-head-chatbox row no-gutters"> <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 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> </div>
</div> </div>
......
sass/_chatbox.scss
View file @ 24afd738
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
} }
} }
.chat-head { .chat-head {
flex-wrap: nowrap;
color: #ffffff; color: #ffffff;
font-size: 100%; font-size: 100%;
height: $chat-head-height; height: $chat-head-height;
...@@ -66,7 +67,6 @@ ...@@ -66,7 +67,6 @@
} }
.chatbox { .chatbox {
text-align: left; text-align: left;
height: $bottom-gutter-height;
margin: 0 $chat-gutter; margin: 0 $chat-gutter;
@media screen and (max-height: $mobile-landscape-height) { @media screen and (max-height: $mobile-landscape-height) {
......
sass/_controlbox.scss
View file @ 24afd738
#conversejs { #conversejs {
#controlbox { #controlbox {
margin-right: 2*$chat-gutter; margin-right: 3*$chat-gutter;
.pure-form.converse-form { .pure-form.converse-form {
padding: 0; padding: 0;
......
sass/_core.scss
View file @ 24afd738
...@@ -8,16 +8,15 @@ ...@@ -8,16 +8,15 @@
#converse-embedded-chat, #converse-embedded-chat,
#conversejs { #conversejs {
height: 0;
width: 100vw;
bottom: 0; bottom: 0;
height: auto;
width: 100vw;
color: $text-color; color: $text-color;
direction: ltr; direction: ltr;
display: block; display: block;
font-family: "Helvetica", "Arial", sans-serif; font-family: "Helvetica", "Arial", sans-serif;
font-size: $font-size; font-size: $font-size;
position: fixed; position: fixed;
right: 0;
z-index: 1031; // One more than bootstrap navbar z-index: 1031; // One more than bootstrap navbar
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
......
sass/converse/_chatbox.scss
View file @ 24afd738
...@@ -61,8 +61,12 @@ ...@@ -61,8 +61,12 @@
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
#conversejs:not(.fullscreen) { #conversejs:not(.fullscreen) {
.row { > .row {
flex-direction: column; flex-direction: column;
&.no-gutters {
margin: -1em;
}
} }
} }
} }
sass/converse/_core.scss
View file @ 24afd738
#conversejs { #conversejs {
.row { > .row {
flex-direction: row-reverse; flex-direction: row-reverse;
flex-wrap: nowrap;
} }
} }
sass/converse/_minimized_chats.scss
View file @ 24afd738
#conversejs:not(.fullscreen) { #conversejs:not(.fullscreen) {
#minimized-chats { #minimized-chats {
margin-bottom: -2*$chat-gutter;
border-top-left-radius: $chatbox-border-radius; border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius; border-top-right-radius: $chatbox-border-radius;
color: $inverse-link-color; color: $inverse-link-color;
height: 100%;
margin-right: $chat-gutter; margin-right: $chat-gutter;
bottom: 3*$chat-gutter;
padding: 0; padding: 0;
.badge { .badge {
...@@ -24,6 +23,7 @@ ...@@ -24,6 +23,7 @@
} }
.minimized-chats-flyout { .minimized-chats-flyout {
flex-direction: column-reverse;
width: 100%; width: 100%;
.chat-head { .chat-head {
......
sass/converse/_variables.scss
View file @ 24afd738
...@@ -87,7 +87,7 @@ $info-color: $dark-green !default; ...@@ -87,7 +87,7 @@ $info-color: $dark-green !default;
$button-border-radius: 5px !default; $button-border-radius: 5px !default;
$chatbox-border-radius: 4px !default; $chatbox-border-radius: 4px !default;
$bottom-gutter-height: 35px !default; $bottom-gutter-height: 35px !default;
$chatbox-hover-height: 3em !default; $chatbox-hover-height: 1em !default;
$mobile_landscape_height: 450px !default; $mobile_landscape_height: 450px !default;
$mobile_portrait_length: 480px !default; $mobile_portrait_length: 480px !default;
...@@ -111,7 +111,7 @@ $line-height-large: 20px !default; ...@@ -111,7 +111,7 @@ $line-height-large: 20px !default;
$controlbox-width: 200px !default; $controlbox-width: 200px !default;
$chat-width: 200px !default; $chat-width: 200px !default;
$chat-height: 450px !default; $chat-height: 450px !default;
$chat-gutter: 1em !default; $chat-gutter: 0.5em !default;
$minimized-chats-width: 130px !default; $minimized-chats-width: 130px !default;
$mobile-chat-width: 100% !default; $mobile-chat-width: 100% !default;
......
sass/inverse/_core.scss
View file @ 24afd738
...@@ -35,10 +35,6 @@ body { ...@@ -35,10 +35,6 @@ body {
} }
#conversejs.fullscreen { #conversejs.fullscreen {
height: auto;
bottom: 0;
left: 0;
right: 0;
form { form {
&.pure-form.converse-form { &.pure-form.converse-form {
......
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