Merge pull request #7719 from prssanna/mobile-refactor

fix: Improvements for mobile view
This commit is contained in:
Rushabh Mehta 2019-06-19 14:35:50 +05:30 committed by GitHub
commit f40ace38aa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 74 additions and 42 deletions

View file

@ -6,7 +6,7 @@ context('Awesome Bar', () => {
});
beforeEach(() => {
cy.get('.navbar-home').click();
cy.get('.navbar-header .navbar-home').click();
});
it('navigates to doctype list', () => {

View file

@ -361,6 +361,10 @@ def attach_file(filename=None, filedata=None, doctype=None, docname=None, folder
return _file.as_dict()
@frappe.whitelist()
def get_hooks(hook, app_name=None):
return frappe.get_hooks(hook, app_name)
def check_parent_permission(parent, child_doctype):
if parent:
# User may pass fake parent and get the information from the child table

View file

@ -10,6 +10,7 @@ app_icon = "octicon octicon-circuit-board"
app_color = "orange"
source_link = "https://github.com/frappe/frappe"
app_license = "MIT"
app_logo_url = '/assets/frappe/images/frappe-framework-logo.png'
develop_version = '12.x.x-develop'

View file

@ -42,7 +42,10 @@ frappe.Application = Class.extend({
this.setup_frappe_vue();
this.load_bootinfo();
this.load_user_permissions();
this.make_nav_bar();
this.set_app_logo_url()
.then(() => {
this.make_nav_bar();
});
this.set_favicon();
this.setup_analytics();
this.set_fullwidth_if_enabled();
@ -457,6 +460,13 @@ frappe.Application = Class.extend({
$('<link rel="icon" href="' + link + '" type="image/x-icon">').appendTo("head");
},
set_app_logo_url: function() {
return frappe.call('frappe.client.get_hooks', { hook: 'app_logo_url' })
.then(r => {
frappe.app.logo_url = (r.message || []).slice(-1)[0];
});
},
trigger_primary_action: function() {
if(window.cur_dialog && cur_dialog.display) {
// trigger primary

View file

@ -197,7 +197,7 @@ export default class GridRow {
this.row_index = $(
`<div class="row-index sortable-handle col col-xs-1">
${this.row_check_html}
<span>${txt}</span></div>`)
<span class="hidden-xs">${txt}</span></div>`)
.appendTo(this.row)
.on('click', function(e) {
if(!$(e.target).hasClass('grid-row-check')) {

View file

@ -1,3 +1,10 @@
<ul class="list-unstyled sidebar-menu visible-sm visible-xs">
<li>
<a class="navbar-home" href="#">
<img class="app-logo" src="{{ frappe.app.logo_url }}">
</a>
</li>
</ul>
<ul class="list-unstyled sidebar-menu user-actions hidden"></ul>
<ul class="list-unstyled sidebar-menu sidebar-image-section hidden-xs hidden-sm hide">
<li class="sidebar-image-wrapper">
@ -25,6 +32,7 @@
<li class="rating-icons"></li>
</ul>
<ul class="list-unstyled sidebar-menu">
<li class="divider visible-sm visible-xs"></li>
<li style="position: relative;">
<a class="sidebar-comments badge-hover">
<span>{%= __("Comments") %}</span>

View file

@ -1,14 +1,22 @@
<ul class="list-unstyled sidebar-menu visible-sm visible-xs">
<li>
<a class="navbar-home" href="#">
<img class="app-logo" src="{{ frappe.app.logo_url }}">
</a>
</li>
</ul>
<ul class="list-unstyled sidebar-menu user-actions hide">
<li class="divider"></li>
</ul>
<ul class="list-unstyled sidebar-menu standard-actions">
{% if frappe.model.can_get_report(doctype) %}
<li class="divider visible-sm visible-xs"></li>
<li class="list-link">
<div class="btn-group">
<a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ __("Reports") }} <span class="caret"></span>
</a>
<ul class="dropdown-menu reports-dropdown" style="max-height: 300px; overflow-y: auto;">
<ul class="dropdown-menu reports-dropdown">
<li><a href="#List/{{ doctype }}/Report">{{ __("Report Builder") }}</a></li>
</ul>
</div>

View file

@ -5,7 +5,7 @@
<i class="octicon octicon-three-bars"></i>
</a>
<a class="navbar-brand navbar-home hidden-xs hidden-sm" href="#">
<img src="/assets/frappe/images/frappe-framework-logo.png">
<img class="app-logo" src="{{ frappe.app.logo_url }}">
</a>
<ul class="nav navbar-nav" id="navbar-breadcrumbs">
</ul>
@ -80,7 +80,7 @@
<div class="input-group" style="width: 100%">
<input id="modal-search" type="text" class="form-control"
placeholder="{%= __("Search or type a command") %}" aria-haspopup="true">
<button type="reset" class="close"><i class="octicon octicon-x"></i></button>
<button type="reset" class="close" data-dismiss="modal"><i class="octicon octicon-x"></i></button>
</div>
</form>
</div>

View file

@ -69,7 +69,7 @@ frappe.ui.toolbar.Toolbar = Class.extend({
scroll_container.css("overflow-y", "hidden");
layout_side_section.find(".close-sidebar").on('click', close_sidebar);
layout_side_section.on("click", "a", close_sidebar);
layout_side_section.on("click", "a:not(.dropdown-toggle)", close_sidebar);
function close_sidebar(e) {
scroll_container.css("overflow-y", "");

View file

@ -1104,4 +1104,8 @@ body.full-width {
.modal-body {
display: none;
}
}
.app-logo {
width: 24px;
}

View file

@ -841,6 +841,9 @@ select.form-control {
.section-head {
padding: 15px 15px 15px 0px;
}
.section-body {
margin-top: -15px;
}
.section-body .form-column:first-child{
.radio, .checkbox{
margin-top: 0;
@ -863,14 +866,6 @@ select.form-control {
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 {
@ -903,6 +898,8 @@ select.form-control {
.frappe-control[data-fieldtype="Table"] {
padding: 0px 15px;
margin-top: -1px;
margin-left: -17px;
margin-right: -17px;
border-bottom: none;
label {
@ -910,19 +907,9 @@ select.form-control {
}
}
// .form-section:last-child .form-column:last-child .frappe-control:last-child {
// border-bottom: none;
// }
.form-control {
border: none;
border-bottom: 1px solid @border-color;
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;
@ -931,10 +918,6 @@ select.form-control {
.form-control:focus {
box-shadow: none;
}
// select.form-control {
// text-indent: -2px;
// }
}
}

View file

@ -40,15 +40,11 @@ body {
}
.page-title .indicator {
display: inline-block;
position: absolute;
left: 5px;
margin-top: 12px;
}
.page-actions {
padding-top: 20px !important;
padding-bottom: 0px !important;
padding-left: 0px !important;
}
.page-head .sub-heading {
font-weight: normal;
@ -119,7 +115,7 @@ body {
.navbar-nav {
margin: 0px;
margin-right: -15px;
margin-right: -10px;
}
.sidebar .form-group {
@ -200,7 +196,7 @@ body {
body[data-route="desktop"] {
.navbar .navbar-home {
// display: none !important;
padding: 8px 10px;
padding: 8px 12px;
&:before {
display: none;
}
@ -218,9 +214,6 @@ body {
.toggle-sidebar {
display: none !important;
}
#navbar-breadcrumbs, .navbar-home {
margin-left: 15px !important;
}
}
}

View file

@ -177,8 +177,9 @@ select.input-sm {
@media(max-width: @screen-xs) {
.page-actions {
max-width: 150px;
position: absolute;
float: right;
padding-right: 0px;
}
.page-title {

View file

@ -66,7 +66,7 @@ body[data-route^="Module"] .main-menu {
}
.sidebar-menu {
padding: 15px 0px 5px 0px;
padding: 2px 0px 5px 0px;
margin: 0px;
}
}
@ -356,6 +356,19 @@ body[data-route^="Module"] .main-menu {
}
}
}
.overlay-sidebar {
ul.dropdown-menu {
li {
padding:0 !important;
}
.badge {
top: 0;
right: 0;
}
}
}
.sidebar-left .list-sidebar {
.stat-label,
@ -429,3 +442,10 @@ body[data-route^="Module"] .main-menu {
padding: 12px;
}
}
@media screen and (min-width: @screen-md) {
.reports-dropdown {
max-height: 300px;
overflow-y: auto;
}
}