From 52b855fb4bdcc1337ca82b117f217b9da08982b6 Mon Sep 17 00:00:00 2001
From: Laurent Destailleur <eldy@destailleur.fr>
Date: Mon, 29 Nov 2021 16:31:40 +0100
Subject: [PATCH] css

---
 htdocs/public/demo/demo.css  | 57 ++++++++++++++++++++++--------------
 htdocs/public/demo/index.php | 40 ++++++++++++++++---------
 2 files changed, 61 insertions(+), 36 deletions(-)

diff --git a/htdocs/public/demo/demo.css b/htdocs/public/demo/demo.css
index b185f8c933f..8edd0faecce 100644
--- a/htdocs/public/demo/demo.css
+++ b/htdocs/public/demo/demo.css
@@ -3,14 +3,28 @@
 /*  Demo                                                                          */
 /* ============================================================================== */
 
+div.titre {
+	text-transform: none;	
+}
+
 a:hover {
 	text-decoration: none;
 }
+
+.CTable {
+	/* padding: 6px; */
+	font-weight: normal;
+	color: #444444 !important;
+
+	margin: 8px 2px 8px 2px;
+	max-width: 346px;
+}
 .demobox {
 	border: 1px solid #bbb;
 	border-radius: 8px;
 	-moz-border-radius: 8px;
 	min-height: 210px;
+	background: -webkit-linear-gradient(bottom, rgb(255,255,255) 85%, rgb(255,255,255) 100%);
 }
 .demobox:hover {
 	border: 1px solid #bbb;
@@ -18,33 +32,29 @@ a:hover {
 	-moz-border-radius: 8px;
 	box-shadow: 2px 2px 8px #BBB;
 }
-.CTable {
-	padding: 6px;
-	font-weight: normal;
-	color: #444444 !important;
-
-	margin: 8px 2px 8px 2px;
-
-	/*border: 1px solid #bbb;
-	border-radius: 8px;
-	-moz-border-radius: 8px;*/
-	background: -webkit-linear-gradient(bottom, rgb(255,255,255) 85%, rgb(255,255,255) 100%);
-
-	max-width: 346px;
-}
-.csscolumns {
-    margin-top: 6px;
-    margin-bottom: 5px;
-    -webkit-column-count: 2; /* Chrome, Safari, Opera */
-    -moz-column-count: 2; /* Firefox */
-    column-count: 2;
-    text-align: left;
-}
 .demomaxoveflow {
     max-width: 120px;
     overflow: hidden;
     text-overflow: ellipsis;
 }
+@media only screen and (min-width: 641px)
+{
+	.csscolumns {
+	    margin-top: 6px;
+	    margin-bottom: 5px;
+	    -webkit-column-count: 3; /* Chrome, Safari, Opera */
+	    -moz-column-count: 3; /* Firefox */
+	    column-count: 3;
+	    text-align: left;
+	}
+	#divprofdemoall {
+		max-width: unset;		
+	}
+	
+	.demomaxoveflow {
+	    max-width: 200px;
+	}
+}
 @media only screen and (max-width: 840px)
 {
 	.csscolumns {
@@ -76,6 +86,9 @@ a:hover {
 	    column-count: 1;
         text-align: left;
 	}
+	.demomaxoveflow {
+	    max-width: 220px !important;
+	}
 }
 
 
diff --git a/htdocs/public/demo/index.php b/htdocs/public/demo/index.php
index 0932b17baf5..b22ecd2e379 100644
--- a/htdocs/public/demo/index.php
+++ b/htdocs/public/demo/index.php
@@ -250,17 +250,18 @@ jQuery(document).ready(function () {
     jQuery(".modulelineshow").attr("href","#a1profdemoall");
     jQuery(".cursorpointer").css("cursor","pointer");
     jQuery(".modulelineshow").click(function() {
-    var idstring=$(this).attr("id");
-    if (typeof idstring != "undefined")
-    {
-        var currentId = idstring.substring(2);
-        jQuery("tr.moduleline").hide();
-        if (currentId != openedId)
-        {
-            openedId=currentId;
-            jQuery("#tr1"+currentId).show();
-            jQuery("#tr2"+currentId).show();
-        }
+		console.log("We select the custom demo");
+	    var idstring=$(this).attr("id");
+	    if (typeof idstring != "undefined")
+	    {
+	        var currentId = idstring.substring(2);
+	        jQuery("tr.moduleline").hide();
+	        if (currentId != openedId)
+	        {
+	            openedId=currentId;
+	            jQuery("#tr1"+currentId).show();
+	            jQuery("#tr2"+currentId).show();
+	        }
             else openedId = "";
         }
     });
@@ -350,7 +351,7 @@ foreach ($demoprofiles as $profilearray) {
 
 		// Modules (a profile you must choose modules)
 		if (empty($profilearray['url'])) {
-			print '<div id="tr1'.$profilearray['key'].'" class="moduleline hidden" style="margin-left: 8px; margin-right: 8px; text-align: justify; font-size:14px; line-height: 130%; padding-bottom: 8px">';
+			print '<div id="tr1'.$profilearray['key'].'" class="moduleline hidden" style="margin-left: 8px; margin-right: 8px; text-align: justify; font-size:0.75em; line-height: 130%; padding-bottom: 8px">';
 
 			print '<span class="opacitymedium">'.$langs->trans("ThisIsListOfModules").'</span><br><br>';
 
@@ -387,14 +388,22 @@ foreach ($demoprofiles as $profilearray) {
 					//if ($modulo == 0) print '<tr>';
 					print '<!-- id='.$val->numero.' -->';
 					print '<div class="nowrap">';
-					print '<input type="checkbox" class="checkbox" id="id'.$modulekeyname.'" name="'.$modulekeyname.'" value="1" title="'.dol_escape_htmltag($val->getName()).'"';
+					print '<input type="checkbox" class="checkbox valignmiddle paddingright" id="id'.$modulekeyname.'" name="'.$modulekeyname.'" value="1" title="'.dol_escape_htmltag($val->getName()).'"';
 					if (in_array($modulekeyname, $alwaysuncheckedmodules)) {
 						print ' disabled';
 					}
 					if (!in_array($modulekeyname, $alwaysuncheckedmodules) && (!in_array($modulekeyname, $listofdisabledmodules) || in_array($modulekeyname, $alwayscheckedmodules))) {
 						print ' checked';
 					}
-					print '> <label for="id'.$modulekeyname.'" class="inline-block demomaxoveflow" title="'.dol_escape_htmltag($val->getName()).'">'.$val->getName().'</label><br>';
+					print '>';
+					/*
+					$s = img_picto('', $modulekeyname, 'class="pictofixedwidth paddingleft"');
+					if ($s) {
+						print $s;
+					} else {
+						print img_picto('', 'generic', 'class="pictofixedwidth paddingleft"');
+					}*/
+					print '<label for="id'.$modulekeyname.'" class="inline-block demomaxoveflow valignmiddle paddingleft" title="'.dol_escape_htmltag($val->getName()).'">'.$val->getName().'</label><br>';
 					print '</div>';
 					//if ($modulo == ($nbcolsmod - 1)) print '</tr>';
 					$j++;
@@ -405,6 +414,7 @@ foreach ($demoprofiles as $profilearray) {
 
 			print '<br><div class="center">';
 			print '<input type="submit" value=" &nbsp; &nbsp; '.$langs->trans("Start").' &nbsp; &nbsp; " class="button">';
+			print '<br><br>';
 			print '</div>';
 
 			print '</div>';
@@ -419,6 +429,8 @@ foreach ($demoprofiles as $profilearray) {
 
 print '</div>';
 
+print '<br>';
+
 
 // TODO Replace this with a hook
 // Google Adsense (need Google module)