From a6989a56c31ff8bc720929860095865754abb7ff Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Wed, 24 Feb 2021 16:58:28 +0000
Subject: [PATCH] Bug 27777: (alternate) Improve tables on Point of Sale page
 for low screen resolutions

This alternate solution makes these minor changes:

- The Bootstrap grid classes are adjusted so that the breakpoint
  between the two-column layout and the single-column layout happens at
  a wider browser-width.
- The DataTable configurations are modified to set "autoWidth" to
  "false," which gives us a more fluid behavior.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
---
 koha-tmpl/intranet-tmpl/prog/en/modules/pos/pay.tt | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/pos/pay.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/pos/pay.tt
index 4d35b60ff7..474f997c8e 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/pos/pay.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/pos/pay.tt
@@ -21,7 +21,7 @@
 
 <div class="main container-fluid">
     <div class="row">
-        <div class="col-sm-10 col-sm-push-2">
+        <div class="col-md-10 col-md-push-2">
 
         [% IF ( registers.size == 0 ) %]
             <div id="error_message" class="dialog message">
@@ -46,7 +46,7 @@
         <form name="payForm" id="payForm" method="post" action="/cgi-bin/koha/pos/pay.pl">
             <div class="row">
 
-                <div class="col-sm-6">
+                <div class="col-md-6">
                     <fieldset class="rows">
                         <legend>Items for purchase</legend>
                             Please select items from below to add to this transaction:
@@ -78,7 +78,7 @@
                     </fieldset>
                 </div>
 
-                <div class="col-sm-6">
+                <div class="col-md-6">
 
                     <fieldset class="rows">
                         <legend>This sale</legend>
@@ -149,7 +149,7 @@
         [% END %]
     </div>
 
-    <div class="col-sm-2 col-sm-pull-10">
+    <div class="col-md-2 col-md-pull-10">
         <aside>
             [% INCLUDE 'pos-menu.inc' %]
         </aside>
@@ -335,7 +335,8 @@
                 nFoot.getElementsByTagName('td')[1].innerHTML = iTotalPrice.format_price();
                 $('#paid').val(iTotalPrice);
                 $('#paid').trigger('change');
-            }
+            },
+            "autoWidth": false
         }));
 
         $("#sale").on("click", "button.drop", function(){
@@ -346,6 +347,7 @@
         var items_table = KohaTable("invoices", {
                "sPaginationType": "full",
                "aaSorting": [[ 0, "asc" ]],
+               "autoWidth": false
         }, items_columns_settings, false);
 
         $("#invoices").on("click", ".add_button", function(e) {
-- 
2.20.1