From b1dba86db8287cb7926e5f6373269d1ff5537ac2 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Mon, 18 Jan 2021 17:28:48 +0100
Subject: [PATCH] feat(style): add form-input style
---
.../address-autocomplete.component.html | 1 +
.../address-autocomplete.component.ts | 3 ++-
src/assets/scss/_inputs.scss | 16 ++++++++++++++++
src/assets/scss/_shapes.scss | 2 +-
src/styles.scss | 1 +
5 files changed, 21 insertions(+), 2 deletions(-)
diff --git a/src/app/shared/components/address-autocomplete/address-autocomplete.component.html b/src/app/shared/components/address-autocomplete/address-autocomplete.component.html
index 73a660d26..537de506d 100644
--- a/src/app/shared/components/address-autocomplete/address-autocomplete.component.html
+++ b/src/app/shared/components/address-autocomplete/address-autocomplete.component.html
@@ -5,6 +5,7 @@
type="text"
placeholder="ex: 20 rue du lac, Lyon"
(input)="onSearchChange($event.target.value)"
+ class="form-input"
#searchAddress
/>
</div>
diff --git a/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts b/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts
index aead77070..4e6d5cc97 100644
--- a/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts
+++ b/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts
@@ -7,6 +7,7 @@ import { AddressService } from '../../service/address.service';
styleUrls: ['./address-autocomplete.component.scss'],
})
export class AddressAutocompleteComponent {
+ public readonly AUTOCOMPLETE_NBR = 5;
public data = [];
@ViewChild('searchAddress', { static: true }) searchAddress: ElementRef;
@Output() selectedAddress: EventEmitter<string> = new EventEmitter<string>();
@@ -15,7 +16,7 @@ export class AddressAutocompleteComponent {
public onSearchChange(searchString: string) {
this.addressService.searchAddress(searchString).subscribe((data) => {
- this.data = data.hits.hits;
+ this.data = data.hits.hits.slice(0, this.AUTOCOMPLETE_NBR);
});
}
diff --git a/src/assets/scss/_inputs.scss b/src/assets/scss/_inputs.scss
index dac479e10..e672692f6 100644
--- a/src/assets/scss/_inputs.scss
+++ b/src/assets/scss/_inputs.scss
@@ -1,3 +1,6 @@
+@import './color';
+@import './shapes';
+
@mixin input-search {
width: 100%;
border: none;
@@ -7,3 +10,16 @@
outline: none;
font-style: italic;
}
+
+.form-input {
+ min-width: 290px;
+ background: $grey-6;
+ border: 1px solid $grey-4;
+ box-sizing: border-box;
+ border-radius: $input-radius;
+ height: 40px;
+}
+.form-input:focus {
+ border: 1px solid $blue;
+ outline: none !important;
+}
diff --git a/src/assets/scss/_shapes.scss b/src/assets/scss/_shapes.scss
index fec384566..c85355e0f 100644
--- a/src/assets/scss/_shapes.scss
+++ b/src/assets/scss/_shapes.scss
@@ -2,7 +2,7 @@
$card-radius: 0.625em;
$bouton-radius: 0.625em;
-$input-radius: 0.3125em;
+$input-radius: 4px;
$bouton-width: 12.25em;
$round-bouton-radius: 1.25em;
$round-radius: 50%;
diff --git a/src/styles.scss b/src/styles.scss
index 3e993cf99..1773ee54c 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -4,6 +4,7 @@
@import 'assets/scss/color';
@import 'assets/scss/breakpoint';
@import 'assets/scss/icons';
+@import 'assets/scss/inputs';
@import '../node_modules/leaflet.locatecontrol/dist/L.Control.Locate.css';
html {
--
GitLab