Mobile Screen Title and Timeline Title #9807 (#3672)

* 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

@@ -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;

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;
   }

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) {

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;

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 {