First implementation of CSS3 flex.

htdocs/index.php

@@ -110,26 +110,6 @@ if (! empty($conf->global->MAIN_MOTD))
 print '<div class="fichecenter"><div class="fichethirdleft">';
 
 
-/*
- * Informations area
- */
-/* Was moved into a widget
-$boxinfo='';
-$boxinfo.= '<div class="box">';
-$boxinfo.= '<table summary="'.dol_escape_htmltag($langs->trans("LoginInformation")).'" class="noborder boxtable" width="100%">';
-$boxinfo.= '<tr class="liste_titre"><th class="liste_titre" colspan="2">'.$langs->trans("Informations").'</th></tr>';
-$boxinfo.= '<tr '.$bc[false].'>';
-$boxinfo.= '<td class="nowrap">'.$langs->trans("User").'</td><td>'.$user->getNomUrl(0).'</td></tr>';
-$boxinfo.= '<tr '.$bc[true].'>';
-$boxinfo.= '<td class="nowrap">'.$langs->trans("PreviousConnexion").'</td><td>';
-if ($user->datepreviouslogin) $boxinfo.= dol_print_date($user->datepreviouslogin,"dayhour",'tzuser');
-else $boxinfo.= $langs->trans("Unknown");
-$boxinfo.= '</td>';
-$boxinfo.= "</tr>\n";
-$boxinfo.= "</table>\n";
-$boxinfo.= '</div>';
-*/
-
 /*
  * Dashboard Dolibarr states (statistics)
  * Hidden for external users
@@ -148,7 +128,7 @@ if (empty($user->societe_id))
     $boxstat.='<tr class="liste_titre">';
     $boxstat.='<th class="liste_titre">'.$langs->trans("DolibarrStateBoard").'</th>';
     $boxstat.='</tr>';
-    $boxstat.='<tr class="impair"><td class="tdboxstats nohover">';
+    $boxstat.='<tr class="impair"><td class="tdboxstats nohover flexcontainer">';
 
     $var=true;
 
@@ -356,6 +336,15 @@ if (empty($user->societe_id))
 	    }
     }
 
+    $boxstat.='<a class="boxstatsindicator thumbstat nobold nounderline"></a>';
+    $boxstat.='<a class="boxstatsindicator thumbstat nobold nounderline"></a>';
+    $boxstat.='<a class="boxstatsindicator thumbstat nobold nounderline"></a>';
+    $boxstat.='<a class="boxstatsindicator thumbstat nobold nounderline"></a>';
+    $boxstat.='<a class="boxstatsindicator thumbstat nobold nounderline"></a>';
+    $boxstat.='<a class="boxstatsindicator thumbstat nobold nounderline"></a>';
+    $boxstat.='<a class="boxstatsindicator thumbstat nobold nounderline"></a>';
+    $boxstat.='<a class="boxstatsindicator thumbstat nobold nounderline"></a>';
+    
     $boxstat.='</td></tr>';
     $boxstat.='</table>';
     $boxstat.='</div>';

htdocs/theme/eldy/style.css.php

@@ -646,6 +646,20 @@ div.fiche>form>div.div-table-responsive {
     min-height: 350px;
 }
 
+.flexcontainer {
+    display: inline-flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+}
+.thumbstat {
+	flex: 1 1 120px;
+    /* flex-grow: 1; */
+    /* flex-shrink: 1; */
+    /* flex-basis: 140px; */
+    width: 100%;
+    justify-content: flex-start;
+    align-self: flex-start;
+}
 
 /* ============================================================================== */
 /* Styles to hide objects                                                         */
@@ -2803,7 +2817,7 @@ div.tabBar .noborder {
 	white-space: nowrap;
 	overflow: hidden;
     text-overflow: ellipsis;
-    width: 110px;    
+    width: 105px;    
 }
 .boxstats:hover {
 	box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.20);
@@ -3925,13 +3939,19 @@ div.dataTables_length select {
 	background: #FFFFFF !important;
 }
 
+.select2-arrow {
+	border: none;
+	border-left: none !important;
+	background: none !important;
+}
+
 .select2-choice
 {
-	border: 1px solid #aaa;
+	/* border: 1px solid #aaa; */
-	/* v6 border-top: none !important;
+	border-top: none !important;
 	border-left: none !important;
 	border-right: none !important;
-	border-bottom: 1px solid #aaa;*/
+	border-bottom: 1px solid #aaa;
 }
 .select2-drop.select2-drop-above.select2-drop-active,
 .select2-container-active .select2-choice,
