Commit 4b64fa3a364add8669e341d1afb5c971878b1e6a

Authored by Swarn Singh
1 parent 38429fc584
Exists in master

acordian tabs ui completed

app/css/custom.css
... ... @@ -155,4 +155,137 @@ font-size: 10px !important;
155 155 /*.new-input-label{
156 156 margin-bottom: 0;
157 157 line-height: 34px;
158   -}*/
159 158 \ No newline at end of file
  159 +}*/
  160 +
  161 +
  162 +
  163 +
  164 +
  165 +/* new custom css for accrodian tabs */
  166 +
  167 +.customAccordianHeader{
  168 + width: 100%;
  169 + height: auto;
  170 + background-color: #F3F3F3;
  171 + border: 1px solid #ddd;
  172 + color: #333;
  173 + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  174 + border-radius: 3px 3px 3px 3px;
  175 + padding: 10px 15px;
  176 + margin-top: 10px;
  177 +}
  178 +
  179 +.customAccordianHeader.customActive{
  180 + background-image: -webkit-gradient(linear, left 0%, left 100%, from(#555555), to(#3b3b3b));
  181 + background-image: linear-gradient(to bottom, #555555 0%, #3b3b3b 100%);
  182 + background-repeat: repeat-x;
  183 + border: 1px solid #222222;
  184 + color: #FFF;
  185 + border-radius: 3px 3px 0 0;
  186 +}
  187 +.customAccordianHeader > span{
  188 + font-size: 15px;
  189 + margin-right: 20px;
  190 + line-height: 22px;
  191 + float: left;
  192 +}
  193 +.customAccordianHeader .btn{
  194 + padding: 2px 12px;
  195 +}
  196 +.customAccordianHeader > .form-control{
  197 + outline: none;
  198 + box-shadow: none;
  199 +}
  200 +.customAccordianHeader > select.form-control{
  201 + width: 150px;
  202 + height: 26px;
  203 + padding: 0 6px;
  204 + margin-right: 20px;
  205 + float: left;
  206 +}
  207 +.customAccordianHeader > select.form-control[disabled]{
  208 + border: none;
  209 + -webkit-appearance: none;
  210 + -moz-appearance: none;
  211 + appearance: none;
  212 + background-color: transparent;
  213 + color: #f90;
  214 + width: auto;
  215 +}
  216 +.customAccordianHeader > input.form-control{
  217 + width: 80px;
  218 + height: 26px;
  219 + padding: 0 6px;
  220 + float: left;
  221 +}
  222 +.customAccordianHeader > input.form-control[disabled]{
  223 + border: none;
  224 + -webkit-appearance: none;
  225 + -moz-appearance: none;
  226 + appearance: none;
  227 + background-color: transparent;
  228 + color: #333;
  229 +}
  230 +.customAccordianTabBody{
  231 + width: 100%;
  232 + height: auto;
  233 + padding: 15px;
  234 + border: 1px solid #ddd;
  235 + border-top: 0;
  236 + border-radius: 0 0 3px 3px;
  237 +}
  238 +.customTableWithFilter{
  239 + width: auto;
  240 + height: auto;
  241 +}
  242 +.customTableWithFilter th{
  243 + padding: 5px;
  244 + background-color: #f3f3f3;
  245 + border: 1px solid #ddd;
  246 +}
  247 +.customTableWithFilter th i{
  248 + margin-top: 3px;
  249 +}
  250 +.customTableWithFilter th span{
  251 + font-size: 11px;
  252 + color: #222;
  253 +}
  254 +.customTableWithFilter th input{
  255 + width: 50px;
  256 +}
  257 +.customTableWithFilter td{
  258 + padding: 5px;
  259 + border: 1px solid #ddd;
  260 +}
  261 +.customTableWithFilter td span{
  262 + font-size: 11px;
  263 +}
  264 +.customTableWithFilter td span:first-child{
  265 + color: #449d44;
  266 + font-weight: bold;
  267 +}
  268 +.customTableWithFilter td span:last-child{
  269 + color: #c9302c;
  270 + font-style: italic;
  271 + font-weight: bold;
  272 +}
  273 +.customTableWithFilter td .tierTextBox{
  274 + width: 70px;
  275 +}
  276 +.customTableWithFilter .addTierButton{
  277 + color: #fff;
  278 + background-color: #2196f3;
  279 + border: none;
  280 + padding: 3px 5px;
  281 +}
  282 +.customTableWithFilter td .fa-trash-o{
  283 + color: #fff;
  284 + background-color: #c9302c;
  285 + padding: 5px;
  286 + border-radius: 3px;
  287 + cursor: pointer;
  288 +}
  289 +.resizeTextarea{
  290 + resize: vertical;
  291 + margin-top: 20px;
  292 +}
160 293 \ No newline at end of file
... ...
app/partials/fuelManager/fuelManager.controller.js
... ... @@ -8,57 +8,129 @@
8 8  
9 9 $scope.test = "Testing...";
10 10  
11   - }]);
12   -
13   - $(document).ready(function(){
14   - $('#jaTab1').click(function(){
15   - $('#ja1').removeAttr("disabled");
16   - $('#ja1').removeClass('disableSelect');
17   - $('#ja2').removeAttr("disabled");
18   - $('#ja2').removeClass('disableInput');
19   - //$('#ja11').prop("disabled", true);
20   - $('#ja11').attr('disabled', 'disabled');
21   - $('#ja11').addClass('disableSelect');
22   - $('#ja22').attr('disabled', 'disabled');
23   - $('#ja22').addClass('disableInput');
24   -
25   - $('#ja111').attr('disabled', 'disabled');
26   - $('#ja111').addClass('disableSelect');
27   - $('#ja222').attr('disabled', 'disabled');
28   - $('#ja222').addClass('disableInput');
29   - })
30   -
31   - $('#jaTab2').click(function(){
32   - $('#ja11').removeAttr("disabled");
33   - $('#ja11').removeClass('disableSelect');
34   - $('#ja22').removeAttr("disabled");
35   - $('#ja22').removeClass('disableInput');
36   -
37   - $('#ja1').attr('disabled', 'disabled');
38   - $('#ja1').addClass('disableSelect');
39   - $('#ja2').attr('disabled', 'disabled');
40   - $('#ja2').addClass('disableInput');
41   -
42   - $('#ja111').attr('disabled', 'disabled');
43   - $('#ja111').addClass('disableSelect');
44   - $('#ja222').attr('disabled', 'disabled');
45   - $('#ja222').addClass('disableInput');
46   - })
47   -
48   - $('#jaTab3').click(function(){
49   - $('#ja111').removeAttr("disabled");
50   - $('#ja111').removeClass('disableSelect');
51   - $('#ja222').removeAttr("disabled");
52   - $('#ja222').removeClass('disableInput');
53   -
54   - $('#ja11').attr('disabled', 'disabled');
55   - $('#ja11').addClass('disableSelect');
56   - $('#ja22').attr('disabled', 'disabled');
57   - $('#ja22').addClass('disableInput');
58   -
59   - $('#ja1').attr('disabled', 'disabled');
60   - $('#ja1').addClass('disableSelect');
61   - $('#ja2').attr('disabled', 'disabled');
62   - $('#ja2').addClass('disableInput');
63   - })
64   - })
  11 + $(document).ready(function(){
  12 +
  13 + $('#customTabToggle1').click(function(){
  14 + console.log('tab 1');
  15 + $('#customTabsBody1').slideDown();
  16 + $('#customTabsBody2').slideUp();
  17 + $('#customTabsBody3').slideUp();
  18 + $('#customTabsBody4').slideUp();
  19 + $('#customTabs1').addClass('customActive');
  20 + $('#customTabs2').removeClass('customActive');
  21 + $('#customTabs3').removeClass('customActive');
  22 + $('#customTabs4').removeClass('customActive');
  23 + $('.customAccordianHeader > select, .customAccordianHeader > input').prop("disabled", true);
  24 + $('.customAccordianHeader.customActive > select, .customAccordianHeader.customActive > input').prop("disabled", false);
  25 +
  26 + $('#customTabs1 > .pull-right > .btn-default').css('display', 'none');
  27 + $('#customTabs1 > .pull-right > .btn-success').css('display', 'inline-block');
  28 + $('#customTabs1 > .pull-right > .btn-danger').css('display', 'inline-block');
  29 +
  30 + $('#customTabs2 > .pull-right > .btn-default').css('display', 'inline-block');
  31 + $('#customTabs2 > .pull-right > .btn-success').css('display', 'none');
  32 + $('#customTabs2 > .pull-right > .btn-danger').css('display', 'none');
  33 +
  34 + $('#customTabs3 > .pull-right > .btn-default').css('display', 'inline-block');
  35 + $('#customTabs3 > .pull-right > .btn-success').css('display', 'none');
  36 + $('#customTabs3 > .pull-right > .btn-danger').css('display', 'none');
  37 +
  38 + $('#customTabs4 > .pull-right > .btn-default').css('display', 'inline-block');
  39 + $('#customTabs4 > .pull-right > .btn-success').css('display', 'none');
  40 + $('#customTabs4 > .pull-right > .btn-danger').css('display', 'none');
  41 +
  42 + })
  43 + $('#customTabToggle2').click(function(){
  44 + console.log('tab 2');
  45 + $('#customTabsBody1').slideUp();
  46 + $('#customTabsBody2').slideDown();
  47 + $('#customTabsBody3').slideUp();
  48 + $('#customTabsBody4').slideUp();
  49 + $('#customTabs1').removeClass('customActive');
  50 + $('#customTabs2').addClass('customActive');
  51 + $('#customTabs3').removeClass('customActive');
  52 + $('#customTabs4').removeClass('customActive');
  53 + $('.customAccordianHeader > select, .customAccordianHeader > input').prop("disabled", true);
  54 + $('.customAccordianHeader.customActive > select, .customAccordianHeader.customActive > input').prop("disabled", false);
  55 +
  56 + $('#customTabs1 > .pull-right > .btn-default').css('display', 'inline-block');
  57 + $('#customTabs1 > .pull-right > .btn-success').css('display', 'none');
  58 + $('#customTabs1 > .pull-right > .btn-danger').css('display', 'none');
  59 +
  60 + $('#customTabs2 > .pull-right > .btn-default').css('display', 'none');
  61 + $('#customTabs2 > .pull-right > .btn-success').css('display', 'inline-block');
  62 + $('#customTabs2 > .pull-right > .btn-danger').css('display', 'inline-block');
  63 +
  64 + $('#customTabs3 > .pull-right > .btn-default').css('display', 'inline-block');
  65 + $('#customTabs3 > .pull-right > .btn-success').css('display', 'none');
  66 + $('#customTabs3 > .pull-right > .btn-danger').css('display', 'none');
  67 +
  68 + $('#customTabs4 > .pull-right > .btn-default').css('display', 'inline-block');
  69 + $('#customTabs4 > .pull-right > .btn-success').css('display', 'none');
  70 + $('#customTabs4 > .pull-right > .btn-danger').css('display', 'none');
  71 +
  72 + })
  73 + $('#customTabToggle3').click(function(){
  74 + console.log('tab 3');
  75 + $('#customTabsBody1').slideUp();
  76 + $('#customTabsBody2').slideUp();
  77 + $('#customTabsBody3').slideDown();
  78 + $('#customTabsBody4').slideUp();
  79 + $('#customTabs1').removeClass('customActive');
  80 + $('#customTabs2').removeClass('customActive');
  81 + $('#customTabs3').addClass('customActive');
  82 + $('#customTabs4').removeClass('customActive');
  83 + $('.customAccordianHeader > select, .customAccordianHeader > input').prop("disabled", true);
  84 + $('.customAccordianHeader.customActive > select, .customAccordianHeader.customActive > input').prop("disabled", false);
  85 +
  86 + $('#customTabs1 > .pull-right > .btn-default').css('display', 'inline-block');
  87 + $('#customTabs1 > .pull-right > .btn-success').css('display', 'none');
  88 + $('#customTabs1 > .pull-right > .btn-danger').css('display', 'none');
  89 +
  90 + $('#customTabs2 > .pull-right > .btn-default').css('display', 'inline-block');
  91 + $('#customTabs2 > .pull-right > .btn-success').css('display', 'none');
  92 + $('#customTabs2 > .pull-right > .btn-danger').css('display', 'none');
  93 +
  94 + $('#customTabs3 > .pull-right > .btn-default').css('display', 'none');
  95 + $('#customTabs3 > .pull-right > .btn-success').css('display', 'inline-block');
  96 + $('#customTabs3 > .pull-right > .btn-danger').css('display', 'inline-block');
  97 +
  98 + $('#customTabs4 > .pull-right > .btn-default').css('display', 'inline-block');
  99 + $('#customTabs4 > .pull-right > .btn-success').css('display', 'none');
  100 + $('#customTabs4 > .pull-right > .btn-danger').css('display', 'none');
  101 +
  102 + })
  103 + $('#customTabToggle4').click(function(){
  104 + console.log('tab 4');
  105 + $('#customTabsBody1').slideUp();
  106 + $('#customTabsBody2').slideUp();
  107 + $('#customTabsBody3').slideUp();
  108 + $('#customTabsBody4').slideDown();
  109 + $('#customTabs1').removeClass('customActive');
  110 + $('#customTabs2').removeClass('customActive');
  111 + $('#customTabs3').removeClass('customActive');
  112 + $('#customTabs4').addClass('customActive');
  113 + $('.customAccordianHeader > select, .customAccordianHeader > input').prop("disabled", true);
  114 + $('.customAccordianHeader.customActive > select, .customAccordianHeader.customActive > input').prop("disabled", false);
  115 +
  116 + $('#customTabs1 > .pull-right > .btn-default').css('display', 'inline-block');
  117 + $('#customTabs1 > .pull-right > .btn-success').css('display', 'none');
  118 + $('#customTabs1 > .pull-right > .btn-danger').css('display', 'none');
  119 +
  120 + $('#customTabs2 > .pull-right > .btn-default').css('display', 'inline-block');
  121 + $('#customTabs2 > .pull-right > .btn-success').css('display', 'none');
  122 + $('#customTabs2 > .pull-right > .btn-danger').css('display', 'none');
  123 +
  124 + $('#customTabs3 > .pull-right > .btn-default').css('display', 'inline-block');
  125 + $('#customTabs3 > .pull-right > .btn-success').css('display', 'none');
  126 + $('#customTabs3 > .pull-right > .btn-danger').css('display', 'none');
  127 +
  128 + $('#customTabs4 > .pull-right > .btn-default').css('display', 'none');
  129 + $('#customTabs4 > .pull-right > .btn-success').css('display', 'inline-block');
  130 + $('#customTabs4 > .pull-right > .btn-danger').css('display', 'inline-block');
  131 +
  132 + })
  133 +
  134 + })
  135 +
  136 + }]);
