Merge pull request #1914 from netchampfaris/ui-fixes

several ui fixes

frappe/public/css/desk.css

@@ -405,10 +405,10 @@ fieldset[disabled] .form-control {
 .ui-menu .ui-menu-item {
   font-size: 12px;
 }
-.ui-menu .ui-menu-item a,
-.ui-menu .ui-menu-item div {
+.ui-menu .ui-menu-item .ui-menu-item-wrapper {
   padding: 9px 11.8px !important;
   text-decoration: none;
+  margin: 0;
 }
 @media (min-width: 768px) {
   .video-modal {

frappe/public/css/docs.css

@@ -57,16 +57,18 @@
 }
 #search-modal .modal-header {
   background: #fff;
-  display: table;
   width: 100%;
 }
-#search-modal .modal-header form,
-#search-modal .modal-header button {
-  display: table-cell;
+#search-modal .modal-header form {
   vertical-align: middle;
 }
 #search-modal .modal-header button {
-  height: 30px;
+  line-height: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 9;
+  padding: 9px;
 }
 .dropdown-navbar-new-comments > a {
   border: 0;

frappe/public/css/navbar.css

@@ -57,16 +57,18 @@
 }
 #search-modal .modal-header {
   background: #fff;
-  display: table;
   width: 100%;
 }
-#search-modal .modal-header form,
-#search-modal .modal-header button {
-  display: table-cell;
+#search-modal .modal-header form {
   vertical-align: middle;
 }
 #search-modal .modal-header button {
-  height: 30px;
+  line-height: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 9;
+  padding: 9px;
 }
 .dropdown-navbar-new-comments > a {
   border: 0;

frappe/public/css/sidebar.css

@@ -219,7 +219,6 @@ body[data-route^="Module"] .main-menu .form-sidebar {
     box-shadow: 5px 0 25px 0px rgba(0, 0, 0, 0.3);
     height: 100%;
     width: 40%;
-    padding: 25px;
     display: block !important;
     transition: transform 200ms ease-in-out;
   }
@@ -227,11 +226,31 @@ body[data-route^="Module"] .main-menu .form-sidebar {
     transform: translateX(0);
     overflow-y: auto;
   }
+  .layout-side-section .overlay-sidebar .divider {
+    height: 1px;
+    background-color: #d8dfe5;
+    opacity: 0.7;
+  }
+  .layout-side-section .overlay-sidebar li:not(.divider):not(.tagit-new):not(.module-sidebar-item) {
+    padding: 10px 15px;
+  }
+  .layout-side-section .overlay-sidebar .modified-by,
+  .layout-side-section .overlay-sidebar .created-by {
+    margin: 0;
+  }
+  .layout-side-section .overlay-sidebar .badge {
+    top: 9px;
+    right: 15px;
+  }
   .layout-side-section .overlay-sidebar .reports-dropdown {
-    margin: 10px 0;
+    margin-top: 10px;
+    margin-bottom: -10px;
   }
   .layout-side-section .overlay-sidebar .reports-dropdown li:not(.divider) {
-    padding: 10px 0;
+    padding: 12.5px 0 !important;
+  }
+  .layout-side-section .overlay-sidebar .reports-dropdown li.divider {
+    height: 0;
   }
 }
 @media (max-width: 767px) {
@@ -260,7 +279,7 @@ body[data-route^="Module"] .main-menu .form-sidebar {
     padding-right: 0;
   }
   .layout-side-section .module-sidebar-nav .module-link {
-    padding-left: 25px;
+    padding: 15px 15px 15px 25px;
   }
 }
 .sidebar-left .list-sidebar .stat-label,

frappe/public/css/website.css

