Skip to content

Commit 70efa4f

Browse files
mrsimpsonmrsimpson
authored
Merge pull request RocketChat#162 from assistify/feature/livechat-integration
Travis failed due to timeout => all checks have passed.
2 parents 75d1491 + c8100ff commit 70efa4f

File tree

5 files changed

+168
-10
lines changed

5 files changed

+168
-10
lines changed

‎packages/rocketchat-livechat/app/client/stylesheets/main.less

+165-9
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
@import "utils/_keyframes.import.less";
44
@import "utils/_loading.import.less";
55

6+
@smartphones: ~"only screen and (max-width: 480px)";
7+
@footer-min-height-media: 65px;
8+
69
* {
710
box-sizing: border-box;
811
-moz-box-sizing: border-box;
@@ -77,6 +80,10 @@ input:focus {
7780
color: rgba(255, 255, 255, 0.85);
7881
background-color: lighten(desaturate(@primary-background-color, 15%), 12.5%);
7982

83+
@media @smartphones{
84+
font-size: 15px;
85+
}
86+
8087
span {
8188
position: relative;
8289
z-index: 2;
@@ -158,27 +165,54 @@ input:focus {
158165
cursor: pointer;
159166
padding: 0 10px;
160167

168+
@media @smartphones{
169+
border-top-right-radius: 0px;
170+
border-top-left-radius: 0px;
171+
flex: 1 0 50px;
172+
line-height: 50px;
173+
}
174+
161175
h1 {
162176
margin: 0;
163177
font-size: 10pt;
164178
display: inline-block;
179+
180+
@media @smartphones{
181+
font-size: 13pt;
182+
}
183+
165184
}
166185

167186
.toolbar {
168187
display: inline-block;
169188
float: right;
170189

171190
svg {
172-
cursor: pointer;
173-
fill: currentColor;
174-
width: 14px;
175-
margin: 0 5px;
176-
vertical-align: middle;
177-
178-
&:last-of-type {
179-
margin-right: 0;
180-
}
191+
cursor: pointer;
192+
fill: currentColor;
193+
width: 14px;
194+
margin: 0 5px;
195+
vertical-align: middle;
196+
197+
@media @smartphones {
198+
width: 20px;
199+
}
200+
201+
&:last-of-type {
202+
margin-right: 0;
203+
}
181204
}
205+
svg.maximize {
206+
@media @smartphones{
207+
display: none;
208+
}
209+
}
210+
svg.popout {
211+
@media @smartphones{
212+
display: none;
213+
}
214+
}
215+
182216
}
183217
}
184218

@@ -205,14 +239,36 @@ input:focus {
205239
.info {
206240
flex: 1;
207241
padding: 5px 0;
242+
}
243+
244+
ul{
245+
246+
@media @smartphones{
247+
width: 95%;
248+
margin-right: -10px;
249+
250+
}
208251

209252
h2 {
210253
color: @primary-font-color;
211254
font-size: 14px;
255+
256+
@media @smartphones{
257+
font-size: 16px;
258+
margin-bottom: 7px;
259+
margin-top: 5px;
260+
}
212261
}
213262

214263
li {
215264
font-size: 11px;
265+
266+
@media @smartphones{
267+
font-size: 14px;
268+
text-overflow: ellipsis;
269+
overflow: hidden;
270+
white-space: nowrap;
271+
}
216272
}
217273
}
218274
}
@@ -224,9 +280,17 @@ input:focus {
224280
border-right: 1px solid @window-border-color;
225281
overflow-y: auto;
226282

283+
@media @smartphones{
284+
margin-bottom: 64px;
285+
}
286+
227287
.wrapper {
228288
padding-bottom: 6px;
229289

290+
@media @smartphones{
291+
padding-bottom: 13px;
292+
}
293+
230294
ul {
231295
list-style-type: none;
232296
padding: 0;
@@ -243,6 +307,10 @@ input:focus {
243307
line-height: 18px;
244308
min-height: 36px;
245309

310+
@media @smartphones{
311+
line-height: 18px;
312+
}
313+
246314
&::after {
247315
content: '';
248316
display: block;
@@ -299,6 +367,10 @@ input:focus {
299367
padding: 0 10px;
300368
background-color: #ffffff;
301369
min-width: 120px;
370+
371+
@media @smartphones{
372+
font-size:12px;
373+
}
302374
}
303375

304376
.content {
@@ -354,6 +426,11 @@ input:focus {
354426
margin-right: 5px;
355427
outline: none;
356428

429+
@media @smartphones{
430+
font-size: 15px;
431+
margin-bottom: 5px;
432+
}
433+
357434
&:hover {
358435
color: #333333;
359436
}
@@ -378,6 +455,10 @@ input:focus {
378455
left: -10px;
379456
width: 55px;
380457

458+
@media @smartphones{
459+
font-size: 10px;
460+
}
461+
381462
.edited {
382463
display: inline-block;
383464
}
@@ -433,6 +514,10 @@ input:focus {
433514
.body {
434515
opacity: 1;
435516
transition: opacity 1s linear;
517+
518+
@media @smartphones{
519+
font-size: 15px;
520+
}
436521
}
437522

438523
&.temp .body {
@@ -476,9 +561,19 @@ input:focus {
476561
z-index: 5;
477562
transition: transform 0.3s ease-out;
478563
transform: translateY(-40px);
564+
visibility: visible;
565+
566+
@media @smartphones{
567+
width: 145px;
568+
height: 34px;
569+
font-size: 14px;
570+
line-height: 33px;
571+
bottom: 30px;
572+
}
479573

480574
&.not {
481575
transform: translateY(100%);
576+
visibility: hidden;
482577
}
483578
}
484579

@@ -491,9 +586,15 @@ input:focus {
491586
z-index: 8;
492587
transition: transform 0.2s ease-out;
493588
transform: translateY(100%);
589+
visibility: hidden;
590+
591+
@media @smartphones{
592+
bottom: @footer-min-height-media;
593+
}
494594

495595
&.show {
496596
transform: translateY(0);
597+
visibility: visible;
497598
}
498599
}
499600
}
@@ -506,6 +607,13 @@ input:focus {
506607
border-left: 1px solid @window-border-color;
507608
border-right: 1px solid @window-border-color;
508609

610+
@media @smartphones{
611+
flex: 1 0 @footer-min-height-media;
612+
position: fixed;
613+
bottom: 0;
614+
width: 100%;
615+
}
616+
509617
.message-bar {
510618
display: flex;
511619
flex-direction: row;
@@ -530,6 +638,12 @@ input:focus {
530638
line-height: normal;
531639
background-color: #ffffff;
532640
position: relative;
641+
642+
@media @smartphones{
643+
padding-top:7px;
644+
font-size: 15px;
645+
height: 35px!important;
646+
}
533647
}
534648
}
535649

@@ -547,6 +661,11 @@ input:focus {
547661
cursor: pointer;
548662
transition: fill 0.15s ease-out;
549663

664+
@media @smartphones{
665+
width: 23px;
666+
height: 23px;
667+
}
668+
550669
&:hover {
551670
fill: @primary-font-color;
552671
}
@@ -561,6 +680,11 @@ input:focus {
561680
outline: none;
562681
margin-top: 5px;
563682
font-size: 0.65rem;
683+
684+
@media @smartphones{
685+
margin-top: 5px;
686+
margin-bottom: 6px;
687+
}
564688
}
565689

566690
.typing {
@@ -570,6 +694,11 @@ input:focus {
570694
outline: none;
571695
margin-top: 2px;
572696
font-size: 0.65rem;
697+
698+
@media @smartphones{
699+
margin-top: 4px;
700+
margin-bottom: 4px;
701+
}
573702
}
574703

575704
.options-menu {
@@ -609,6 +738,10 @@ input:focus {
609738
display: block;
610739
padding: 4px 2px;
611740
outline: none;
741+
742+
@media @smartphones{
743+
font-size: 14px;
744+
}
612745
}
613746
}
614747
}
@@ -622,6 +755,10 @@ input:focus {
622755
border-left: 1px solid @window-border-color;
623756
border-right: 1px solid @window-border-color;
624757

758+
@media @smartphones{
759+
font-size: 15px;
760+
}
761+
625762
.offline-message {
626763
padding: 1em 0;
627764
}
@@ -635,10 +772,18 @@ input:focus {
635772
textarea {
636773
display: block;
637774
width: 100%;
775+
776+
@media @smartphones {
777+
width: 85%;
778+
margin: 15px auto;
779+
}
638780
}
639781

640782
.buttons {
641783
text-align: center;
784+
@media @smartphones{
785+
font-size: 15px!important;
786+
}
642787
}
643788

644789
.error {
@@ -685,6 +830,15 @@ input:focus {
685830
input,
686831
select {
687832
width: 100%;
833+
834+
@media @smartphones{
835+
font-size: 15px;
836+
}
837+
838+
@media @smartphones {
839+
margin: 15px auto;
840+
width: 85%;
841+
}
688842
}
689843
}
690844
}
@@ -774,6 +928,8 @@ input:focus {
774928
opacity: 0.5;
775929
align-self: flex-end;
776930
transition: opacity 0.15s ease-out;
931+
bottom: 0;
932+
position: fixed;
777933

778934
&:hover {
779935
opacity: 1;

‎packages/rocketchat-livechat/app/client/views/livechatWindow.html

-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@ <h1>{{title}}</h1>
4747
{{> offlineForm (offlineData)}}
4848
</div>
4949
{{/if}}
50-
{{> poweredBy }}
5150
</div>
5251
{{/if}}
5352
{{/if}}

‎packages/rocketchat-livechat/app/client/views/messages.html

+1
Original file line numberDiff line numberDiff line change
@@ -73,5 +73,6 @@
7373
{{> options show=showOptions}}
7474
<button class="toggle-options secondary-font-color">{{optionsLink}}</button>
7575
{{/if}}
76+
{{> poweredBy }}
7677
</div>
7778
</template>

‎packages/rocketchat-livechat/app/client/views/offlineForm.html

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
<button class="button send">{{_ "Send"}}</button>
2121
</div>
2222
</form>
23+
{{> poweredBy }}
2324
{{/if}}
2425
{{else}}
2526
<p class="offline-message">{{{offlineUnavailableMessage}}}</p>

‎packages/rocketchat-livechat/app/client/views/register.html

+1
Original file line numberDiff line numberDiff line change
@@ -26,5 +26,6 @@
2626
<button type="submit" class="button request-video"> {{_ "Request_video_chat"}} </button>
2727
{{/if}}
2828
</form>
29+
{{> poweredBy }}
2930
</div>
3031
</template>

0 commit comments

Comments
 (0)