Merge pull request RocketChat#162 from assistify/feature/livechat-int…

…egration Travis failed due to timeout => all checks have passed.
redlink-gmbh · Dec 6, 2017 · 70efa4f · 70efa4f
2 parents 75d1491 + c8100ff
commit 70efa4f
Show file tree

Hide file tree

Showing 5 changed files with 168 additions and 10 deletions.
diff --git a/packages/rocketchat-livechat/app/client/stylesheets/main.less b/packages/rocketchat-livechat/app/client/stylesheets/main.less
@@ -3,6 +3,9 @@
 @import "utils/_keyframes.import.less";
 @import "utils/_loading.import.less";
 
+@smartphones: ~"only screen and (max-width: 480px)";
+@footer-min-height-media: 65px;
+
 * {
 	box-sizing: border-box;
 	-moz-box-sizing: border-box;
@@ -77,6 +80,10 @@ input:focus {
 	color: rgba(255, 255, 255, 0.85);
 	background-color: lighten(desaturate(@primary-background-color, 15%), 12.5%);
 
+  @media @smartphones{
+	font-size: 15px;
+  }
+
 	span {
 		position: relative;
 		z-index: 2;
@@ -158,27 +165,54 @@ input:focus {
 		cursor: pointer;
 		padding: 0 10px;
 
+	  @media @smartphones{
+		border-top-right-radius: 0px;
+		border-top-left-radius: 0px;
+		flex: 1 0 50px;
+		line-height: 50px;
+	  }
+
 		h1 {
 			margin: 0;
 			font-size: 10pt;
 			display: inline-block;
+
+		  @media @smartphones{
+			font-size: 13pt;
+		  }
+
 		}
 
 		.toolbar {
 			display: inline-block;
 			float: right;
 
 			svg {
-				cursor: pointer;
-				fill: currentColor;
-				width: 14px;
-				margin: 0 5px;
-				vertical-align: middle;
-
-				&:last-of-type {
-					margin-right: 0;
-				}
+			  cursor: pointer;
+			  fill: currentColor;
+			  width: 14px;
+			  margin: 0 5px;
+			  vertical-align: middle;
+
+			  @media @smartphones {
+				width: 20px;
+			  }
+
+			  &:last-of-type {
+				margin-right: 0;
+			  }
 			}
+			  svg.maximize {
+				@media @smartphones{
+				  display: none;
+				}
+			  }
+			  svg.popout {
+				@media @smartphones{
+				  display: none;
+				}
+			  }
+
 		}
 	}
 
@@ -205,14 +239,36 @@ input:focus {
 		.info {
 			flex: 1;
 			padding: 5px 0;
+		  }
+
+		  ul{
+
+			@media @smartphones{
+			  width: 95%;
+			  margin-right: -10px;
+
+		  }
 
 			h2 {
 				color: @primary-font-color;
 				font-size: 14px;
+
+			  @media @smartphones{
+				font-size: 16px;
+				margin-bottom: 7px;
+				margin-top: 5px;
+			  }
 			}
 
 			li {
 				font-size: 11px;
+
+			  @media @smartphones{
+				font-size: 14px;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;
+			  }
 			}
 		}
 	}
@@ -224,9 +280,17 @@ input:focus {
 		border-right: 1px solid @window-border-color;
 		overflow-y: auto;
 
+	  @media @smartphones{
+		margin-bottom: 64px;
+	  }
+
 		.wrapper {
 			padding-bottom: 6px;
 
+		  @media @smartphones{
+			padding-bottom: 13px;
+		  }
+
 			ul {
 				list-style-type: none;
 				padding: 0;
@@ -243,6 +307,10 @@ input:focus {
 				line-height: 18px;
 				min-height: 36px;
 
+			  @media @smartphones{
+				line-height: 18px;
+			  }
+
 				&::after {
 					content: '';
 					display: block;
@@ -299,6 +367,10 @@ input:focus {
 						padding: 0 10px;
 						background-color: #ffffff;
 						min-width: 120px;
+
+					  @media @smartphones{
+						font-size:12px;
+					  }
 					}
 
 					.content {
@@ -354,6 +426,11 @@ input:focus {
 					margin-right: 5px;
 					outline: none;
 
+				  @media @smartphones{
+					font-size: 15px;
+					margin-bottom: 5px;
+				  }
+
 					&:hover {
 						color: #333333;
 					}
@@ -378,6 +455,10 @@ input:focus {
 					left: -10px;
 					width: 55px;
 
+				  @media @smartphones{
+					font-size: 10px;
+				  }
+
 					.edited {
 						display: inline-block;
 					}
@@ -433,6 +514,10 @@ input:focus {
 				.body {
 					opacity: 1;
 					transition: opacity 1s linear;
+
+				  @media @smartphones{
+					font-size: 15px;
+				  }
 				}
 
 				&.temp .body {
@@ -476,9 +561,19 @@ input:focus {
 			z-index: 5;
 			transition: transform 0.3s ease-out;
 			transform: translateY(-40px);
+		  	visibility: visible;
+
+		  @media @smartphones{
+			width: 145px;
+			height: 34px;
+			font-size: 14px;
+			line-height: 33px;
+			bottom: 30px;
+		  }
 
 			&.not {
 				transform: translateY(100%);
+			  	visibility: hidden;
 			}
 		}
 
@@ -491,9 +586,15 @@ input:focus {
 			z-index: 8;
 			transition: transform 0.2s ease-out;
 			transform: translateY(100%);
+		  	visibility: hidden;
+
+		  @media @smartphones{
+			bottom: @footer-min-height-media;
+		  }
 
 			&.show {
 				transform: translateY(0);
+			  	visibility: visible;
 			}
 		}
 	}
@@ -506,6 +607,13 @@ input:focus {
 		border-left: 1px solid @window-border-color;
 		border-right: 1px solid @window-border-color;
 
+	  @media @smartphones{
+		flex: 1 0 @footer-min-height-media;
+		position: fixed;
+		bottom: 0;
+		width: 100%;
+	  }
+
 		.message-bar {
 			display: flex;
 			flex-direction: row;
@@ -530,6 +638,12 @@ input:focus {
 					line-height: normal;
 					background-color: #ffffff;
 					position: relative;
+
+				  @media @smartphones{
+					padding-top:7px;
+					font-size: 15px;
+					height: 35px!important;
+				  }
 				}
 			}
 
@@ -547,6 +661,11 @@ input:focus {
 					cursor: pointer;
 					transition: fill 0.15s ease-out;
 
+				  @media @smartphones{
+					width: 23px;
+					height: 23px;
+				  }
+
 					&:hover {
 						fill: @primary-font-color;
 					}
@@ -561,6 +680,11 @@ input:focus {
 			outline: none;
 			margin-top: 5px;
 			font-size: 0.65rem;
+
+		  @media @smartphones{
+			margin-top: 5px;
+			margin-bottom: 6px;
+		  }
 		}
 
 		.typing {
@@ -570,6 +694,11 @@ input:focus {
 			outline: none;
 			margin-top: 2px;
 			font-size: 0.65rem;
+
+		  @media @smartphones{
+			margin-top: 4px;
+			margin-bottom: 4px;
+		  }
 		}
 
 		.options-menu {
@@ -609,6 +738,10 @@ input:focus {
 						display: block;
 						padding: 4px 2px;
 						outline: none;
+
+					  @media @smartphones{
+						font-size: 14px;
+					  }
 					}
 				}
 			}
@@ -622,6 +755,10 @@ input:focus {
 		border-left: 1px solid @window-border-color;
 		border-right: 1px solid @window-border-color;
 
+	  	@media @smartphones{
+		  font-size: 15px;
+		}
+
 		.offline-message {
 			padding: 1em 0;
 		}
@@ -635,10 +772,18 @@ input:focus {
 			textarea {
 				display: block;
 				width: 100%;
+
+			  @media @smartphones {
+				width: 85%;
+				margin: 15px auto;
+			  }
 			}
 
 			.buttons {
 				text-align: center;
+			  @media @smartphones{
+				font-size: 15px!important;
+			  }
 			}
 
 			.error {
@@ -685,6 +830,15 @@ input:focus {
 		input,
 		select {
 			width: 100%;
+
+		  @media @smartphones{
+			font-size: 15px;
+		  }
+
+		  @media @smartphones {
+			margin: 15px auto;
+			width: 85%;
+		  }
 		}
 	}
 }
@@ -774,6 +928,8 @@ input:focus {
 	opacity: 0.5;
 	align-self: flex-end;
 	transition: opacity 0.15s ease-out;
+  	bottom: 0;
+  	position: fixed;
 
 	&:hover {
 		opacity: 1;

diff --git a/packages/rocketchat-livechat/app/client/views/livechatWindow.html b/packages/rocketchat-livechat/app/client/views/livechatWindow.html
@@ -47,7 +47,6 @@ <h1>{{title}}</h1>
 						{{> offlineForm (offlineData)}}
 					</div>
 				{{/if}}
-				{{> poweredBy }}
 			</div>
 		{{/if}}
 	{{/if}}

diff --git a/packages/rocketchat-livechat/app/client/views/messages.html b/packages/rocketchat-livechat/app/client/views/messages.html
@@ -73,5 +73,6 @@
 			{{> options show=showOptions}}
 			<button class="toggle-options secondary-font-color">{{optionsLink}}</button>
 		{{/if}}
+		{{> poweredBy }}
 	</div>
 </template>
diff --git a/packages/rocketchat-livechat/app/client/views/offlineForm.html b/packages/rocketchat-livechat/app/client/views/offlineForm.html
@@ -20,6 +20,7 @@
 					<button class="button send">{{_ "Send"}}</button>
 				</div>
 			</form>
+			{{> poweredBy }}
 		{{/if}}
 	{{else}}
 		<p class="offline-message">{{{offlineUnavailableMessage}}}</p>

diff --git a/packages/rocketchat-livechat/app/client/views/register.html b/packages/rocketchat-livechat/app/client/views/register.html
@@ -26,5 +26,6 @@
 				<button type="submit" class="button request-video"> {{_ "Request_video_chat"}} </button>
 			{{/if}}
 		</form>
+		{{> poweredBy }}
 	</div>
 </template>