Responsive TakePOS with Bar.

htdocs/langs/en_US/cashdesk.lang

@@ -81,3 +81,4 @@ CustomReceipt=Custom Receipt
 ReceiptName=Receipt Name
 ProductSupplements=Product Supplements
 SupplementCategory=Supplement category
+HeadBar=Head Bar

htdocs/takepos/admin/setup.php

@@ -82,6 +82,7 @@ if (GETPOST('action', 'alpha') == 'set')
 	$res = dolibarr_set_const($db, "TAKEPOS_NUM_TERMINALS", GETPOST('TAKEPOS_NUM_TERMINALS', 'alpha'), 'chaine', 0, '', $conf->entity);
 	$res = dolibarr_set_const($db, "TAKEPOS_DIRECT_PAYMENT", GETPOST('TAKEPOS_DIRECT_PAYMENT', 'int'), 'int', 0, '', $conf->entity);
 	$res = dolibarr_set_const($db, "TAKEPOS_CUSTOM_RECEIPT", GETPOST('TAKEPOS_CUSTOM_RECEIPT', 'int'), 'int', 0, '', $conf->entity);
+	//$res = dolibarr_set_const($db, "TAKEPOS_HEAD_BAR", GETPOST('TAKEPOS_HEAD_BAR', 'int'), 'int', 0, '', $conf->entity);
     $res = dolibarr_set_const($db, "TAKEPOS_EMAIL_TEMPLATE_INVOICE", GETPOST('TAKEPOS_EMAIL_TEMPLATE_INVOICE', 'alpha'), 'chaine', 0, '', $conf->entity);
 	if (!empty($conf->global->TAKEPOS_ENABLE_SUMUP)) {
 		$res = dolibarr_set_const($db, "TAKEPOS_SUMUP_AFFILIATE", GETPOST('TAKEPOS_SUMUP_AFFILIATE', 'alpha'), 'chaine', 0, '', $conf->entity);
@@ -270,6 +271,14 @@ print '<td colspan="2">';
 print $form->selectyesno("TAKEPOS_CUSTOM RECEIPT", $conf->global->TAKEPOS_CUSTOM_RECEIPT, 1);
 print "</td></tr>\n";
 
+// Head Bar
+/*print '<tr class="oddeven"><td>';
+print $langs->trans('HeadBar');
+print '<td colspan="2">';
+print $form->selectyesno("TAKEPOS_HEAD_BAR", $conf->global->TAKEPOS_HEAD_BAR, 1);
+print "</td></tr>\n";
+*/
+
 // Email template for send invoice
 print '<tr class="oddeven"><td>';
 print $langs->trans('EmailTemplate');

htdocs/takepos/css/pos.css

@@ -1,6 +1,6 @@
 html,body {
     box-sizing: border-box;
-	padding:3px;
+	padding:0px;
     margin:0;
     height:100%;
 	width:100%;
@@ -35,7 +35,7 @@ button.calcbutton {
 	text-align: center;
 	overflow: visible; /* removes extra width in IE */
 	width: calc(25% - 2px);
-	height: 24%;
+	height: calc(25% - 2px);
 	font-weight: bold;
     background-color: #8c907e;
     color: #fff;
@@ -57,7 +57,7 @@ button.calcbutton2 {
 	text-align: center;
 	overflow: visible; /* removes extra width in IE */
 	width: calc(25% - 2px);
-	height: 24%;
+	height: calc(25% - 2px);
 	font-weight: bold;
 }
 
@@ -72,7 +72,7 @@ button.calcbutton3 {
 	font-size:120%;
 	overflow: visible; /* removes extra width in IE */
 	width: calc(25% - 2px);
-	height: 24%;
+	height: calc(25% - 2px);
 }
 
 button.actionbutton {
@@ -91,7 +91,7 @@ button.actionbutton {
 	text-align: center;
 	overflow: visible; /* removes extra width in IE */
 	width:33%;
-	height:24%;
+	height: calc(25% - 2px);
 }
 
 .takepospay {
@@ -107,7 +107,7 @@ div.wrapper{
 	float:left; /* important */
 	position:relative; /* important(so we can absolutely position the description div */
 	width:25%;
-	height:25%;
+	height:33%;
 	margin:0;
 	padding:1px;
 	border: 2px solid #EEE;
@@ -121,7 +121,7 @@ div.wrapper2{
 	float:left; /* important */
 	position:relative; /* important(so we can absolutely position the description div */
 	width:12.5%;
-	height:25%;
+	height:33%;
 	margin:0;
 	/* padding:1px; */
 	border: 2px solid #EEE;
@@ -206,12 +206,25 @@ div.paymentbordline
 	height: 34%;
 }
 
+.row1withhead{
+	margin: 0 auto;
+	width: 100%;
+	height: calc(50% - 35px);
+	padding-top: 5px;
+}
+
 .row2{
 	margin: 0 auto;
 	width: 100%;
 	height: 66%;
 }
 
+.row2withhead{
+	margin: 0 auto;
+	width: 100%;
+	height: 50%;
+}
+
 .div1{
 	height:100%;
 	width: 34%;
@@ -221,9 +234,10 @@ div.paymentbordline
 	overflow: auto;
 	/* background-color:white; */
 	padding-top: 0;
-	padding-bottom: 10px;
+	padding-bottom: 0;
 	padding-right: 5px;
 	padding-left: 5px;
+	min-height: 180px;
 }
 
 .div2{
@@ -233,7 +247,7 @@ div.paymentbordline
 	float: left;
 	box-sizing: border-box;
 	padding-top: 0;
-	padding-bottom: 10px;
+	padding-bottom: 0;
 	padding-right: 5px;
 	padding-left: 5px;
 	min-height: 180px;
@@ -325,6 +339,45 @@ div.description_content {
     padding-right: 2px;
 }
 
+.header{
+	margin: 0 auto;
+	width: 100%;
+	height: 35px;
+	background: rgb(60,70,100);
+}
+
+.topnav{
+	background-color: rgb(60,70,100);
+	overflow: hidden;
+	height: 100%;
+}
+
+.topnav a{
+	float: left;
+	color: #f2f2f2;
+	text-align: center;
+	padding: 6px 16px;
+	text-decoration: none;
+	font-size: 17px;
+}
+
+.topnav a:hover{
+	background-color: #ddd;
+	color: black;
+}
+
+.topnav-right{
+	float: right;
+}
+
+.topnav input[type="text"] {
+	background-color: #fff;
+	color: #000;
+	float: left;
+	border-bottom: none !important;
+	margin-top: 4px;
+}
+
 @media screen and (min-width: 892px) {
 	.calcbutton{
 		font-size: 18px;
@@ -382,6 +435,12 @@ div.description_content {
 /* For small screens */
 
 @media screen and (max-width: 767px) {
+	.topnav-right {
+		float: unset;
+	}
+	.header {
+		height: unset;
+	}
 	div.container {
 		overflow-x: scroll;
 	}
@@ -392,6 +451,10 @@ div.description_content {
 		width: 25%;
 	}
 	
+	div.div1 {
+		padding-bottom: 0;
+		margin-bottom: 10px;
+	}
 	div.div1, div.div2, div.div3 {
 		width: 100%;
 	}
@@ -404,6 +467,10 @@ div.description_content {
 		min-height: unset;
 	}
 	
+	div.div3 {
+		height: unset;
+	}
+	
 	button.calcbutton, button.calcbutton2 {
 	    min-height: 30px;
 	}

htdocs/takepos/takepos.php

@@ -54,8 +54,8 @@ $langs->loadLangs(array("bills", "orders", "commercial", "cashdesk", "receiptpri
 
 $categorie = new Categorie($db);
 
-$maxcategbydefaultforthisdevice = 16;
+$maxcategbydefaultforthisdevice = 12;
-$maxproductbydefaultforthisdevice = 32;
+$maxproductbydefaultforthisdevice = 24;
 if ($conf->browser->layout == 'phone')
 {
     $maxcategbydefaultforthisdevice = 8;
@@ -622,6 +622,10 @@ function DirectPayment(){
 	});
 }
 
+function FullScreen() {
+	document.documentElement.requestFullscreen();
+}
+
 $( document ).ready(function() {
     PrintCategories(0);
 	LoadProducts(0);
@@ -642,7 +646,35 @@ $( document ).ready(function() {
 if ($conf->global->TAKEPOS_NUM_TERMINALS != "1" && $_SESSION["takeposterminal"] == "") print '<div id="dialog-info" title="TakePOS">'.$langs->trans('TerminalSelect').'</div>';
 ?>
 <div class="container">
-	<div class="row1">
+
+<?php
+if (empty($conf->global->TAKEPOS_HIDE_HEAD_BAR)) {
+?>
+	<div class="header">
+		<div class="topnav">
+			<div class="topnav-left">
+			<a onclick="TerminalsDialog();">
+			<?php echo $langs->trans("Terminal")." ";
+			if ($_SESSION["takeposterminal"] == "") echo "1"; else echo $_SESSION["takeposterminal"];
+			echo " - ".dol_print_date(dol_now(), "dayhour");
+			?>
+			</a>
+			<a onclick="Customer();"><?php echo $langs->trans("Customer"); ?></a>
+			</div>
+			<div class="topnav-right">
+				<input type="text" id="search" name="search" onkeyup="Search2();"  placeholder="<?php echo $langs->trans("Search");?>" autofocus>
+				<a onclick="ClearSearch();"><span class="fa fa-backspace"></span></a>
+				<a onclick="window.location.href='<?php echo DOL_URL_ROOT;?>';"><span class="fas fa-sign-out-alt"></span></a>
+				<a onclick="window.location.href='<?php echo DOL_URL_ROOT;?>/user/logout.php';"><span class="fas fa-user"></span></a>
+				<a onclick="FullScreen();"><span class="fa fa-expand-arrows-alt"></span></a>
+			</div>
+		</div>
+	</div>
+<?php
+}
+?>
+
+	<div class="row1<?php if (empty($conf->global->TAKEPOS_HIDE_HEAD_BAR)) print 'withhead';?>">
 
 		<div id="poslines" class="div1">
 		</div>
@@ -710,7 +742,9 @@ else
     $menus[$r++] = array('title'=>'<span class="fa fa-layer-group paddingrightonly"></span><div class="trunc">'.$langs->trans("Place").'</div>', 'action'=>'Floors();');
 }
 
-$menus[$r++] = array('title'=>'<span class="far fa-building paddingrightonly"></span><div class="trunc">'.$langs->trans("Customer").'</div>', 'action'=>'Customer();');
+if (! empty($conf->global->TAKEPOS_HIDE_HEAD_BAR)) {
+	$menus[$r++] = array('title'=>'<span class="far fa-building paddingrightonly"></span><div class="trunc">'.$langs->trans("Customer").'</div>', 'action'=>'Customer();');
+}
 $menus[$r++] = array('title'=>'<span class="fa fa-history paddingrightonly"></span><div class="trunc">'.$langs->trans("History").'</div>', 'action'=>'History();');
 $menus[$r++] = array('title'=>'<span class="fa fa-cube paddingrightonly"></span><div class="trunc">'.$langs->trans("FreeZone").'</div>', 'action'=>'FreeZone();');
 $menus[$r++] = array('title'=>'<span class="far fa-money-bill-alt paddingrightonly"></span><div class="trunc">'.$langs->trans("Payment").'</div>', 'action'=>'CloseBill();');
@@ -764,7 +798,10 @@ if (!empty($reshook)) {
 if ($r % 3 == 2) $menus[$r++]=array('title'=>'', 'style'=>'visibility: hidden;');
 
 $menus[$r++]=array('title'=>'<span class="fa fa-home paddingrightonly"></span><div class="trunc">'.$langs->trans("BackOffice").'</div>', 'action'=>'window.open(\''.(DOL_URL_ROOT ? DOL_URL_ROOT : '/').'\', \'_backoffice\');');
-$menus[$r++]=array('title'=>'<span class="fa fa-sign-out-alt paddingrightonly"></span><div class="trunc">'.$langs->trans("Logout").'</div>', 'action'=>'window.location.href=\''.DOL_URL_ROOT.'/user/logout.php\';');
+
+if (! empty($conf->global->TAKEPOS_HIDE_HEAD_BAR)) {
+	$menus[$r++]=array('title'=>'<span class="fa fa-sign-out-alt paddingrightonly"></span><div class="trunc">'.$langs->trans("Logout").'</div>', 'action'=>'window.location.href=\''.DOL_URL_ROOT.'/user/logout.php\';');
+}
 
 ?>
 		<!-- Show buttons -->
@@ -783,16 +820,18 @@ $menus[$r++]=array('title'=>'<span class="fa fa-sign-out-alt paddingrightonly"><
             else echo '<button style="'.$menu['style'].'" type="button" id="action'.$i.'" class="actionbutton" onclick="'.$menu['action'].'">'.$menu['title'].'</button>';
         }
 
-        print '<!-- Show the search input text -->'."\n";
+		if (! empty($conf->global->TAKEPOS_HIDE_HEAD_BAR)) {
-        print '<div class="margintoponly">';
+			print '<!-- Show the search input text -->'."\n";
-		print '<input type="text" id="search" name="search" onkeyup="Search2();" style="width:80%;width:calc(100% - 51px);font-size: 150%;" placeholder="'.$langs->trans("Search").'" autofocus> ';
+			print '<div class="margintoponly">';
-		print '<a class="marginleftonly hideonsmartphone" onclick="ClearSearch();">'.img_picto('', 'searchclear').'</a>';
+			print '<input type="text" id="search" name="search" onkeyup="Search2();" style="width:80%;width:calc(100% - 51px);font-size: 150%;" placeholder="'.$langs->trans("Search").'" autofocus> ';
-		print '</div>';
+			print '<a class="marginleftonly hideonsmartphone" onclick="ClearSearch();">'.img_picto('', 'searchclear').'</a>';
+			print '</div>';
+		}
         ?>
 		</div>
 	</div>
 
-	<div class="row2">
+	<div class="row2<?php if (empty($conf->global->TAKEPOS_HIDE_HEAD_BAR)) print 'withhead';?>">
 
 		<!--  Show categories -->
 		<div class="div4">