All tables are now responsive
This commit is contained in:
mespeche
@@ -30,71 +30,75 @@
|
||||
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade active in" id="cart">
|
||||
<table class="table table-striped table-condensed table-left-aligned">
|
||||
<caption class="clearfix">
|
||||
{intl l='Information about order 01201303540354'}
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{intl l="Designation"}</th>
|
||||
<th>{intl l="Price"}</th>
|
||||
<th>{intl l="Quantity"}</th>
|
||||
<th>{intl l="Total"}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-condensed table-left-aligned">
|
||||
<caption class="clearfix">
|
||||
{intl l='Information about order 01201303540354'}
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{intl l="Designation"}</th>
|
||||
<th>{intl l="Price"}</th>
|
||||
<th>{intl l="Quantity"}</th>
|
||||
<th>{intl l="Total"}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="#">T-Shirt F T1</a></td>
|
||||
<td>20.00 €</td>
|
||||
<td>3</td>
|
||||
<td>60.00 €</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">T-Shirt F T1</a></td>
|
||||
<td>20.00 €</td>
|
||||
<td>3</td>
|
||||
<td>60.00 €</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">T-Shirt F T1</a></td>
|
||||
<td>20.00 €</td>
|
||||
<td>3</td>
|
||||
<td>60.00 €</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr class="active">
|
||||
<td colspan="3"><strong>Total</strong></td>
|
||||
<td><strong>180.00 €</strong></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="#">T-Shirt F T1</a></td>
|
||||
<td>20.00 €</td>
|
||||
<td>3</td>
|
||||
<td>60.00 €</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">T-Shirt F T1</a></td>
|
||||
<td>20.00 €</td>
|
||||
<td>3</td>
|
||||
<td>60.00 €</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">T-Shirt F T1</a></td>
|
||||
<td>20.00 €</td>
|
||||
<td>3</td>
|
||||
<td>60.00 €</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr class="active">
|
||||
<td colspan="3"><strong>Total</strong></td>
|
||||
<td><strong>180.00 €</strong></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div> <!-- #cart -->
|
||||
|
||||
<div class="tab-pane fade" id="bill">
|
||||
<table class="table table-striped table-condensed table-left-aligned">
|
||||
<caption>
|
||||
{intl l='Information about the bill'}
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{intl l="Bill n°"}</th>
|
||||
<th>{intl l="Compagny"}</th>
|
||||
<th>{intl l="Firstname & Lastname"}</th>
|
||||
<th>{intl l="Date & Hour"}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-condensed table-left-aligned">
|
||||
<caption>
|
||||
{intl l='Information about the bill'}
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{intl l="Bill n°"}</th>
|
||||
<th>{intl l="Compagny"}</th>
|
||||
<th>{intl l="Firstname & Lastname"}</th>
|
||||
<th>{intl l="Date & Hour"}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="#">0001</a></td>
|
||||
<td>Thelia</td>
|
||||
<td>Dupont Jean</td>
|
||||
<td>11/01/2013 14:11:00</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="#">0001</a></td>
|
||||
<td>Thelia</td>
|
||||
<td>Dupont Jean</td>
|
||||
<td>11/01/2013 14:11:00</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div> <!-- #bill -->
|
||||
|
||||
<div class="tab-pane fade" id="carriage">
|
||||
@@ -116,214 +120,219 @@
|
||||
</div> <!-- #carriage -->
|
||||
|
||||
<div class="tab-pane fade" id="settlement">
|
||||
|
||||
<table class="table table-striped table-condensed table-left-aligned">
|
||||
<caption class="clearfix">
|
||||
{intl l='Information about the settlement'}
|
||||
</caption>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{intl l="Type of payment"}</th>
|
||||
<td>Unknown</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Transaction reference"}</th>
|
||||
<td>141100</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Total order before discount"}</th>
|
||||
<td>60 €</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Discount"}</th>
|
||||
<td>10%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Coupon code"}</th>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Total with discount"}</th>
|
||||
<td>50 €</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Freight"}</th>
|
||||
<td>6 €</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Total"}</th>
|
||||
<td>56 €</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-condensed table-left-aligned">
|
||||
<caption class="clearfix">
|
||||
{intl l='Information about the settlement'}
|
||||
</caption>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{intl l="Type of payment"}</th>
|
||||
<td>Unknown</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Transaction reference"}</th>
|
||||
<td>141100</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Total order before discount"}</th>
|
||||
<td>60 €</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Discount"}</th>
|
||||
<td>10%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Coupon code"}</th>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Total with discount"}</th>
|
||||
<td>50 €</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Freight"}</th>
|
||||
<td>6 €</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Total"}</th>
|
||||
<td>56 €</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div> <!-- #settlement -->
|
||||
|
||||
<div class="tab-pane fade clearfix" id="address">
|
||||
|
||||
<div class="col-md-6">
|
||||
<table class="table table-striped table-condensed table-left-aligned">
|
||||
<caption class="clearfix">
|
||||
{intl l='Billing address'}
|
||||
<a class="btn btn-default btn-primary pull-right" title="{intl l='Edit this billing address'}" href="#edit_address_dialog" data-toggle="modal">
|
||||
<span class="glyphicon glyphicon-edit"></span>
|
||||
</a>
|
||||
</caption>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{intl l="Title"}</th>
|
||||
<td>Mr</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Compagny"}</th>
|
||||
<td>Thelia</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Firstname"}</th>
|
||||
<td>Espeche</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Lastname"}</th>
|
||||
<td>Michaël</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Street address"}</th>
|
||||
<td>5, rue Rochon</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Additional address"}</th>
|
||||
<td>Lorem ipsum dolor sit amet</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Additional address"}</th>
|
||||
<td>Lorem ipsum dolor sit</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Zip code"}</th>
|
||||
<td>63000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="City"}</th>
|
||||
<td>Clermont-Fd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Country"}</th>
|
||||
<td>France</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Phone"}</th>
|
||||
<td>01 02 03 04 05</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-condensed table-left-aligned">
|
||||
<caption class="clearfix">
|
||||
{intl l='Billing address'}
|
||||
<a class="btn btn-default btn-primary pull-right" title="{intl l='Edit this billing address'}" href="#edit_address_dialog" data-toggle="modal">
|
||||
<span class="glyphicon glyphicon-edit"></span>
|
||||
</a>
|
||||
</caption>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{intl l="Title"}</th>
|
||||
<td>Mr</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Compagny"}</th>
|
||||
<td>Thelia</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Firstname"}</th>
|
||||
<td>Espeche</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Lastname"}</th>
|
||||
<td>Michaël</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Street address"}</th>
|
||||
<td>5, rue Rochon</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Additional address"}</th>
|
||||
<td>Lorem ipsum dolor sit amet</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Additional address"}</th>
|
||||
<td>Lorem ipsum dolor sit</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Zip code"}</th>
|
||||
<td>63000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="City"}</th>
|
||||
<td>Clermont-Fd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Country"}</th>
|
||||
<td>France</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Phone"}</th>
|
||||
<td>01 02 03 04 05</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<table class="table table-striped table-condensed table-left-aligned">
|
||||
<caption class="clearfix">
|
||||
{intl l='Delivery address'}
|
||||
<a class="btn btn-default btn-primary pull-right" title="{intl l='Edit this delivery address'}" href="#edit_address_dialog" data-toggle="modal">
|
||||
<span class="glyphicon glyphicon-edit"></span>
|
||||
</a>
|
||||
</caption>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{intl l="Title"}</th>
|
||||
<td>Mr</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Compagny"}</th>
|
||||
<td>Thelia</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Firstname"}</th>
|
||||
<td>Espeche</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Lastname"}</th>
|
||||
<td>Michaël</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Street address"}</th>
|
||||
<td>5, rue Rochon</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Additional address"}</th>
|
||||
<td>Lorem ipsum dolor sit amet</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Additional address"}</th>
|
||||
<td>Lorem ipsum dolor sit</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Zip code"}</th>
|
||||
<td>63000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="City"}</th>
|
||||
<td>Clermont-Fd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Country"}</th>
|
||||
<td>France</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Phone"}</th>
|
||||
<td>01 02 03 04 05</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-condensed table-left-aligned">
|
||||
<caption class="clearfix">
|
||||
{intl l='Delivery address'}
|
||||
<a class="btn btn-default btn-primary pull-right" title="{intl l='Edit this delivery address'}" href="#edit_address_dialog" data-toggle="modal">
|
||||
<span class="glyphicon glyphicon-edit"></span>
|
||||
</a>
|
||||
</caption>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{intl l="Title"}</th>
|
||||
<td>Mr</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Compagny"}</th>
|
||||
<td>Thelia</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Firstname"}</th>
|
||||
<td>Espeche</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Lastname"}</th>
|
||||
<td>Michaël</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Street address"}</th>
|
||||
<td>5, rue Rochon</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Additional address"}</th>
|
||||
<td>Lorem ipsum dolor sit amet</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Additional address"}</th>
|
||||
<td>Lorem ipsum dolor sit</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Zip code"}</th>
|
||||
<td>63000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="City"}</th>
|
||||
<td>Clermont-Fd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Country"}</th>
|
||||
<td>France</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l="Phone"}</th>
|
||||
<td>01 02 03 04 05</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- #address -->
|
||||
|
||||
<div class="tab-pane fade clearfix" id="supplements">
|
||||
<table class="table table-striped table-condensed table-left-aligned">
|
||||
<caption>
|
||||
{intl l='Further information'}
|
||||
</caption>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><label for="">{intl l='Status'}</label></th>
|
||||
<td>
|
||||
<form action="" method="">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<select name="" id="" class="form-control">
|
||||
<option value="">Status 1</option>
|
||||
<option value="">Status 2</option>
|
||||
<option value="">Status 3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><label for="">{intl l='Order Tracking'}</label></th>
|
||||
<td>
|
||||
<form action="" method="">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<input type="text" id="" name="" class="form-control" value="" title="" placeholder="">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-ok"></span></button>
|
||||
</div>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l='Bill'}</th>
|
||||
<td><a href="#" class="btn btn-default btn-primary"><span class="glyphicon glyphicon-cloud-download"></span> {intl l='Download bill to pdf'}</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l='Delivery'}</th>
|
||||
<td><a href="#" class="btn btn-default btn-primary"><span class="glyphicon glyphicon-cloud-download"></span> {intl l='Download delivery to pdf'}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-condensed table-left-aligned">
|
||||
<caption>
|
||||
{intl l='Further information'}
|
||||
</caption>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><label for="">{intl l='Status'}</label></th>
|
||||
<td>
|
||||
<form action="" method="">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<select name="" id="" class="form-control">
|
||||
<option value="">Status 1</option>
|
||||
<option value="">Status 2</option>
|
||||
<option value="">Status 3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><label for="">{intl l='Order Tracking'}</label></th>
|
||||
<td>
|
||||
<form action="" method="">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<input type="text" id="" name="" class="form-control" value="" title="" placeholder="">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-ok"></span></button>
|
||||
</div>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l='Bill'}</th>
|
||||
<td><a href="#" class="btn btn-default btn-primary"><span class="glyphicon glyphicon-cloud-download"></span> {intl l='Download bill to pdf'}</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{intl l='Delivery'}</th>
|
||||
<td><a href="#" class="btn btn-default btn-primary"><span class="glyphicon glyphicon-cloud-download"></span> {intl l='Download delivery to pdf'}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div> <!-- #supplements -->
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user