From 875ef3bfec78ffe99689a0f298f8ecd8c4e03b0f Mon Sep 17 00:00:00 2001
From: Rushabh Mehta <rmehta@gmail.com>
Date: Fri, 28 Aug 2015 18:31:23 +0530
Subject: [PATCH] [style] use thin fonts for mobile, tablets and other cleanups

---
 frappe/public/css/desk.css                    |   3 -
 frappe/public/css/form.css                    |  67 ++-
 frappe/public/css/list.css                    |  16 +
 frappe/public/css/mobile.css                  | 411 +++++++--------
 frappe/public/css/module.css                  |  11 +
 frappe/public/css/page.css                    |  21 +
 frappe/public/js/frappe/form/control.js       |   2 +-
 frappe/public/js/frappe/form/grid.js          |   1 -
 frappe/public/js/frappe/form/grid_form.html   |   4 +-
 frappe/public/js/frappe/list/doclistview.js   |   5 +
 frappe/public/js/frappe/ui/page.html          |   4 +-
 frappe/public/js/frappe/ui/toolbar/toolbar.js |   9 +-
 .../frappe/views/module/module_section.html   |   6 +
 frappe/public/less/desk.less                  |   4 -
 frappe/public/less/form.less                  |  99 +++-
 frappe/public/less/list.less                  |  19 +
 frappe/public/less/mobile.less                | 493 ++++++++----------
 frappe/public/less/module.less                |  16 +
 frappe/public/less/page.less                  |  27 +
 frappe/public/less/variables.less             |   4 +
 20 files changed, 706 insertions(+), 516 deletions(-)

diff --git a/frappe/public/css/desk.css b/frappe/public/css/desk.css
index d10b2eb29a..da08417be1 100644
--- a/frappe/public/css/desk.css
+++ b/frappe/public/css/desk.css
@@ -475,9 +475,6 @@ ul.linked-with-list li {
   margin-top: 5px;
   text-align: center;
 }
-.set-filters .btn-xs {
-  padding: 0px 10px 2px;
-}
 .intro-area {
   padding: 15px;
 }
diff --git a/frappe/public/css/form.css b/frappe/public/css/form.css
index e93c3624ac..77307f7484 100644
--- a/frappe/public/css/form.css
+++ b/frappe/public/css/form.css
@@ -12,10 +12,13 @@
   border-bottom: 1px solid #d1d8dd;
 }
 .form-inner-toolbar {
-  padding: 10px 15px;
+  padding: 10px 15px 0px;
   background-color: #fafbfc;
   text-align: right;
 }
+.form-inner-toolbar .btn {
+  margin-bottom: 10px;
+}
 .form-clickable-section {
   border-top: 1px solid #d1d8dd;
   padding: 10px 15px;
@@ -195,8 +198,68 @@ select.form-control {
     padding-right: 0px;
   }
 }
