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

Replace col- classes with Sass mixins

Browse Source
This commit is contained in:
JC Brand 2018-03-09 10:12:05 +01:00
parent db44a4f44d
commit 914a55707d
14 changed files with 135 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
css/converse.css
View File

@ -4460,7 +4460,8 @@ body.reset {
font-family: "Helvetica", "Arial", sans-serif;
font-size: 14px;
position: fixed;
z-index: 1031; }
z-index: 1031;
margin-left: -15px; }
#conversejs ::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #A8ABA1; }
@ -5348,19 +5349,43 @@ body.reset {
#conversejs:not(.fullscreen) .chat-head {
border-top-left-radius: 0;
border-top-right-radius: 0; } }
#converse-embedded-chat .chatbox .chat-body .chat-message,
#conversejs:not(.fullscreen) .chatbox .chat-body .chat-message {
padding: 0.3em;
line-height: 20px; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
#conversejs:not(.fullscreen) .chatbox .chat-body .chat-message .chat-msg-author {
#converse-embedded-chat .chatbox,
#conversejs:not(.fullscreen) .chatbox {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
flex: 0 0 100%;
max-width: 100%; }
@media (min-width: 576px) {
#converse-embedded-chat .chatbox,
#conversejs:not(.fullscreen) .chatbox {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%; } }
@media (min-width: 768px) {
#converse-embedded-chat .chatbox,
#conversejs:not(.fullscreen) .chatbox {
flex: 0 0 25%;
max-width: 25%; } }
@media (min-width: 992px) {
#converse-embedded-chat .chatbox,
#conversejs:not(.fullscreen) .chatbox {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; } }
#converse-embedded-chat .chatbox .chat-body .chat-message,
#conversejs:not(.fullscreen) .chatbox .chat-body .chat-message {
padding: 0.3em;
line-height: 20px; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content,
#conversejs:not(.fullscreen) .chatbox .chat-body .chat-message .chat-msg-content {
line-height: 20px; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content .emojione,
#conversejs:not(.fullscreen) .chatbox .chat-body .chat-message .chat-msg-content .emojione {
margin-bottom: -5px; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
#conversejs:not(.fullscreen) .chatbox .chat-body .chat-message .chat-msg-author {
line-height: 20px; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content,
#conversejs:not(.fullscreen) .chatbox .chat-body .chat-message .chat-msg-content {
line-height: 20px; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content .emojione,
#conversejs:not(.fullscreen) .chatbox .chat-body .chat-message .chat-msg-content .emojione {
margin-bottom: -5px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs:not(.fullscreen) .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
width: 100%; }
@ -6173,6 +6198,22 @@ body.reset {
width: 100%;
border: 1px solid #999; }
#conversejs .chatbox.chatroom {
flex: 0 0 100%;
max-width: 100%; }
@media (min-width: 576px) {
#conversejs .chatbox.chatroom {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%; } }
@media (min-width: 768px) {
#conversejs .chatbox.chatroom {
flex: 0 0 50%;
max-width: 50%; } }
@media (min-width: 992px) {
#conversejs .chatbox.chatroom {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%; } }
#conversejs .chatbox.headlines .chat-head.chat-head-chatbox {
background-color: #E7A151; }
#conversejs .chatbox.headlines .chat-body {
@ -6185,6 +6226,13 @@ body.reset {
border-radius: 4px; }
#conversejs:not(.fullscreen) #minimized-chats {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
margin-bottom: -1em;
border-top-left-radius: 4px;
border-top-right-radius: 4px;

26
css/inverse.css
View File

@ -4460,7 +4460,8 @@ body.reset {
font-family: "Helvetica", "Arial", sans-serif;
font-size: 16px;
position: fixed;
z-index: 1031; }
z-index: 1031;
margin-left: -15px; }
#conversejs ::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #A8ABA1; }
@ -5404,7 +5405,20 @@ body {
#conversejs.fullscreen .chatbox {
width: 100%;
height: 100%;
margin: 0; }
margin: 0;
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px; }
@media (min-width: 768px) {
#conversejs.fullscreen .chatbox {
flex: 0 0 75%;
max-width: 75%; } }
@media (min-width: 1200px) {
#conversejs.fullscreen .chatbox {
flex: 0 0 75%;
max-width: 75%; } }
#conversejs.fullscreen .chatbox .box-flyout {
background-color: #3AA569;
height: 100vh;
@ -5770,6 +5784,14 @@ body {
display: block; } }
#conversejs.fullscreen #controlbox {
margin: 0; }
@media (min-width: 768px) {
#conversejs.fullscreen #controlbox {
flex: 0 0 25%;
max-width: 25%; } }
@media (min-width: 1200px) {
#conversejs.fullscreen #controlbox {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; } }
#conversejs.fullscreen #controlbox .controlbox-pane {
border-radius: 0; }
#conversejs.fullscreen #controlbox .flyout {