@@ -694,8 +694,8 @@ fieldset {
   background-color: #fafbfc;
   position: absolute;
   height: 100%;
-  width: 4000px;
-  left: -2000px;
+  width: 100vw;
+  left: calc((100vw - 100%)/ -2);
   z-index: -1;
 }
 .blog-comment-row {

frappe/public/js/frappe/form/templates/form_sidebar.html

@@ -36,7 +36,6 @@
 <ul class="list-unstyled sidebar-menu form-attachments">
 	<li class="divider"></li>
 	<li class="h6 attachments-label">{%= __("Attachments") %}</li>
-	<li class="divider"></li>
 	<li><a class="strong add-attachment">{%= __("Attach File") %}
 		<i class="octicon octicon-plus" style="margin-left: 2px;"></i></li></a>
 </ul>

frappe/public/js/frappe/list/list_sidebar.html

@@ -13,6 +13,7 @@
 		  </ul>
 		</div>
 	</li>
+	<li class="divider"></li>
 	<li class="hide tree-link"><a href="#Tree/{%= doctype %}">{%= __("Tree") %}</a></li>
     <li class="hide calendar-link"><a href="#Calendar/{%= doctype %}">{%= __("Calendar") %}</a></li>
     <li class="hide gantt-link"><a href="#Gantt/{%= doctype %}">{%= __("Gantt") %}</a></li>

frappe/public/js/frappe/ui/toolbar/navbar.html

@@ -61,9 +61,9 @@
 							<div class="input-group" style="width: 100%">
 								<input id="modal-search" type="text" class="form-control"
 								placeholder="{%= __("Search or type a command") %}" aria-haspopup="true">
+								<button type="reset" class="close"><i class="octicon octicon-x"></i></button>
 							</div>
 						</form>
-						<button type="button" class="close" data-dismiss="modal"><i class="octicon octicon-x"></i></button>
 					</div>
 				</div>
 			</div>

frappe/public/less/common.less

@@ -7,6 +7,10 @@
 //   font-family: "Open Sans", "Helvetica", Arial, "sans-serif";
 // }
 
+html {
+	// overflow-x: hidden;
+}
+
 body {
 	font-family: -apple-system, BlinkMacSystemFont,
 	    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",

frappe/public/less/desk.less

@@ -221,9 +221,10 @@ textarea.form-control {
 
 .ui-menu .ui-menu-item {
 	font-size: @text-medium;
-	a, div {
+	.ui-menu-item-wrapper{
 		padding: 9px 11.8px !important;
 		text-decoration: none;
+		margin: 0;
 	}
 }
 

frappe/public/less/navbar.less

@@ -69,15 +69,19 @@
 	}
 	.modal-header {
 		background: #fff;
-		display: table;
 		width: 100%;
 
-		form, button {
-			display: table-cell;
+		form {
 			vertical-align: middle;
 		}
+
 		button {
-			height: 30px;
+			line-height: 0;
+			position: absolute;
+			right: 0;
+			top: 0;
+			z-index: 9;
+			padding: 9px;
 		}
 	}
 }

frappe/public/less/sidebar.less

@@ -288,7 +288,6 @@ body[data-route^="Module"] .main-menu {
 			box-shadow: 5px 0 25px 0px rgba(0,0,0,0.3);
 			height: 100%;
 			width: 40%;
-			padding: 25px;
 			display: block !important;
 			transition: transform 200ms ease-in-out;
 
@@ -297,11 +296,35 @@ body[data-route^="Module"] .main-menu {
 				overflow-y: auto;
 			}
 
+			.divider {
+				height: 1px;
+				background-color: #d8dfe5;
+				opacity: 0.7;
+			}
+
+			li:not(.divider):not(.tagit-new):not(.module-sidebar-item) {
+				padding: 10px 15px;
+			}
+
+			.modified-by, .created-by {
+				margin: 0;
+			}
+
+			.badge {
+				top: 9px;
+				right: 15px;
+			}
+
 			.reports-dropdown {
-				margin: 10px 0;
+				margin-top: 10px;
+				margin-bottom: -10px;
 
 				li:not(.divider) {
-					padding: 10px 0;
+					padding: 12.5px 0 !important;
+				}
+
+				li.divider {
+					height: 0;
 				}
 			}
 		}
@@ -334,7 +357,7 @@ body[data-route^="Module"] .main-menu {
 			padding-right: 0;
 
 			.module-link {
-				padding-left: 25px;
+				padding: 15px 15px 15px 25px;
 			}
 		}
 	}

frappe/public/less/website.less

@@ -405,8 +405,8 @@ fieldset {
     background-color: @light-bg;
     position: absolute;
     height: 100%;
-    width: 4000px;
-    left: -2000px;
+    width: 100vw;
+    left: ~"calc((100vw - 100%)/ -2)";
     z-index: -1;
 }