vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

[design] In mobile view, remove input borders and show modals in full screen

Browse source
This commit is contained in:
Anand Doshi 2015-02-04 09:53:52 +05:30
parent c19cb66542
commit 8550d9be44
23 changed files with 285 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frappe/build.py
View file

@ -180,6 +180,8 @@ def compile_less():
continue
timestamps[fpath] = mtime
print "compiling {0}".format(fpath)
os.system("lessc {0} > {1}".format(fpath,
os.path.join(path, "public", "css", fname.rsplit(".", 1)[0] + ".css")))
css_path = os.path.join(path, "public", "css", fname.rsplit(".", 1)[0] + ".css")
os.system("lessc {0} > {1}".format(fpath, css_path))

5
frappe/core/page/desktop/desktop_module_icon.html
View file

@ -5,8 +5,7 @@
<div class="circle" id="module-count-{%= _id %}" style="display: none;">
<span class="circle-text"></span>
</div>
<!-- <span id="module-count-{%= _id %}" class="octicon octicon-primitive-dot circle" style="display: None"> -->
</span>
{%= _label %}
<!-- <span id="module-count-{%= _id %}" class="octicon octicon-primitive-dot circle" style="display: None"></span> -->
<span class="case-label-text">{%= _label %}</span>
</div>
</div>

2
frappe/desk/page/applications/application_row.html
View file

@ -1,6 +1,6 @@
<div class="app-listing padding" data-title="{%= app.app_title %}">
<div class="media">
<div class="pull-right">
<div class="pull-right app-buttons">
{% if (app.installed) { %}
<button class="btn btn-default" disabled=disabled>{%= __("Installed") %}</button>
{% } else { %}

10
frappe/desk/page/applications/applications.css
View file

@ -6,11 +6,15 @@
margin-top: 3px;
}
#page-applications .app-icon {
width: 70px;
height: 70px;
#page-applications .app-icon-wrapper {
padding-right: 15px;
}
#page-applications .form-group {
margin-bottom: 0px;
}
#page-applications .app-buttons .btn {
width: 84px;
text-align: center;
}

4
frappe/public/build.json
View file

