From b5dad8cfbf7d7c942c3f9aa895aa16cb7ce04b33 Mon Sep 17 00:00:00 2001
From: Laurent Destailleur <eldy@destailleur.fr>
Date: Wed, 21 Sep 2016 00:29:19 +0200
Subject: [PATCH] Better responsive
---
htdocs/compta/facture.php | 8 ++--
htdocs/societe/soc.php | 18 ++++----
htdocs/theme/eldy/style.css.php | 82 +++++++++++++++++++++++----------
htdocs/theme/md/style.css.php | 4 +-
4 files changed, 73 insertions(+), 39 deletions(-)
diff --git a/htdocs/compta/facture.php b/htdocs/compta/facture.php
index 91694fdf8cd..0ef7c830e68 100644
--- a/htdocs/compta/facture.php
+++ b/htdocs/compta/facture.php
@@ -3356,7 +3356,7 @@ else if ($id > 0 || ! empty($ref))
}
// Billed
- print '<tr><td colspan="' . $nbcols . '" align="right">' . $langs->trans("Billed") . ' :</td><td align="right" style="border: 1px solid;">' . price($object->total_ttc) . '</td><td> </td></tr>';
+ print '<tr><td colspan="' . $nbcols . '" align="right">' . $langs->trans("Billed") . ' :</td><td align="right">' . price($object->total_ttc) . '</td><td> </td></tr>';
// Remainder to pay
print '<tr><td colspan="' . $nbcols . '" align="right">';
@@ -3365,7 +3365,7 @@ else if ($id > 0 || ! empty($ref))
else
print $langs->trans('ExcessReceived');
print ' :</td>';
- print '<td align="right" style="border: 1px solid;" bgcolor="#f0f0f0"><b>' . price($resteapayeraffiche) . '</b></td>';
+ print '<td align="right" bgcolor="#f0f0f0"><b>' . price($resteapayeraffiche) . '</b></td>';
print '<td class="nowrap"> </td></tr>';
}
else // Credit note
@@ -3376,7 +3376,7 @@ else if ($id > 0 || ! empty($ref))
print ' :</td><td align="right">' . price($sign * $totalpaye) . '</td><td> </td></tr>';
// Billed
- print '<tr><td colspan="' . $nbcols . '" align="right">' . $langs->trans("Billed") . ' :</td><td align="right" style="border: 1px solid;">' . price($sign * $object->total_ttc) . '</td><td> </td></tr>';
+ print '<tr><td colspan="' . $nbcols . '" align="right">' . $langs->trans("Billed") . ' :</td><td align="right">' . price($sign * $object->total_ttc) . '</td><td> </td></tr>';
// Remainder to pay back
print '<tr><td colspan="' . $nbcols . '" align="right">';
@@ -3385,7 +3385,7 @@ else if ($id > 0 || ! empty($ref))
else
print $langs->trans('ExcessPaydBack');
print ' :</td>';
- print '<td align="right" style="border: 1px solid;" bgcolor="#f0f0f0"><b>' . price($sign * $resteapayeraffiche) . '</b></td>';
+ print '<td align="right" bgcolor="#f0f0f0"><b>' . price($sign * $resteapayeraffiche) . '</b></td>';
print '<td class="nowrap"> </td></tr>';
// Sold credit note
diff --git a/htdocs/societe/soc.php b/htdocs/societe/soc.php
index 675544566e8..6a43a60a829 100644
--- a/htdocs/societe/soc.php
+++ b/htdocs/societe/soc.php
@@ -981,7 +981,7 @@ else
print '<span span id="TypeName" class="fieldrequired">'.fieldLabel('ThirdPartyName','name').'</span>';
}
print '</td><td'.(empty($conf->global->SOCIETE_USEPREFIX)?' colspan="3"':'').'>';
- print '<input type="text" size="60" maxlength="128" name="name" id="name" value="'.$object->name.'" autofocus="autofocus"></td>';
+ print '<input type="text" class="minwidth300" maxlength="128" name="name" id="name" value="'.$object->name.'" autofocus="autofocus"></td>';
if (! empty($conf->global->SOCIETE_USEPREFIX)) // Old not used prefix field
{
print '<td>'.$langs->trans('Prefix').'</td><td><input type="text" size="5" maxlength="5" name="prefix_comm" value="'.$object->prefix_comm.'"></td>';
@@ -1001,7 +1001,7 @@ else
// Alias names (commercial, trademark or alias names)
print '<tr id="name_alias"><td><label for="name_alias_input">'.$langs->trans('AliasNames').'</label></td>';
- print '<td colspan="3"><input type="text" size="60" name="name_alias" id="name_alias_input" value="'.$object->name_alias.'" size="32"></td></tr>';
+ print '<td colspan="3"><input type="text" class="minwidth300" name="name_alias" id="name_alias_input" value="'.$object->name_alias.'"></td></tr>';
// Prospect/Customer
print '<tr><td class="titlefieldcreate">'.fieldLabel('ProspectCustomer','customerprospect',1).'</td>';
@@ -1015,7 +1015,7 @@ else
print '<option value="0"'.((string) $selected == '0'?' selected':'').'>'.$langs->trans('NorProspectNorCustomer').'</option>';
print '</select></td>';
- print '<td>'.fieldLabel('CustomerCode','customer_code').'</td><td width="25%">';
+ print '<td>'.fieldLabel('CustomerCode','customer_code').'</td><td>';
print '<table class="nobordernopadding"><tr><td>';
$tmpcode=$object->code_client;
if (empty($tmpcode) && ! empty($modCodeClient->code_auto)) $tmpcode=$modCodeClient->getNextValue($object,0);
@@ -1074,7 +1074,7 @@ else
print '</td></tr>';
// Country
- print '<tr><td width="25%">'.fieldLabel('Country','selectcountry_id').'</td><td colspan="3" class="maxwidthonsmartphone">';
+ print '<tr><td>'.fieldLabel('Country','selectcountry_id').'</td><td colspan="3" class="maxwidthonsmartphone">';
print $form->select_country((GETPOST('country_id')!=''?GETPOST('country_id'):$object->country_id));
if ($user->admin) print info_admin($langs->trans("YouCanChangeValuesForThisListFromDictionarySetup"),1);
print '</td></tr>';
@@ -1103,9 +1103,9 @@ else
// Phone / Fax
print '<tr><td>'.fieldLabel('Phone','phone').'</td>';
- print '<td><input type="text" name="phone" id="phone" value="'.$object->phone.'"></td>';
+ print '<td><input type="text" name="phone" id="phone" class="maxwidth100onsmartphone quatrevingtpercent" value="'.$object->phone.'"></td>';
print '<td>'.fieldLabel('Fax','fax').'</td>';
- print '<td><input type="text" name="fax" id="fax" value="'.$object->fax.'"></td></tr>';
+ print '<td><input type="text" name="fax" id="fax" class="maxwidth100onsmartphone quatrevingtpercent" value="'.$object->fax.'"></td></tr>';
// Prof ids
$i=1; $j=0;
@@ -1541,7 +1541,7 @@ else
if (empty($conf->global->SOCIETE_DISABLE_CUSTOMERS)) print '<option value="1"'.($object->client==1?' selected':'').'>'.$langs->trans('Customer').'</option>';
print '<option value="0"'.($object->client==0?' selected':'').'>'.$langs->trans('NorProspectNorCustomer').'</option>';
print '</select></td>';
- print '<td width="25%">'.fieldLabel('CustomerCode','customer_code').'</td><td width="25%">';
+ print '<td>'.fieldLabel('CustomerCode','customer_code').'</td><td>';
print '<table class="nobordernopadding"><tr><td>';
if ((!$object->code_client || $object->code_client == -1) && $modCodeClient->code_auto)
@@ -1656,9 +1656,9 @@ else
// Phone / Fax
print '<tr><td>'.fieldLabel('Phone','phone').'</td>';
- print '<td><input type="text" name="phone" id="phone" value="'.$object->phone.'"></td>';
+ print '<td><input type="text" name="phone" id="phone" class="maxwidth100onsmartphone quatrevingtpercent" value="'.$object->phone.'"></td>';
print '<td>'.fieldLabel('Fax','fax').'</td>';
- print '<td><input type="text" name="fax" id="fax" value="'.$object->fax.'"></td></tr>';
+ print '<td><input type="text" name="fax" id="fax" class="maxwidth100onsmartphone quatrevingtpercent" value="'.$object->fax.'"></td></tr>';
// Prof ids
$i=1; $j=0;
diff --git a/htdocs/theme/eldy/style.css.php b/htdocs/theme/eldy/style.css.php
index 1d860f5f378..d2834a87669 100644
--- a/htdocs/theme/eldy/style.css.php
+++ b/htdocs/theme/eldy/style.css.php
@@ -277,7 +277,7 @@ input, input.flat, textarea, textarea.flat, form.flat select, select, select.fla
}
input, textarea, select {
- border-radius:4px;
+ border-radius: 2px;
border:solid 1px rgba(0,0,0,.3);
border-top:solid 1px rgba(0,0,0,.3);
border-bottom:solid 1px rgba(0,0,0,.2);
@@ -337,7 +337,6 @@ textarea:disabled {
input[type=checkbox] { background-color: transparent; border: none; box-shadow: none; }
input[type=radio] { background-color: transparent; border: none; box-shadow: none; }
input[type=image] { background-color: transparent; border: none; box-shadow: none; }
-input[type=text] { min-width: 20px; }
input:-webkit-autofill {
background-color: <?php echo empty($dol_use_jmobile)?'#FBFFEA':'#FFFFFF' ?> !important;
background-image:none !important;
@@ -380,9 +379,9 @@ fieldset { border: 1px solid #AAAAAA !important; }
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border: 1px solid #bbbbbb;
border-bottom-color: #a2a2a2;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ border-radius: 2px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
@@ -599,17 +598,21 @@ div.myavailability {
.clearboth { clear:both; }
.hideobject { display: none; }
.minwidth50 { min-width: 50px; }
-.minwidth100 { min-width: 100px; }
-.minwidth200 { min-width: 200px; }
-.minwidth300 { min-width: 300px; }
-.minwidth400 { min-width: 400px; }
-.minwidth500 { min-width: 500px; }
-.minwidth50imp { min-width: 50px !important; }
-.minwidth100imp { min-width: 100px !important; }
-.minwidth200imp { min-width: 200px !important; }
-.minwidth300imp { min-width: 300px !important; }
-.minwidth400imp { min-width: 400px !important; }
-.minwidth500imp { min-width: 500px !important; }
+/* rule to reduce top menu - 3rd reduction */
+@media only screen and (min-width: <?php echo round($nbtopmenuentries * $fontsize * 3.4, 0) + 7; ?>px)
+{
+ .minwidth100 { min-width: 100px; }
+ .minwidth200 { min-width: 200px; }
+ .minwidth300 { min-width: 300px; }
+ .minwidth400 { min-width: 400px; }
+ .minwidth500 { min-width: 500px; }
+ .minwidth50imp { min-width: 50px !important; }
+ .minwidth100imp { min-width: 100px !important; }
+ .minwidth200imp { min-width: 200px !important; }
+ .minwidth300imp { min-width: 300px !important; }
+ .minwidth400imp { min-width: 400px !important; }
+ .minwidth500imp { min-width: 500px !important; }
+}
.maxwidth100 { max-width: 100px; }
.maxwidth150 { max-width: 150px; }
.maxwidth200 { max-width: 200px; }
@@ -648,6 +651,8 @@ div.myavailability {
/* Force values for small screen */
@media only screen and (max-width: 570px)
{
+ input[type=text] { min-width: 20px; }
+
.hideonsmartphone { display: none; }
.noenlargeonsmartphone { width : 50px !important; display: inline !important; }
.maxwidthonsmartphone { max-width: 100px; }
@@ -2081,9 +2086,9 @@ span.butAction, span.butActionDelete {
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border: 1px solid #bbbbbb;
border-bottom-color: #a2a2a2;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ border-radius: 2px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
@@ -4287,20 +4292,40 @@ ul.ulmenu {
}
/* Style for first level menu with jmobile */
+.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
+ padding: .9em 15px;
+ display: block;
+}
+.ui-btn-up-c {
+ font-weight: normal;
+}
+.ui-bar-b {
+ border: 1px solid #888;
+ text-shadow: none;
+}
+.ui-focus, .ui-btn:focus {
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
.ui-bar-b, .lilevel0 {
- border: 1px solid #888 !important;
+/* border: 1px solid #888 !important; */
background: rgb(<?php echo $colorbacktitle1; ?>);
background-repeat: repeat-x;
+/*
background-image: -o-linear-gradient(bottom, rgba(0,0,0,0.3) 0%, rgba(250,250,250,0.3) 100%);
background-image: -moz-linear-gradient(bottom, rgba(0,0,0,0.3) 0%, rgba(250,250,250,0.3) 100%);
background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.3) 0%, rgba(250,250,250,0.3) 100%);
background-image: -ms-linear-gradient(bottom, rgba(0,0,0,0.3) 0%, rgba(250,250,250,0.3) 100%);
- background-image: linear-gradient(bottom, rgba(0,0,0,0.3) 0%, rgba(250,250,250,0.3) 100%);
+ background-image: linear-gradient(bottom, rgba(0,0,0,0.3) 0%, rgba(250,250,250,0.3) 100%);*/
font-weight: bold;
color: rgb(<?php echo $colortexttitle; ?>) !important;
}
+.ui-li.ui-last-child, .ui-li.ui-field-contain.ui-last-child {
+ border-bottom-width: 0px !important;
+}
.alilevel0 {
color: rgb(<?php echo $colortexttitle; ?>) !important;
text-shadow: 1px 0px 1px #<?php echo $colorshadowtitle; ?>;
@@ -4313,7 +4338,7 @@ ul.ulmenu {
text-shadow: none;
}
.ui-btn-up-c, .ui-btn-hover-c {
- border: 1px solid #ccc;
+ /* border: 1px solid #ccc; */
text-shadow: none;
}
.ui-body-c .ui-link, .ui-body-c .ui-link:visited, .ui-body-c .ui-link:hover {
@@ -4487,7 +4512,7 @@ img.demothumb {
/* nboftopmenuentries = <?php echo $nbtopmenuentries ?>, fontsize=<?php echo $fontsize ?> */
/* rule to reduce top menu - 1st reduction */
-@media only screen and (max-width: <?php echo round($nbtopmenuentries * $fontsize * 7, 0) + 20; ?>px)
+@media only screen and (max-width: <?php echo round($nbtopmenuentries * $fontsize * 6.9, 0) + 20; ?>px)
{
div.tmenucenter {
max-width: <?php echo round($fontsize * 4); ?>px; /* size of viewport */
@@ -4533,9 +4558,12 @@ img.demothumb {
background-size: 20px auto;
margin-top: 2px;
}
+ select {
+ width: 100%;
+ }
}
/* rule to reduce top menu - 3rd reduction */
-@media only screen and (max-width: 660px)
+@media only screen and (max-width: <?php echo round($nbtopmenuentries * $fontsize * 3.4, 0) + 8; ?>px)
{
/* Reduce login top right info */
.usertextatoplogin {
@@ -4588,6 +4616,12 @@ img.demothumb {
position: absolute;
width: <?php print dol_size(300,'width'); ?>px;
}
+ select {
+ width: 100%;
+ max-width: 100px;
+ min-width: 0 !important;
+ }
+
}
<?php
diff --git a/htdocs/theme/md/style.css.php b/htdocs/theme/md/style.css.php
index 1db2b6fe7a3..a08f2475436 100644
--- a/htdocs/theme/md/style.css.php
+++ b/htdocs/theme/md/style.css.php
@@ -4169,11 +4169,11 @@ ul.ulmenu {
background: rgb(<?php echo $colorbacktitle1; ?>);
background-repeat: repeat-x;
- background-image: -o-linear-gradient(bottom, rgba(0,0,0,0.3) 0%, rgba(250,250,250,0.3) 100%);
+ /*background-image: -o-linear-gradient(bottom, rgba(0,0,0,0.3) 0%, rgba(250,250,250,0.3) 100%);
background-image: -moz-linear-gradient(bottom, rgba(0,0,0,0.3) 0%, rgba(250,250,250,0.3) 100%);
background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.3) 0%, rgba(250,250,250,0.3) 100%);
background-image: -ms-linear-gradient(bottom, rgba(0,0,0,0.3) 0%, rgba(250,250,250,0.3) 100%);
- background-image: linear-gradient(bottom, rgba(0,0,0,0.3) 0%, rgba(250,250,250,0.3) 100%);
+ background-image: linear-gradient(bottom, rgba(0,0,0,0.3) 0%, rgba(250,250,250,0.3) 100%);*/
font-weight: bold;
color: rgb(<?php echo $colortexttitle; ?>) !important;
--
GitLab