Working : Migration form to bootstrap3

This commit is contained in:
mespeche
2013-09-04 18:08:13 +02:00
parent 1d38639ca5
commit 910477f371
4 changed files with 120 additions and 104 deletions

View File

@@ -2,5 +2,4 @@
@import "bootstrap/bootstrap.less";
/* Thelia Admin */
@import "thelia/thelia.less";
// @import "thelia/responsive.less";
@import "thelia/thelia.less";

View File

@@ -44,4 +44,9 @@
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindex-dropdown: 1005;
@zindex-dropdown: 1005;
// Forms
// -------------------------
@input-border-focus: @brand-primary;

View File

@@ -20,9 +20,9 @@
{/form}
</section> <!-- #wrapper -->
{/block}
{include file='includes/confirmation-modal.html'}
{/block}
{block name="javascript-initialization"}
{javascripts file='assets/bootstrap-datepicker/js/bootstrap-datepicker.js'}

View File

@@ -1,8 +1,8 @@
{$thelia_page_css_file = "assets/bootstrap-editable/css/bootstrap-editable.css"}
{include file='includes/notifications.html' message=$general_error}
<form action="{$formAction}" {form_enctype form=$form} method="POST" >
<section class="row-fluid">
<div class="span12 general-block-decorator">
<section class="row">
<div class="col-md-12 general-block-decorator">
{form_hidden_fields form=$form}
@@ -10,24 +10,24 @@
<input type="hidden" name="{$name}" value="{if $value}{$value}{else}{$edit_language_locale}{/if}" />
{/form_field}
<div class="span4">
<div class="control-group">
<div class="col-md-4">
<div class="form-group">
<label for="code">Code :</label>
{form_field form=$form field='code'}
<input id="code" type="text" name="{$name}" value="{$value}" placeholder="code">
<input id="code" class="form-control" type="text" name="{$name}" value="{$value}" placeholder="code">
{if $error}{$message}{/if}
{/form_field}
</div>
<div class="control-group">
<div class="form-group">
<label for="title">Title :</label>
{form_field form=$form field='title'}
<input id="title" type="text" name="{$name}" value="{$value}" placeholder="title">
<input id="title" class="form-control" type="text" name="{$name}" value="{$value}" placeholder="title">
{if $error}{$message}{/if}
{/form_field}
</div>
<div class="control-group">
<div class="form-group">
<label for="enabled" class="checkbox">
{form_field form=$form field='isEnabled'}
<input id="enabled" type="checkbox" name="{$name}" {if $value}checked{/if} >
@@ -38,7 +38,7 @@
</label>
</div>
<div class="control-group">
<div class="form-group">
<label for="available-on-special-offers" class="checkbox">
{form_field form=$form field='isAvailableOnSpecialOffers'}
<input id="available-on-special-offers" type="checkbox" name="{$name}" {if $value}checked{/if} >
@@ -48,7 +48,7 @@
</label>
</div>
<div class="control-group">
<div class="form-group">
<label for="cumulative" class="checkbox">
{form_field form=$form field='isCumulative'}
<input id="cumulative" type="checkbox" name="{$name}" {if $value}checked{/if} >
@@ -58,7 +58,7 @@
</label>
</div>
<div class="control-group">
<div class="form-group">
<label for="renoving-postage" class="checkbox">
{form_field form=$form field='isRemovingPostage'}
<input id="renoving-postage" type="checkbox" name="{$name}" {if $value}checked{/if} >
@@ -68,37 +68,37 @@
</label>
</div>
<div class="control-group">
<div class="form-group">
<label for="expiration-date">Expiration date :</label>
<div class="input-append date" data-date="12/02/2012" data-date-format="dd/mm/yyyy">
{form_field form=$form field='expirationDate'}
<input type="text" id="expiration-date" name="{$name}" value="{$value}">
<input type="text" class="form-control" id="expiration-date" name="{$name}" value="{$value}">
{if $error}{$message}{/if}
{/form_field}
<span class="add-on"><span class="icon-th"></span></span>
</div>
</div>
<div class="control-group">
<div class="form-group">
<label for="max-usage">Max usage :</label>
<label for="is-unlimited" class="checkbox">
<input id="is-unlimited" type="checkbox" name="{$name}" {if $value}checked{/if} >
Is unlimited ?
</label>
{form_field form=$form field='maxUsage'}
<input id="max-usage" type="text" name="{$name}" value="{$value}" placeholder="max usage">
<input id="max-usage" type="text" class="form-control" name="{$name}" value="{$value}" placeholder="max usage">
{if $error}{$message}{/if}
{/form_field}
</div>
</div>
<div class="span8">
<div class="col-md-8">
<div class="well clearfix">
<div class="span6">
<div class="control-group">
<div class="col-md-6">
<div class="form-group">
<label for="effect">Effect :</label>
{form_field form=$form field='effect'}
<select name="{$name}" value="{$value}" id="effect" class="span12">
<select name="{$name}" value="{$value}" id="effect" class="col-md-12 form-control">
<option value="1" data-description="More description n°1 about item">Remove x percents for category Y</option>
<option value="2" data-description="More description n°2 about item">Remove x percents</option>
<option value="3" data-description="More description n°3 about item">Remove x amount</option>
@@ -109,18 +109,18 @@
</div>
</div>
<div class="span6">
<div class="control-group">
<div class="col-md-6">
<div class="form-group">
<label for="amount">Amount :</label>
{form_field form=$form field='amount'}
<input id="amount" type="text" name="{$name}" value="{$value}" placeholder="amount">
<input id="amount" type="text" class="form-control" name="{$name}" value="{$value}" placeholder="amount">
{if $error}{$message}{/if}
{/form_field}
</div>
<div class="control-group">
<div class="form-group">
<label for="category">Category :</label>
{*form_field form=$form field='category'*}
<select name="{$name}" value="{$value}" id="category">
<select name="{$name}" value="{$value}" id="category" class="form-control">
<option value="1">Category 1</option>
<option value="1">Category 2</option>
<option value="1">Category 3</option>
@@ -131,37 +131,39 @@
</div>
</div>
<div class="control-group">
<div class="form-group">
<label for="short-description">Short description :</label>
{form_field form=$form field='shortDescription'}
<textarea id="short-description" name="{$name}" value="{$value}" placeholder="short description" class="span12" rows="5"></textarea>
<textarea id="short-description" name="{$name}" value="{$value}" placeholder="short description" class="form-control" rows="5"></textarea>
{if $error}{$message}{/if}
{/form_field}
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-12">
<div class="control-group">
<label for="description">Long description :</label>
{form_field form=$form field='description'}
<textarea id="description" name="{$name}" placeholder="long description" class="span12 wysiwyg" rows="10">{$value nofilter}</textarea>
{if $error}{$message}{/if}
{/form_field}
<div class="form-group">
<label for="description">Long description :</label>
{form_field form=$form field='description'}
<textarea id="description" name="{$name}" placeholder="long description" class="form-control wysiwyg" rows="10">{$value nofilter}</textarea>
{if $error}{$message}{/if}
{/form_field}
</div>
<button type="submit" class="btn btn-default btn-primary">Save</button>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</section>
<section class="row-fluid">
<div class="span12 general-block-decorator">
<section class="row">
<div class="col-md-12 general-block-decorator">
<table class="table table-striped">
<caption class="clearfix">
Rules
<a class="btn btn-primary pull-right" title="Add a new rule">
<span class="icon-plus-sign icon-white"></span>
<a class="btn btn-default btn-primary pull-right" title="Add a new rule">
<span class="glyphicon glyphicon-plus-sign"></span>
</a>
</caption>
<thead>
@@ -178,8 +180,8 @@
<td><span class="label">is superior or equals to</span></td>
<td>300 &euro;</td>
<td>
<a href="#url" class="btn btn-primary btn-medium"><span class="icon-edit icon-white"></span> Edit</a>
<a href="#url" class="btn btn-danger btn-medium" data-toggle="confirm" data-target="#delete"><span class="icon-remove icon-white"></span> Delete</a>
<a href="#url" class="btn btn-default btn-primary btn-medium"><span class="glyphicon glyphicon-edit"></span> Edit</a>
<a href="#url" class="btn btn-default btn-danger btn-medium" data-toggle="confirm" data-target="#delete"><span class="glyphicon glyphicon-remove"></span> Delete</a>
</td>
</tr>
<tr>
@@ -187,8 +189,8 @@
<td><span class="label">is equals to</span></td>
<td>12 - <a href="#" target="_blank">Chaussettes rouges</a></td>
<td>
<a href="#url" class="btn btn-primary btn-medium"><span class="icon-edit icon-white"></span> Edit</a>
<a href="#url" class="btn btn-danger btn-medium" data-toggle="confirm" data-target="#delete"><span class="icon-remove icon-white"></span> Delete</a>
<a href="#url" class="btn btn-default btn-primary btn-medium"><span class="glyphicon glyphicon-edit"></span> Edit</a>
<a href="#url" class="btn btn-default btn-danger btn-medium" data-toggle="confirm" data-target="#delete"><span class="glyphicon glyphicon-remove"></span> Delete</a>
</td>
</tr>
<tr>
@@ -196,8 +198,8 @@
<td><span class="label">is inferior or equals to</span></td>
<td>12/02/2014</td>
<td>
<a href="#url" class="btn btn-primary btn-medium"><span class="icon-edit icon-white"></span> Edit</a>
<a href="#url" class="btn btn-danger btn-medium" data-toggle="confirm" data-target="#delete"><span class="icon-remove icon-white"></span> Delete</a>
<a href="#url" class="btn btn-default btn-primary btn-medium"><span class="glyphicon glyphicon-edit"></span> Edit</a>
<a href="#url" class="btn btn-default btn-danger btn-medium" data-toggle="confirm" data-target="#delete"><span class="glyphicon glyphicon-remove"></span> Delete</a>
</td>
</tr>
</tbody>
@@ -205,10 +207,10 @@
</div>
</section>
<section class="row-fluid">
<div class="span12 general-block-decorator">
<section class="row">
<div class="col-md-12 general-block-decorator clearfix">
<div class="control-group span2">
<div class="form-group col-md-2">
<label for="type">Condition type :</label>
<label class="radio">
<input type="radio" name="type" id="type" value="1" checked> And
@@ -218,84 +220,94 @@
</label>
</div>
<div class="control-group span4">
<div class="form-group col-md-4">
<label for="category-rule">Rule's category :</label>
<select name="categoryRule" id="category-rule">
<select name="categoryRule" id="category-rule" class="form-control">
<option value="1" selected>Total amount</option>
<option value="2">Date</option>
<option value="3">NbArtFromCategory</option>
</select>
<label for="category-rule">Rule's category :</label>
<select name="categoryRule" id="category-rule">
<select name="categoryRule" id="category-rule" class="form-control">
<option value="1">Total amount</option>
<option value="2" selected>Date</option>
<option value="3">NbArtFromCategory</option>
</select>
<label for="category-rule">Rule's category :</label>
<select name="categoryRule" id="category-rule">
<select name="categoryRule" id="category-rule" class="form-control">
<option value="1">Total amount</option>
<option value="2">Date</option>
<option value="3" selected>NbArtFromCategory</option>
</select>
</div>
<div class="control-group span6">
<div class="form-group col-md-6">
<label for="operator">Operator :</label>
<div class="controls">
<select name="operator" id="operator">
<option value="1">is superior to</option>
<option value="2">equals to</option>
<option value="3">is inferior to</option>
<option value="4">is inferior or equals to</option>
<option value="5">is superior or equals to</option>
</select>
<div class="input-append input-prepend">
<span class="add-on">&euro;</span>
<input type="text" name="value" class="input-mini">
<button class="add-on btn btn-primary"><span class="icon-plus icon-white"></span></button>
<div class="row">
<div class="col-lg-6">
<select name="operator" id="operator" class="form-control">
<option value="1">is superior to</option>
<option value="2">equals to</option>
<option value="3">is inferior to</option>
<option value="4">is inferior or equals to</option>
<option value="5">is superior or equals to</option>
</select>
</div>
<div class="input-group col-lg-6">
<input type="text" name="value" class="form-control">
<span class="input-group-addon">&euro;</span>
</div>
</div>
<label for="operator">Operator :</label>
<div class="row">
<div class="col-lg-6">
<select name="operator" id="operator" class="form-control">
<option value="1">is superior to</option>
<option value="2">equals to</option>
<option value="3">is inferior to</option>
<option value="4">is inferior or equals to</option>
<option value="5">is superior or equals to</option>
</select>
</div>
<div class="input-group col-lg-6 date" data-date="12/02/2012" data-date-format="dd/mm/yyyy">
<input type="text" name="value" class="form-control">
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
</div>
<label for="operator">Operator :</label>
<div class="controls">
<select name="operator" id="operator">
<option value="1">is superior to</option>
<option value="2">equals to</option>
<option value="3">is inferior to</option>
<option value="4">is inferior or equals to</option>
<option value="5">is superior or equals to</option>
</select>
<div class="input-append input-prepend date" data-date="12/02/2012" data-date-format="dd/mm/yyyy">
<span class="add-on"><span class="icon-th"></span></span>
<input type="text" name="value" class="input-mini">
<button class="add-on btn btn-primary"><span class="icon-plus icon-white"></span></button>
<div class="row">
<div class="col-lg-6">
<select name="operator" id="operator" class="form-control">
<option value="1">is superior to</option>
<option value="2">equals to</option>
<option value="3">is inferior to</option>
<option value="4">is inferior or equals to</option>
<option value="5">is superior or equals to</option>
</select>
</div>
<div class="col-lg-6">
<input type="text" name="value" class="form-control">
</div>
</div>
<label for="operator">Operator :</label>
<div class="controls">
<select name="operator" id="operator">
<option value="1">is superior to</option>
<option value="2">equals to</option>
<option value="3">is inferior to</option>
<option value="4">is inferior or equals to</option>
<option value="5">is superior or equals to</option>
</select>
<input type="text" name="value" class="input-mini">
<table class="table table-bordered">
<tr>
<td id="minibrowser-breadcrumb"></td>
</tr>
<tr>
<th><span class="icon-th-list"></span> Categories list</th>
</tr>
<tr>
<td id="minibrowser-categories"></td>
</tr>
</table>
<div class="row">
<div class="col-lg-12">
<table class="table table-bordered">
<tr>
<td id="minibrowser-breadcrumb"></td>
</tr>
<tr>
<th><span class="icon-th-list"></span> Categories list</th>
</tr>
<tr>
<td id="minibrowser-categories"></td>
</tr>
</table>
</div>
</div>
</div>
</div>