[mobile][fixes] (frappe/frappe#2048) (frappe/erpnext#6386) (#2053)

* [mobile][fix] uploaded images not visible

* [mobile][fix] overflow title

frappe/public/css/docs.css

@@ -48,7 +48,7 @@
 }
 @media (max-width: 767px) {
   .navbar-desk {
-    width: 40% !important;
+    width: 50% !important;
   }
 }
 #search-modal .modal-dialog,
@@ -197,7 +197,7 @@
   display: inline-block;
 }
 .toggle-sidebar {
-  margin-right: 15px;
+  margin-right: 10px;
 }
 .navbar-default .navbar-nav > li > a,
 .navbar-default .navbar-brand {

frappe/public/css/mobile.css

@@ -69,6 +69,11 @@ body {
     white-space: nowrap;
     overflow: hidden;
   }
+  #navbar-breadcrumbs li a {
+    width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
   #navbar-breadcrumbs > li,
   #navbar-breadcrumbs > li > a {
     display: inline-block;
@@ -84,6 +89,7 @@ body {
   }
   .navbar-nav {
     margin: 0px;
+    margin-right: -15px;
   }
   .sidebar .form-group {
     margin-bottom: 0px;

frappe/public/css/navbar.css

@@ -48,7 +48,7 @@
 }
 @media (max-width: 767px) {
   .navbar-desk {
-    width: 40% !important;
+    width: 50% !important;
   }
 }
 #search-modal .modal-dialog,
@@ -197,7 +197,7 @@
   display: inline-block;
 }
 .toggle-sidebar {
-  margin-right: 15px;
+  margin-right: 10px;
 }
 .navbar-default .navbar-nav > li > a,
 .navbar-default .navbar-brand {

frappe/public/css/page.css

@@ -47,7 +47,7 @@
   width: 46px;
   height: 0;
   padding: 23px 0;
-  background-size: cover;
+  background-size: contain;
   background-repeat: no-repeat;
   background-position: center center;
   border-radius: 4px;

frappe/public/js/frappe/form/user_image.js

@@ -15,6 +15,9 @@ frappe.ui.form.set_user_image = function(frm) {
 
 	// if image field has value
 	if (image) {
+		image = (window.cordova && image.indexOf('http')===-1) ?
+			frappe.base_url + image : image;
+
 		image_section
 			.find(".sidebar-image")
 			.css("background-image", 'url("' + image + '")')

frappe/public/js/frappe/list/listview.js

@@ -250,12 +250,15 @@ frappe.views.ListView = Class.extend({
 			"Datetime", "Float", "Int", "Link",
 			"Percent", "Select", "Read Only", "Time"
 		];
+		var image_url = (data.image && window.cordova && data.image.indexOf('http')===-1) ?
+			frappe.base_url + data.image : data.image;
+
 		img_col = $(frappe.render_template("image_view_item_row", {
 			data: data,
 			list: this,
 			columns: this.columns,
 			allowed_type: this.allowed_type,
-			item_image: data.image ? "url('" + data.image + "')" : null,
+			item_image: image_url ? "url('" + image_url + "')" : null,
 			color: frappe.get_palette(data.item_name),
 			subject: this.get_avatar_and_id(data, true),
 			right_column: this.settings.right_column

frappe/public/js/frappe/misc/common.js

@@ -24,10 +24,14 @@ frappe.avatar = function(user, css_class, title) {
 	}
 
 	if(user_info.image) {
+
+		var image = (window.cordova && user_info.image.indexOf('http')===-1) ?
+			frappe.base_url + user_info.image : user_info.image;
+
 		return repl('<span class="avatar %(css_class)s" title="%(title)s">\
 			<span class="avatar-frame" style="background-image: url(%(image)s)"\
 			 title="%(title)s"></span></span>', {
-				image: user_info.image,
+				image: image,
 				title: title,
 				abbr: user_info.abbr,
 				css_class: css_class

frappe/public/less/mobile.less

@@ -92,6 +92,12 @@ body {
 			max-width: 150px;
 			white-space: nowrap;
 			overflow: hidden;
+
+			a {
+				width: 100px;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
 		}
 	}
 
@@ -112,6 +118,7 @@ body {
 
 	.navbar-nav {
 		margin: 0px;
+		margin-right: -15px;
 	}
 
 	.sidebar .form-group {

frappe/public/less/navbar.less

@@ -59,7 +59,7 @@
 
 @media (max-width: 767px) {
 	.navbar-desk {
-		width: 40% !important;
+		width: 50% !important;
 	}
 }
 
@@ -225,7 +225,7 @@
 }
 
 .toggle-sidebar {
-	margin-right: 15px;
+	margin-right: 10px;
 }
 
 .navbar-default .navbar-nav > li > a,

frappe/public/less/page.less

@@ -58,7 +58,7 @@
 		width: 46px;
 		height: 0;
 		padding: 23px 0;
-		background-size: cover;
+		background-size: contain;
 		background-repeat: no-repeat;
 		background-position: center center;
 		border-radius: 4px;