[IMP] web_unsplash: improve credentials inputs layout

Inputs are displayed on a colored background that made the placeholder
invisible -> fixed in PR https://github.com/odoo/odoo/pull/104136

Apply button's placement made it related only to the second input but
it should not be the case -> Space was created between button and
second input

task-2984182

closes odoo/odoo#107089

Signed-off-by: Romain Derie (rde) <rde@odoo.com>
This commit is contained in:
Antoine (anso)
2022-12-07 18:29:13 +01:00
parent 60ac6be0d3
commit fa1abe7f2f
@@ -11,10 +11,10 @@
<t t-name="web_unsplash.UnsplashCredentials" owl="1">
<div class="d-flex align-items-center flex-wrap">
<a href="https://www.odoo.com/documentation/master/applications/websites/website/optimize/unsplash.html#generate-an-unsplash-access-key"
class="mx-2" target="_blank">Get an Access key</a>
class="me-1" target="_blank">Get an Access key</a>
and paste it here:
<input type="text"
class="o_input form-control w-auto mx-2"
class="o_input o_required_modifier form-control w-auto mx-2"
id="accessKeyInput"
placeholder="Paste your access key here"
t-model="state.key"
@@ -22,17 +22,15 @@
t-att-class="{ 'is-invalid': state.hasKeyError }"/>
and paste
<a href="https://www.odoo.com/documentation/master/applications/websites/website/optimize/unsplash.html#generate-an-unsplash-application-id"
class="mx-2" target="_blank">Application ID</a>
class="mx-1" target="_blank">Application ID</a>
here:
<div class="input-group d-flex justify-content-end align-items-center w-auto mx-2">
<input type="text"
class="o_input form-control w-auto"
placeholder="Paste your application ID here"
t-model="state.appId"
t-on-input="() => this.state.hasAppIdError = false"
t-att-class="{ 'is-invalid': state.hasAppIdError }"/>
<button type="button" class="btn btn-primary btn-block w-auto p-auto save_unsplash" t-on-click="() => this.submitCredentials()">Apply</button>
</div>
<input type="text"
class="o_input o_required_modifier form-control w-auto ms-2"
placeholder="Paste your application ID here"
t-model="state.appId"
t-on-input="() => this.state.hasAppIdError = false"
t-att-class="{ 'is-invalid': state.hasAppIdError }"/>
<button type="button" class="btn btn-primary w-auto ms-3 p-auto save_unsplash" t-on-click="() => this.submitCredentials()">Apply</button>
</div>
</t>