From f396c0aff22f796be5835a65902a2b02201ddc9c Mon Sep 17 00:00:00 2001 From: Zin Moe Date: Wed, 4 Mar 2020 10:53:39 +0630 Subject: [PATCH 1/5] modify foodcourt addorder UI --- app/assets/javascripts/addorder.js | 34 ++- app/assets/javascripts/custom.js | 31 +++ app/assets/stylesheets/origami.scss | 3 +- app/assets/stylesheets/reset.css | 44 +++- app/views/foodcourt/addorders/detail.html.erb | 137 ++++++----- .../foodcourt/orders/app_orders.html.erb | 4 +- app/views/foodcourt/payments/show.html.erb | 232 ++---------------- 7 files changed, 178 insertions(+), 307 deletions(-) diff --git a/app/assets/javascripts/addorder.js b/app/assets/javascripts/addorder.js index 7b98d03a..9c3b608a 100755 --- a/app/assets/javascripts/addorder.js +++ b/app/assets/javascripts/addorder.js @@ -845,35 +845,42 @@ $(function() { show_item_detail(item_data,"add_icon"); code = $(this).data('item-code'); - element = $('#order-detail-slimscroll').find(`[data-code='${code}']`); + element = $('.summary-items').find(`[data-code='${code}']`); item_qty = element.find('#item_qty').text() + parent = element.parents('.card-text') // auto scroll to last order item if (item_qty == 1) { - $('#order-detail-slimscroll').animate({ + $(parent).animate({ scrollTop: $('.summary-items tbody tr:last').position().top - $('.summary-items tbody tr:first').position().top }) } // set border to current item - $('.summary-items tbody tr').css('background-color', '') + $('.summary-items tbody tr').css({ + 'background-color': '', + 'color': '' + }) - element.css({'background-color': '#2091F3'}) + element.css({ + 'background-color': '#2091F3', + 'color': '#fff' + }) + // element.css('background-color', '#2091F3').delay(500) + // .queue(function() { + // $(this).css('background-color', '').dequeue(); + // }) - setTimeout(function() { - element.css('background-color', ''); - }, 500); - calculate_sub_total(); - - if (isNotInView(element)) { + + if (isNotInView(element, parent)) { element.css({'background-color': '#2091F3'}); scrollToELement(element); } }); //End Add Icon Click - function isNotInView(elem){ + function isNotInView(elem, parent){ // for scroll up | for scroll down - result = (($(elem).offset().top - 100) < $(elem).height() || $('#order-detail-slimscroll').height() < (elem.position().top + elem.outerHeight(true))); + result = (($(elem).offset().top - 100) < $(elem).height() || $(parent).height() < (elem.position().top + elem.outerHeight(true))); console.log(result) return result // reutn boolean } @@ -1082,7 +1089,8 @@ $(function() { window.location.href = "/foodcourt/sale/"+result.data["sale_id"]+"/"+type+"/payment"; } else{ - window.location.href = "/origami/sale/"+result.data["sale_id"]+"/"+type+"/payment"; + module_name = window.location.pathname.includes('origami') ? 'origami' : 'foodcourt' + window.location.href = "/"+module_name+"/sale/"+result.data["sale_id"]+"/"+type+"/payment"; } } } diff --git a/app/assets/javascripts/custom.js b/app/assets/javascripts/custom.js index 620b9321..2e03aa95 100644 --- a/app/assets/javascripts/custom.js +++ b/app/assets/javascripts/custom.js @@ -13,6 +13,37 @@ $(document).ready(function() { touchScrollStep : 50 }); + $('#foodcourt-slimscroll').slimScroll({ + height: '100%', + size: '5px', + color: 'rgba(0,0,0,0.5)', + alwaysVisible: false, + borderRadius: '0', + railBorderRadius: '0', + touchScrollStep : 50 + }); + + $('#foodcourt-order-slimscroll').slimScroll({ + height: '100%', + size: '5px', + color: 'rgba(0,0,0,0.5)', + alwaysVisible: false, + borderRadius: '0', + railBorderRadius: '0', + touchScrollStep : 50 + }); + + + $('#foodcourt-menu-slimscroll').slimScroll({ + height: '100%', + size: '5px', + color: 'rgba(0,0,0,0.5)', + alwaysVisible: false, + borderRadius: '0', + railBorderRadius: '0', + touchScrollStep : 50 + }); + $('#table-slimscroll').slimScroll({ height: height, size: '5px', diff --git a/app/assets/stylesheets/origami.scss b/app/assets/stylesheets/origami.scss index b971b6dd..c2639fa3 100755 --- a/app/assets/stylesheets/origami.scss +++ b/app/assets/stylesheets/origami.scss @@ -30,7 +30,8 @@ } section.content { - margin: 70px 5px 0 225px; + margin: 0 5px 0 5px; + padding: 64px 0 0 0; } .table { diff --git a/app/assets/stylesheets/reset.css b/app/assets/stylesheets/reset.css index c82d7cf7..488fd292 100644 --- a/app/assets/stylesheets/reset.css +++ b/app/assets/stylesheets/reset.css @@ -1,3 +1,22 @@ +html, body { + height: 100%; +} + +.content { + height: 100%; +} + +.slimScrollDiv { + flex: 1 1 0!important; +} + +.flex-grow-1 { + flex-grow: 1 !important; +} +.flex-1 { + flex: 1 !important; +} + .material-icons { font-family: 'Material Icons'; font-weight: normal; @@ -93,7 +112,8 @@ } section.content { - margin: 70px 15px 0 225px; + margin: 0 5px 0 5px; + padding: 64px 0 0 0; } .sidebar { @@ -123,7 +143,7 @@ section.content { .card .body { font-size: 14px; color: #555; - padding: 10px; + padding: 10px; } .card .card-header { @@ -150,15 +170,15 @@ section.content { } .checkbox label input[type=checkbox], label.checkbox-inline input[type=checkbox] { - position: relative; - left: 0; - z-index: -1; - width: 13px; - height: 13px; + position: relative; + left: 0; + z-index: -1; + width: 13px; + height: 13px; margin: 5px 5px 0 0; overflow: hidden; pointer-events: none; - opacity: 1; + opacity: 1; } @@ -178,8 +198,8 @@ section.content { } .btn:not(.btn-link):not(.btn-circle) span { position: relative; - top: 0px; - margin-left: 0px; + top: 0px; + margin-left: 0px; } .nav { padding-left: 0; @@ -199,7 +219,7 @@ section.content { } .nav-tabs li a.active { - color: #000 !important; + color: #000 !important; border-bottom: 2px solid #2196F3 !important; } @@ -330,4 +350,4 @@ div.online-order-margin > div > span { }*/ /* order-no color */ -/* *************************************************** */ \ No newline at end of file +/* *************************************************** */ diff --git a/app/views/foodcourt/addorders/detail.html.erb b/app/views/foodcourt/addorders/detail.html.erb index 703206a1..878978d9 100644 --- a/app/views/foodcourt/addorders/detail.html.erb +++ b/app/views/foodcourt/addorders/detail.html.erb @@ -2,7 +2,7 @@ <%= javascript_include_tag 'addorder', 'data-turbolinks-track': 'reload' %> <% type = request.path_info.include?('quick_service') || request.path_info.include?('food_court')%> <% modify_order = request.path_info.include?('modify_order')%> -
+
@@ -10,8 +10,8 @@ -
-