-@media (max-width: 768px) {
+@media (max-width: 991px) {
+  .form-section .form-section-heading {
+    margin-top: 10px;
+  }
+}
+@media (max-width: 767px) {
   .form-section .section-head {
     padding: 15px 15px 15px 0px;
   }
+  .form-column {
+    border-bottom: 1px solid #ebeff2;
+  }
+  .form-column:last-child {
+    border-bottom: 0px;
+  }
+  .form-section {
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+  }
+  .form-grid {
+    margin-left: -17px;
+    margin-right: -17px;
+    border-left: none !important;
+    border-right: none !important;
+    border-radius: none;
+  }
+  .form-page .form-section {
+    padding: 0px 15px;
+  }
+  .form-page .frappe-control {
+    padding: 7px 15px;
+    border-bottom: 1px solid #ebeff2;
+    margin: 0px -15px;
+  }
+  .form-page .frappe-control .link-btn {
+    top: -2px;
+  }
+  .form-page .frappe-control .like-disabled-input {
+    min-height: 0px !important;
+  }
+  .form-page .frappe-control:last-child {
+    border-bottom: 0px;
+  }
+  .form-page .frappe-control[data-fieldtype="Table"] {
+    padding: 0px 15px;
+    margin-top: -1px;
+    border-bottom: none;
+  }
+  .form-page .frappe-control[data-fieldtype="Table"] label {
+    margin-top: 7px;
+  }
+  .form-page .form-control {
+    border: none;
+    box-shadow: none;
+    background-color: inherit;
+    height: auto;
+    padding: 0px;
+    margin-bottom: 7px;
+    border-radius: 0px;
+    text-align: left !important;
+  }
+  .form-page .form-control:focus {
+    box-shadow: none;
+  }
 }
diff --git a/frappe/public/css/list.css b/frappe/public/css/list.css
index ef86b944cb..5c7767d848 100644
--- a/frappe/public/css/list.css
+++ b/frappe/public/css/list.css
@@ -152,3 +152,19 @@
 .list-value {
   vertical-align: middle;
 }
+@media (max-width: 991px) {
+  .doclist-row .list-id {
+    font-weight: 200;
+  }
+}
+@media (max-width: 767px) {
+  .doclist-row {
+    font-size: 14px;
+  }
+  .doclist-row [type='checkbox'] {
+    display: none;
+  }
+  .doclist-row .list-row-right .list-row-modified {
+    display: none;
+  }
+}
diff --git a/frappe/public/css/mobile.css b/frappe/public/css/mobile.css
index 1eb5f49de5..f0c56ab740 100644
--- a/frappe/public/css/mobile.css
+++ b/frappe/public/css/mobile.css
@@ -54,212 +54,6 @@ body {
 .offcanvas .sidebar .dropdown-menu > li > a:active {
   background-color: #f0f4f7;
 }
-@media (max-width: 767px) {
-  .modal .modal-dialog {
-    margin: 0px;
-    padding: 0px;
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    top: 0px;
-    bottom: 0px;
-    left: 0px;
-    right: 0px;
-    overflow-y: auto;
-    background-color: #fff;
-  }
-  .modal .modal-content {
-    border-radius: 0px;
-    border: none;
-    box-shadow: none;
-    height: 100%;
-  }
-  .modal .modal-body .form-layout {
-    margin: -15px;
-  }
-  .modal .file-upload .input-upload {
-    width: 100%;
-    text-align: center;
-  }
-  .modal .file-upload .input-upload .btn-browse {
-    width: 100%;
-  }
-  .modal .file-upload .web-link-wrapper {
-    display: block;
-    width: 100% !important;
-    text-align: center;
-  }
-  .modal .file-upload .web-link-wrapper .file-upload-or {
-    display: block;
-    margin: 15px 24px;
-  }
-  .modal .file-upload .web-link-wrapper .input-link {
-    width: 100% !important;
-  }
-  .layout-main-section-wrapper {
-    padding: 0px;
-  }
-  .form-section {
-    padding-left: 0px !important;
-    padding-right: 0px !important;
-  }
-  .layout-main-section {
-    border-left-color: transparent !important;
-    border-right-color: transparent !important;
-  }
-  .form-grid {
-    margin-left: -17px;
-    margin-right: -17px;
-    border-left: none !important;
-    border-right: none !important;
-    border-radius: none;
-  }
-  .form-page .form-section {
-    padding: 0px 15px;
-  }
-  .form-page .frappe-control {
-    padding: 7px 15px;
-    border-bottom: 1px solid #d1d8dd;
-    margin: 0px -15px;
-  }
-  .form-page .frappe-control .link-btn {
-    top: -2px;
-  }
-  .form-page .frappe-control .like-disabled-input {
-    min-height: 0px !important;
-  }
-  .form-page .frappe-control[data-fieldtype="Table"] {
-    padding: 0px 15px;
-    margin-top: -1px;
-    border-bottom: none;
-  }
-  .form-page .frappe-control[data-fieldtype="Table"] label {
-    margin-top: 7px;
-  }
-  .form-page .form-section:last-child .form-column:last-child .frappe-control:last-child {
-    border-bottom: none;
-  }
-  .form-page .form-control {
-    border: none;
-    box-shadow: none;
-    background-color: inherit;
-    height: auto;
-    padding: 0px;
-    margin-bottom: 7px;
-    border-radius: 0px;
-    text-align: left !important;
-  }
-  .form-page .form-control:focus {
-    box-shadow: none;
-  }
-  .timeline {
-    border-left: none !important;
-    border-right: none !important;
-  }
-  .timeline .timeline-head {
-    padding: 7px 15px;
-  }
-  .timeline .timeline-item {
-    padding: 15px;
-    border-bottom: 1px dashed #d1d8dd;
-  }
-  .timeline .timeline-item:last-child {
-    border-bottom: none;
-  }
-  .list-row {
-    padding: 13px 15px !important;
-  }
-  .doclist-row {
-    position: relative;
-    padding-right: 10px;
-  }
-  .doclist-row .list-row-id {
-    left: 18px;
-    text-align: left;
-    margin-top: 3px;
-  }
-  .doclist-row.has-checkbox .list-row-id {
-    left: 40px;
-  }
-  .doclist-row .list-row-indicator {
-    position: absolute;
-    right: 0px;
-    top: -20px;
-  }
-  .doclist-row .list-row-modified {
-    margin-right: -10px;
-  }
-  .doclist-row .list-row-left {
-    z-index: 1;
-  }
-  .doclist-row .list-row-right {
-    float: right;
-  }
-  .doclist-row .list-row-right .list-row-indicator {
-    top: 4px;
-  }
-  .doclist-row .list-row-right .list-row-indicator .indicator::before,
-  .doclist-row .list-row-right .list-row-indicator .indicator::after {
-    height: 12px;
-    width: 12px;
-    border-radius: 12px;
-  }
-  .doclist-row .list-row-right.no-right-column {
-    position: absolute;
-    top: 0;
-    right: 10px;
-    left: -10px;
-    width: 100%;
-  }
-  body[data-route^="messages"] .navbar-center {
-    display: block !important;
-    position: absolute;
-    top: 10px;
-    left: 25%;
-    right: 25%;
-    text-align: center;
-  }
-  #page-messages .layout-side-section {
-    position: relative;
-    left: 0px;
-    border-right: 1px solid #d1d8dd;
-    padding-left: 0px;
-    float: left;
-    width: 76px;
-  }
-  #page-messages .layout-main-section-wrapper {
-    position: absolute;
-    left: 75px;
-    right: 0px;
-    border-left: 1px solid #d1d8dd;
-    float: left;
-  }
-  #page-messages .module-sidebar-item {
-    margin: 0px;
-  }
-  #page-messages .module-sidebar-item .messages-sidebar-link {
-    padding: 15px;
-  }
-  #page-messages .timeline-head {
-    padding: 15px 15px 7px;
-  }
-  #page-messages .list-row {
-    padding: 7px 0px;
-  }
-  #page-messages .message-row-right {
-    margin-top: 10px;
-    text-align: left;
-  }
-  #page-setup-wizard .form-section:first-child .form-column:first-child .frappe-control:first-child {
-    border-top: 1px solid #d1d8dd;
-  }
-  #page-setup-wizard .form-section:last-child .form-column:last-child .frappe-control:last-child {
-    border-bottom: 1px solid #d1d8dd;
-  }
-  #page-setup-wizard .setup-wizard-slide .form {
-    border: none;
-  }
-}
 @media (max-width: 991px) {
   input[type='checkbox'] {
     -webkit-appearance: none;
@@ -291,16 +85,12 @@ body {
   .layout-main {
     position: relative;
   }
-  .page-head .page-title h1 {
-    font-size: 22px;
-    margin-top: 22px;
-  }
   body[data-route^="Form"] .page-title h1 {
     margin-top: 14px;
   }
   body[data-route^="Form"] .page-title .indicator {
     display: block;
-    margin-top: -5px;
+    margin-top: -9px;
     margin-bottom: 3px;
   }
   body[data-route^="Form"] .page-actions {
@@ -312,7 +102,12 @@ body {
     display: block;
     position: absolute;
     bottom: -30px;
-    right: 8px;
+    right: 5px;
+    min-width: 200px;
+  }
+  .control-label,
+  .grid-heading-row .grid-static-col {
+    font-weight: 200;
   }
   .toggle-navbar-new-comments {
     padding: 8px 0px !important;
@@ -328,7 +123,7 @@ body {
     padding: 7px 0px !important;
   }
   .module-item h4 {
-    font-weight: normal;
+    font-weight: 200;
   }
   #navbar-breadcrumbs {
     margin: 0px;
@@ -486,13 +281,191 @@ body {
   body[data-route="desktop"] .navbar .navbar-home {
     display: none !important;
   }
-  body[data-route^="Module"] .page-title {
-    width: 100%;
-  }
-  body[data-route^="Module"] .page-actions {
-    display: none !important;
-  }
   .linked-with-dialog {
     width: 100% !important;
   }
+  body,
+  .btn,
+  .indicator {
+    font-weight: 200;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6,
+  .like-disabled-input,
+  .bold,
+  .strong,
+  strong,
+  b {
+    font-weight: 400;
+  }
+}
+@media (max-width: 767px) {
+  .modal .modal-dialog {
+    margin: 0px;
+    padding: 0px;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    overflow-y: auto;
+    background-color: #fff;
+  }
+  .modal .modal-content {
+    border-radius: 0px;
+    border: none;
+    box-shadow: none;
+    height: 100%;
+  }
+  .modal .modal-body .form-layout {
+    margin: -15px;
+  }
+  .modal .file-upload .input-upload {
+    width: 100%;
+    text-align: center;
+  }
+  .modal .file-upload .input-upload .btn-browse {
+    width: 100%;
+  }
+  .modal .file-upload .web-link-wrapper {
+    display: block;
+    width: 100% !important;
+    text-align: center;
+  }
+  .modal .file-upload .web-link-wrapper .file-upload-or {
+    display: block;
+    margin: 15px 24px;
+  }
+  .modal .file-upload .web-link-wrapper .input-link {
+    width: 100% !important;
+  }
+  .layout-main-section-wrapper {
+    padding: 0px;
+  }
+  .layout-main-section {
+    border-left-color: transparent !important;
+    border-right-color: transparent !important;
+  }
+  .timeline {
+    border-left: none !important;
+    border-right: none !important;
+  }
+  .timeline .timeline-head {
+    padding: 7px 15px;
+  }
+  .timeline .timeline-item {
+    padding: 15px;
+    border-bottom: 1px dashed #d1d8dd;
+  }
+  .timeline .timeline-item:last-child {
+    border-bottom: none;
+  }
+  .list-row {
+    padding: 13px 15px !important;
+  }
+  .doclist-row {
+    position: relative;
+    padding-right: 10px;
+  }
+  .doclist-row .list-row-id {
+    left: 18px;
+    text-align: left;
+    margin-top: 3px;
+  }
+  .doclist-row.has-checkbox .list-row-id {
+    left: 40px;
+  }
+  .doclist-row .list-row-indicator {
+    position: absolute;
+    right: 0px;
+    top: -20px;
+  }
+  .doclist-row .list-row-modified {
+    margin-right: -10px;
+  }
+  .doclist-row .list-row-left {
+    z-index: 1;
+  }
+  .doclist-row .list-row-right {
+    float: right;
+  }
+  .doclist-row .list-row-right .list-row-indicator {
+    top: 4px;
+  }
+  .doclist-row .list-row-right .list-row-indicator .indicator::before,
+  .doclist-row .list-row-right .list-row-indicator .indicator::after {
+    height: 12px;
+    width: 12px;
+    border-radius: 12px;
+  }
+  .doclist-row .list-row-right.no-right-column {
+    position: absolute;
+    top: 0;
+    right: 10px;
+    left: -10px;
+    width: 100%;
+  }
+  body[data-route^="messages"] .navbar-center {
+    display: block !important;
+    position: absolute;
+    top: 10px;
+    left: 25%;
+    right: 25%;
+    text-align: center;
+  }
+  #page-messages .layout-side-section {
+    position: relative;
+    left: 0px;
+    border-right: 1px solid #d1d8dd;
+    padding-left: 0px;
+    float: left;
+    width: 76px;
+  }
+  #page-messages .layout-main-section-wrapper {
+    position: absolute;
+    left: 75px;
+    right: 0px;
+    border-left: 1px solid #d1d8dd;
+    float: left;
+  }
+  #page-messages .module-sidebar-item {
+    margin: 0px;
+  }
+  #page-messages .module-sidebar-item .messages-sidebar-link {
+    padding: 15px;
+  }
+  #page-messages .timeline-head {
+    padding: 15px 15px 7px;
+  }
+  #page-messages .list-row {
+    padding: 7px 0px;
+  }
+  #page-messages .message-row-right {
+    margin-top: 10px;
+    text-align: left;
+  }
+  #page-setup-wizard .form-section:first-child .form-column:first-child .frappe-control:first-child {
+    border-top: 1px solid #d1d8dd;
+  }
+  #page-setup-wizard .form-section:last-child .form-column:last-child .frappe-control:last-child {
+    border-bottom: 1px solid #d1d8dd;
+  }
+  #page-setup-wizard .setup-wizard-slide .form {
+    border: none;
+  }
+  body[data-route^="Form"] .page-title .indicator {
+    margin-top: 1px;
+  }
 }