@@ -3941,7 +3961,6 @@ div.dataTables_length select {
 .select2-container-multi.select2-container-active .select2-choices
 {
 	border: 1px solid #aaa;
-	/* v6 */
 }
 .select2-disabled
 {
@@ -3949,7 +3968,7 @@ div.dataTables_length select {
 }
 .select2-drop-active
 {
-	border: 1px solid #aaa;
+	border: none;
 	border-top: none;
 }
 a span.select2-chosen
@@ -3958,7 +3977,7 @@ a span.select2-chosen
 }
 .select2-container .select2-choice {
 	background-image: none;
-	height: 24px;
+	/* height: 24px; */
 	line-height: 24px;
 }
 .select2-choices .select2-search-choice {
@@ -4062,6 +4081,8 @@ ul.ulselectedfields {
 dl.dropdown {
     margin:0px;
     padding:0px;
+    vertical-align: middle;
+    display: inline-block;
 }
 .dropdown dd, .dropdown dt {
     margin:0px;
@@ -4163,7 +4184,6 @@ a.ui-link, a.ui-link:hover, .ui-btn:hover, span.ui-btn-text:hover, span.ui-btn-i
 }
 select {
     /* display: inline-block; */	/* We can't set this. This disable ability to make */
-    /* TODO modified by jmobile, replace jmobile with pure css*/
     overflow:hidden;
     white-space: nowrap;			/* Enabling this make behaviour strange when selecting the empty value if this empty value is '' instead of ' ' */
     text-overflow: ellipsis;

htdocs/theme/md/style.css.php

@@ -622,6 +622,21 @@ div.fiche>form>div.div-table-responsive {
     min-height: 350px;
 }
 
+.flexcontainer {
+    display: inline-flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+}
+.thumbstat {
+	flex: 1 1 120px;
+    /* flex-grow: 1; */
+    /* flex-shrink: 1; */
+    /* flex-basis: 140px; */
+    width: 100%;
+    justify-content: flex-start;
+    align-self: flex-start;
+}
+
 
 /* ============================================================================== */
 /* Styles to hide objects                                                         */
@@ -2681,7 +2696,7 @@ div .tdtop {
 	white-space: nowrap;
 	overflow: hidden;
     text-overflow: ellipsis;
-    width: 110px;    
+    width: 105px;    
 }
 .boxstats:hover {
 	box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.20);
@@ -3821,6 +3836,20 @@ div.dataTables_length select {
 	background: #FFFFFF !important;
 }
 
+.select2-arrow {
+	border: none;
+	border-left: none !important;
+	background: none !important;
+}
+.select2-choice
+{
+	/* border: 1px solid #aaa; */
+	border-top: none !important;
+	border-left: none !important;
+	border-right: none !important;
+	border-bottom: 1px solid #aaa;
+}
+
 .select2-choice,
 .select2-drop.select2-drop-above.select2-drop-active,
 .select2-container-active .select2-choice,
@@ -3837,7 +3866,7 @@ div.dataTables_length select {
 }
 .select2-drop-active
 {
-	border: 1px solid #aaa;
+	border: none;
 	border-top: none;
 }
 a span.select2-chosen
@@ -3846,7 +3875,6 @@ a span.select2-chosen
 }
 .select2-container .select2-choice {
 	background-image: none;
-	height: 24px;
 	line-height: 24px;
 }
 .select2-choices .select2-search-choice {
@@ -3949,6 +3977,8 @@ ul.ulselectedfields {
 dl.dropdown {
     margin:0px;
     padding:0px;
+    vertical-align: middle;
+    display: inline-block;
 }
 .dropdown dd, .dropdown dt {
     margin:0px;
@@ -4050,7 +4080,6 @@ a.ui-link, a.ui-link:hover, .ui-btn:hover, span.ui-btn-text:hover, span.ui-btn-i
 }
 select {
     /* display: inline-block; */	/* We can't set this. This disable ability to make */
-    /* TODO modified by jmobile, replace jmobile with pure css*/
     overflow:hidden;
     white-space: nowrap;			/* Enabling this make behaviour strange when selecting the empty value if this empty value is '' instead of ' ' */
     text-overflow: ellipsis;