From 918e42616984f738c48a1aa10d7f24f4be39228d Mon Sep 17 00:00:00 2001
From: Ashwini Save <ashwini@erpnext.com>
Date: Fri, 14 Jul 2017 17:35:09 +0530
Subject: [PATCH] Mobile Screen Title and Timeline Title #9807 (#3672)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Mobile Screen Title and Timeline Title #9807

* Left align Indicator and corrected “Add to Knowledge Base” button misalignment.

* Pushing title changes only, reverted timeline changes.
---
 frappe/public/css/mobile.css       |  9 +++++++++
 frappe/public/css/page.css         |  3 +++
 frappe/public/js/frappe/ui/page.js |  2 +-
 frappe/public/less/mobile.less     | 13 +++++++++++++
 frappe/public/less/page.less       |  3 +++
 5 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/frappe/public/css/mobile.css b/frappe/public/css/mobile.css
index 5d954a9ce2..9e0bbe3597 100644
--- a/frappe/public/css/mobile.css
+++ b/frappe/public/css/mobile.css
@@ -192,6 +192,15 @@ body {
   }
 }
 @media (max-width: 767px) {
+  body[data-route^="Form"] .page-title .title-text {
+    font-size: 16px;
+    width: calc(100% - 30px);
+  }
+  body[data-route^="Form"] .page-title .indicator {
+    float: left;
+    margin-top: 10px;
+    margin-right: 5px;
+  }
   .modal .modal-dialog {
     margin: 0px;
     padding: 0px;
diff --git a/frappe/public/css/page.css b/frappe/public/css/page.css
index a7e89d00cd..f5ccdc5a6a 100644
--- a/frappe/public/css/page.css
+++ b/frappe/public/css/page.css
@@ -146,6 +146,9 @@ select.input-sm {
     right: 101px;
     width: 100%;
   }
+  .page-title h1 {
+    padding-right: 170px;
+  }
   .page-head .page-title h1 {
     font-size: 18px;
   }
diff --git a/frappe/public/js/frappe/ui/page.js b/frappe/public/js/frappe/ui/page.js
index 3bb47bcae1..714d474ae5 100644
--- a/frappe/public/js/frappe/ui/page.js
+++ b/frappe/public/js/frappe/ui/page.js
@@ -95,7 +95,7 @@ frappe.ui.Page = Class.extend({
 	},
 
 	set_indicator: function(label, color) {
-		this.clear_indicator().removeClass("hide").html(label).addClass(color);
+		this.clear_indicator().removeClass("hide").html(`<span class='hidden-xs'>${label}</span>`).addClass(color);
 	},
 
 	add_action_icon: function(icon, click) {
diff --git a/frappe/public/less/mobile.less b/frappe/public/less/mobile.less
index 60fa2b4f6f..06a3a26a15 100644
--- a/frappe/public/less/mobile.less
+++ b/frappe/public/less/mobile.less
@@ -223,6 +223,19 @@ body {
 }
 
 @media(max-width: 767px) {
+	body[data-route^="Form"]{
+		.page-title {
+			.title-text {
+				font-size: 16px;
+				width: calc(~"100% - 30px");
+			}
+			.indicator {
+				float: left;
+				margin-top: 10px;
+				margin-right: 5px;
+			}
+		}
+	}
 	.modal {
 		.modal-dialog {
 			margin: 0px;
diff --git a/frappe/public/less/page.less b/frappe/public/less/page.less
index 11aef785a5..d141c5bc13 100644
--- a/frappe/public/less/page.less
+++ b/frappe/public/less/page.less
@@ -178,6 +178,9 @@ select.input-sm {
 		left: 0;
 		right: 101px;
 		width: 100%;
+		h1 {
+			padding-right: 170px;
+		}
 	}
 
 	.page-head .page-title h1 {