Enhanc top bar of TakePOS (more similar than backoffice)

htdocs/main.inc.php

@@ -1757,9 +1757,11 @@ function top_menu($head, $title = '', $target = '', $disablejs = 0, $disablehead
 /**
  * Build the tooltip on user login
  *
- * @return  string                  HTML content
+ * @param	int			$hideloginname		Hide login name. Show only the image.
+ * @param	string		$urllogout			URL for logout
+ * @return  string                  		HTML content
  */
-function top_menu_user()
+function top_menu_user($hideloginname = 0, $urllogout = '')
 {
     global $langs, $conf, $db, $hookmanager, $user;
     global $dolibarr_main_authentication, $dolibarr_main_demo;
@@ -1830,9 +1832,10 @@ function top_menu_user()
         }
     }
 
-
+    if (empty($urllogout)) {
-
+    	$urllogout = DOL_URL_ROOT.'/user/logout.php';
-    $logoutLink = '<a accesskey="l" href="'.DOL_URL_ROOT.'/user/logout.php" class="button-top-menu-dropdown" ><i class="fa fa-sign-out-alt"></i> '.$langs->trans("Logout").'</a>';
+    }
+    $logoutLink = '<a accesskey="l" href="'.$urllogout.'" class="button-top-menu-dropdown" ><i class="fa fa-sign-out-alt"></i> '.$langs->trans("Logout").'</a>';
     $profilLink = '<a accesskey="l" href="'.DOL_URL_ROOT.'/user/card.php?id='.$user->id.'" class="button-top-menu-dropdown" ><i class="fa fa-user"></i>  '.$langs->trans("Card").'</a>';
 
 
@@ -1857,9 +1860,12 @@ function top_menu_user()
 
     $btnUser = '<!-- div for user link -->
     <div id="topmenu-login-dropdown" class="userimg atoplogin dropdown user user-menu  inline-block">
-        <a href="'.DOL_URL_ROOT.'/user/card.php?id='.$user->id.'" class="dropdown-toggle login-dropdown-a" data-toggle="dropdown">
+        <a href="'.DOL_URL_ROOT.'/user/card.php?id='.$user->id.'" class="dropdown-toggle login-dropdown-a" data-toggle="dropdown">';
-            '.$userImage.'
+    $btnUser .= $userImage;
-            <span class="hidden-xs maxwidth200 atoploginusername hideonsmartphone">'.dol_trunc($user->firstname ? $user->firstname : $user->login, 10).'</span>
+    if (empty($hideloginname)) {
+    	$btnUser .= '<span class="hidden-xs maxwidth200 atoploginusername hideonsmartphone">'.dol_trunc($user->firstname ? $user->firstname : $user->login, 10).'</span>';
+    }
+    $btnUser .= '
         </a>
         <div class="dropdown-menu">
             <!-- User image -->

htdocs/takepos/css/pos.css.php

@@ -233,8 +233,10 @@ table.postablelines tr td {
     padding-top: 3px;
     padding-bottom: 3px;
 }
+
 .posinvoiceline td {
     height: 40px !important;
+    background-color: var(--colorbacklineimpair1);
 }
 
 div.paymentbordline
@@ -268,7 +270,7 @@ div.paymentbordline
 .row1withhead{
 	margin: 0 auto;
 	width: 100%;
-	height: calc(50% - 35px);
+	height: calc(40% - 50px);
 	padding-top: 5px;
 }
 
