fix: scroll elements

This commit is contained in:
Saqib Ansari 2020-12-03 19:24:07 +05:30
parent 188e0ecbcb
commit a6a37b7c81
2 changed files with 20 additions and 26 deletions

View File

@ -75,22 +75,14 @@
background-color: var(--gray-50); background-color: var(--gray-50);
} }
.sticky-element {
position: sticky;
top: -1px;
z-index: 1;
}
> .items-selector { > .items-selector {
@extend .pos-card; @extend .pos-card;
grid-column: span 6 / span 6; grid-column: span 6 / span 6;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-y: scroll; overflow: hidden;
overflow-x: hidden;
> .filter-section { > .filter-section {
@extend .sticky-element;
display: grid; display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-columns: repeat(12, minmax(0, 1fr));
background-color: var(--fg-color); background-color: var(--fg-color);
@ -124,6 +116,14 @@
gap: var(--margin-lg); gap: var(--margin-lg);
padding: var(--padding-lg); padding: var(--padding-lg);
padding-top: var(--padding-xs); padding-top: var(--padding-xs);
overflow-y: scroll;
overflow-x: hidden;
&:after {
content: "";
display: block;
height: 1px;
}
> .item-wrapper { > .item-wrapper {
@extend .pointer-no-select; @extend .pointer-no-select;
@ -185,6 +185,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: var(--padding-md) var(--padding-lg); padding: var(--padding-md) var(--padding-lg);
overflow: hidden;
> .customer-field { > .customer-field {
display: flex; display: flex;
@ -193,7 +194,6 @@
} }
> .customer-details { > .customer-details {
@extend .sticky-element;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: var(--fg-color); background-color: var(--fg-color);
@ -284,6 +284,11 @@
> .customer-transactions { > .customer-transactions {
height: 100%; height: 100%;
overflow-x: hidden;
overflow-y: scroll;
margin-right: -12px;
padding-right: 12px;
margin-left: -10px;
> .no-transactions-placeholder { > .no-transactions-placeholder {
height: 100%; height: 100%;
@ -899,11 +904,9 @@
grid-column: span 4 / span 4; grid-column: span 4 / span 4;
display: none; display: none;
flex-direction: column; flex-direction: column;
overflow-y: scroll; overflow: hidden;
overflow-x: hidden;
> .filter-section { > .filter-section {
@extend .sticky-element;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: var(--fg-color); background-color: var(--fg-color);
@ -927,17 +930,17 @@
> .invoices-container { > .invoices-container {
padding: var(--padding-lg); padding: var(--padding-lg);
padding-top: 0px; padding-top: 0px;
overflow-x: hidden;
overflow-y: scroll;
} }
} }
> .past-order-summary { > .past-order-summary {
// @extend .pos-card;
display: none; display: none;
grid-column: span 6 / span 6; grid-column: span 6 / span 6;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
// padding: var(--padding-lg);
> .no-summary-placeholder { > .no-summary-placeholder {
display: flex; display: flex;
@ -1029,14 +1032,12 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: var(--padding-sm) var(--padding-md); padding: var(--padding-sm) var(--padding-md);
// border-bottom: 1px solid var(--gray-300);
} }
> .taxes-wrapper { > .taxes-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0px var(--padding-md); padding: 0px var(--padding-md);
// border-bottom: 1px solid var(--gray-300);
> .tax-row { > .tax-row {
display: flex; display: flex;
@ -1050,7 +1051,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
padding: var(--padding-sm) var(--padding-md); padding: var(--padding-sm) var(--padding-md);
// border-bottom: 1px solid var(--gray-300);
> .item-name { > .item-name {
@extend .nowrap; @extend .nowrap;
@ -1081,9 +1081,7 @@
} }
> .grand-total { > .grand-total {
// font-size: var(--text-lg);
font-weight: 700; font-weight: 700;
// padding: var(--padding-md);
} }
> .payments { > .payments {

View File

@ -791,9 +791,7 @@ erpnext.PointOfSale.ItemCart = class {
this.$cart_container.css('display', 'none'); this.$cart_container.css('display', 'none');
this.$customer_section.css({ this.$customer_section.css({
'height': '100%', 'height': '100%',
'padding-top': '0px', 'padding-top': '0px'
'overflow-x': 'hidden',
'overflow-y': 'scroll'
}); });
this.$customer_section.find('.customer-details').html( this.$customer_section.find('.customer-details').html(
`<div class="header"> `<div class="header">
@ -829,9 +827,7 @@ erpnext.PointOfSale.ItemCart = class {
this.$cart_container.css('display', 'flex'); this.$cart_container.css('display', 'flex');
this.$customer_section.css({ this.$customer_section.css({
'height': '', 'height': '',
'padding-top': '', 'padding-top': ''
'overflow-x': '',
'overflow-y': ''
}); });
this.update_customer_section(); this.update_customer_section();