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

Merge pull request #18400 from shariquerik/child-table-responsive

Browse source
This commit is contained in:
Shariq Ansari 2022-10-13 19:01:31 +05:30 • committed by GitHub
commit 241f270390
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 41 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
frappe/public/js/frappe/form/grid.js
View file

@ -52,9 +52,7 @@ export default class Grid {
}
allow_on_grid_editing() {
if (frappe.utils.is_xs()) {
return false;
} else if ((this.meta && this.meta.editable_grid) || !this.meta) {
if ((this.meta && this.meta.editable_grid) || !this.meta) {
return true;
} else {
return false;
@ -66,17 +64,19 @@ export default class Grid {
<label class="control-label">${__(this.df.label || "")}</label>
<p class="text-muted small grid-description"></p>
<div class="grid-custom-buttons grid-field"></div>
<div class="form-grid">
<div class="grid-heading-row"></div>
<div class="grid-body">
<div class="rows"></div>
<div class="grid-empty text-center">
<img
src="/assets/frappe/images/ui-states/grid-empty-state.svg"
alt="Grid Empty State"
class="grid-empty-illustration"
>
${__("No Data")}
<div class="form-grid-container">
<div class="form-grid">
<div class="grid-heading-row"></div>
<div class="grid-body">
<div class="rows"></div>
<div class="grid-empty text-center">
<img
src="/assets/frappe/images/ui-states/grid-empty-state.svg"
alt="Grid Empty State"
class="grid-empty-illustration"
>
${__("No Data")}
</div>
</div>
</div>
</div>

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

@ -254,7 +254,7 @@ export default class GridRow {
).appendTo(this.row);
this.row_index = $(
`<div class="row-index sortable-handle col hidden-xs">
`<div class="row-index sortable-handle col">
<span>${txt}</span>
</div>`
)
@ -268,7 +268,7 @@ export default class GridRow {
this.row_check = $(`<div class="row-check col search"></div>`).appendTo(this.row);
this.row_index = $(
`<div class="row-index col search hidden-xs">
`<div class="row-index col search">
<input type="text" class="form-control input-xs text-center" >
</div>`
).appendTo(this.row);
@ -327,7 +327,7 @@ export default class GridRow {
if (this.doc && !this.grid.df.in_place_edit) {
// remove row
if (!this.open_form_button) {
this.open_form_button = $('<div class="col col-xs-1"></div>').appendTo(this.row);
this.open_form_button = $('<div class="col"></div>').appendTo(this.row);
if (!this.configure_columns) {
this.open_form_button = $(`
@ -356,7 +356,7 @@ export default class GridRow {
if (this.configure_columns && this.frm) {
this.configure_columns_button = $(`
<div class="col grid-static-col col-xs-1 d-flex justify-content-center" style="cursor: pointer;">
<div class="col grid-static-col d-flex justify-content-center" style="cursor: pointer;">
<a>${frappe.utils.icon("setting-gear", "sm", "", "filter: opacity(0.5)")}</a>
</div>
`)
@ -366,7 +366,7 @@ export default class GridRow {
});
} else if (this.configure_columns && !this.frm) {
this.configure_columns_button = $(`
<div class="col grid-static-col col-xs-1"></div>
<div class="col grid-static-col"></div>
`).appendTo(this.row);
}
}
@ -688,7 +688,7 @@ export default class GridRow {
if (this.show_search) {
// last empty column
$(`<div class="col grid-static-col col-xs-1"></div>`).appendTo(this.row);
$(`<div class="col grid-static-col search"></div>`).appendTo(this.row);
}
}
@ -1149,6 +1149,9 @@ export default class GridRow {
return this;
}
show_form() {
if (frappe.utils.is_xs()) {
$(this.grid.form_grid).css("min-width", "0");
}
if (!this.grid_form) {
this.grid_form = new GridRowForm({
row: this,
@ -1187,6 +1190,9 @@ export default class GridRow {
}
}
hide_form() {
if (frappe.utils.is_xs()) {
$(this.grid.form_grid).css("min-width", "1000px");
}
frappe.dom.unfreeze();
this.row.toggle(true);
if (!frappe.dom.is_element_in_modal(this.row)) {

15
frappe/public/scss/common/grid.scss
View file

@ -484,6 +484,21 @@
margin-bottom: 4px;
}
@media (max-width: map-get($grid-breakpoints, "md")) {
.form-grid-container {
overflow-x: scroll;
.form-grid {
min-width: 1000px;
}
}
.form-column.col-sm-6 .form-grid {
.row-index {
display: block;
}
}
}
@media (max-width: map-get($grid-breakpoints, "sm")) {
.form-in-grid .form-section .form-column {