@@ -281,7 +283,7 @@ div.paymentbordline
 .row2withhead{
 	margin: 0 auto;
 	width: 100%;
-	height: 50%;
+	height: 60%;
 }
 
 .div1{
@@ -401,26 +403,51 @@ div.description_content {
 .header{
 	margin: 0 auto;
 	width: 100%;
-	height: 35px;
+	height: 50px;
 	background: rgb(60,70,100);
 }
 
+.topnav-left {
+	float: left;
+}
+.topnav-right {
+
+}
+
+.topnav div.login_block_other, .topnav div.login_block_user {
+	max-width: unset;
+	width: unset;
+}
 .topnav{
 	background: rgb(<?php echo $colorbackhmenu1 ?>);
 	background-image: linear-gradient(-45deg, <?php echo colorAdjustBrightness(colorArrayToHex(colorStringToArray($colorbackhmenu1)), '5'); ?>, rgb(<?php echo $colorbackhmenu1 ?>));
 	overflow: hidden;
 	height: 100%;
 }
+.topnav .tmenu {
+    display: block;
+}
 
 .topnav a{
 	float: left;
 	color: #f2f2f2;
-	padding: 6px 16px;
 	text-decoration: none;
+}
+.topnav .login_block_other a {
+	padding: 5px 10px;
+    margin-left: 4px;
+    font-size: 1.3em;
+}
+.topnav-right > a {
 	font-size: 17px;
 }
 
-.topnav a:hover{
+.topnav-left a {
+	padding: 7px 4px 7px 4px;
+    margin: 8px;
+    margin-left: 4px;
+}
+.topnav-left a:hover, .topnav .login_block_other a:hover {
 	background-color: #ddd;
 	color: black;
 }
@@ -434,8 +461,9 @@ div.description_content {
 	color: #000;
 	float: left;
 	border-bottom: none !important;
-	margin-top: 4px;
 	margin-left: 6px;
+	font-size: 1.3em;
+    max-width: 250px;
 }
 
 @media screen and (min-width: 892px) {
@@ -494,7 +522,19 @@ div.description_content {
 
 /* For small screens */
 
+@media screen and (max-width: 1024px) {
+	.topnav input[type="text"] {
+		max-width: 150px;
+	}
+}
+
 @media screen and (max-width: 767px) {
+	.header {
+	    position: sticky;
+	    top: 0;
+	    z-index: 10;
+	}
+
 	.topnav-right {
 		float: unset;
 	}
@@ -511,6 +551,11 @@ div.description_content {
 		width: 25%;
 	}
 
+	.row1withhead{
+		height: calc(40% - 100px);
+	}
+
+
 	div.div1 {
 		padding-bottom: 0;
 		margin-bottom: 10px;
@@ -528,6 +573,7 @@ div.description_content {
 	}
 
 	div.div3 {
+		margin-top: 8px;
 		height: unset;
 	}
 

htdocs/takepos/takepos.php

@@ -660,18 +660,25 @@ if (empty($conf->global->TAKEPOS_HIDE_HEAD_BAR)) {
 			<div class="topnav-left">
 			<a onclick="TerminalsDialog();">
 			<?php echo $langs->trans("Terminal")." ";
-			if ($_SESSION["takeposterminal"] == "") echo "1"; else echo $_SESSION["takeposterminal"];
+			if ($_SESSION["takeposterminal"] == "") echo "1";
-			echo " - ".dol_print_date(dol_now(), "dayhour");
+			else echo $_SESSION["takeposterminal"];
+			echo '<span class="hideonsmartphone"> - '.dol_print_date(dol_now(), "dayhour").'</span>';
 			?>
 			</a>
 			<a onclick="Customer();"><?php echo $langs->trans("Customer"); ?></a>
 			</div>
 			<div class="topnav-right">
+				<div class="login_block_other">
 				<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; ?>';"><span class="fas fa-home"></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 class="login_block_user">
+				<?php
+				print top_menu_user(1, DOL_URL_ROOT.'/user/logout.php');
+				?>
+				</div>
 			</div>
 		</div>
 	</div>

htdocs/theme/eldy/dropdown.inc.php

@@ -122,7 +122,7 @@ button.dropdown-item.global-search-item {
 .tmenu .open.dropdown, .tmenu .open.dropdown {
     background: rgba(0, 0, 0, 0.1);
 }
-.tmenu .dropdown-menu, .login_block .dropdown-menu {
+.tmenu .dropdown-menu, .login_block .dropdown-menu, .topnav .dropdown-menu {
     position: absolute;
     right: 2px;
     <?php echo $left; ?>: auto;
@@ -135,20 +135,23 @@ button.dropdown-item.global-search-item {
 .user-body {
     color: #333;
 }
-.side-nav-vert .user-menu .dropdown-menu {
+.side-nav-vert .user-menu .dropdown-menu, .topnav .user-menu .dropdown-menu {
     border-top-right-radius: 0;
     border-top-left-radius: 0;
     padding: 1px 0 0 0;
     border-top-width: 0;
     width: 300px;
 }
-.side-nav-vert .user-menu .dropdown-menu {
+.topnav .user-menu .dropdown-menu {
+	top: 50px;
+}
+.side-nav-vert .user-menu .dropdown-menu, .topnav .user-menu .dropdown-menu {
     margin-top: 0;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
 }
 
-.side-nav-vert .user-menu .dropdown-menu > .user-header {
+.side-nav-vert .user-menu .dropdown-menu > .user-header, .topnav .user-menu .dropdown-menu > .user-header {
     min-height: 100px;
     padding: 10px;
     text-align: center;