Skip to content

Commit 95d6edd

Browse files
jcbrandjcbrand
committed
More moving of styles to more logical places
1 parent b0820e7 commit 95d6edd

File tree

4 files changed

+97
-98
lines changed

4 files changed

+97
-98
lines changed

‎src/plugins/chatboxviews/styles/chats.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,14 @@
77
converse-app-chat {
88
width: 100%;
99
}
10+
11+
&.converse-fullscreen,
12+
&.converse-overlayed {
13+
.converse-app-chat {
14+
margin: 0 !important;
15+
flex-direction: row !important;
16+
justify-content: space-between;
17+
}
18+
}
1019
}
1120
}

‎src/plugins/chatview/styles/index.scss‎

Lines changed: 85 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,85 @@
1-
@import "bootstrap/scss/functions";
2-
@import "bootstrap/scss/variables";
3-
@import "bootstrap/scss/mixins";
4-
@import "shared/styles/_variables.scss";
5-
@import "./chatbox.scss";
6-
1+
@import 'bootstrap/scss/functions';
2+
@import 'bootstrap/scss/variables';
3+
@import 'bootstrap/scss/mixins';
4+
@import 'shared/styles/_variables.scss';
5+
@import './chatbox.scss';
76

87
/* ******************* Overlay and embedded styles *************************** */
98