4
mockup/chatbox.html
View File

@ -12,7 +12,7 @@
<div id="conversejs" class="fullscreen">
<div class="sidebar"></div>
<div class="row no-gutters">
<div id="controlbox" class="chatbox col-xl-2 col-md-3">
<div id="controlbox" class="chatbox">
<div class="flyout box-flyout">
<div class="controlbox-panes">
<div class="controlbox-pane"></div>
@ -20,7 +20,7 @@
</div>
</div>
<div class="chatbox col-xl-10 col-md-9" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f">
<div class="chatbox" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f">
<div class="flyout box-flyout">
<div class="chat-head chat-head-chatbox row no-gutters">
<div class="col">

4
mockup/chatroom.html
View File

@ -12,7 +12,7 @@
<div id="conversejs" class="fullscreen">
<div class="sidebar"></div>
<div class="row no-gutters">
<div id="controlbox" class="chatbox col-xl-2 col-md-3">
<div id="controlbox" class="chatbox">
<div class="flyout box-flyout">
<div class="controlbox-panes">
<div class="controlbox-pane"></div>
@ -20,7 +20,7 @@
</div>
</div>
<div class="chatbox chatroom col-xl-10 col-md-9" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
<div class="chatbox chatroom" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
<div class="flyout box-flyout">
<div class="chat-head chat-head-chatroom row no-gutters">
<div class="col">

20
mockup/converse.html
View File

@ -15,7 +15,7 @@
<div id="conversejs">
<div class="row no-gutters">
<div id="controlbox" class="chatbox col col-lg-2 col-md-3 col-sm-4 col-sx-12 w-100">
<div id="controlbox" class="chatbox">
<div class="flyout box-flyout">
<div class="controlbox-panes">
<div class="sidebar"></div>
@ -24,7 +24,7 @@
</div>
</div>
<div class="chatbox col col-lg-2 col-md-3 col-sm-4 col-sx-12 w-100" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f">
<div class="chatbox" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f">
<div class="flyout box-flyout">
<div class="chat-head chat-head-chatbox row no-gutters">
@ -118,7 +118,7 @@
</div>
</div>
<div class="chatbox chatroom col col-lg-4 col-md-6 col-sm-8 col-xs-12 w-100" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
<div class="chatbox chatroom" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
<div class="flyout box-flyout">
<div class="chat-head chat-head-chatroom row no-gutters">
<div class="col-sm-8 col-lg-10">
@ -217,7 +217,7 @@
</div>
</div>
<div id="minimized-chats" class="col col-1 w-100">
<div id="minimized-chats">
<div class="flyout minimized-chats-flyout row">
<a id="toggle-minimized-chats" href="#" class="row no-gutters">
<span class="badge badge-light">322</span> Minimized
@ -227,33 +227,33 @@
<span class="badge badge-light">42</span>
Restricted Chatroom
</a>
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div>
<div class="chat-head chat-head-chatbox row no-gutters">
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">
<span class="badge badge-light">4</span>
JC Brand
</a>
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div>
<div class="chat-head chat-head-chatroom row no-gutters">
<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>
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div>
<div class="chat-head chat-head-chatbox row no-gutters">
<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>
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div>
<div class="chat-head chat-head-chatbox row no-gutters">
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">
<span class="badge badge-light">842</span>
Asmaa Haakman
</a>
<a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div>
<div class="chat-head chat-head-chatbox row no-gutters">
<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>
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
</div>
</div>
</div>

