Browse Source

fix: empty state height

version-14
Jannat Patel 3 years ago
parent
commit
d68187ab96
2 changed files with 21 additions and 10 deletions
  1. +8
    -10
      frappe/public/js/frappe/web_form/web_form_list.js
  2. +13
    -0
      frappe/public/scss/website/index.scss

+ 8
- 10
frappe/public/js/frappe/web_form/web_form_list.js View File

@@ -141,23 +141,21 @@ export default class WebFormList {
empty_state.classList.add("no-result", "text-muted", "flex", "justify-center", "align-center"); empty_state.classList.add("no-result", "text-muted", "flex", "justify-center", "align-center");


frappe.has_permission(this.doctype, "", "create", () => { frappe.has_permission(this.doctype, "", "create", () => {
new_button = `<p><button class="btn btn-primary btn-sm btn-new-doc hidden-xs">
console.log(this)
new_button = `<a class="btn btn-primary btn-sm btn-new-doc hidden-xs" href="${window.location.pathname}?new=1">
${__("Create a new {0}", [__(this.doctype)])} ${__("Create a new {0}", [__(this.doctype)])}
</button> <button class="btn btn-primary btn-new-doc visible-xs">
${__("Create New", null, "Create a new document from list view")}
</button></p>`;
});
</a>`;


empty_state.innerHTML = `<div class="text-center">
empty_state.innerHTML = `<div class="text-center">
<div> <div>
<img src="/assets/frappe/images/ui-states/list-empty-state.svg" alt="Generic Empty State" class="empty-list-icon">
<img src="/assets/frappe/images/ui-states/list-empty-state.svg" alt="Generic Empty State" class="null-state">
</div> </div>
<p class="mt-2 small">${__("No {0} found", [__(this.doctype)])}</p>
<p class="small mb-2">${__("No {0} found", [__(this.doctype)])}</p>
${new_button}`; ${new_button}`;


this.wrapper.appendChild(empty_state);
this.wrapper.appendChild(empty_state);
});
} }

} }


make_table_head() { make_table_head() {


+ 13
- 0
frappe/public/scss/website/index.scss View File

@@ -311,3 +311,16 @@ h5.modal-title {
.empty-list-icon { .empty-list-icon {
height: 70px; height: 70px;
} }

.null-state {
height: 60px;
width: auto;
margin-bottom: var(--margin-md);
img {
fill: var(--fg-color);
}
}

.no-result {
min-height: #{"calc(100vh - 284px)"};
}

Loading…
Cancel
Save