... ...
app/partials/fuelManager/fuelManager.html
... ... @@ -21,7 +21,7 @@
21 21 <div class="widget-content">
22 22 <h3>Ramp Fees & Avoidance</h3>
23 23 <section id="accordions">
24   - <div class="panel-group accordion">
  24 + <!-- <div class="panel-group accordion">
25 25 <div class="panel panel-default open">
26 26 <div class="panel-heading">
27 27 <h4 class="panel-title">
... ... @@ -179,6 +179,256 @@
179 179 </div>
180 180 </div>
181 181 </div>
  182 + </div> -->
  183 + <div class="newCustomAccordian">
  184 + <!-- tab 1 -->
  185 + <div class="customAccordianHeader customActive" id="customTabs1">
  186 + <span>Jet Aircraft</span>
  187 + <select class="form-control">
  188 + <option>Pricing Structure</option>
  189 + <option>Retail-(minus)</option>
  190 + <option>Cost+(plus)</option>
  191 + <option>Direct=(equals)</option>
  192 + </select>
  193 + <input type="text" name="" class="form-control" value="$1.7500">
  194 + <div class="pull-right">
  195 + <button class="btn btn-success">Save</button>
  196 + <button class="btn btn-danger">Delete</button>
  197 + <button class="btn btn-default" id="customTabToggle1" style="display: none;">Edit</button>
  198 + </div>
  199 + <div class="clearfix"></div>
  200 + </div>
  201 + <div class="customAccordianTabBody" id="customTabsBody1">
  202 + <table class="customTableWithFilter">
  203 + <thead>
  204 + <tr>
  205 + <th>
  206 + <span class="pull-left">1-250 gal.</span>
  207 + <i class="fa fa-pencil-square-o pull-right" aria-hidden="true"></i>
  208 + </th>
  209 + <th>
  210 + <span class="pull-left">1-250 gal.</span>
  211 + <i class="fa fa-pencil-square-o pull-right" aria-hidden="true"></i>
  212 + </th>
  213 + <th>
  214 + <input type="text" placeholder="min" name=""> -
  215 + <input type="text" placeholder="max" name="">
  216 + <span>gal.</span>
  217 + </th>
  218 + <th> &nbsp; </th>
  219 + </tr>
  220 + </thead>
  221 + <tbody>
  222 + <tr>
  223 + <td>
  224 + <span class="pull-left">-$0.0000</span> &nbsp;
  225 + <span class="pull-right">($1.7500)</span>
  226 + </td>
  227 + <td>
  228 + <span class="pull-left">-$0.0000</span> &nbsp;
  229 + <span class="pull-right">($1.7500)</span>
  230 + </td>
  231 + <td>
  232 + <span>$</span>
  233 + <input type="text" placeholder="margin" class="tierTextBox" name="">
  234 + <button class="addTierButton">Add Tier</button>
  235 + </td>
  236 + <td>
  237 + <i class="fa fa-trash-o" aria-hidden="true"></i>
  238 + </td>
  239 + </tr>
  240 + </tbody>
  241 + </table>
  242 + <textarea class="form-control resizeTextarea" placeholder="Message..."></textarea>
  243 + </div>
  244 +
  245 + <!-- tab 2 -->
  246 +
  247 + <div class="customAccordianHeader" id="customTabs2">
  248 + <span>Jet Aircraft</span>
  249 + <select class="form-control" disabled="true">
  250 + <option>Pricing Structure</option>
  251 + <option>Retail-(minus)</option>
  252 + <option>Cost+(plus)</option>
  253 + <option>Direct=(equals)</option>
  254 + </select>
  255 + <input type="text" name="" disabled="true" class="form-control" value="$1.7500">
  256 + <div class="pull-right">
  257 + <button class="btn btn-success" style="display: none;">Save</button>
  258 + <button class="btn btn-danger" style="display: none;">Delete</button>
  259 + <button class="btn btn-default" id="customTabToggle2">Edit</button>
  260 + </div>
  261 + <div class="clearfix"></div>
  262 + </div>
  263 + <div class="customAccordianTabBody" id="customTabsBody2" style="display: none;">
  264 + <table class="customTableWithFilter">
  265 + <thead>
  266 + <tr>
  267 + <th>
  268 + <span class="pull-left">1-250 gal.</span>
  269 + <i class="fa fa-pencil-square-o pull-right" aria-hidden="true"></i>
  270 + </th>
  271 + <th>
  272 + <span class="pull-left">1-250 gal.</span>
  273 + <i class="fa fa-pencil-square-o pull-right" aria-hidden="true"></i>
  274 + </th>
  275 + <th>
  276 + <input type="text" placeholder="min" name=""> -
  277 + <input type="text" placeholder="max" name="">
  278 + <span>gal.</span>
  279 + </th>
  280 + <th> &nbsp; </th>
  281 + </tr>
  282 + </thead>
  283 + <tbody>
  284 + <tr>
  285 + <td>
  286 + <span class="pull-left">-$0.0000</span> &nbsp;
  287 + <span class="pull-right">($1.7500)</span>
  288 + </td>
  289 + <td>
  290 + <span class="pull-left">-$0.0000</span> &nbsp;
  291 + <span class="pull-right">($1.7500)</span>
  292 + </td>
  293 + <td>
  294 + <span>$</span>
  295 + <input type="text" placeholder="margin" class="tierTextBox" name="">
  296 + <button class="addTierButton">Add Tier</button>
  297 + </td>
  298 + <td>
  299 + <i class="fa fa-trash-o" aria-hidden="true"></i>
  300 + </td>
  301 + </tr>
  302 + </tbody>
  303 + </table>
  304 + <textarea class="form-control resizeTextarea" placeholder="Message..."></textarea>
  305 + </div>
  306 +
  307 + <!-- tab 3 -->
  308 +
  309 + <div class="customAccordianHeader" id="customTabs3">
  310 + <span>Jet Aircraft</span>
  311 + <select class="form-control" disabled="true">
  312 + <option>Pricing Structure</option>
  313 + <option>Retail-(minus)</option>
  314 + <option>Cost+(plus)</option>
  315 + <option>Direct=(equals)</option>
  316 + </select>
  317 + <input type="text" name="" disabled="true" class="form-control" value="$1.7500">
  318 + <div class="pull-right">
  319 + <button class="btn btn-success" style="display: none;">Save</button>
  320 + <button class="btn btn-danger" style="display: none;">Delete</button>
  321 + <button class="btn btn-default" id="customTabToggle3">Edit</button>
  322 + </div>
  323 + <div class="clearfix"></div>
  324 + </div>
  325 + <div class="customAccordianTabBody" id="customTabsBody3" style="display: none;">
  326 + <table class="customTableWithFilter">
  327 + <thead>
  328 + <tr>
  329 + <th>
  330 + <span class="pull-left">1-250 gal.</span>
  331 + <i class="fa fa-pencil-square-o pull-right" aria-hidden="true"></i>
  332 + </th>
  333 + <th>
  334 + <span class="pull-left">1-250 gal.</span>
  335 + <i class="fa fa-pencil-square-o pull-right" aria-hidden="true"></i>
  336 + </th>
  337 + <th>
  338 + <input type="text" placeholder="min" name=""> -
  339 + <input type="text" placeholder="max" name="">
  340 + <span>gal.</span>
  341 + </th>
  342 + <th> &nbsp; </th>
  343 + </tr>
  344 + </thead>
  345 + <tbody>
  346 + <tr>
  347 + <td>
  348 + <span class="pull-left">-$0.0000</span> &nbsp;
  349 + <span class="pull-right">($1.7500)</span>
  350 + </td>
  351 + <td>
  352 + <span class="pull-left">-$0.0000</span> &nbsp;
  353 + <span class="pull-right">($1.7500)</span>
  354 + </td>
  355 + <td>
  356 + <span>$</span>
  357 + <input type="text" placeholder="margin" class="tierTextBox" name="">
  358 + <button class="addTierButton">Add Tier</button>
  359 + </td>
  360 + <td>
  361 + <i class="fa fa-trash-o" aria-hidden="true"></i>
  362 + </td>
  363 + </tr>
  364 + </tbody>
  365 + </table>
  366 + <textarea class="form-control resizeTextarea" placeholder="Message..."></textarea>
  367 + </div>
  368 +
  369 + <!-- tab 4 -->
  370 +
  371 + <div class="customAccordianHeader" id="customTabs4">
  372 + <span>Jet Aircraft</span>
  373 + <select class="form-control" disabled="true">
  374 + <option>Pricing Structure</option>
  375 + <option>Retail-(minus)</option>
  376 + <option>Cost+(plus)</option>
  377 + <option>Direct=(equals)</option>
  378 + </select>
  379 + <input type="text" name="" disabled="true" class="form-control" value="$1.7500">
  380 + <div class="pull-right">
  381 + <button class="btn btn-success" style="display: none;">Save</button>
  382 + <button class="btn btn-danger" style="display: none;">Delete</button>
  383 + <button class="btn btn-default" id="customTabToggle4">Edit</button>
  384 + </div>
  385 + <div class="clearfix"></div>
  386 + </div>
  387 + <div class="customAccordianTabBody" id="customTabsBody4" style="display: none;">
  388 + <table class="customTableWithFilter">
  389 + <thead>
  390 + <tr>
  391 + <th>
  392 + <span class="pull-left">1-250 gal.</span>
  393 + <i class="fa fa-pencil-square-o pull-right" aria-hidden="true"></i>
  394 + </th>
  395 + <th>
  396 + <span class="pull-left">1-250 gal.</span>
  397 + <i class="fa fa-pencil-square-o pull-right" aria-hidden="true"></i>
  398 + </th>
  399 + <th>
  400 + <input type="text" placeholder="min" name=""> -
  401 + <input type="text" placeholder="max" name="">
  402 + <span>gal.</span>
  403 + </th>
  404 + <th> &nbsp; </th>
  405 + </tr>
  406 + </thead>
  407 + <tbody>
  408 + <tr>
  409 + <td>
  410 + <span class="pull-left">-$0.0000</span> &nbsp;
  411 + <span class="pull-right">($1.7500)</span>
  412 + </td>
  413 + <td>
  414 + <span class="pull-left">-$0.0000</span> &nbsp;
  415 + <span class="pull-right">($1.7500)</span>
  416 + </td>
  417 + <td>
  418 + <span>$</span>
  419 + <input type="text" placeholder="margin" class="tierTextBox" name="">
  420 + <button class="addTierButton">Add Tier</button>
  421 + </td>
  422 + <td>
  423 + <i class="fa fa-trash-o" aria-hidden="true"></i>
  424 + </td>
  425 + </tr>
  426 + </tbody>
  427 + </table>
  428 + <textarea class="form-control resizeTextarea" placeholder="Message..."></textarea>
  429 + </div>
  430 +
  431 +
182 432 </div>
183 433 </section>
184 434 <div class="row">&nbsp;</div>
... ...