2
sass/_core.scss
View File

@ -53,6 +53,8 @@ body.reset {
position: fixed;
z-index: 1031; // One more than bootstrap navbar
margin-left: -15px; // XXX: why is this necessary?
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: $subdued-color;
}

14
sass/converse/_chatbox.scss
View File

@ -13,6 +13,20 @@
}
}
.chatbox {
@include make-col-ready();
@include media-breakpoint-up(xs) {
@include make-col(12);
}
@include media-breakpoint-up(sm) {
@include make-col(4);
}
@include media-breakpoint-up(md) {
@include make-col(3);
}
@include media-breakpoint-up(lg) {
@include make-col(2);
}
.chat-body {
.chat-message {
padding: 0.3em;

3
sass/converse/_minimized_chats.scss
View File

@ -1,5 +1,8 @@
#conversejs:not(.fullscreen) {
#minimized-chats {
@include make-col-ready();
@include make-col(1);
margin-bottom: -2*$chat-gutter;
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;

1
sass/converse/converse.scss
View File

@ -48,6 +48,7 @@
@import "../roomslist";
@import "../roster";
@import "../chatrooms";
@import "chatrooms";
@import "../headline";
@import "minimized_chats";
@import "../bookmarks";

9
sass/inverse/_chatbox.scss
View File

@ -27,6 +27,15 @@
width: 100%;
height: 100%;
margin: 0;
@include make-col-ready();
@include media-breakpoint-up(md) {
@include make-col(9);
}
@include media-breakpoint-up(xl) {
@include make-col(9);
}
.box-flyout {
background-color: $chat-head-color;
height: 100vh;

1
sass/inverse/_chatrooms.scss
View File

@ -11,7 +11,6 @@
}
.chatroom {
.box-flyout {
background-color: $chatroom-head-color;
border: $flyout-padding solid $chatroom-head-color;

7
sass/inverse/_controlbox.scss
View File

@ -1,5 +1,12 @@
#conversejs.fullscreen {
#controlbox {
@include media-breakpoint-up(md) {
@include make-col(3);
}
@include media-breakpoint-up(xl) {
@include make-col(2);
}
margin: 0;
.controlbox-pane {

15
src/converse-chatview.js
View File

@ -305,7 +305,6 @@
},
render () {
this.setClasses();
this.el.setAttribute('id', this.model.get('box_id'));
this.el.innerHTML = tpl_chatbox(
_.extend(this.model.toJSON(), {
@ -318,20 +317,6 @@
return this;
},
setClasses () {
if (_converse.view_mode === 'fullscreen') {
this.el.classList.add('col-xl-10');
this.el.classList.add('col-md-9');
} else {
this.el.classList.add('col');
this.el.classList.add('col-lg-2');
this.el.classList.add('col-md-3');
this.el.classList.add('col-sm-4');
this.el.classList.add('col-sx-12');
this.el.classList.add('w-100');
}
},
renderToolbar (toolbar, options) {
if (!_converse.show_toolbar) {
return this;

15
src/converse-muc-views.js
View File

@ -436,7 +436,6 @@
},
render () {
this.setClasses();
this.el.setAttribute('id', this.model.get('box_id'));
this.el.innerHTML = tpl_chatroom();
this.renderHeading();
@ -447,20 +446,6 @@
return this;
},
setClasses () {
if (_converse.view_mode === 'fullscreen') {
this.el.classList.add('col-xl-10');
this.el.classList.add('col-md-9');
} else {
this.el.classList.add('col');
this.el.classList.add('col-lg-4');
this.el.classList.add('col-md-6');
this.el.classList.add('col-sm-8');
this.el.classList.add('col-sx-12');
this.el.classList.add('w-100');
}
},
renderHeading () {
/* Render the heading UI of the chat room. */
this.el.querySelector('.chat-head-chatroom').innerHTML = this.generateHeadingHTML();