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

fix: made web form and web list responsive

Browse source
This commit is contained in:
Shariq Ansari 2022-08-17 20:12:46 +05:30
parent 3c9bc6f1ec
commit 0889d9137f
4 changed files with 66 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frappe/public/js/frappe/web_form/web_form_list.js
View file

@ -381,7 +381,7 @@ frappe.ui.WebFormListRow = class WebFormListRow {
formatter(this.doc[field.fieldname], field, { only_value: 1 }, this.doc)
)) ||
"";
let cell = $(`<td>${value}</td>`);
let cell = $(`<td><p class="ellipsis">${value}</p></td>`);
cell.appendTo(this.row);
});

61
frappe/public/scss/website/web_form.scss
View file

@ -23,6 +23,7 @@
font-size: 2.25rem;
margin-top: 0;
margin-bottom: 0;
padding-bottom: 2px;
}
.web-form-header {
@ -49,6 +50,19 @@
.title {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
.web-form-actions {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 1;
.btn {
font-size: var(--text-base);
}
}
}
.web-form-introduction {
@ -95,7 +109,7 @@
padding-right: 0;
}
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(xs) {
padding: 0;
}
}
@ -135,6 +149,7 @@
.web-form-actions {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.btn {
font-size: var(--text-base);
@ -152,6 +167,10 @@
.left-area {
display: flex;
flex: 1;
@include media-breakpoint-down(sm) {
order: 1
}
}
.center-area {
@ -214,14 +233,30 @@
}
}
}
@include media-breakpoint-down(xs) {
width: 16px;
height: 16px;
}
}
}
@include media-breakpoint-down(sm) {
order: 0;
width: 100%;
justify-content: center;
margin-bottom: 1.5rem;
}
}
.right-area {
display: flex;
justify-content: flex-end;
flex: 1;
@include media-breakpoint-down(sm) {
order: 2
}
}
}
}
@ -281,11 +316,16 @@
.web-list-header {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
border-bottom: 1px solid var(--dark-border-color);
padding-bottom: 1.25rem;
.web-list-actions {
align-self: center;
display: flex;
align-items: center;
justify-content: flex-end;
flex: 1;
}
}
@ -345,6 +385,18 @@
td {
font-size: 13px;
border-top: 1px solid var(--border-color);
.ql-editor, p {
width: max-content;
max-width: 200px;
margin-bottom: 0;
p {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
}
@ -377,6 +429,11 @@
padding-left: 0;
}
}
@include media-breakpoint-down(lg) {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@include media-breakpoint-down(lg) {

4
frappe/website/doctype/web_form/templates/web_form.html
View file

@ -63,7 +63,9 @@
{% endif %}
<div class="web-form-head">
<div class="title">
<h1>{{ _(title) }}</h1>
<div class="web-form-title ellipsis">
<h1 class="ellipsis">{{ _(title) }}</h1>
</div>
<div class="web-form-actions">
{{ header_buttons() }}
</div>

4
frappe/website/doctype/web_form/templates/web_list.html
View file

@ -7,7 +7,9 @@
<div class="web-list-container">
<!-- list -->
<div class="web-list-header">
<h1>{{ _(list_title or title) }}</h1>
<div class="web-list-title ellipsis">
<h1 class="ellipsis">{{ _(list_title or title) }}</h1>
</div>
<div class="web-list-actions">
{%- if allow_multiple -%}
<a class="btn btn-primary btn-sm button-new" href="/{{ route }}/new">New</a>