Improved Contacts dialog layout for mobile

dev/Styles/User/Contacts.less

@@ -1,14 +1,8 @@
 
-@contacts-popup-left-width: 25%;
-
 #V-PopupsContacts {
 
-	bottom: 0;
-	width: auto;
-	min-width: 550px;
 	max-width: 900px;
 	min-height: 300px;
-	max-height: 700px;
 
 	.control-group {
 		label.iconsize24 {
@@ -18,32 +12,28 @@
 	}
 
 	.modal-body {
+		display: flex;
 		height: calc(100vh - 49px);
 		padding: 0;
-		position: relative;
 	}
 
+	/* Left */
+
 	.b-list-toolbar {
 		padding: 0;
 		height: 44px;
 		text-align: center;
-		width: @contacts-popup-left-width;
+		border-bottom: 1px solid var(--border-color, #ddd);
-		border-bottom: 1px solid rgba(128,128,128,0.4);
 
 		.e-search {
 			margin: 7px 0 0;
-			width: calc(100% - 20px);
+			width: calc(100% - 10px);
 		}
 	}
 
 	.b-list-footer-toolbar {
-		position: absolute;
-		left: 0;
-		bottom: 0;
 		height: 46px;
-		width: @contacts-popup-left-width;
+		border-top: 1px solid var(--border-color, #ddd);
-		background-color: var(--message-list-toolbar-bg-color,#eee);
-		box-shadow: inset 0 1px 0 #ccc;
 
 		.footer-pager {
 			padding: 8px 10px 0 0;
@@ -52,11 +42,7 @@
 	}
 
 	.b-list-content {
-		position: absolute;
+		height: calc(100% - 44px - 46px);
-		top: 45px;
-		bottom: 46px;
-		left: 0;
-		width: @contacts-popup-left-width;
 		overflow: hidden;
 		overflow-y: auto;
 		scroll-behavior: smooth;
@@ -87,9 +73,8 @@
 		position: relative;
 
 		margin: 0;
-		border: 0;
 		border-left: 6px solid #eee;
-		border-bottom: 1px solid rgba(128,128,128,0.25);
+		border-bottom: 1px solid var(--border-color, #ddd);
 
 		&.focused {
 			border-left-color: #bbb;
@@ -132,15 +117,17 @@
 		}
 	}
 
+	/* Right */
+
+	.right {
+		width: 100%;
+		border-left: 1px solid var(--border-color, #ddd);
+	}
+
 	.b-view-content-toolbar {
+		border-top: 1px solid var(--border-color, #ddd);
 		padding: 7px;
-		position: absolute;
-		bottom: 0;
-		right: 0;
-		left: @contacts-popup-left-width;
-		height: 30px;
 		text-align: right;
-		border-top: 1px solid rgba(128,128,128,0.4);
 
 		.dropdown-menu.right-edge {
 			top: auto;
@@ -149,13 +136,9 @@
 	}
 
 	.b-view-content {
-		position: absolute;
+		height: calc(100% - 46px);
-		top: 0;
+		margin: 0;
-		bottom: 45px;
-		left: @contacts-popup-left-width;
-		right: 0;
 		overflow: auto;
-		border-left: 1px solid rgba(128,128,128,0.25);
 
 		span {
 			height: 20px;
@@ -179,21 +162,8 @@
 		}
 
 		input, textarea {
-			box-shadow: none;
-			border-color: #fff;
-			font-size: 18px;
 			width: 70vw;
 			max-width: 400px;
-
-			&:hover {
-				box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-				border-color: #ccc;
-			}
-
-			&:focus {
-				box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-				border-color: #999;
-			}
 		}
 	}
 
@@ -227,3 +197,9 @@ html:not(rl-mobile) {
 		}
 	}
 }
+
+@media screen and (max-width: 900px) {
+	#V-PopupsContacts {
+		width: 100%;
+	}
+}

snappymail/v/0.0.0/app/templates/Views/User/PopupsContacts.html

@@ -43,6 +43,7 @@
 	</div>
 </header>
 <div class="modal-body">
+	<div class="left">
 		<div class="b-list-toolbar">
 			<input type="search" class="e-search" placeholder="Search" autofocus="" autocorrect="off" autocapitalize="off" spellcheck="false" data-i18n="[placeholder]GLOBAL/SEARCH" data-bind="value: search">
 		</div>
@@ -67,11 +68,13 @@
 				</div>
 			</div>
 		</div>
-	<div class="b-list-footer-toolbar thm-message-list-bottom-toolbar">
+		<div class="b-list-footer-toolbar">
 			<div class="footer-pager">
 				<!-- ko template: { name: 'Paginator', data: contactsPaginator } --><!-- /ko -->
 			</div>
 		</div>
+	</div>
+	<div class="right">
 		<form class="b-view-content" spellcheck="false" data-bind="css: {'read-only': contact() && contact().readOnly()}">
 			<div class="b-contact-view-desc" data-bind="visible: !contact()"
 				data-i18n="CONTACTS/CONTACT_VIEW_DESC"></div>
@@ -321,3 +324,4 @@
 			<!-- /ko -->
 		</div>
 	</div>
+</div>