@ -32,7 +32,6 @@
"public/css/font-awesome.css",
"public/css/octicons/octicons.css",
"public/css/desk.css",
"public/css/mobile.css",
"public/css/indicator.css",
"public/css/avatar.css",
"public/css/navbar.css",
@ -47,7 +46,8 @@
"public/css/tree_grid.css",
"public/css/tree.css",
"public/css/nprogress.css",
"public/css/desktop.css"
"public/css/desktop.css",
"public/css/mobile.css"
],
"js/frappe.min.js": [
"public/js/lib/jquery/jquery-ui.min.js",

3
frappe/public/css/desktop.css
View file

@ -28,7 +28,7 @@ body[data-route="desktop"] .navbar-default {
margin-top: 10px;
transition: 0.2s;
-webkit-transition: 0.2s;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5), 0px 1px 5px rgba(0, 0, 0, 0.3);
}
.app-icon {
padding: 20px;
@ -51,7 +51,6 @@ body[data-route="desktop"] .navbar-default {
.app-icon img {
height: 32px;
width: 32px;
margin-top: -3px;
}
.app-icon path {
fill: #fafbfc;

5
frappe/public/css/form.css
View file

@ -67,6 +67,9 @@
margin-top: 0px;
padding: 15px 30px;
}
.timeline-item .icon-fixed-width {
text-align: center;
}
.timeline-item .reply {
margin-top: 5px;
}
@ -76,7 +79,7 @@
}
.timeline-head {
background-color: #fafbfc;
padding: 30px 30px 15px 30px;
padding: 15px 30px;
border-bottom: 1px solid #d1d8dd;
}
.form-footer h5 {

2
frappe/public/css/form_grid.css
View file

@ -75,7 +75,7 @@
-webkit-transition: all 0.2s ease;
}
.grid-row-open .form-in-grid {
max-height: 1200px;
max-height: 10000px;
transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
}

93
frappe/public/css/mobile.css
View file

@ -1,4 +1,26 @@
@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;
}
.layout-main-section-wrapper {
padding: 0px;
}
@ -17,6 +39,50 @@
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: none !important;
}
.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;
}
.doclist-row {
position: relative;
padding-right: 10px;
@ -26,7 +92,7 @@
text-align: left;
margin-top: 3px;
}
.doclist-row .doclist-row.has-checkbox .list-row-id {
.doclist-row.has-checkbox .list-row-id {
left: 40px;
}
.doclist-row .list-row-indicator {
@ -95,6 +161,7 @@
display: inline-block !important;
padding-left: 0px;
margin-left: 0px;
padding-top: 6px;
}
body[data-route^="Module"] .navbar .navbar-home:before {
font-family: FontAwesome;
@ -105,18 +172,27 @@
*margin-right: .3em;
display: inline-block;
speak: none;
color: #c0c9d2;
font-size: 24px;
transition: 0.2s;
position: relative;
top: 3px;
content: "\f104" !important;
margin-right: 5px !important;
content: "\f104";
margin-right: 5px;
color: #6c7680;
}
body[data-route^="Module"] .navbar .navbar-home:hover:before,
body[data-route^="Module"] .navbar .navbar-home:focus:before,
body[data-route^="Module"] .navbar .navbar-home:active:before {
color: #36414c;
color: #36414c !important;
}
body[data-route^="Module"] .page-title {
width: 100%;
}
body[data-route^="Module"] .page-actions {
display: none !important;
}
.module-item {
padding: 7px 0px !important;
}
#navbar-breadcrumbs {
margin: 0px;
@ -128,8 +204,9 @@
vertical-align: middle;
}
#navbar-breadcrumbs > li > a:before {
content: "\f104" !important;
margin-right: 5px !important;
content: "\f104";
margin-right: 5px;
color: #6c7680;
}
#navbar-breadcrumbs li:not(:nth-last-child(-n+1)) {
display: none;
@ -204,7 +281,7 @@
font-size: inherit;
position: relative;
right: 7px;
top: -21px;
top: -20px;
height: 0;
}
.sidebar form {

2
frappe/public/css/navbar.css
View file

@ -72,13 +72,13 @@
*margin-right: .3em;
display: inline-block;
speak: none;
color: #c0c9d2;
font-size: 24px;
transition: 0.2s;
position: relative;
top: 3px;
content: "\f105";
margin-right: 15px;
color: #c0c9d2;
}
#navbar-breadcrumbs > li > a:hover:before,
#navbar-breadcrumbs > li > a:focus:before,

6
frappe/public/js/frappe/dom.js
View file