109
.conversejs {
11-
converse-app-chat.converse-embedded,
12-
converse-app-chat.converse-overlayed {
13-
.controlbox-head {
14-
padding: 0.5em;
15-
}
16-
.chat-head {
17-
border-top-left-radius: 0;
18-
border-top-right-radius: 0;
19-
}
20-
.chatbox {
21-
min-width: var(--overlayed-chat-width) !important;
22-
width: var(--overlayed-chat-width);
23-
24-
.box-flyout {
10+
converse-app-chat {
11+
&.converse-embedded,
12+
&.converse-overlayed {
13+
.controlbox-head {
14+
padding: 0.5em;
15+
}
16+
.chat-head {
17+
border-top-left-radius: 0;
18+
border-top-right-radius: 0;
19+
}
20+
.chatbox {
2521
min-width: var(--overlayed-chat-width) !important;
2622
width: var(--overlayed-chat-width);
23+
24+
.box-flyout {
25+
min-width: var(--overlayed-chat-width) !important;
26+
width: var(--overlayed-chat-width);
27+
}
2728
}
2829
}
29-
}
3030

31-
converse-app-chat.converse-overlayed {
32-
.chat-head, .box-flyout {
33-
border-top-left-radius: var(--chatbox-border-radius);
34-
border-top-right-radius: var(--chatbox-border-radius);
35-
@media screen and (max-height: $mobile-landscape-height) {
36-
border-top-left-radius: 0;
37-
border-top-right-radius: 0;
31+
&.converse-overlayed {
32+
display: flex;
33+
flex-direction: row-reverse;
34+
35+
.brand-heading {
36+
padding-inline-start: 1em;
37+
width: 100%;
3838
}
39-
@media screen and (max-width: $mobile-portrait-length) {
40-
border-top-left-radius: 0;
41-
border-top-right-radius: 0;
39+
40+
.converse-svg-logo {
41+
margin-right: 0.1em;
42+
height: 1em;
4243
}
43-
}
4444

45-
.flyout {
46-
bottom: var(--overlayed-chatbox-hover-height);
47-
}
48-
.box-flyout {
49-
height: var(--overlayed-chat-height);
50-
min-height: calc(var(--overlayed-chat-height) / 2);
51-
}
52-
.minimized-chats-flyout .chat-head {
53-
cursor: default;
54-
}
55-
.chat-textarea {
56-
max-height: var(--overlayed-max-chat-textarea-height);
57-
}
58-
.chatbox {
59-
.chat-body {
60-
height: calc(100% - var(--overlayed-chat-head-height));
45+
.chat-head,
46+
.box-flyout {
47+
border-top-left-radius: var(--chatbox-border-radius);
48+
border-top-right-radius: var(--chatbox-border-radius);
49+
@media screen and (max-height: $mobile-landscape-height) {
50+
border-top-left-radius: 0;
51+
border-top-right-radius: 0;
52+
}
53+
@media screen and (max-width: $mobile-portrait-length) {
54+
border-top-left-radius: 0;
55+
border-top-right-radius: 0;
56+
}
57+
}
58+
59+
.flyout {
60+
border: 0;
61+
bottom: var(--overlayed-chatbox-hover-height);
62+
}
63+
.box-flyout {
64+
height: var(--overlayed-chat-height);
65+
min-height: calc(var(--overlayed-chat-height) / 2);
6166
}
62-
.chatbox-title {
63-
padding: 0.5rem 0.75rem 0 0.75rem;
67+
.minimized-chats-flyout .chat-head {
68+
cursor: default;
6469
}
65-
.chatbox-title--no-desc {
66-
padding: 0.5rem 0.75rem;
70+
.chat-textarea {
71+
max-height: var(--overlayed-max-chat-textarea-height);
72+
}
73+
.chatbox {
74+
.chat-body {
75+
height: calc(100% - var(--overlayed-chat-head-height));
76+
}
77+
.chatbox-title {
78+
padding: 0.5rem 0.75rem 0 0.75rem;
79+
}
80+
.chatbox-title--no-desc {
81+
padding: 0.5rem 0.75rem;
82+
}
6783
}
6884
}
6985
}
@@ -79,10 +95,10 @@
7995

8096
.conversejs {
8197
converse-app-chat.converse-embedded,
82-
converse-app-chat.converse-fullscreen {
98+
converse-app-chat.converse-fullscreen {
8399
.flyout {
84100
border-radius: 0;
85-
border:none;
101+
border: none;
86102
bottom: 0;
87103
}
88104

@@ -94,7 +110,7 @@
94110
}
95111
}
96112

97-
converse-app-chat.converse-fullscreen {
113+
converse-app-chat.converse-fullscreen {
98114
&:not(.converse-singleton) {
99115
.chatbox {
100116
@include media-breakpoint-up(md) {
@@ -147,7 +163,7 @@
147163
/* ******************* Fullpage styles *************************** */
148164

149165
.conversejs {
150-
converse-app-chat.converse-fullscreen {
166+
converse-app-chat.converse-fullscreen {
151167
.chatbox-btn {
152168
font-size: var(--fullpage-chatbox-button-size);
153169
}
@@ -183,10 +199,9 @@
183199
}
184200
}
185201

186-
187202
@include media-breakpoint-down(md) {
188203
.conversejs {
189-
converse-app-chat:not(.converse-embedded) {
204+
converse-app-chat:not(.converse-embedded) {
190205
> .row {
191206
flex-direction: row-reverse;
192207
}
@@ -210,6 +225,18 @@
210225

211226
converse-app-chat.converse-overlayed,
212227
converse-app-chat.converse-fullscreen {
228+
.converse-app-chat {
229+
.chatbox {
230+
.box-flyout {
231+
left: 0;
232+
bottom: 0;
233+
border-radius: 0;
234+
width: 100vw !important;
235+
height: var(--fullpage-chat-height);
236+
}
237+
}
238+
}
239+
213240
.chat-head {
214241
converse-controlbox-navback {
215242
margin: auto 0;

‎src/plugins/controlbox/styles/_controlbox.scss‎

Lines changed: 2 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -164,14 +164,8 @@
164164
}
165165

166166
.conversejs {
167-
converse-app-chat {
167+
.converse-app {
168168
&.converse-overlayed {
169-
display: flex;
170-
flex-direction: row-reverse;
171-
.flyout {
172-
border: 0;
173-
}
174-
175169
.toggle-controlbox {
176170
background-color: var(--controlbox-color);
177171
color: var(--button-text-color);
@@ -192,15 +186,6 @@
192186
}
193187
}
194188

195-
.brand-heading {
196-
padding-inline-start: 1em;
197-
width: 100%;
198-
}
199-
200-
.converse-svg-logo {
201-
margin-right: 0.1em;
202-
height: 1em;
203-
}
204189
}
205190

206191
&.converse-embedded,
@@ -306,30 +291,7 @@
306291
.conversejs {
307292
&.converse-fullscreen,
308293
&.converse-overlayed {
309-
left: 0;
310-
right: 0;
311-
padding-inline-start: env(safe-area-inset-left);
312-
padding-inline-end: env(safe-area-inset-right);
313-
314-
.converse-chatboxes {
315-
margin: 0 !important;
316-
flex-direction: row !important;
317-
justify-content: space-between;
318-
319-
.converse-chatroom {
320-
font-size: 14px;
321-
}
322-
323-
.chatbox {
324-
.box-flyout {
325-
left: 0;
326-
bottom: 0;
327-
border-radius: 0;
328-
width: 100vw !important;
329-
height: var(--fullpage-chat-height);
330-
}
331-
}
332-
294+
.converse-app {
333295
#controlbox {
334296
margin-inline-start: 0;
335297
width: 100vw !important;

‎src/plugins/rootview/styles/root.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ converse-root {
33
&.converse-overlayed {
44
bottom: 0;
55
left: 0;
6+
right: 0;
67
padding-inline-start: env(safe-area-inset-left);
78
padding-inline-end: env(safe-area-inset-right);
89
position: fixed;

0 commit comments

Comments
 (0)