From cc64994f300831137e487df4ac08a2dea4ffda1e Mon Sep 17 00:00:00 2001 From: Laurent Destailleur Date: Thu, 10 Nov 2016 11:33:25 +0100 Subject: [PATCH] Better responsive design --- htdocs/core/class/html.form.class.php | 21 +++++----- htdocs/core/lib/functions.lib.php | 58 +++++++++++++-------------- htdocs/core/tpl/contacts.tpl.php | 7 ++-- htdocs/core/tpl/notes.tpl.php | 8 ++-- htdocs/projet/card.php | 4 +- htdocs/theme/eldy/style.css.php | 20 +++++---- htdocs/theme/md/style.css.php | 41 +++++++++++++++---- 7 files changed, 95 insertions(+), 64 deletions(-) diff --git a/htdocs/core/class/html.form.class.php b/htdocs/core/class/html.form.class.php index 8a6c97e794c..8ca311af082 100644 --- a/htdocs/core/class/html.form.class.php +++ b/htdocs/core/class/html.form.class.php @@ -211,9 +211,10 @@ class Form if (empty($notabletag)) $ret.=''; if (empty($notabletag)) $ret.=''; - $ret.=''; - if (preg_match('/ckeditor|textarea/',$typeofdata)) $ret.='
'."\n"; - $ret.=''; + else $ret.='
'; + $ret.=''; + if (preg_match('/ckeditor|textarea/',$typeofdata) && empty($notabletag)) $ret.='
'."\n"; + $ret.=''; if (empty($notabletag)) $ret.=''; if (empty($notabletag)) $ret.=''."\n"; @@ -4485,7 +4486,7 @@ class Form if ($usecalendar == "eldy") { // Zone de saisie manuelle de la date - $retstring.='trans("FormatDateShortJavaInput").'\'); "'; // FormatDateShortInput for dol_print_date / FormatDateShortJavaInput that is same for javascript $retstring.='>'; @@ -4513,7 +4514,7 @@ class Form { //$retstring.='
'; // Day - $retstring.=''; + $retstring.=''; if ($emptydate || $set_time == -1) { @@ -4527,7 +4528,7 @@ class Form $retstring.=""; - $retstring.=''; + $retstring.=''; if ($emptydate || $set_time == -1) { $retstring.=''; @@ -4545,11 +4546,11 @@ class Form // Year if ($emptydate || $set_time == -1) { - $retstring.=''; + $retstring.=''; } else { - $retstring.=''; + $retstring.=''; for ($year = $syear - 5; $year < $syear + 10 ; $year++) { @@ -4566,7 +4567,7 @@ class Form if ($h) { // Show hour - $retstring.=''; + $retstring.=''; if ($emptyhours) $retstring.=''; for ($hour = 0; $hour < 24; $hour++) { @@ -4580,7 +4581,7 @@ class Form if ($m) { // Show minutes - $retstring.=''; + $retstring.=''; if ($emptyhours) $retstring.=''; for ($min = 0; $min < 60 ; $min++) { diff --git a/htdocs/core/lib/functions.lib.php b/htdocs/core/lib/functions.lib.php index b1a9c0b2735..d102e264913 100644 --- a/htdocs/core/lib/functions.lib.php +++ b/htdocs/core/lib/functions.lib.php @@ -2241,14 +2241,14 @@ function dol_trunc($string,$size=40,$trunc='right',$stringencoding='UTF-8',$nodo * Example: picto.png if picto.png is stored into htdocs/theme/mytheme/img * Example: picto.png@mymodule if picto.png is stored into htdocs/mymodule/img * Example: /mydir/mysubdir/picto.png if picto.png is stored into htdocs/mydir/mysubdir (pictoisfullpath must be set to 1) - * @param string $options Add more attribute on img tag (For example 'style="float: right"') + * @param string $morealt Add more attribute on img tag (For example 'style="float: right"') * @param int $pictoisfullpath If 1, image path is a full path * @param int $srconly Return only content of the src attribute of img. * @param int $notitle 1=Disable tag title. Use it if you add js tooltip, to avoid duplicate tooltip. * @return string Return img tag * @see #img_object, #img_picto_common */ -function img_picto($titlealt, $picto, $options = '', $pictoisfullpath = false, $srconly=0, $notitle=0) +function img_picto($titlealt, $picto, $morealt = '', $pictoisfullpath = false, $srconly=0, $notitle=0) { global $conf; @@ -2300,7 +2300,7 @@ function img_picto($titlealt, $picto, $options = '', $pictoisfullpath = false, $ if (preg_match('/:[^\s0-9]/',$titlealt)) $tmparray=explode(':',$titlealt); // We explode if we have TextA:TextB. Not if we have TextA: TextB $title=$tmparray[0]; $alt=empty($tmparray[1])?'':$tmparray[1]; - return ''.dol_escape_htmltag($alt).''; // Alt is used for accessibility, title for popup + return ''.dol_escape_htmltag($alt).''; // Alt is used for accessibility, title for popup } } @@ -2310,16 +2310,16 @@ function img_picto($titlealt, $picto, $options = '', $pictoisfullpath = false, $ * @param string $titlealt Text on alt and title of image. Alt only if param notitle is set to 1. If text is "TextA:TextB", use Text A on alt and Text B on title. * @param string $picto Name of image to show object_picto (example: user, group, action, bill, contract, propal, product, ...) * For external modules use imagename@mymodule to search into directory "img" of module. - * @param string $options Add more attribute on img tag (ie: class="datecallink") + * @param string $morealt Add more attribute on img tag (ie: class="datecallink") * @param int $pictoisfullpath If 1, image path is a full path * @param int $srconly Return only content of the src attribute of img. * @param int $notitle 1=Disable tag title. Use it if you add js tooltip, to avoid duplicate tooltip. * @return string Return img tag * @see #img_picto, #img_picto_common */ -function img_object($titlealt, $picto, $options = '', $pictoisfullpath = false, $srconly=0, $notitle=0) +function img_object($titlealt, $picto, $morealt = '', $pictoisfullpath = false, $srconly=0, $notitle=0) { - return img_picto($titlealt, 'object_'.$picto, $options, $pictoisfullpath, $srconly, $notitle); + return img_picto($titlealt, 'object_'.$picto, $morealt, $pictoisfullpath, $srconly, $notitle); } /** @@ -2327,12 +2327,12 @@ function img_object($titlealt, $picto, $options = '', $pictoisfullpath = false, * * @param string $titlealt Text on alt and title of image. Alt only if param notitle is set to 1. If text is "TextA:TextB", use Text A on alt and Text B on title. * @param string $picto Name of image file to show (If no extension provided, we use '.png'). Image must be stored into htdocs/theme/common directory. - * @param string $options Add more attribute on img tag + * @param string $morealt Add more attribute on img tag * @param int $pictoisfullpath If 1, image path is a full path * @return string Return img tag * @see #img_object, #img_picto */ -function img_weather($titlealt, $picto, $options = '', $pictoisfullpath = 0) +function img_weather($titlealt, $picto, $morealt = '', $pictoisfullpath = 0) { global $conf; @@ -2340,7 +2340,7 @@ function img_weather($titlealt, $picto, $options = '', $pictoisfullpath = 0) $path = DOL_URL_ROOT.'/theme/'.$conf->theme.'/img/weather/'.$picto; - return img_picto($titlealt, $path, $options, 1); + return img_picto($titlealt, $path, $morealt, 1); } /** @@ -2348,12 +2348,12 @@ function img_weather($titlealt, $picto, $options = '', $pictoisfullpath = 0) * * @param string $titlealt Text on alt and title of image. Alt only if param notitle is set to 1. If text is "TextA:TextB", use Text A on alt and Text B on title. * @param string $picto Name of image file to show (If no extension provided, we use '.png'). Image must be stored into htdocs/theme/common directory. - * @param string $options Add more attribute on img tag + * @param string $morealt Add more attribute on img tag * @param int $pictoisfullpath If 1, image path is a full path * @return string Return img tag * @see #img_object, #img_picto */ -function img_picto_common($titlealt, $picto, $options = '', $pictoisfullpath = 0) +function img_picto_common($titlealt, $picto, $morealt = '', $pictoisfullpath = 0) { global $conf; @@ -2372,7 +2372,7 @@ function img_picto_common($titlealt, $picto, $options = '', $pictoisfullpath = 0 } } - return img_picto($titlealt, $path, $options, 1); + return img_picto($titlealt, $path, $morealt, 1); } /** @@ -2478,9 +2478,9 @@ function img_view($titlealt = 'default', $float = 0, $other = '') if ($titlealt == 'default') $titlealt = $langs->trans('View'); - $options = ($float ? 'style="float: right" ' : '').$other; + $morealt = ($float ? 'style="float: right" ' : '').$other; - return img_picto($titlealt, 'view.png', $options); + return img_picto($titlealt, 'view.png', $morealt); } /** @@ -2552,16 +2552,16 @@ function img_info($titlealt = 'default') * Show warning logo * * @param string $titlealt Text on alt and title of image. Alt only if param notitle is set to 1. If text is "TextA:TextB", use Text A on alt and Text B on title. - * @param string $options Add more attribute on img tag (For example 'style="float: right"'). If 1 + * @param string $morealt Add more attribute on img tag (For example 'style="float: right"'). If 1 * @return string Return img tag */ -function img_warning($titlealt = 'default', $options = '') +function img_warning($titlealt = 'default', $morealt = '') { global $conf, $langs; if ($titlealt == 'default') $titlealt = $langs->trans('Warning'); - return img_picto($titlealt, 'warning.png', 'class="pictowarning"'.($options ? ($options == '1' ? ' style="float: right"' : ' '.$options): '')); + return img_picto($titlealt, 'warning.png', 'class="pictowarning"'.($morealt ? ($morealt == '1' ? ' style="float: right"' : ' '.$morealt): '')); } /** @@ -2583,32 +2583,32 @@ function img_error($titlealt = 'default') * Show next logo * * @param string $titlealt Text on alt and title of image. Alt only if param notitle is set to 1. If text is "TextA:TextB", use Text A on alt and Text B on title. -* @param string $options Add more attribute on img tag (For example 'style="float: right"') +* @param string $morealt Add more attribute on img tag (For example 'style="float: right"') * @return string Return img tag */ -function img_next($titlealt = 'default', $options='') +function img_next($titlealt = 'default', $morealt='') { global $conf, $langs; if ($titlealt == 'default') $titlealt = $langs->trans('Next'); - return img_picto($titlealt, 'next.png', $options); + return img_picto($titlealt, 'next.png', $morealt); } /** * Show previous logo * * @param string $titlealt Text on alt and title of image. Alt only if param notitle is set to 1. If text is "TextA:TextB", use Text A on alt and Text B on title. - * @param string $options Add more attribute on img tag (For example 'style="float: right"') + * @param string $morealt Add more attribute on img tag (For example 'style="float: right"') * @return string Return img tag */ -function img_previous($titlealt = 'default', $options='') +function img_previous($titlealt = 'default', $morealt='') { global $conf, $langs; if ($titlealt == 'default') $titlealt = $langs->trans('Previous'); - return img_picto($titlealt, 'previous.png', $options); + return img_picto($titlealt, 'previous.png', $morealt); } /** @@ -2650,16 +2650,16 @@ function img_up($titlealt = 'default', $selected = 0, $moreclass='') * * @param string $titlealt Text on alt and title of image. Alt only if param notitle is set to 1. If text is "TextA:TextB", use Text A on alt and Text B on title. * @param int $selected Selected - * @param string $options Add more attribute on img tag (For example 'style="float: right"') + * @param string $morealt Add more attribute on img tag (For example 'style="float: right"') * @return string Return img tag */ -function img_left($titlealt = 'default', $selected = 0, $options='') +function img_left($titlealt = 'default', $selected = 0, $morealt='') { global $conf, $langs; if ($titlealt == 'default') $titlealt = $langs->trans('Left'); - return img_picto($titlealt, ($selected ? '1leftarrow_selected.png' : '1leftarrow.png'), $options); + return img_picto($titlealt, ($selected ? '1leftarrow_selected.png' : '1leftarrow.png'), $morealt); } /** @@ -2667,16 +2667,16 @@ function img_left($titlealt = 'default', $selected = 0, $options='') * * @param string $titlealt Text on alt and title of image. Alt only if param notitle is set to 1. If text is "TextA:TextB", use Text A on alt and Text B on title. * @param int $selected Selected - * @param string $options Add more attribute on img tag (For example 'style="float: right"') + * @param string $morealt Add more attribute on img tag (For example 'style="float: right"') * @return string Return img tag */ -function img_right($titlealt = 'default', $selected = 0, $options='') +function img_right($titlealt = 'default', $selected = 0, $morealt='') { global $conf, $langs; if ($titlealt == 'default') $titlealt = $langs->trans('Right'); - return img_picto($titlealt, ($selected ? '1rightarrow_selected.png' : '1rightarrow.png'), $options); + return img_picto($titlealt, ($selected ? '1rightarrow_selected.png' : '1rightarrow.png'), $morealt); } /** diff --git a/htdocs/core/tpl/contacts.tpl.php b/htdocs/core/tpl/contacts.tpl.php index 28a02fcd38a..845bc30ce13 100644 --- a/htdocs/core/tpl/contacts.tpl.php +++ b/htdocs/core/tpl/contacts.tpl.php @@ -110,11 +110,10 @@ if ($permission) {
socid; ?> dol_use_jmobile)) + // add company icon before select list + if ($selectedCompany) { - $companystatic->fetch($selectedCompany); - echo $companystatic->getNomUrl(2, '', 0, 1); + echo img_object('', 'company', 'class="hideonsmartphone"'); } ?> selectCompaniesForNewContact($object, 'id', $selectedCompany, 'newcompany', '', 0); ?> diff --git a/htdocs/core/tpl/notes.tpl.php b/htdocs/core/tpl/notes.tpl.php index bc7cf44ce66..f0e69b01b81 100644 --- a/htdocs/core/tpl/notes.tpl.php +++ b/htdocs/core/tpl/notes.tpl.php @@ -72,14 +72,14 @@ else $typeofdata='textarea:12:100';
-
>editfieldkey("NotePublic", $note_public, $value_public, $object, $permission, $typeofdata, $moreparam); ?>
-
editfieldval("NotePublic", $note_public, $value_public, $object, $permission, $typeofdata, '', null, null, $moreparam); ?>
+
>editfieldkey("NotePublic", $note_public, $value_public, $object, $permission, $typeofdata, $moreparam, '', 0); ?>
+
editfieldval("NotePublic", $note_public, $value_public, $object, $permission, $typeofdata, '', null, null, $moreparam, 1); ?>
societe_id)) { ?>
-
>editfieldkey("NotePrivate", $note_private, $value_private, $object, $permission, $typeofdata, $moreparam); ?>
-
editfieldval("NotePrivate", $note_private, $value_private, $object, $permission, $typeofdata, '', null, null, $moreparam); ?>
+
>editfieldkey("NotePrivate", $note_private, $value_private, $object, $permission, $typeofdata, $moreparam, '', 0); ?>
+
editfieldval("NotePrivate", $note_private, $value_private, $object, $permission, $typeofdata, '', null, null, $moreparam, 1); ?>
diff --git a/htdocs/projet/card.php b/htdocs/projet/card.php index f4c5d871fc6..5d8674eb261 100644 --- a/htdocs/projet/card.php +++ b/htdocs/projet/card.php @@ -698,7 +698,7 @@ else // Label print ''.$langs->trans("Label").''; - print ''; + print ''; // Thirdparty if ($conf->societe->enabled) @@ -752,7 +752,7 @@ else // Date start print ''.$langs->trans("DateStart").''; print $form->select_date($object->date_start?$object->date_start:-1,'projectstart',0,0,0,'',1,0,1); - print '     '. $langs->trans("ProjectReportDate"); print ''; diff --git a/htdocs/theme/eldy/style.css.php b/htdocs/theme/eldy/style.css.php index f1368099864..a2471cd8aa8 100644 --- a/htdocs/theme/eldy/style.css.php +++ b/htdocs/theme/eldy/style.css.php @@ -542,7 +542,7 @@ div.myavailability { margin-top: 6px; margin-left: 4px; } -.selectlimit { +.selectlimit, .marginrightonly { margin-right: 10px !important; } .strikefordisabled { @@ -622,6 +622,7 @@ div.myavailability { .minwidth500imp { min-width: 500px !important; } } .maxwidth50 { max-width: 50px; } +.maxwidth75 { max-width: 75px; } .maxwidth100 { max-width: 100px; } .maxwidth150 { max-width: 150px; } .maxwidth200 { max-width: 200px; } @@ -665,12 +666,18 @@ div.myavailability { div.titre { line-height: 2em; } + .border tbody tr, .border tbody tr td, div.tabBar table.border tr, div.tabBar table.border tr td, div.tabBar div.border .table-border-row, div.tabBar div.border .table-key-border-col, div.tabBar div.border .table-val-border-col { + height: 40px !important; + } - input[type=text], select, textarea { + .quatrevingtpercent, .inputsearch { + width: 95%; + } + + input, input[type=text], input[type=password], select, textarea { min-width: 20px; min-height: 1.4em; line-height: 1.4em; - margin: .5em 0; padding: .4em .1em; border: 1px solid #BBB; } @@ -679,6 +686,7 @@ div.myavailability { .noenlargeonsmartphone { width : 50px !important; display: inline !important; } .maxwidthonsmartphone { max-width: 100px; } .maxwidth50onsmartphone { max-width: 50px; } + .maxwidth75onsmartphone { max-width: 75px; } .maxwidth100onsmartphone { max-width: 100px; } .maxwidth150onsmartphone { max-width: 150px; } .maxwidth200onsmartphone { max-width: 200px; } @@ -699,7 +707,6 @@ div.myavailability { } select { width: 98%; - dol_use_jmobile)) { ?>max-width: 100px; min-width: 40px; } div.divphotoref { @@ -2357,10 +2364,7 @@ table.border, table.dataTable, .table-border, .table-border-col, .table-key-bord table.borderplus { border: 1px solid #BBB; } -.border tbody tr, .border tbody tr td { - height: 20px; -} -div.tabBar table.border tr, div.tabBar table.border tr td, div.tabBar div.border .table-border-row, div.tabBar div.border .table-key-border-col, div.tabBar div.border .table-val-border-col { +.border tbody tr, .border tbody tr td, div.tabBar table.border tr, div.tabBar table.border tr td, div.tabBar div.border .table-border-row, div.tabBar div.border .table-key-border-col, div.tabBar div.border .table-val-border-col { height: 20px; } div.tabBar div.border .table-border-row, div.tabBar div.border .table-key-border-col, div.tabBar .table-val-border-col { diff --git a/htdocs/theme/md/style.css.php b/htdocs/theme/md/style.css.php index 9935c3b2231..de92d29361b 100644 --- a/htdocs/theme/md/style.css.php +++ b/htdocs/theme/md/style.css.php @@ -549,7 +549,7 @@ div.myavailability { margin-top: 6px; margin-left: 4px; } -.selectlimit { +.selectlimit, .marginrightonly { margin-right: 10px !important; } .strikefordisabled { @@ -627,6 +627,7 @@ div.myavailability { .minwidth500imp { min-width: 500px !important; } } .maxwidth50 { max-width: 50px; } +.maxwidth75 { max-width: 75px; } .maxwidth100 { max-width: 100px; } .maxwidth150 { max-width: 150px; } .maxwidth200 { max-width: 200px; } @@ -670,12 +671,18 @@ div.myavailability { div.titre { line-height: 2em; } + .border tbody tr, .border tbody tr td, div.tabBar table.border tr { + height: 40px !important; + } - input[type=text], select, textarea { + .quatrevingtpercent, .inputsearch { + width: 95%; + } + + input, input[type=text], input[type=password], select, textarea { min-width: 20px; min-height: 1.4em; line-height: 1.4em; - margin: .5em 0; padding: .4em .1em; border: 1px solid #BBB; } @@ -684,6 +691,7 @@ div.myavailability { .noenlargeonsmartphone { width : 50px !important; display: inline !important; } .maxwidthonsmartphone { max-width: 100px; } .maxwidth50onsmartphone { max-width: 50px; } + .maxwidth75onsmartphone { max-width: 75px; } .maxwidth100onsmartphone { max-width: 100px; } .maxwidth150onsmartphone { max-width: 150px; } .maxwidth200onsmartphone { max-width: 200px; } @@ -697,6 +705,28 @@ div.myavailability { .minwidth500imp { min-width: 50px !important; } .titlefield { width: auto; } .titlefieldcreate { width: auto; } + + #tooltip { + position: absolute; + width: px; + } + select { + width: 98%; + min-width: 40px; + } + div.divphotoref { + padding-right: 5px; + } + img.photoref, div.photoref { + border: none; + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; + padding: 4px; + height: 20px; + width: 20px; + object-fit: contain; + } } .linkobject { cursor: pointer; } @@ -2245,10 +2275,7 @@ table.borderplus { border: 1px solid #BBB; } -.border tbody tr, .border tbody tr td { - height: 20px; -} -div.tabBar table.border tr { +.border tbody tr, .border tbody tr td, div.tabBar table.border tr { height: 20px; }