Regression: Fix Unread bar design (#17750)

dudizilla · ggazzo · web-flow · commit 0d2723f31962 · 2020-05-27T11:33:04.000-03:00
Co-authored-by: Guilherme Gazzo &lt;guilhermegazzo@gmail.com&gt;
diff --git a/app/theme/client/imports/components/sidebar/rooms-list.css b/app/theme/client/imports/components/sidebar/rooms-list.css
@@ -44,7 +44,7 @@
 
 	&__toolbar-search {
 		position: absolute;
-		z-index: 1;
+		z-index: 10;
 
 		left: 10px;
 
diff --git a/app/theme/client/imports/components/sidebar/sidebar.css b/app/theme/client/imports/components/sidebar/sidebar.css
@@ -69,16 +69,35 @@
 
 		& .unread-rooms {
 			position: absolute;
-			top: 0;
-			right: 0;
-			left: 0;
+			left: 50%;
 
-			width: 100%;
-			padding: calc(var(--sidebar-small-default-padding) - 8px);
+			overflow: hidden;
+
+			min-width: 120px;
+			max-width: 100%;
+
+			padding: 8px var(--sidebar-small-default-padding);
+
+			-webkit-transform: translateX(-50%);
+			transform: translateX(-50%);
 
 			animation: fade 0.3s;
 
 			text-align: center;
+
+			white-space: nowrap;
+
+			text-overflow: ellipsis;
+
+			border-radius: 25px;
+
+			&.bottom-unread-rooms {
+				bottom: 0;
+			}
+
+			&.top-unread-rooms {
+				top: 0;
+			}
 		}
 	}
 }
diff --git a/app/ui-sidenav/client/sideNav.html b/app/ui-sidenav/client/sideNav.html
@@ -3,8 +3,8 @@
 		{{> sidebarHeader }}
 		{{#if loggedInUser}}
 			<div class="wrapper-unread">
-				<div class="unread-rooms background-primary-action-color color-primary-action-contrast top-unread-rooms hidden" id="fade">
-					{{_ "More_unreads"}} <i class="icon-up-big"></i>
+				<div class="unread-rooms background-primary-action-color color-primary-action-contrast top-unread-rooms hidden">
+					<i class="icon-up-big"></i> {{_ "More_unreads"}}
 				</div>
 			</div>
 			<div class="rooms-list" aria-label="{{_ "Channels"}}" role="region">
@@ -14,7 +14,7 @@
 			</div>
 			<div class="wrapper-unread">
 				<div class="unread-rooms background-primary-action-color color-primary-action-contrast bottom-unread-rooms hidden">
-					{{_ "More_unreads"}} <i class="icon-down-big"></i>
+					<i class="icon-down-big"></i> {{_ "More_unreads"}}
 				</div>
 			</div>
 			<div class="flex-nav animated-hidden">
