Merge pull request RocketChat#154 from WideChat/ear_font_size

Adjust font sizes and toolbar spacing for mobile
Shailesh351 · Feb 14, 2020 · f830891 · f830891
2 parents c775d8e + 9e2b182
commit f830891
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 13 deletions.
diff --git a/app/theme/client/imports/components/header.css b/app/theme/client/imports/components/header.css
@@ -421,6 +421,14 @@
 			display: none;
 		}
 
+		&__first-icon {
+			width: 2.25em;
+
+			margin: 0 0.2em;
+
+			padding: 0;
+		}
+
 		&__block-action {
 			& + & {
 				border-left: 1px var(--color-gray) solid;
@@ -443,7 +451,7 @@
 		}
 
 		&__search-button {
-			margin: 0 0.25em;
+			margin-right: -0.75em;
 
 			&__action {
 				&__icon {
@@ -455,20 +463,14 @@
 		&__data {
 			display: flex;
 			flex-direction: row;
-			align-items: center;
+
+			justify-content: center;
 		}
 
 		&__status {
 			margin: 0 0.5rem;
 		}
 
-		&__image {
-			display: none;
-
-			/* width: 20px;
-			height: 20px; */
-		}
-
 		&--burger {
 			display: flex;
 
@@ -489,6 +491,12 @@
 
 		&__name {
 			color: var(--color-white);
+
+			font-size: 1.3rem;
+
+			& > .rc-header__icon {
+				display: none;
+			}
 		}
 
 		.burger i {

diff --git a/app/theme/client/imports/components/sidebar/rooms-list.css b/app/theme/client/imports/components/sidebar/rooms-list.css
@@ -54,6 +54,18 @@
 	}
 }
 
+@media (width <= 500px) {
+	.rooms-list {
+		&__type {
+			font-size: var(--rooms-list-title-text-size-mobile);
+		}
+
+		&__empty-room {
+			font-size: var(--rooms-list-empty-text-size-mobile);
+		}
+	}
+}
+
 @media (width <= 400px) {
 	padding: 0 calc(var(--sidebar-small-default-padding) - 4px);
 

diff --git a/app/theme/client/imports/components/sidebar/sidebar-header.css b/app/theme/client/imports/components/sidebar/sidebar-header.css
@@ -150,6 +150,17 @@
 	}
 }
 
+@media (width <= 500px) {
+	.sidebar__header {
+		&-thumb {
+			flex: 0 0 var(--sidebar-account-thumb-size-mobile);
+
+			width: var(--sidebar-account-thumb-size-mobile);
+			height: var(--sidebar-account-thumb-size-mobile);
+		}
+	}
+}
+
 @media (width <= 600px) {
 	.sidebar__toolbar {
 		& .rc-input > .rc-input__label > .rc-input__wrapper > #searchBar {

diff --git a/app/theme/client/imports/components/sidebar/sidebar-item.css b/app/theme/client/imports/components/sidebar/sidebar-item.css
@@ -313,6 +313,14 @@
 	}
 }
 
+@media (width <= 500px) {
+	.sidebar-item {
+		&__name {
+			font-size: var(--sidebar-item-text-size-mobile);
+		}
+	}
+}
+
 @media (width <= 400px) {
 	.sidebar-item {
 		padding: 0 0 0 var(--sidebar-small-default-padding);

diff --git a/app/theme/client/imports/general/variables.css b/app/theme/client/imports/general/variables.css
@@ -197,6 +197,7 @@
 	* Sidebar Account
 	*/
 	--sidebar-account-thumb-size: 23px;
+	--sidebar-account-thumb-size-mobile: 1.75em;
 	--sidebar-small-account-thumb-size: 40px;
 	--sidebar-account-status-bullet-size: 10px;
 	--sidebar-small-account-status-bullet-size: 8px;
@@ -230,6 +231,7 @@
 	--sidebar-item-user-status-size: 6px;
 	--sidebar-item-user-status-radius: 50%;
 	--sidebar-item-text-size: 0.875rem;
+	--sidebar-item-text-size-mobile: 1rem;
 
 	/*
 	* Modal
@@ -257,8 +259,10 @@
 	*/
 	--rooms-list-title-color: var(--color-gray);
 	--rooms-list-title-text-size: 0.75rem;
+	--rooms-list-title-text-size-mobile: 1rem;
 	--rooms-list-empty-text-color: var(--color-gray);
 	--rooms-list-empty-text-size: 0.75rem;
+	--rooms-list-empty-text-size-mobile: 1rem;
 	--rooms-list-padding: var(--sidebar-default-padding);
 	--rooms-list-small-padding: var(--sidebar-small-default-padding);
 

diff --git a/app/ui/client/components/header/headerRoom.html b/app/ui/client/components/header/headerRoom.html
@@ -30,11 +30,13 @@
 
 				<div class="rc-header__content rc-header__block">
 					{{#if isDirect}}
-					<div class="rc-header__block">
-						<div class="rc-header__image">
-							{{> avatar username=avatarBackground}}
+						{{#if isNotMobile}}
+						<div class="rc-header__block">
+							<div class="rc-header__image">
+								{{> avatar username=avatarBackground}}
+							</div>
 						</div>
-					</div>
+						{{/if}}
 					{{/if}}
 
 					<div class="rc-header__data">