@ -62,7 +62,7 @@ frappe.dom = {
freeze: function() {
// blur
if(!$('#freeze').length) {
$("<div id='freeze' class='modal-backdrop'>")
$("<div id='freeze' class='modal-backdrop' style='display: none;'>")
.on("click", function() {
if (cur_frm && cur_frm.cur_grid) {
cur_frm.cur_grid.toggle_view();
@ -71,14 +71,14 @@ frappe.dom = {
})
.appendTo("#body_div");
}
$('#freeze').toggle(true);
$('#freeze').fadeIn();
frappe.dom.freeze_count++;
},
unfreeze: function() {
if(!frappe.dom.freeze_count)return; // anything open?
frappe.dom.freeze_count--;
if(!frappe.dom.freeze_count) {
$('#freeze').toggle(false);
$('#freeze').fadeOut();
}
},
save_selection: function() {

18
frappe/public/js/frappe/form/control.js
View file

@ -40,8 +40,16 @@ frappe.ui.form.Control = Class.extend({
get_status: function(explain) {
if(!this.doctype)
return "Write";
return frappe.perm.get_field_display_status(this.df,
var status = frappe.perm.get_field_display_status(this.df,
locals[this.doctype][this.docname], this.perm || this.frm.perm, explain);
// hide if no value
if (status==="Read" && is_null(frappe.model.get_value(this.doctype, this.docname, this.df.fieldname))) {
status = "None";
}
return status;
},
refresh: function() {
this.disp_status = this.get_status();
@ -134,7 +142,7 @@ frappe.ui.form.ControlImage = frappe.ui.form.Control.extend({
});
frappe.ui.form.ControlInput = frappe.ui.form.Control.extend({
horizontal: true,
// horizontal: true,
make: function() {
// parent element
this._super();
@ -151,10 +159,10 @@ frappe.ui.form.ControlInput = frappe.ui.form.Control.extend({
this.$wrapper = $('<div class="frappe-control">\
<div class="form-group" style="margin: 0px">\
<label class="control-label" style="padding-right: 0px;"></label>\
<div>\
<div class="control-input-wrapper">\
<div class="control-input"></div>\
<div class="control-value like-disabled-input" style="display: none;"></div>\
<p class="help-box small text-muted"></p>\
<p class="help-box small text-muted hidden-xs"></p>\
</div>\
</div>\
</div>').appendTo(this.parent);
@ -380,7 +388,7 @@ frappe.ui.form.ControlInt = frappe.ui.form.ControlData.extend({
var me = this;
this._super();
this.$input
.css({"text-align": "right"})
.addClass("text-right")
.on("focus", function() {
setTimeout(function() {
if(!document.activeElement) return;

16
frappe/public/js/frappe/form/footer/timeline.html
View file

@ -1,6 +1,6 @@
<div class="timeline">
<div class="timeline-head">
<h6 style="margin-top: -10px;">{%= __("Add a comment") %}</h6>
<h6 class="text-muted">{%= __("Add a comment") %}</h6>
<div>
<textarea style="height: 80px" style="margin-top: 10px;"
class="form-control"></textarea>
@ -11,19 +11,17 @@
</span>
<div class="media-body">
<div class="row">
<div class="col-md-6">
<div class="col-xs-4">
<h6>{%= __("You") %}</h6>
</div>
<div class="col-md-6 text-right">
<button class="btn btn-primary btn-go btn-xs pull-right"
style="margin-right: 10px;">
{%= __("Submit") %}
<div class="col-xs-8 text-right" style="margin-top: 2px;">
<button class="btn btn-primary btn-go btn-xs pull-right">
{%= __("Comment") %}
</button>
<div class="checkbox text-muted small pull-right"
style="margin-top: 3px; margin-right: 30px;">
style="margin-top: 3px; margin-right: 15px;">
<label>
<input type="checkbox" class="is-email"
style="margin-top: 1px;">
<input type="checkbox" class="is-email" style="margin-top: 1px;">
{%= __("Email") %}
</label>
</div>

21
frappe/public/js/frappe/form/footer/timeline.js
View file

@ -11,11 +11,11 @@ frappe.ui.form.Comments = Class.extend({
this.wrapper = $(frappe.render_template("timeline",
{ image: frappe.user_info(user).image, fullname: user_fullname })).appendTo(this.parent);
this.list = this.wrapper.find(".timeline-items");
this.list = this.wrapper.find(".timeline-items");
this.input = this.wrapper.find(".form-control");
this.button = this.wrapper.find(".btn-go")
.click(function() {
.on("click", function() {
if(me.wrapper.find(".is-email").prop("checked")) {
new frappe.views.CommunicationComposer({
doc: me.frm.doc,
@ -26,6 +26,15 @@ frappe.ui.form.Comments = Class.extend({
me.add_comment(this);
}
});
this.email_check = this.wrapper.find(".timeline-head input[type='checkbox']")
.on("click", function() {
if ($(this).prop("checked")) {
me.button.html(__("Compose"));
} else {
me.button.html(__("Comment"));
}
});
},
refresh: function(scroll_to_end) {
var me = this;
@ -130,13 +139,13 @@ frappe.ui.form.Comments = Class.extend({
"Created": "octicon octicon-plus",
"Submitted": "octicon octicon-lock",
"Cancelled": "octicon octicon-x",
"Assigned": "octicon octicon-tag",
"Assigned": "octicon octicon-person",
"Assignment Completed": "octicon octicon-check",
"Comment": "octicon octicon-comment-discussion",
"Workflow": "octicon octicon-git-branch",
"Label": "octicon octicon-tag",
"Attachment": "octicon octicon-upload",
"Attachment Removed": "octicon octicon-x"
"Attachment": "octicon octicon-cloud-upload",
"Attachment Removed": "octicon octicon-trashcan"
}[c.comment_type]
c.color = {

8
frappe/public/js/frappe/form/footer/timeline_item.html
View file

@ -14,8 +14,8 @@
<i class="{%= data.icon %} icon-fixed-width"></i>
{%= data.fullname %}
<span class="text-muted" style="font-weight: normal;">
&dash; {%= data.comment_on %}</span>
{% if(data.doctype=="Communication") { %} &dash;
&ndash; {%= data.comment_on %}</span>
{% if(data.doctype=="Communication") { %} &ndash;
<a href="#Form/{%= data.doctype %}/{%= data.name %}"
class="text-muted">{%= __("Details") %}</a>
{% } %}
@ -30,14 +30,14 @@
<i class="{%= data.icon %} icon-fixed-width"></i>
{%= data.comment %}
<span class="text-muted" style="font-weight: normal;">
&dash; {%= data.comment_on %}</span>
&ndash; {%= data.comment_on %}</span>
</h6>
{% } else { %}
<h6>
<i class="{%= data.icon %} icon-fixed-width"></i>
{%= data.fullname %} {%= data.comment %}
<span class="text-muted" style="font-weight: normal;">
&dash; {%= data.comment_on %}</span>
&ndash; {%= data.comment_on %}</span>
</h6>
{% } %}
{% if(data.attachments && data.attachments.length) { %}

16
frappe/public/js/frappe/form/grid_form.html
View file

@ -2,20 +2,24 @@
<div class="toolbar">
<span class="panel-title">
{%= __("Editing Row") %} #<span class="grid-form-row-index"></span></span>
<button class="btn btn-success btn-xs pull-right"style="margin-left: 7px;">
{%= __("Done") %}</button>
<button class="btn btn-success btn-xs pull-right" style="margin-left: 7px;">
<i class="octicon octicon-check visible-xs" style="padding-bottom: 2px;"></i>
<span class="hidden-xs">{%= __("Done") %}</span></button>
<button class="btn btn-default btn-xs pull-right grid-insert-row"
style="margin-left: 7px;">
{%= __("Insert Above") %}</button>
<button class="btn btn-danger btn-xs pull-right grid-delete-row">
{%= __("Remove") %}</button>
<i class="octicon octicon-trashcan visible-xs"
style="padding-bottom: 2px; margin-top: 1px;"></i>
<span class="hidden-xs">{%= __("Remove") %}</span></button>
</div>
</div>
<div class="grid-form-body">
<div class="form-area"></div>
<div class="grid-footer-toolbar">
<span class="text-muted">
<kbd>{%= __("Ctrl + Up") %}</kbd>, <kbd>{%= __("Ctrl + Down") %}</kbd>, <kbd>{%= __("ESC") %}</kbd>
<div class="grid-footer-toolbar clearfix">
<span class="text-muted hidden-xs">
<i class="octicon octicon-keyboard"></i> &ndash;
<kbd>{%= __("Ctrl + Up") %}</kbd>, <kbd>{%= __("Ctrl + Down") %}</kbd>, <kbd>{%= __("ESC") %}</kbd>
</span>
<button class="btn btn-default btn-xs pull-right grid-append-row"
style="margin-left: 7px;">

2
frappe/public/js/frappe/form/layout.js
View file

@ -168,7 +168,7 @@ frappe.ui.form.Layout = Class.extend({
}
if(df.label || df.description) {
// spacer
$('<div class="col-sm-12"></div>')
$('<div class="col-sm-12 hidden-xs"></div>')
.appendTo(this.section)
.css({"height": "10px"});
}

4
frappe/public/js/frappe/ui/modal.html
View file

@ -9,7 +9,9 @@
<div class="col-xs-5">
<div class="text-right buttons">
<button type="button" class="btn btn-default btn-sm"
data-dismiss="modal">{%= __("Close") %}</button>
data-dismiss="modal">
<i class="octicon octicon-x visible-xs" style="padding: 1px 0px;"></i>
<span class="hidden-xs">{%= __("Close") %}</span></button>
<button type="button" class="btn btn-primary btn-sm hide">
{%= __("Confirm") %}</button>
</div>

3
frappe/public/less/desktop.less
View file

@ -35,7 +35,7 @@ body[data-route=""] .navbar-default, body[data-route="desktop"] .navbar-default
margin-top: 10px;
transition: 0.2s;
-webkit-transition: 0.2s;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5), 0px 1px 5px rgba(0, 0, 0, 0.3);
}
.app-icon {
@ -60,7 +60,6 @@ body[data-route=""] .navbar-default, body[data-route="desktop"] .navbar-default
.app-icon svg, .app-icon img {
height: 32px;
width: 32px;
margin-top: -3px;
}
.app-icon path {

6
frappe/public/less/form.less
View file

@ -82,6 +82,10 @@
.timeline-item {
margin-top: 0px;
padding: 15px 30px;
.icon-fixed-width {
text-align: center;
}
}
.timeline-item .reply {
@ -96,7 +100,7 @@
.timeline-head {
background-color: @light-bg;
padding: 30px 30px 15px 30px;
padding: 15px 30px;
border-bottom: 1px solid @border-color;
}

2
frappe/public/less/form_grid.less
View file

@ -94,7 +94,7 @@
}
.grid-row-open .form-in-grid {
max-height: 1200px;
max-height: 10000px;
transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);

7
frappe/public/less/mixins.less
View file

@ -20,7 +20,6 @@
*margin-right: .3em;
display: inline-block;
speak: none;
color: @breadcrumb-divider-color;
font-size: 24px;
transition: 0.2s;
position: relative;
@ -28,11 +27,13 @@
}
.breadcrumb-divider-left() {
content: "\f104" !important;
margin-right: 5px !important;
content: "\f104";
margin-right: 5px;
color: @navbar-default-color;
}
.breadcrumb-divider-right() {
content: "\f105";
margin-right: 15px;
color: @breadcrumb-divider-color;
}

116
frappe/public/less/mobile.less
View file

@ -2,6 +2,34 @@
@import "mixins.less";
@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-content {
border-radius: 0px;
border: none;
box-shadow: none;
height: 100%;
}
.modal-body .form-layout {
margin: -15px;
}
}
.layout-main-section-wrapper {
padding: 0px;
}
@ -24,8 +52,71 @@
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: none !important;
}
}
.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;
}
}
// timeline
.timeline {
border-left: none !important;
border-right: none !important;
.timeline-head {
padding: 7px 15px;
}
.timeline-item {
padding: 15px;
border-bottom: 1px dashed @border-color;
}
.timeline-item:last-child {
border-bottom: none;
}
}
// listviews
.doclist-row {
.doclist-row& {
position: relative;
padding-right: 10px;
@ -33,10 +124,9 @@
left: 18px;
text-align: left;
margin-top: 3px;
// left: 83.33333333%;
}
.doclist-row.has-checkbox .list-row-id {
&.has-checkbox .list-row-id {
left: 40px;
}
@ -67,7 +157,6 @@
}
}
}
}
@media(max-width: 991px) {
@ -127,6 +216,7 @@
display: inline-block !important;
padding-left: 0px;
margin-left: 0px;
padding-top: 6px;
&:before {
.breadcrumb-divider();
@ -136,10 +226,24 @@
&:hover:before,
&:focus:before,
&:active:before {
color: @text-color;
color: @text-color !important;
}
}
body[data-route^="Module"] {
.page-title {
width: 100%;
}
.page-actions {
display: none !important;
}
}
.module-item {
padding: 7px 0px !important;
}
#navbar-breadcrumbs {
margin: 0px;
display: inline-block;
@ -245,7 +349,7 @@
font-size: inherit;
position: relative;
right: 7px;
top: -21px;
top: -20px;
height: 0;
}