diff --git a/erpnext/public/scss/point-of-sale.scss b/erpnext/public/scss/point-of-sale.scss index 790822ab888..7a42f989bf7 100644 --- a/erpnext/public/scss/point-of-sale.scss +++ b/erpnext/public/scss/point-of-sale.scss @@ -113,13 +113,108 @@ > .items-container { display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: var(--margin-lg); - padding: var(--padding-lg); padding-top: var(--padding-xs); overflow-y: scroll; overflow-x: hidden; + &.show-item-image { + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: var(--margin-lg); + padding: var(--padding-lg); + + > .item-wrapper { + border-radius: var(--border-radius-md); + box-shadow: var(--shadow-base); + + &:hover { + transform: scale(1.02, 1.02); + } + } + } + + &.hide-item-image { + display: flex; + flex-direction: column; + padding-left: 1.5em; + padding-right: 1.5em; + padding-top: 0; + + > .list-column { + display: flex; + position: sticky; + top: 0; + z-index: 1; + background-color: var(--fg-color); + font-weight: bold; + flex-direction: row; + gap: 2rem; + align-items: center; + min-height: 3rem; + height: 3rem; + border-bottom: 1px solid var(--gray-300); + + > .column-name { + width: 55%; + text-align: left; + white-space: initial; + } + + > .column-price { + width: 15%; + } + + > .column-uom { + width: 15%; + text-align: center; + } + + > .column-qty-available { + width: 15%; + text-align: right; + } + } + + > .item-wrapper { + border-top: 1px solid var(--gray-300); + + &:hover { + background-color: var(--control-bg); + } + + .item-detail { + flex-direction: row; + gap: 2rem; + align-items: center; + min-height: 3rem; + height: 3rem; + + > .item-name, + .column-name { + width: 55%; + text-align: left; + white-space: initial; + } + + > .item-price, + .column-price { + width: 15%; + } + + > .item-uom, + .column-uom { + width: 15%; + text-align: center; + } + + > .item-qty-available, + .column-qty-available { + width: 15%; + text-align: right; + } + } + } + } + &:after { content: ""; display: block; @@ -128,14 +223,8 @@ > .item-wrapper { @extend .pointer-no-select; - border-radius: var(--border-radius-md); - box-shadow: var(--shadow-base); position: relative; - &:hover { - transform: scale(1.02, 1.02); - } - .item-qty-pill { position: absolute; display: flex; diff --git a/erpnext/selling/page/point_of_sale/pos_item_selector.js b/erpnext/selling/page/point_of_sale/pos_item_selector.js index b355b02f83a..8d0641f85ed 100644 --- a/erpnext/selling/page/point_of_sale/pos_item_selector.js +++ b/erpnext/selling/page/point_of_sale/pos_item_selector.js @@ -34,6 +34,9 @@ erpnext.PointOfSale.ItemSelector = class { this.$component = this.wrapper.find(".items-selector"); this.$items_container = this.$component.find(".items-container"); + + const show_hide_images = this.hide_images ? "hide-item-image" : "show-item-image"; + this.$items_container.addClass(show_hide_images); } async load_items_data() { @@ -73,12 +76,25 @@ erpnext.PointOfSale.ItemSelector = class { render_item_list(items) { this.$items_container.html(""); + if (this.hide_images) { + this.$items_container.append(this.render_item_list_column_header()); + } + items.forEach((item) => { const item_html = this.get_item_html(item); this.$items_container.append(item_html); }); } + render_item_list_column_header() { + return `