[FIX] website_*: fix bs4

[FIX] website_form_editor: adapt layout to bs4

1. With BS4, dialog width is 500px and not 600px anymore.
   As a result, on large screen using col-x-3 is not enough anymore.

2. With BS4, a row should be set when using col-x-x or they will be one above
   the other.

3. As the template is not only used in the modal but in the page itself, we
   should had a container to prevent the input fields to take all the page
   width.

task-1878150

[FIX] website_helpdesk_form: missing `container` class

When submitting a ticket to an helpdesk team, the form would be displayed to
the left, against the screen border since there were no `container` class.

task-1878150

+ layout margin & size improvement
This commit is contained in:
Romain Derie
2018-09-02 15:27:18 +02:00
parent 7efa669b49
commit 1f9b416878
2 changed files with 9 additions and 7 deletions
+3 -3
View File
@@ -28,13 +28,13 @@
<!-- Generic Field Layout -->
<t t-name="website_form_editor.field">
<div t-att-class="'form-group form-field' + (field.custom ? ' o_website_form_custom' : '') + (field.required ? ' o_website_form_required' : '')">
<div class="col-lg-3 col-md-4 text-right-not-xs">
<div t-att-class="'row form-group form-field' + (field.custom ? ' o_website_form_custom' : '') + (field.required ? ' o_website_form_required' : '')">
<div class="col-md-4 text-right-not-xs">
<label class="col-form-label" t-att-for="field.name">
<t t-esc="field.string"/>
</label>
</div>
<div class="col-lg-7 col-md-8">
<div class="col-md-8">
<t t-raw="0"/>
</div>
</div>
+6 -4
View File
@@ -3,10 +3,12 @@
<template id="s_website_form" name="Form Builder">
<form action="/website_form/" method="post" class="s_website_form container-fluid mt32" enctype="multipart/form-data">
<div class="form-group row">
<div class="offset-lg-3 offset-md-4 col-md-8 col-lg-7">
<button class="btn btn-primary btn-lg o_website_form_send">Send</button>
<span id="o_website_form_result"></span>
<div class="container">
<div class="form-group row">
<div class="offset-lg-3 offset-md-4 col-md-8 col-lg-7">
<button class="btn btn-primary btn-lg o_website_form_send">Send</button>
<span id="o_website_form_result"></span>
</div>
</div>
</div>
</form>