diff --git a/frappe/public/css/module.css b/frappe/public/css/module.css
index dea5ef4fc1..75024f0c7a 100644
--- a/frappe/public/css/module.css
+++ b/frappe/public/css/module.css
@@ -41,3 +41,14 @@
   background-color: red;
   width: 0px;
 }
+@media (max-width: 767px) {
+  body[data-route^="Module"] .page-title {
+    width: 100%;
+  }
+  body[data-route^="Module"] .page-actions {
+    display: none !important;
+  }
+  body[data-route^="Module"] .layout-main-section {
+    border-bottom: 0px;
+  }
+}
diff --git a/frappe/public/css/page.css b/frappe/public/css/page.css
index 94f80816bd..d05a7d86f8 100644
--- a/frappe/public/css/page.css
+++ b/frappe/public/css/page.css
@@ -104,3 +104,24 @@ select.input-sm {
 .message-page .btn-home {
   margin-top: 1rem;
 }
+@media (max-width: 768px) {
+  .page-head .page-title h1 {
+    font-size: 22px;
+    margin-top: 22px;
+  }
+}
+@media (max-width: 767px) {
+  .page-actions {
+    width: 100px;
+    float: right;
+  }
+  .page-title {
+    position: absolute;
+    left: 0;
+    right: 101px;
+    width: 100%;
+  }
+  .page-head .page-title h1 {
+    font-size: 18px;
+  }
+}
diff --git a/frappe/public/js/frappe/form/control.js b/frappe/public/js/frappe/form/control.js
index f9a26afc87..1a133ab00a 100644
--- a/frappe/public/js/frappe/form/control.js
+++ b/frappe/public/js/frappe/form/control.js
@@ -654,7 +654,7 @@ frappe.ui.form.ControlCheck = frappe.ui.form.ControlData.extend({
 frappe.ui.form.ControlButton = frappe.ui.form.ControlData.extend({
 	make_input: function() {
 		var me = this;
-		this.$input = $('<button class="btn btn-default btn-sm">')
+		this.$input = $('<button class="btn btn-default btn-xs">')
 			.prependTo(me.input_area)
 			.on("click", function() {
 				me.onclick();
diff --git a/frappe/public/js/frappe/form/grid.js b/frappe/public/js/frappe/form/grid.js
index 8d37be262b..d55f1d24bc 100644
--- a/frappe/public/js/frappe/form/grid.js
+++ b/frappe/public/js/frappe/form/grid.js
@@ -399,7 +399,6 @@ frappe.ui.form.GridRow = Class.extend({
 				.attr("data-fieldname", df.fieldname)
 				.data("df", df)
 				.appendTo(this.row)
-			if(!this.doc) $col.css({"font-weight":"bold"})
 		}
 
 	},
diff --git a/frappe/public/js/frappe/form/grid_form.html b/frappe/public/js/frappe/form/grid_form.html
index 0b7ce326c5..0cc8d4a370 100644
--- a/frappe/public/js/frappe/form/grid_form.html
+++ b/frappe/public/js/frappe/form/grid_form.html
@@ -16,8 +16,8 @@
 </div>
 <div class="grid-form-body">
 	<div class="form-area"></div>
-	<div class="grid-footer-toolbar clearfix">
-		<span class="text-muted hidden-xs">
+	<div class="grid-footer-toolbar clearfix hidden-xs">
+		<span class="text-muted">
             <i class="octicon octicon-keyboard"></i> &ndash;
 			<kbd>{%= __("Ctrl + Up") %}</kbd>, <kbd>{%= __("Ctrl + Down") %}</kbd>, <kbd>{%= __("ESC") %}</kbd>
         </span>
diff --git a/frappe/public/js/frappe/list/doclistview.js b/frappe/public/js/frappe/list/doclistview.js
index fb5d352467..61c287b1b8 100644
--- a/frappe/public/js/frappe/list/doclistview.js
+++ b/frappe/public/js/frappe/list/doclistview.js
@@ -339,6 +339,11 @@ frappe.views.DocListView = frappe.ui.Listing.extend({
 			me.run();
 		}, "octicon octicon-sync");
 
+		this.page.btn_secondary.addClass("hidden-xs");
+		this.page.add_menu_item(__("Refresh"), function() {
+			me.run();
+		}, "octicon octicon-sync").addClass("visible-xs");
+
 		if(frappe.model.can_import(this.doctype)) {
 			this.page.add_menu_item(__("Import"), function() {
 				frappe.set_route("data-import-tool", {
diff --git a/frappe/public/js/frappe/ui/page.html b/frappe/public/js/frappe/ui/page.html
index adf6a52039..63bb0386f9 100644
--- a/frappe/public/js/frappe/ui/page.html
+++ b/frappe/public/js/frappe/ui/page.html
@@ -1,14 +1,14 @@
 <div class="page-head">
 	<div class="container">
 		<div class="row">
-			<div class="col-sm-7 col-xs-6 page-title">
+			<div class="col-md-7 col-sm-8 col-xs-6 page-title">
 				<!-- title -->
 				<h1>
 						<div class="text-ellipsis title-text"></div>
 						<span class="indicator hide"></span>
 				</h1>
 			</div>
-			<div class="text-right col-sm-5 col-xs-6 page-actions">
+			<div class="text-right col-md-5 col-sm-4 col-xs-6 page-actions">
 				<!-- ID and icon buttons -->
 				<h6 class="text-ellipsis sub-heading hide text-muted"></h6>
 				<span class="page-icon-group hide hidden-xs hidden-sm"></span>
diff --git a/frappe/public/js/frappe/ui/toolbar/toolbar.js b/frappe/public/js/frappe/ui/toolbar/toolbar.js
index 0cbf13728e..1b6222c00a 100644
--- a/frappe/public/js/frappe/ui/toolbar/toolbar.js
+++ b/frappe/public/js/frappe/ui/toolbar/toolbar.js
@@ -8,10 +8,7 @@ frappe.ui.toolbar.Toolbar = Class.extend({
 		var header = $('header').append(frappe.render_template("navbar", {}));
 		var sidebar = $('.offcanvas .sidebar-left').append(frappe.render_template("offcanvas_left_sidebar", {}));
 
-		header.find(".toggle-sidebar").on("click", function() {
-			$(".offcanvas").toggleClass("active-left").removeClass("active-right");
-			return false;
-		});
+		header.find(".toggle-sidebar").on("click", frappe.ui.toolbar.toggle_left_sidebar);
 
 		header.find(".toggle-navbar-new-comments").on("click", function() {
 			$(".offcanvas").toggleClass("active-right").removeClass("active-left");
@@ -60,6 +57,10 @@ $.extend(frappe.ui.toolbar, {
 
 		$('<li class="divider custom-menu"></li>').prependTo(menu);
 	},
+	toggle_left_sidebar: function() {
+		$(".offcanvas").toggleClass("active-left").removeClass("active-right");
+		return false;
+	}
 })
 
 frappe.ui.toolbar.update_notifications = function() {
diff --git a/frappe/public/js/frappe/views/module/module_section.html b/frappe/public/js/frappe/views/module/module_section.html
index e59adc5077..4e268dad95 100644
--- a/frappe/public/js/frappe/views/module/module_section.html
+++ b/frappe/public/js/frappe/views/module/module_section.html
@@ -21,4 +21,10 @@
 		{% } %}
 	</div>
 	{% } %}
+    <div class="row visible-sm visible-xs" style="padding: 15px;">
+        <div class="col-xs-12">
+            <a onclick="frappe.ui.toolbar.toggle_left_sidebar();" class="text-primary">
+                {%= __("More") %}</a>
+        </div>
+    </div>
 </div>
diff --git a/frappe/public/less/desk.less b/frappe/public/less/desk.less
index faa5f99d7f..2d77a2b0a0 100644
--- a/frappe/public/less/desk.less
+++ b/frappe/public/less/desk.less
@@ -322,10 +322,6 @@ ul.linked-with-list li {
 	text-align: center;
 }
 
-.set-filters .btn-xs {
-	padding: 0px 10px 2px;
-}
-
 .intro-area {
 	padding: 15px;
 }
diff --git a/frappe/public/less/form.less b/frappe/public/less/form.less
index 56d05d2ca5..0b14d168a7 100644
--- a/frappe/public/less/form.less
+++ b/frappe/public/less/form.less
@@ -17,9 +17,13 @@
 }
 
 .form-inner-toolbar {
-	padding: 10px 15px;
+	padding: 10px 15px 0px;
 	background-color: @light-bg;
 	text-align: right;
+
+	.btn {
+		margin-bottom: 10px;
+	}
 }
 
 .form-clickable-section {
@@ -236,6 +240,7 @@ select.form-control {
 	color: @text-muted;
 }
 
+// above mobile
 @media (min-width: 768px) {
 	.layout-main .form-column.col-sm-12 > form > .input-max-width {
 		max-width: 50%;
@@ -249,11 +254,101 @@ select.form-control {
 	}
 }
 
-@media (max-width: 768px) {
+// upto tablets
+@media (max-width: @screen-sm) {
+	.form-section .form-section-heading {
+		margin-top: 10px;
+	}
+}
+
+// mobile
+@media (max-width: @screen-xs) {
 	// padding to form section on mobile
 	.form-section {
 		.section-head {
 			padding: 15px 15px 15px 0px;
 		}
 	}
+
+	.form-column {
+		border-bottom: 1px solid @light-border-color;
+	}
+
+	.form-column:last-child {
+		border-bottom: 0px;
+	}
+
+	.form-section {
+		padding-left: 0px !important;
+		padding-right: 0px !important;
+	}
+
+	.form-grid {
+		margin-left: -17px;
+		margin-right: -17px;
+		border-left: none !important;
+		border-right: none !important;
+		border-radius: none;
+	}
+
+	// forms
+
+	.form-page {
+		.form-section {
+			padding: 0px 15px;
+		}
+
+		.frappe-control {
+			padding: 7px 15px;
+			border-bottom: 1px solid @light-border-color;
+			margin: 0px -15px;
+
+			.link-btn {
+				top: -2px;
+			}
+
+			.like-disabled-input {
+				min-height: 0px !important;
+			}
+		}
+
+		.frappe-control:last-child {
+			border-bottom: 0px;
+		}
+
+		.frappe-control[data-fieldtype="Table"] {
+			padding: 0px 15px;
+			margin-top: -1px;
+			border-bottom: none;
+
+			label {
+				margin-top: 7px;
+			}
+		}
+
+		// .form-section:last-child .form-column:last-child .frappe-control:last-child {
+		// 	border-bottom: none;
+		// }
+
+		.form-control {
+			border: none;
+			box-shadow: none;
+			background-color: inherit;
+			height: auto;
+			padding: 0px;
+			margin-bottom: 7px;
+			border-radius: 0px;
+
+			// make all fields left-aligned!
+			text-align: left !important;
+		}
+
+		.form-control:focus {
+			box-shadow: none;
+		}
+
+		// select.form-control {
+		// 	text-indent: -2px;
+		// }
+	}
 }
diff --git a/frappe/public/less/list.less b/frappe/public/less/list.less
index bf401da30a..20e1d47610 100644
--- a/frappe/public/less/list.less
+++ b/frappe/public/less/list.less
@@ -196,3 +196,22 @@
 	vertical-align: middle;
 }
 
+@media(max-width: @screen-sm) {
+	.doclist-row .list-id {
+		font-weight: 200;
+	}
+}
+
+@media(max-width: 767px) {
+	.doclist-row {
+		font-size: @text-regular;
+	}
+
+	.doclist-row [type='checkbox'] {
+		display: none;
+	}
+
+	.doclist-row .list-row-right .list-row-modified {
+		display: none;
+	}
+}
diff --git a/frappe/public/less/mobile.less b/frappe/public/less/mobile.less
index 753d12d282..527c688038 100644
--- a/frappe/public/less/mobile.less
+++ b/frappe/public/less/mobile.less
@@ -2,6 +2,222 @@
 @import "mixins.less";
 @import "offcanvas.less";
 
+@media(max-width: 991px) {
+	input[type='checkbox'] {
+	    -webkit-appearance:none;
+	    width: 12px;
+	    height: 12px;
+	    background: white;
+	    border-radius: 6px;
+	    border: 1px solid @border-color;
+		display: inline-block;
+	}
+	input[type='checkbox']:checked {
+	    background: @checkbox-color;
+		border-color: @checkbox-color;
+	}
+	input.list-select-all {
+		margin-top: 0px;
+	}
+	.input-area input[type='checkbox'] {
+		margin-top: 2px;
+		margin-left: -23px;
+	}
+
+	.intro-area,
+	.footnote-area {
+		padding: 15px 0px;
+	}
+
+	.grid-row-open {
+		top: 0;
+	}
+
+	.layout-main {
+		position: relative;
+	}
+
+	body[data-route^="Form"] {
+		.page-title h1 {
+			margin-top: 14px;
+		}
+
+		.page-title .indicator {
+			display: block;
+			margin-top: -9px;
+			margin-bottom: 3px;
+		}
+
+		.page-actions {
+			padding-top: 10px !important;
+			padding-bottom: 0px !important;
+			padding-left: 0px !important;
+		}
+
+		.page-head .sub-heading {
+			display: block;
+			position: absolute;
+			bottom: -30px;
+			right: 5px;
+			min-width: 200px;
+		}
+	}
+
+	// make thinner labels
+	.control-label,
+	.grid-heading-row .grid-static-col {
+		font-weight: 200;
+	}
+
+	// navbar & breadcrumbs
+	.toggle-navbar-new-comments {
+		padding: 8px 0px !important;
+	}
+
+	.navbar > .container > .navbar-header {
+		float: left;
+		width: 80%;
+	}
+
+	.navbar > .container > .navbar-right {
+		float: right;
+	}
+
+	.module-item {
+		padding: 7px 0px !important;
+
+		h4 {
+			font-weight: 200;
+		}
+	}
+
+	#navbar-breadcrumbs {
+		margin: 0px;
+		display: inline-block;
+	}
+
+	#navbar-breadcrumbs > li,
+	#navbar-breadcrumbs > li > a {
+		display: inline-block;
+		vertical-align: middle;
+	}
+
+	#navbar-breadcrumbs > li > a:before {
+		.breadcrumb-divider-left();
+	}
+
+	// select all except last 2
+	#navbar-breadcrumbs li:not(:nth-last-child(-n+1)) {
+		display: none;
+	}
+
+	.navbar-nav {
+		margin: 0px;
+	}
+
+	.offcanvas-mobile-mixin();
+
+	.sidebar .form-group {
+		margin-bottom: 0px;
+	}
+
+	#sidebar-search {
+		height: 27px;
+	}
+
+	.sidebar .navbar-search-icon {
+		float: right;
+		color: @navbar-default-color;
+		font-size: inherit;
+		position: relative;
+		right: 7px;
+		top: -20px;
+		height: 0;
+	}
+
+	.sidebar form {
+		padding: 7px;
+	}
+
+	.sidebar .main-menu {
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 41px;
+		overflow-y: auto;
+	}
+
+	.sidebar .user-menu {
+		padding: 9px 14px;
+		background-color: @navbar-default-bg;
+
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		right: 0;
+	}
+
+	.sidebar .user-menu,
+	.sidebar .user-menu .octicon {
+		color: @navbar-default-color;
+	}
+
+	.sidebar .user-menu img {
+		margin-top: -1px;
+	}
+
+	// navbar center
+	body[data-route^="Module"] {
+		.navbar-center-show;
+	}
+
+	// show home when no breadcrumbs
+	body.no-breadcrumbs .navbar .navbar-home& {
+		display: inline-block !important;
+		padding-left: 0px;
+		margin-left: 0px;
+		padding-top: 6px;
+
+		&:before {
+			.breadcrumb-divider();
+			.breadcrumb-divider-left();
+		}
+
+		&:hover:before,
+		&:focus:before,
+		&:active:before {
+			color: @text-color !important;
+		}
+	}
+
+	body[data-route=""],
+	body[data-route="desktop"] {
+		.navbar .navbar-home {
+			display: none !important;
+		}
+	}
+
+	.linked-with-dialog {
+		width: 100% !important;
+	}
+
+	// font-weights in mobile and tablets
+	body,
+	.btn,
+	.indicator
+	{
+		font-weight: 200;
+	}
+
+	h1, h2, h3, h4, h5, h6,
+	.h1, .h2, .h3, .h4, .h5, .h6,
+	.like-disabled-input,
+	.bold, .strong, strong, b {
+		font-weight: 400;
+	}
+}
+
 @media(max-width: 767px) {
 	.modal {
 		.modal-dialog {
@@ -61,81 +277,11 @@
 		padding: 0px;
 	}
 
-	.form-section {
-		padding-left: 0px !important;
-		padding-right: 0px !important;
-	}
-
 	.layout-main-section {
 		border-left-color: transparent !important;
 		border-right-color: transparent !important;
 	}
 
-	.form-grid {
-		margin-left: -17px;
-		margin-right: -17px;
-		border-left: none !important;
-		border-right: none !important;
-		border-radius: none;
-	}
-
-	// forms
-
-	.form-page {
-		.form-section {
-			padding: 0px 15px;
-		}
-
-		.frappe-control {
-			padding: 7px 15px;
-			border-bottom: 1px solid @border-color;
-			margin: 0px -15px;
-
-			.link-btn {
-				top: -2px;
-			}
-
-			.like-disabled-input {
-				min-height: 0px !important;
-			}
-		}
-
-		.frappe-control[data-fieldtype="Table"] {
-			padding: 0px 15px;
-			margin-top: -1px;
-			border-bottom: none;
-
-			label {
-				margin-top: 7px;
-			}
-		}
-
-		.form-section:last-child .form-column:last-child .frappe-control:last-child {
-			border-bottom: none;
-		}
-
-		.form-control {
-			border: none;
-			box-shadow: none;
-			background-color: inherit;
-			height: auto;
-			padding: 0px;
-			margin-bottom: 7px;
-			border-radius: 0px;
-
-			// make all fields left-aligned!
-			text-align: left !important;
-		}
-
-		.form-control:focus {
-			box-shadow: none;
-		}
-
-		// select.form-control {
-		// 	text-indent: -2px;
-		// }
-	}
-
 	// timeline
 
 	.timeline {
@@ -276,215 +422,10 @@
 			border: none;
 		}
 	}
-}
-
-@media(max-width: 991px) {
-	input[type='checkbox'] {
-	    -webkit-appearance:none;
-	    width: 12px;
-	    height: 12px;
-	    background: white;
-	    border-radius: 6px;
-	    border: 1px solid @border-color;
-		display: inline-block;
-	}
-	input[type='checkbox']:checked {
-	    background: @checkbox-color;
-		border-color: @checkbox-color;
-	}
-	input.list-select-all {
-		margin-top: 0px;
-	}
-	.input-area input[type='checkbox'] {
-		margin-top: 2px;
-		margin-left: -23px;
-	}
-
-	.intro-area,
-	.footnote-area {
-		padding: 15px 0px;
-	}
-
-	.grid-row-open {
-		top: 0;
-	}
-
-	.layout-main {
-		position: relative;
-	}
-
-	.page-head {
-		.page-title h1 {
-			font-size: 22px;
-			margin-top: 22px;
-		}
-	}
 
 	body[data-route^="Form"] {
-		.page-title h1 {
-			margin-top: 14px;
-		}
-
 		.page-title .indicator {
-			display: block;
-			margin-top: -5px;
-			margin-bottom: 3px;
+			margin-top: 1px;
 		}
-
-		.page-actions {
-			padding-top: 10px !important;
-			padding-bottom: 0px !important;
-			padding-left: 0px !important;
-		}
-
-		.page-head .sub-heading {
-			display: block;
-			position: absolute;
-			bottom: -30px;
-			right: 8px;
-		}
-	}
-
-	// navbar & breadcrumbs
-	.toggle-navbar-new-comments {
-		padding: 8px 0px !important;
-	}
-
-	.navbar > .container > .navbar-header {
-		float: left;
-		width: 80%;
-	}
-
-	.navbar > .container > .navbar-right {
-		float: right;
-	}
-
-	.module-item {
-		padding: 7px 0px !important;
-
-		h4 {
-			font-weight: normal;
-		}
-	}
-
-	#navbar-breadcrumbs {
-		margin: 0px;
-		display: inline-block;
-	}
-
-	#navbar-breadcrumbs > li,
-	#navbar-breadcrumbs > li > a {
-		display: inline-block;
-		vertical-align: middle;
-	}
-
-	#navbar-breadcrumbs > li > a:before {
-		.breadcrumb-divider-left();
-	}
-
-	// select all except last 2
-	#navbar-breadcrumbs li:not(:nth-last-child(-n+1)) {
-		display: none;
-	}
-
-	.navbar-nav {
-		margin: 0px;
-	}
-
-	.offcanvas-mobile-mixin();
-
-	.sidebar .form-group {
-		margin-bottom: 0px;
-	}
-
-	#sidebar-search {
-		height: 27px;
-	}
-
-	.sidebar .navbar-search-icon {
-		float: right;
-		color: @navbar-default-color;
-		font-size: inherit;
-		position: relative;
-		right: 7px;
-		top: -20px;
-		height: 0;
-	}
-
-	.sidebar form {
-		padding: 7px;
-	}
-
-	.sidebar .main-menu {
-		position: absolute;
-		left: 0;
-		right: 0;
-		top: 0;
-		bottom: 41px;
-		overflow-y: auto;
-	}
-
-	.sidebar .user-menu {
-		padding: 9px 14px;
-		background-color: @navbar-default-bg;
-
-		position: absolute;
-		left: 0;
-		bottom: 0;
-		right: 0;
-	}
-
-	.sidebar .user-menu,
-	.sidebar .user-menu .octicon {
-		color: @navbar-default-color;
-	}
-
-	.sidebar .user-menu img {
-		margin-top: -1px;
-	}
-
-	// navbar center
-	body[data-route^="Module"] {
-		.navbar-center-show;
-	}
-
-	// show home when no breadcrumbs
-	body.no-breadcrumbs .navbar .navbar-home& {
-		display: inline-block !important;
-		padding-left: 0px;
-		margin-left: 0px;
-		padding-top: 6px;
-
-		&:before {
-			.breadcrumb-divider();
-			.breadcrumb-divider-left();
-		}
-
-		&:hover:before,
-		&:focus:before,
-		&:active:before {
-			color: @text-color !important;
-		}
-	}
-
-	body[data-route=""],
-	body[data-route="desktop"] {
-		.navbar .navbar-home {
-			display: none !important;
-		}
-	}
-
-	body[data-route^="Module"] {
-		.page-title {
-			width: 100%;
-		}
-
-		.page-actions {
-			display: none !important;
-		}
-	}
-
-	.linked-with-dialog {
-		width: 100% !important;
 	}
 }
diff --git a/frappe/public/less/module.less b/frappe/public/less/module.less
index 7cb46adf3f..9d3cd8a16a 100644
--- a/frappe/public/less/module.less
+++ b/frappe/public/less/module.less
@@ -51,3 +51,19 @@
 	background-color: red;
 	width: 0px;
 }
+
+@media(max-width: 767px) {
+	body[data-route^="Module"] {
+		.page-title {
+			width: 100%;
+		}
+
+		.page-actions {
+			display: none !important;
+		}
+
+		.layout-main-section {
+			border-bottom: 0px;
+		}
+	}
+}
diff --git a/frappe/public/less/page.less b/frappe/public/less/page.less
index 83885ed18e..82f9b38d5d 100644
--- a/frappe/public/less/page.less
+++ b/frappe/public/less/page.less
@@ -133,3 +133,30 @@ select.input-sm {
 		margin-top: 1rem;
 	}
 }
+
+@media(max-width: @screen-sm) {
+	.page-head {
+		.page-title h1 {
+			font-size: 22px;
+			margin-top: 22px;
+		}
+	}
+}
+
+@media(max-width: @screen-xs) {
+	.page-actions {
+		width: 100px;
+		float: right;
+	}
+
+	.page-title {
+		position: absolute;
+		left: 0;
+		right: 101px;
+		width: 100%;
+	}
+
+	.page-head .page-title h1 {
+		font-size: 18px;
+	}
+}
diff --git a/frappe/public/less/variables.less b/frappe/public/less/variables.less
index ecfcb9d25f..d395232890 100644
--- a/frappe/public/less/variables.less
+++ b/frappe/public/less/variables.less
@@ -36,3 +36,7 @@
 @label-danger-bg:			 #FFDCDC;
 
 @checkbox-color:			#3b99fc;
+
+@screen-xs:           767px;
+@screen-sm:           991px;
+@screen-md:			  1199px;