From cccbc80cb9aaec9417ebacd7c1b4e5958b2025f7 Mon Sep 17 00:00:00 2001 From: Anand Doshi Date: Tue, 13 Jan 2015 18:38:35 +0530 Subject: [PATCH] [design] mobile --- frappe/desk/page/activity/activity.js | 16 ++-- frappe/public/build.json | 8 +- frappe/public/css/desk.css | 43 +++++---- frappe/public/css/mobile.css | 69 +++++++++++++++ frappe/public/js/frappe/form/layout.js | 6 +- frappe/public/js/frappe/form/toolbar.js | 15 +++- frappe/public/js/frappe/list/doclistview.js | 15 +++- .../public/js/frappe/list/list_item_row.html | 63 +++++++------ .../js/frappe/list/list_item_standard.html | 12 ++- .../public/js/frappe/list/list_sidebar.html | 2 +- frappe/public/js/frappe/list/listview.js | 14 ++- frappe/public/js/frappe/ui/filters.js | 3 +- frappe/public/js/frappe/ui/listing.js | 2 +- frappe/public/js/frappe/ui/page.html | 15 ++-- frappe/public/js/frappe/ui/page.js | 23 ++++- .../public/js/frappe/ui/toolbar/navbar.html | 9 +- frappe/public/js/frappe/views/container.js | 5 +- .../frappe/views/module/module_section.html | 24 +++++ .../views/{ => module}/module_sidebar.html | 2 +- .../js/frappe/views/module/module_title.html | 20 +++++ .../frappe/views/{ => module}/moduleview.js | 18 +++- .../js/frappe/views/module_section.html | 24 ----- frappe/public/less/desk.less | 55 ++++++++---- frappe/public/less/mobile.less | 88 +++++++++++++++++++ 24 files changed, 422 insertions(+), 129 deletions(-) create mode 100644 frappe/public/css/mobile.css create mode 100644 frappe/public/js/frappe/views/module/module_section.html rename frappe/public/js/frappe/views/{ => module}/module_sidebar.html (83%) create mode 100644 frappe/public/js/frappe/views/module/module_title.html rename frappe/public/js/frappe/views/{ => module}/moduleview.js (88%) delete mode 100644 frappe/public/js/frappe/views/module_section.html create mode 100644 frappe/public/less/mobile.less diff --git a/frappe/desk/page/activity/activity.js b/frappe/desk/page/activity/activity.js index ed4860e694..bc74860998 100644 --- a/frappe/desk/page/activity/activity.js +++ b/frappe/desk/page/activity/activity.js @@ -9,18 +9,20 @@ frappe.pages['activity'].onload = function(wrapper) { frappe.require('assets/frappe/js/lib/flot/jquery.flot.js'); frappe.require('assets/frappe/js/lib/flot/jquery.flot.downsample.js'); - var page = frappe.ui.make_app_page({ + frappe.ui.make_app_page({ parent: wrapper, single_column: true }); - page.set_title(__("Activty"), frappe.get_module("Activity").icon); + this.page = wrapper.page; + + this.page.set_title(__("Activty"), frappe.get_module("Activity").icon); this.page.list = new frappe.ui.Listing({ hide_refresh: true, - page: wrapper.page, + page: this.page, method: 'frappe.desk.page.activity.activity.get_feed', - parent: $(wrapper).find(".layout-main"), + parent: $("
").appendTo(this.page.main), render_row: function(row, data) { new frappe.activity.Feed(row, data); } @@ -28,7 +30,7 @@ frappe.pages['activity'].onload = function(wrapper) { this.page.list.run(); - frappe.activity.render_plot(page); + frappe.activity.render_plot(this.page); this.page.main.on("click", ".activity-message", function() { var doctype = $(this).attr("data-doctype"), @@ -38,11 +40,11 @@ frappe.pages['activity'].onload = function(wrapper) { } }); - wrapper.page.set_primary_action(__("Refresh"), function() { me.page.list.run(); }); + this.page.set_primary_action(__("Refresh"), function() { me.page.list.run(); }, "octicon octicon-sync"); // Build Report Button if(frappe.boot.user.can_get_report.indexOf("Feed")!=-1) { - wrapper.page.set_secondary_action(__('Build Report'), function() { + this.page.set_secondary_action(__('Build Report'), function() { frappe.set_route('Report', "Feed"); }, 'icon-th'); } diff --git a/frappe/public/build.json b/frappe/public/build.json index e35b2a3776..f73d97f863 100644 --- a/frappe/public/build.json +++ b/frappe/public/build.json @@ -32,6 +32,7 @@ "public/css/font-awesome.css", "public/css/octicons/octicons.css", "public/css/desk.css", + "public/css/mobile.css", "public/css/app_icon.css", "public/css/avatar.css", "public/css/navbar.css", @@ -108,9 +109,10 @@ "public/js/frappe/views/container.js", "public/js/frappe/views/factory.js", "public/js/frappe/views/pageview.js", - "public/js/frappe/views/module_section.html", - "public/js/frappe/views/module_sidebar.html", - "public/js/frappe/views/moduleview.js", + "public/js/frappe/views/module/module_title.html", + "public/js/frappe/views/module/module_section.html", + "public/js/frappe/views/module/module_sidebar.html", + "public/js/frappe/views/module/moduleview.js", "public/js/frappe/views/formview.js", "public/js/frappe/views/reportview.js", "public/js/frappe/views/calendar.js", diff --git a/frappe/public/css/desk.css b/frappe/public/css/desk.css index 8d780786ee..f2541ec8f4 100644 --- a/frappe/public/css/desk.css +++ b/frappe/public/css/desk.css @@ -7,6 +7,9 @@ body { margin: 0px; padding-top: 44px; } +.page-body { + overflow-x: hidden; +} a { cursor: pointer; } @@ -21,15 +24,15 @@ a { font-size: 12px; font-weight: bold; } +.navbar .breadcrumb-divider { + margin-top: 8px; +} a.disabled, a.disabled:hover { color: #888; cursor: default; text-decoration: none; } -.page-container { - padding-bottom: 15px; -} a.grey, .sidebar-section a, .nav-pills a, @@ -98,20 +101,17 @@ em.link-option { padding: 7px; border-radius: 3px; } -@media (max-width: 767px) { - .layout-side-section { - border-top: 1px solid #d1d8dd; - } -} /* page */ .page-head { border-bottom: 1px solid #d1d8dd; min-height: 70px; } .page-title h6 { - margin: 0px; margin-top: -8px; } +.page-title .title-text { + margin-right: 7px; +} .page-actions { padding-top: 20px; padding-bottom: 20px; @@ -157,7 +157,7 @@ em.link-option { color: #6c7680; } .indicator::before { - margin: 0 4px 0 8px; + margin: 0 4px 0 0px; content: ''; display: inline-block; height: 8px; @@ -201,8 +201,9 @@ em.link-option { margin-right: 10px; } .list-row { - padding: 7px 15px 10px 15px; + padding: 7px 15px; border-bottom: 1px solid #d1d8dd; + cursor: pointer; } .list-row:hover, .grid-row:hover { @@ -279,11 +280,17 @@ em.link-option { } .list-info-row { float: left; - margin-top: -3px; + margin-top: 1px; } -.list-row-right { - margin-top: 8px; - margin-bottom: -8px; +.list-row-left { + margin-top: 5px; +} +.list-row-right .modified { + margin-top: 3px; +} +.list-row-right .indicator { + margin-left: 10px; + margin-right: -5px; } .side-panel { border-bottom: 1px solid #d1d8dd; @@ -302,6 +309,7 @@ em.link-option { } .module-item h4 { margin-bottom: 2px; + display: inline-block; } .module-item .badge { margin-top: -2px; @@ -318,6 +326,9 @@ em.link-option { margin-top: 2px; display: block !important; } +.module-sidebar-nav { + margin-right: -15px; +} .alert-badge { margin: 4px 0px; } @@ -579,7 +590,7 @@ ul.linked-with-list li { } /* form footer */ .form-footer { - padding-bottom: 30px; + padding-bottom: 60px; /*box-shadow: 0px -1px 6px rgba(0,0,0,0.3);*/ } .form-footer h5 { diff --git a/frappe/public/css/mobile.css b/frappe/public/css/mobile.css new file mode 100644 index 0000000000..cb15562795 --- /dev/null +++ b/frappe/public/css/mobile.css @@ -0,0 +1,69 @@ +@media (max-width: 767px) { + .layout-main > div[class^="col-sm-"], + .form-section { + padding-left: 0px; + padding-right: 0px; + } + .module-sidebar-nav { + margin-right: 0px; + } + .list-sidebar { + padding-left: 15px; + padding-right: 15px; + } + .layout-main-section { + border-left: none; + border-right: none; + } + .form-intro-area { + padding: 15px 0px; + } + .form-grid { + margin-left: -15px; + margin-right: -15px; + border-left: none; + border-right: none; + border-radius: none; + } + .grid-row-open { + top: 0; + } + .page-title h1 { + margin-top: 15px; + } + .page-actions { + padding-top: 15px; + padding-bottom: 15px; + } + .page-title .indicator { + display: block; + margin-top: 5px; + margin-bottom: 3px; + } + .page-title .sub-heading { + float: left; + } + .page-head { + min-height: 1px; + } + .navbar-brand .octicon-home { + margin-top: 4px; + } + .navbar .breadcrumb-divider { + margin-top: 14px; + } + #navbar-breadcrumbs { + margin: 0px; + } + #navbar-breadcrumbs > li { + float: left; + display: block; + } + #navbar-breadcrumbs li:not(:nth-last-child(-n+2)) { + display: none; + } + .mobile-module-icon { + padding: 17px 15px 0px; + margin-bottom: -15px; + } +} diff --git a/frappe/public/js/frappe/form/layout.js b/frappe/public/js/frappe/form/layout.js index 331bd4c289..ed5ea59ffd 100644 --- a/frappe/public/js/frappe/form/layout.js +++ b/frappe/public/js/frappe/form/layout.js @@ -98,7 +98,7 @@ frappe.ui.form.Layout = Class.extend({ var colspan = cint(12 / this.section.find(".form-column").length); this.section.find(".form-column").removeClass() .addClass("form-column") - .addClass("col-md-" + colspan); + .addClass("col-sm-" + colspan); }, make_field: function(df, colspan) { !this.section && this.make_section(); @@ -160,12 +160,12 @@ frappe.ui.form.Layout = Class.extend({ section.df = df; if(df) { if(df.description) { - $('
' + __(df.description) + '
') + $('
' + __(df.description) + '
') .appendTo(this.section); } if(df.label || df.description) { // spacer - $('
') + $('
') .appendTo(this.section) .css({"height": "10px"}); } diff --git a/frappe/public/js/frappe/form/toolbar.js b/frappe/public/js/frappe/form/toolbar.js index 103fb9ca53..0f906e2549 100644 --- a/frappe/public/js/frappe/form/toolbar.js +++ b/frappe/public/js/frappe/form/toolbar.js @@ -181,9 +181,9 @@ frappe.ui.form.Toolbar = Class.extend({ if(status == "Cancel") { this.page.set_secondary_action(__(status), function() { me.frm.savecancel(this); - }); + }, "octicon octicon-circle-slash"); } else { - this.page.set_primary_action(__(status), { + var click = { "Save": function() { me.frm.save('Save', null, this); }, @@ -196,7 +196,16 @@ frappe.ui.form.Toolbar = Class.extend({ "Amend": function() { me.frm.amend_doc(); } - }[status]); + }[status]; + + var icon = { + "Save": "octicon octicon-check", + "Submit": "octicon octicon-lock", + "Update": "octicon octicon-check", + "Amend": "octicon octicon-split" + }[status]; + + this.page.set_primary_action(__(status), click, icon); } this.current_status = status; diff --git a/frappe/public/js/frappe/list/doclistview.js b/frappe/public/js/frappe/list/doclistview.js index 1d7ee10124..d2fe4a897a 100644 --- a/frappe/public/js/frappe/list/doclistview.js +++ b/frappe/public/js/frappe/list/doclistview.js @@ -117,7 +117,18 @@ frappe.views.DocListView = frappe.ui.Listing.extend({ f[0], f[1], f.slice(2).join(",")); }); added && me.run(); - }) + }); + this.$page.on("click", ".list-row", function(e) { + var checkbox = $(this).find("input[type='checkbox']"); + var star = $(this).find(".icon-star"); + if ((checkbox.length && e.target === checkbox.get(0)) || (star.length && e.target===star.get(0))) { + return; + } + + var link = $(this).find("a.list-id").get(0); + window.location.href = link.href; + return false; + }); }, init_filters: function() { @@ -291,7 +302,7 @@ frappe.views.DocListView = frappe.ui.Listing.extend({ this.page.set_secondary_action(__("Refresh"), function() { me.run(); - }); + }, "octicon octicon-sync"); if(this.can_delete || this.listview.settings.selectable) { this.page.add_menu_item(__('Select All'), function() { diff --git a/frappe/public/js/frappe/list/list_item_row.html b/frappe/public/js/frappe/list/list_item_row.html index 02cfb81ac5..7aaaa7f1d7 100644 --- a/frappe/public/js/frappe/list/list_item_row.html +++ b/frappe/public/js/frappe/list/list_item_row.html @@ -1,34 +1,39 @@
-
+
{%= main %} + +
+ + {% if (data._full_title !== data.name) { %} + #{%= data.name %} + {% } %} + + {% if (data._tags && data._tags.length) { %} + + {% for (var i=0, l=data._tags.length; i < l; i++) { %} + {%= data._tags[i] %} + {% } %} + + {% } %} +
-
- {% if (data._assign_list.length) { %} - - {%= frappe.avatar(data._assign_list[data._assign_list.length - 1]) %} - {% } else { %} - - {% } %} - - - {%= data._comments_list.length || 0 %} - +
+
{%= me.get_indicator_dot(data) %}
+
+ {% if (data._assign_list.length) { %} + + {%= frappe.avatar(data._assign_list[data._assign_list.length - 1]) %} + {% } else { %} + + {% } %} + + + {%= data._comments_list.length || 0 %} + +
{%= comment_when(data.modified) %}
+
-
- {% if (data._full_title !== data.name) { %} - #{%= data.name %} - {% } %} - {%= comment_when(data.modified) %} - {% if (data._tags && data._tags.length) { %} - - {% for (var i=0, l=data._tags.length; i < l; i++) { %} - {%= data._tags[i] %} - {% } %} - - {% } %} -
-
diff --git a/frappe/public/js/frappe/list/list_item_standard.html b/frappe/public/js/frappe/list/list_item_standard.html index da3947f603..5a011812b3 100644 --- a/frappe/public/js/frappe/list/list_item_standard.html +++ b/frappe/public/js/frappe/list/list_item_standard.html @@ -3,7 +3,17 @@ var col = columns[i], value=data[col.fieldname]; total_cols += parseInt(col.colspan); %} {% if (total_cols <= 12) { %}
{% if (col.type==="Subject") { %} {%= subject %} diff --git a/frappe/public/js/frappe/list/list_sidebar.html b/frappe/public/js/frappe/list/list_sidebar.html index 0c2f4655cd..0fc995f06c 100644 --- a/frappe/public/js/frappe/list/list_sidebar.html +++ b/frappe/public/js/frappe/list/list_sidebar.html @@ -1,4 +1,4 @@ -
+