[design] mobile
This commit is contained in:
Anand Doshi
parent
f8e9beb48f
commit
cccbc80cb9
24 changed files with 422 additions and 129 deletions
|
|
@ -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: $("<div></div>").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');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
69
frappe/public/css/mobile.css
Normal file
69
frappe/public/css/mobile.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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) {
|
||||
$('<div class="col-md-12 small text-muted">' + __(df.description) + '</div>')
|
||||
$('<div class="col-sm-12 small text-muted">' + __(df.description) + '</div>')
|
||||
.appendTo(this.section);
|
||||
}
|
||||
if(df.label || df.description) {
|
||||
// spacer
|
||||
$('<div class="col-md-12"></div>')
|
||||
$('<div class="col-sm-12"></div>')
|
||||
.appendTo(this.section)
|
||||
.css({"height": "10px"});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -1,34 +1,39 @@
|
|||
<div class="row doclist-row">
|
||||
<div class="col-sm-10 col-xs-8">
|
||||
<div class="col-sm-10 col-xs-9 list-row-left">
|
||||
{%= main %}
|
||||
|
||||
<div class="text-muted list-info-row small"
|
||||
style="padding-left: {% if(data._checkbox) { %}55{% } else { %}31{% } %}px;">
|
||||
|
||||
{% if (data._full_title !== data.name) { %}
|
||||
<a class="text-muted" href="#Form/{%= data._doctype_encoded %}/{%= data._name_encoded %}">#{%= data.name %}</a>
|
||||
{% } %}
|
||||
|
||||
{% if (data._tags && data._tags.length) { %}
|
||||
<span style="margin-right: 10px;" class="list-tag-preview">
|
||||
{% for (var i=0, l=data._tags.length; i < l; i++) { %}
|
||||
<span class="label label-info filterable"
|
||||
data-filter="_user_tags,like,%{%= data._tags[i] %}%">{%= data._tags[i] %}</span>
|
||||
{% } %}
|
||||
</span>
|
||||
{% } %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-2 col-xs-4 text-right list-row-right">
|
||||
{% if (data._assign_list.length) { %}
|
||||
<span class="filterable"
|
||||
data-filter="_assign,like,%{%= data._assign_list[data._assign_list.length - 1] %}%">
|
||||
{%= frappe.avatar(data._assign_list[data._assign_list.length - 1]) %}</span>
|
||||
{% } else { %}
|
||||
<span class="avatar avatar-small avatar-empty"></span>
|
||||
{% } %}
|
||||
<span class="h6 {% if(!data._comments_list.length) { %}text-extra-muted{% } %}">
|
||||
<i class="octicon octicon-comment-discussion"></i>
|
||||
{%= data._comments_list.length || 0 %}
|
||||
</span>
|
||||
<div class="col-sm-2 col-xs-3 text-right list-row-right">
|
||||
<div class="visible-xs pull-right">{%= me.get_indicator_dot(data) %}</div>
|
||||
<div class="pull-right">
|
||||
{% if (data._assign_list.length) { %}
|
||||
<span class="filterable"
|
||||
data-filter="_assign,like,%{%= data._assign_list[data._assign_list.length - 1] %}%">
|
||||
{%= frappe.avatar(data._assign_list[data._assign_list.length - 1]) %}</span>
|
||||
{% } else { %}
|
||||
<span class="avatar avatar-small avatar-empty"></span>
|
||||
{% } %}
|
||||
<span class="h6 {% if(!data._comments_list.length) { %}text-extra-muted{% } %}">
|
||||
<i class="octicon octicon-comment-discussion"></i>
|
||||
{%= data._comments_list.length || 0 %}
|
||||
</span>
|
||||
<div class="text-muted small modified">{%= comment_when(data.modified) %}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-muted list-info-row small"
|
||||
style="padding-left: {% if(data._checkbox) { %}55{% } else { %}31{% } %}px;">
|
||||
{% if (data._full_title !== data.name) { %}
|
||||
<a class="text-muted" href="#Form/{%= data._doctype_encoded %}/{%= data._name_encoded %}">#{%= data.name %}</a>
|
||||
{% } %}
|
||||
{%= comment_when(data.modified) %}
|
||||
{% if (data._tags && data._tags.length) { %}
|
||||
<span style="margin-right: 10px;" class="list-tag-preview">
|
||||
{% for (var i=0, l=data._tags.length; i < l; i++) { %}
|
||||
<span class="label label-info filterable"
|
||||
data-filter="_user_tags,like,%{%= data._tags[i] %}%">{%= data._tags[i] %}</span>
|
||||
{% } %}
|
||||
</span>
|
||||
{% } %}
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,17 @@
|
|||
var col = columns[i], value=data[col.fieldname]; total_cols += parseInt(col.colspan); %}
|
||||
{% if (total_cols <= 12) { %}
|
||||
<div class="col-sm-{%= col.colspan %} text-ellipsis
|
||||
{% if(col.type==="Subject") { %}col-xs-12{% } else { %}hidden-xs{% } %}"
|
||||
{% if(col.type==="Subject") {
|
||||
if (right_column) { %}
|
||||
col-xs-9
|
||||
{% } else { %}
|
||||
col-xs-12
|
||||
{% } %}
|
||||
{% } else if(right_column && col.fieldname===right_column) { %}
|
||||
col-xs-3
|
||||
{% } else { %}
|
||||
hidden-xs
|
||||
{% } %}"
|
||||
{% if(col.title) { %}title="{%= col.title + ": " + value %}"{% } %}>
|
||||
{% if (col.type==="Subject") { %}
|
||||
{%= subject %}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="list-sidebar">
|
||||
<div class="list-sidebar hidden-xs">
|
||||
<div class="sidebar-section">
|
||||
<ul class="user-actions list-unstyled hide">
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -202,15 +202,17 @@ frappe.views.ListView = Class.extend({
|
|||
list: this
|
||||
});
|
||||
} else {
|
||||
console.log(this);
|
||||
var main = frappe.render_template("list_item_standard", {
|
||||
data: data,
|
||||
columns: this.columns,
|
||||
subject: this.get_avatar_and_id(data, true),
|
||||
me: this
|
||||
me: this,
|
||||
right_column: this.settings.right_column
|
||||
});
|
||||
}
|
||||
|
||||
$(frappe.render_template("list_item_row", {data: data, main: main})).appendTo(row);
|
||||
$(frappe.render_template("list_item_row", {data: data, main: main, me: this})).appendTo(row);
|
||||
|
||||
this.render_tags(row, data);
|
||||
|
||||
|
|
@ -257,6 +259,14 @@ frappe.views.ListView = Class.extend({
|
|||
+indicator[2]+'">'+indicator[0]+'<span>';
|
||||
},
|
||||
|
||||
get_indicator_dot: function(doc) {
|
||||
var indicator = frappe.get_indicator(doc, this.doctype);
|
||||
if (!indicator) {
|
||||
return "";
|
||||
}
|
||||
return '<span class="indicator '+indicator[1]+'" title="'+indicator[0]+'"></span>';
|
||||
},
|
||||
|
||||
prepare_data: function(data) {
|
||||
if(data.modified)
|
||||
this.prepare_when(data, data.modified);
|
||||
|
|
|
|||
|
|
@ -205,9 +205,8 @@ frappe.ui.Filter = Class.extend({
|
|||
} : {}
|
||||
|
||||
var original_docfield = me.fieldselect.fields_by_name[doctype][fieldname];
|
||||
|
||||
if(!original_docfield) {
|
||||
msgprint(__("Field {0} is not selectable.", [df.label]));
|
||||
msgprint(__("Field {0} is not selectable.", [fieldname]));
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ frappe.ui.Listing = Class.extend({
|
|||
// new
|
||||
if(this.new_doctype) {
|
||||
var make_new_doc = function() { (me.custom_new_doc || me.make_new_doc).apply(me, [me.new_doctype]); };
|
||||
this.page.set_primary_action(__("New"), function() { make_new_doc(); });
|
||||
this.page.set_primary_action(__("New"), function() { make_new_doc(); }, "octicon octicon-plus");
|
||||
}
|
||||
|
||||
if(me.no_toolbar || me.hide_toolbar) {
|
||||
|
|
|
|||
|
|
@ -1,19 +1,20 @@
|
|||
<div class="page-head">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="page-title col-sm-8">
|
||||
<h1>
|
||||
<div class="page-title col-sm-8 col-xs-7">
|
||||
<h1 class="text-ellipsis">
|
||||
<span class="title-text"></span>
|
||||
<span class="indicator hide"></span>
|
||||
</h1>
|
||||
<h6 class="hide text-extra-muted"></h6>
|
||||
<h6 class="sub-heading hide text-extra-muted"></h6>
|
||||
</div>
|
||||
<div class="page-actions text-right col-sm-4">
|
||||
<span class="page-icon-group hide"></span>
|
||||
<div class="page-actions text-right col-sm-4 col-xs-5">
|
||||
<span class="page-icon-group hide hidden-xs"></span>
|
||||
<div class="btn-group menu-btn-group hide">
|
||||
<button type="button" class="btn btn-default btn-sm dropdown-toggle"
|
||||
data-toggle="dropdown" aria-expanded="false">
|
||||
{%= __("Menu") %} <span class="caret"></span>
|
||||
<span class="hidden-xs">{%= __("Menu") %} <span class="caret"></span></span>
|
||||
<span class="visible-xs"><i class="octicon octicon-three-bars"></i></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
</ul>
|
||||
|
|
@ -32,7 +33,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-body container">
|
||||
<div class="container page-body">
|
||||
<div class="page-toolbar hide">
|
||||
<div class="container">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,10 @@ frappe.ui.Page = Class.extend({
|
|||
$(frappe.render_template("page", {})).appendTo(this.wrapper);
|
||||
|
||||
if(this.single_column) {
|
||||
this.add_view("main", '<div class="layout-main layout-main-section">');
|
||||
// nesting under col-sm-12 for consistency
|
||||
this.add_view("main", '<div class="row layout-main">\
|
||||
<div class="col-sm-12"><div class="layout-main-section"></div></div>\
|
||||
</div>');
|
||||
} else {
|
||||
var main = this.add_view("main", '<div class="row layout-main">\
|
||||
<div class="col-sm-2 layout-side-section"></div>\
|
||||
|
|
@ -94,11 +97,23 @@ frappe.ui.Page = Class.extend({
|
|||
return this.indicator.removeClass().addClass("indicator hide");
|
||||
},
|
||||
|
||||
set_primary_action: function(label, click) {
|
||||
get_icon_label: function(icon, label) {
|
||||
return '<i class="visible-xs ' + icon + '"></i><span class="hidden-xs">' + label + '</span>'
|
||||
},
|
||||
|
||||
set_primary_action: function(label, click, icon) {
|
||||
if (icon) {
|
||||
label = this.get_icon_label(icon, label);
|
||||
}
|
||||
|
||||
this.btn_primary.removeClass("hide").prop("disabled", false).html(label).on("click", click);
|
||||
},
|
||||
|
||||
set_secondary_action: function(label, click) {
|
||||
set_secondary_action: function(label, click, icon) {
|
||||
if (icon) {
|
||||
label = this.get_icon_label(icon, label);
|
||||
}
|
||||
|
||||
this.btn_secondary.removeClass("hide").prop("disabled", false).html(label).on("click", click);
|
||||
},
|
||||
|
||||
|
|
@ -189,7 +204,7 @@ frappe.ui.Page = Class.extend({
|
|||
this.title = txt;
|
||||
document.title = txt.replace(/<[^>]*>/g, "");
|
||||
if(icon) {
|
||||
txt = '<span class="'+ icon +' text-muted" style="font-size: 24px;"></span> ' + txt;
|
||||
txt = '<span class="'+ icon +' text-muted" style="font-size: inherit;"></span> ' + txt;
|
||||
}
|
||||
this.$title_area.find(".title-text").html(txt);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -7,11 +7,14 @@
|
|||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Home</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse navbar-responsive-collapse">
|
||||
<a class="navbar-brand" href="#">
|
||||
<i class="octicon octicon-home visible-xs"></i>
|
||||
<span class="hidden-xs">Home</span>
|
||||
</a>
|
||||
<ul class="nav navbar-nav navbar-left" id="navbar-breadcrumbs">
|
||||
</ul>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse navbar-responsive-collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#"
|
||||
|
|
|
|||
|
|
@ -83,7 +83,10 @@ frappe.views.Container = Class.extend({
|
|||
if(!breadcrumbs) return;
|
||||
|
||||
var divider = function() {
|
||||
$('<li style="padding: 8px 0px" class="hidden-xs"><i class="icon-chevron-right text-muted"></i></li>').appendTo($breadcrumbs);
|
||||
$('<li class="breadcrumb-divider">\
|
||||
<i class="icon-chevron-right hidden-xs text-muted"></i>\
|
||||
<i class="icon-chevron-left visible-xs text-muted"></i>\
|
||||
</li>').appendTo($breadcrumbs);
|
||||
}
|
||||
|
||||
if(breadcrumbs.module && breadcrumbs.module != "Desk") {
|
||||
|
|
|
|||
24
frappe/public/js/frappe/views/module/module_section.html
Normal file
24
frappe/public/js/frappe/views/module/module_section.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<div class="module-section">
|
||||
{% for(var i=0, j= data.items.length; i < j; i++) { var item = data.items[i]; %}
|
||||
<div class="row module-item" data-item-index={%= i %}>
|
||||
{% if (item.description) { %}
|
||||
<div class="col-xs-8">
|
||||
<h4>{%= item.label || item.name %}</h4>
|
||||
{% if (item.type==="doctype") { %}
|
||||
<span class="open-notification hide" data-doctype="{%= item.name %}"></span>
|
||||
{% } %}
|
||||
<p class="text-muted small">{%= item.description %}</p>
|
||||
</div>
|
||||
<div class="col-xs-4 text-muted text-right small" style="padding-top: 5px;">
|
||||
{% if (item.last_modified) { %}
|
||||
{%= comment_when(item.last_modified) %}
|
||||
{% } %}
|
||||
</div>
|
||||
{% } else { %}
|
||||
<div class="col-xs-12">
|
||||
<h5>{%= item.label || item.name %}</h5>
|
||||
</div>
|
||||
{% } %}
|
||||
</div>
|
||||
{% } %}
|
||||
</div>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<ul class="nav nav-pills nav-stacked" style="margin-right: -15px;">
|
||||
<ul class="nav nav-pills nav-stacked module-sidebar-nav hidden-xs">
|
||||
{% for (var i=0, l= data.data.length; i < l; i++) { var item = data.data[i]; %}
|
||||
<li data-label="{%= item.label %}" class="h6 module-sidebar-item">
|
||||
<a class="module-link">
|
||||
20
frappe/public/js/frappe/views/module/module_title.html
Normal file
20
frappe/public/js/frappe/views/module/module_title.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<div class="mobile-module-icon pull-right small visible-xs">{%= title %}</div>
|
||||
<div class="mobile-title col-sm-8 col-xs-7 visible-xs">
|
||||
<div class="dropdown">
|
||||
<h2 class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"
|
||||
style="cursor: pointer; margin: 15px 0px;">
|
||||
<span class="active-section">{%= section_name %}</span>
|
||||
<span class="caret"></span>
|
||||
</h2>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="ModuleSections">
|
||||
{% for (var i=0, l= data.data.length; i < l; i++) {
|
||||
var item = data.data[i];
|
||||
if (item.label !== section_name) { %}
|
||||
<li role="presentation" data-label="{%= item.label %}">
|
||||
<a role="menuitem" tabindex="-1" class="module-link">{%= item.label %}</a>
|
||||
</li>
|
||||
{% }
|
||||
} %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -95,11 +95,22 @@ frappe.views.moduleview.ModuleView = Class.extend({
|
|||
this.activate(this.data.data[0].label);
|
||||
},
|
||||
|
||||
make_sidebar: function() {
|
||||
make_title: function(name) {
|
||||
this.page_title = this.page.wrapper.find(".page-title").addClass("hidden-xs");
|
||||
this.page.wrapper.find(".mobile-title, .mobile-module-icon").remove();
|
||||
|
||||
$(frappe.render_template("module_title", {
|
||||
title: this.page_title.find("h1").html(),
|
||||
section_name: name,
|
||||
data: this.data
|
||||
})).insertAfter(this.page_title);
|
||||
},
|
||||
|
||||
make_sidebar: function(name) {
|
||||
var me = this;
|
||||
$(frappe.render_template("module_sidebar", {data:this.data})).appendTo(this.page.sidebar);
|
||||
|
||||
this.page.sidebar.find(".module-link").on("click", function() {
|
||||
this.page.wrapper.on("click", ".module-link", function() {
|
||||
me.activate($(this).parent().attr("data-label"));
|
||||
});
|
||||
},
|
||||
|
|
@ -127,6 +138,9 @@ frappe.views.moduleview.ModuleView = Class.extend({
|
|||
this.page.sidebar.find("li.active").removeClass("active");
|
||||
this.page.sidebar.find('[data-label="'+ name +'"]').addClass("active");
|
||||
|
||||
// make mobile title
|
||||
this.make_title(name);
|
||||
|
||||
frappe.app.update_notification_count_in_modules();
|
||||
},
|
||||
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<div class="module-section">
|
||||
{% for(var i=0, j= data.items.length; i < j; i++) { var item = data.items[i]; %}
|
||||
<div class="row module-item" data-item-index={%= i %}>
|
||||
<div class="col-md-9">
|
||||
{% if (item.description) { %}<h4>{% } else { %}<h5>{% } %}
|
||||
{%= item.label || item.name %}
|
||||
{% if (item.type==="doctype") { %}
|
||||
<span class="open-notification hide"
|
||||
data-doctype="{%= item.name %}">
|
||||
</span>
|
||||
{% } %}
|
||||
{% if (item.description) { %}
|
||||
</h4>
|
||||
<p class="text-muted small">{%= item.description %}</p>
|
||||
{% } else { %}</h5>{% } %}
|
||||
</div>
|
||||
<div class="col-md-3 text-muted text-right small" style="padding-top: 5px;">
|
||||
{% if (item.last_modified) { %}
|
||||
{%= comment_when(item.last_modified) %}
|
||||
{% } %}
|
||||
</div>
|
||||
</div>
|
||||
{% } %}
|
||||
</div>
|
||||
|
|
@ -11,6 +11,10 @@ body {
|
|||
padding-top: 44px;
|
||||
}
|
||||
|
||||
.page-body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -23,20 +27,25 @@ a {
|
|||
.navbar-brand {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.navbar 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;
|
||||
}
|
||||
// .page-container {
|
||||
// padding-bottom: 15px;
|
||||
// }
|
||||
|
||||
a.grey, .sidebar-section a, .nav-pills a, .control-value a, .data-row a {
|
||||
color: inherit;
|
||||
|
|
@ -111,12 +120,6 @@ em.link-option {
|
|||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.layout-side-section {
|
||||
border-top: 1px solid @border-color;
|
||||
}
|
||||
}
|
||||
|
||||
/* page */
|
||||
|
||||
.page-head {
|
||||
|
|
@ -125,10 +128,13 @@ em.link-option {
|
|||
}
|
||||
|
||||
.page-title h6 {
|
||||
margin: 0px;
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
.page-title .title-text {
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.page-actions {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
|
|
@ -184,7 +190,7 @@ em.link-option {
|
|||
color:#6c7680;
|
||||
}
|
||||
.indicator::before {
|
||||
margin:0 4px 0 8px;
|
||||
margin:0 4px 0 0px;
|
||||
content:'';
|
||||
display:inline-block;
|
||||
height:8px;
|
||||
|
|
@ -237,8 +243,9 @@ em.link-option {
|
|||
}
|
||||
|
||||
.list-row {
|
||||
padding: 7px 15px 10px 15px;
|
||||
padding: 7px 15px;
|
||||
border-bottom: 1px solid @border-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.list-row:hover, .grid-row:hover {
|
||||
|
|
@ -332,12 +339,20 @@ 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 {
|
||||
|
|
@ -361,6 +376,7 @@ em.link-option {
|
|||
|
||||
.module-item h4 {
|
||||
margin-bottom: 2px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.module-item .badge {
|
||||
|
|
@ -381,6 +397,10 @@ em.link-option {
|
|||
display: block !important;
|
||||
}
|
||||
|
||||
.module-sidebar-nav {
|
||||
margin-right: -15px;
|
||||
}
|
||||
|
||||
.alert-badge {
|
||||
margin: 4px 0px;
|
||||
}
|
||||
|
|
@ -704,7 +724,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);*/
|
||||
}
|
||||
|
||||
|
|
@ -982,3 +1002,4 @@ th.fc-widget-header {
|
|||
.padding {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
|
|
|
|||
88
frappe/public/less/mobile.less
Normal file
88
frappe/public/less/mobile.less
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
@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 & breadcrumbs
|
||||
.navbar-brand .octicon-home {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.navbar .breadcrumb-divider {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
#navbar-breadcrumbs {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#navbar-breadcrumbs > li {
|
||||
float: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// select all except last 2
|
||||
#navbar-breadcrumbs li:not(:nth-last-child(-n+2)) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-module-icon {
|
||||
padding: 17px 15px 0px;
|
||||
margin-bottom: -15px;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue