Fix table styling in mobile

This commit is contained in:
Mike Jolley 2018-01-30 13:24:59 +00:00
parent e4188b04b6
commit 341dfe1e7b
6 changed files with 61 additions and 44 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -2692,10 +2692,19 @@ a.import_rates {
}
}
.wc_input_table_wrapper {
overflow-x: auto;
display: block;
}
table.wc_tax_rates,
table.wc_input_table {
width: 100%;
th, td {
display: table-cell !important;
}
span.tips {
color: $blue;
}
@ -2713,9 +2722,10 @@ table.wc_input_table {
background: #fff;
cursor: default;
input[type='text'],
input[type='number'] {
width: 100%;
input[type=text],
input[type=number] {
width: 100% !important;
min-width: 100px;
padding: 8px 10px;
margin: 0;
border: 0;
@ -2830,6 +2840,10 @@ table.wc_emails,
table.wc_shipping {
position: relative;
th, td {
display: table-cell !important;
}
td {
vertical-align: middle;
padding: 7px;
@ -2922,7 +2936,6 @@ table.wc_shipping {
padding: 24px 24px 24px 0;
}
td.forminp {
padding: 15px 10px;
input, textarea {
padding: 8px;
width: 448px;
@ -2989,6 +3002,7 @@ table.wc-shipping-zones, table.wc-shipping-zone-methods, table.wc-shipping-class
padding: 1em !important;
font-size: 14px;
background: #fff;
display: table-cell !important;
li {
line-height: 24px;
font-size: 14px;
@ -3405,6 +3419,7 @@ img.help_tip {
table.form-table {
margin: 0;
position: relative;
table-layout: fixed;
.forminp-radio ul {
margin: 0;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -122,44 +122,46 @@ class WC_Gateway_BACS extends WC_Payment_Gateway {
<tr valign="top">
<th scope="row" class="titledesc"><?php _e( 'Account details', 'woocommerce' ); ?>:</th>
<td class="forminp" id="bacs_accounts">
<table class="widefat wc_input_table sortable" cellspacing="0">
<thead>
<tr>
<th class="sort">&nbsp;</th>
<th><?php _e( 'Account name', 'woocommerce' ); ?></th>
<th><?php _e( 'Account number', 'woocommerce' ); ?></th>
<th><?php _e( 'Bank name', 'woocommerce' ); ?></th>
<th><?php echo $sortcode; ?></th>
<th><?php _e( 'IBAN', 'woocommerce' ); ?></th>
<th><?php _e( 'BIC / Swift', 'woocommerce' ); ?></th>
</tr>
</thead>
<tbody class="accounts">
<?php
$i = -1;
if ( $this->account_details ) {
foreach ( $this->account_details as $account ) {
$i++;
<div class="wc_input_table_wrapper">
<table class="widefat wc_input_table sortable" cellspacing="0">
<thead>
<tr>
<th class="sort">&nbsp;</th>
<th><?php _e( 'Account name', 'woocommerce' ); ?></th>
<th><?php _e( 'Account number', 'woocommerce' ); ?></th>
<th><?php _e( 'Bank name', 'woocommerce' ); ?></th>
<th><?php echo $sortcode; ?></th>
<th><?php _e( 'IBAN', 'woocommerce' ); ?></th>
<th><?php _e( 'BIC / Swift', 'woocommerce' ); ?></th>
</tr>
</thead>
<tbody class="accounts">
<?php
$i = -1;
if ( $this->account_details ) {
foreach ( $this->account_details as $account ) {
$i++;
echo '<tr class="account">
<td class="sort"></td>
<td><input type="text" value="' . esc_attr( wp_unslash( $account['account_name'] ) ) . '" name="bacs_account_name[' . $i . ']" /></td>
<td><input type="text" value="' . esc_attr( $account['account_number'] ) . '" name="bacs_account_number[' . $i . ']" /></td>
<td><input type="text" value="' . esc_attr( wp_unslash( $account['bank_name'] ) ) . '" name="bacs_bank_name[' . $i . ']" /></td>
<td><input type="text" value="' . esc_attr( $account['sort_code'] ) . '" name="bacs_sort_code[' . $i . ']" /></td>
<td><input type="text" value="' . esc_attr( $account['iban'] ) . '" name="bacs_iban[' . $i . ']" /></td>
<td><input type="text" value="' . esc_attr( $account['bic'] ) . '" name="bacs_bic[' . $i . ']" /></td>
</tr>';
echo '<tr class="account">
<td class="sort"></td>
<td><input type="text" value="' . esc_attr( wp_unslash( $account['account_name'] ) ) . '" name="bacs_account_name[' . $i . ']" /></td>
<td><input type="text" value="' . esc_attr( $account['account_number'] ) . '" name="bacs_account_number[' . $i . ']" /></td>
<td><input type="text" value="' . esc_attr( wp_unslash( $account['bank_name'] ) ) . '" name="bacs_bank_name[' . $i . ']" /></td>
<td><input type="text" value="' . esc_attr( $account['sort_code'] ) . '" name="bacs_sort_code[' . $i . ']" /></td>
<td><input type="text" value="' . esc_attr( $account['iban'] ) . '" name="bacs_iban[' . $i . ']" /></td>
<td><input type="text" value="' . esc_attr( $account['bic'] ) . '" name="bacs_bic[' . $i . ']" /></td>
</tr>';
}
}
}
?>
</tbody>
<tfoot>
<tr>
<th colspan="7"><a href="#" class="add button"><?php _e( '+ Add account', 'woocommerce' ); ?></a> <a href="#" class="remove_rows button"><?php _e( 'Remove selected account(s)', 'woocommerce' ); ?></a></th>
</tr>
</tfoot>
</table>
?>
</tbody>
<tfoot>
<tr>
<th colspan="7"><a href="#" class="add button"><?php _e( '+ Add account', 'woocommerce' ); ?></a> <a href="#" class="remove_rows button"><?php _e( 'Remove selected account(s)', 'woocommerce' ); ?></a></th>
</tr>
</tfoot>
</table>
</div>
<script type="text/javascript">
jQuery(function() {
jQuery('#bacs_accounts').on( 'click', 'a.add', function(){