From 51df52c9078cd00b0d536f09536de99a56df5265 Mon Sep 17 00:00:00 2001
From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com>
Date: Mon, 2 Nov 2020 12:15:18 +0100
Subject: [PATCH] fix(search) : fix button + color
---
.../modal-filter/modal-filter.component.scss | 20 +--
.../components/search/search.component.html | 4 +-
.../components/search/search.component.scss | 157 ++----------------
.../components/search/search.component.ts | 10 +-
src/assets/scss/_buttons.scss | 31 ++++
src/assets/scss/_color.scss | 12 +-
src/assets/scss/_inputs.scss | 0
7 files changed, 67 insertions(+), 167 deletions(-)
create mode 100644 src/assets/scss/_buttons.scss
create mode 100644 src/assets/scss/_inputs.scss
diff --git a/src/app/structure-list/components/modal-filter/modal-filter.component.scss b/src/app/structure-list/components/modal-filter/modal-filter.component.scss
index 08adc9c1c..b4b705285 100644
--- a/src/app/structure-list/components/modal-filter/modal-filter.component.scss
+++ b/src/app/structure-list/components/modal-filter/modal-filter.component.scss
@@ -3,6 +3,7 @@
@import '../../../../assets/scss/typography';
@import '../../../../assets/scss/breakpoint';
@import '../../../../assets/scss/shapes';
+@import '../../../../assets/scss/buttons';
.modalformations {
@media #{$desktop} {
@@ -88,31 +89,16 @@
display: flex;
align-items: center;
text-decoration: underline;
+ color: $secondary-color;
}
height: 32px;
button {
- height: 100%;
- border: none;
- cursor: pointer;
- background-color: $purple;
+ @include btn-search-filter;
@include cn-bold-14;
- line-height: 100%;
- align-items: center;
- text-align: center;
- color: $white;
- padding: 3px 16px 3px 16px;
- outline: none;
}
}
}
.checkbox {
- .checkboxItem {
- /*position: relative;
- display: inline-grid;
- align-items: center;
- grid-template-columns: min-content auto;
- min-height: 25px;*/
- }
list-style-type: none;
input {
opacity: 0;
diff --git a/src/app/structure-list/components/search/search.component.html b/src/app/structure-list/components/search/search.component.html
index 8f962c47d..b4b59c342 100644
--- a/src/app/structure-list/components/search/search.component.html
+++ b/src/app/structure-list/components/search/search.component.html
@@ -13,7 +13,9 @@
<div class="ico-pin-search grey"></div>
</div>
<input type="text" formControlName="searchTerm" placeholder="Rechercher une adresse, une association..." />
- <button type="submit">Rechercher</button>
+ <div class="searchButton">
+ <button type="submit">Rechercher</button>
+ </div>
</form>
</div>
diff --git a/src/app/structure-list/components/search/search.component.scss b/src/app/structure-list/components/search/search.component.scss
index 5b8230750..559e50345 100644
--- a/src/app/structure-list/components/search/search.component.scss
+++ b/src/app/structure-list/components/search/search.component.scss
@@ -3,6 +3,7 @@
@import '../../../../assets/scss/typography';
@import '../../../../assets/scss/breakpoint';
@import '../../../../assets/scss/shapes';
+@import '../../../../assets/scss/buttons';
.header {
.title {
@@ -34,45 +35,32 @@
outline: none;
}
.searchSection {
- button {
- border: none;
- cursor: pointer;
- background-color: $purple;
- @include cn-bold-14;
- align-items: center;
- text-align: center;
- color: $white;
- padding: 3px 16px 3px 16px;
- outline: none;
+ .searchButton {
+ border: 1px solid $grey-6;
+ border-radius: 6px;
+ @include background-hash;
+ padding: 0 0 4px 5px;
+ button {
+ @include btn-search;
+ @include cn-bold-14;
+ }
}
}
.btnSection {
padding: 16px 0 8px 0;
button {
- height: 40px;
- width: 190px;
- outline: none;
- border: 1px solid $grey;
- border-radius: 33px;
- background-color: $white;
- padding: 2px 6px 2px 13px;
- align-items: center;
- display: flex;
- cursor: pointer;
+ @include btn-filter;
.btnText {
- justify-content: center;
@include cn-regular-14;
- display: flex;
- align-items: center;
}
}
.selected {
- border: 1px solid $orange-light;
- color: $orange-light;
+ border: 1px solid $primary-color;
+ color: $primary-color;
.arrow {
background-color: transparent;
- border-bottom: 1px solid $orange-light;
- border-right: 1px solid $orange-light;
+ border-bottom: 1px solid $primary-color;
+ border-right: 1px solid $primary-color;
transform: translateY(25%) rotate(-135deg);
margin: 0 5px 0 10px;
height: 7px;
@@ -81,8 +69,8 @@
}
.arrow {
background-color: transparent;
- border-bottom: 1px solid $grey;
- border-right: 1px solid $grey;
+ border-bottom: 1px solid $grey-2;
+ border-right: 1px solid $grey-2;
transform: translateY(-25%) rotate(45deg);
margin: 0 5px 0 10px;
height: 7px;
@@ -90,117 +78,8 @@
}
}
}
-.modalformations {
- @media #{$desktop} {
- margin-left: 0;
- }
- margin-left: 206px;
-}
-.modalplusFiltres {
- @media #{$desktop} {
- margin-left: 0;
- }
- margin-left: 412px;
-}
-.modal {
- max-height: 648px;
- max-width: 754px;
- width: 94%;
- border-left: 6.5px solid transparent;
- border-bottom: 6.5px solid transparent;
- border-radius: 11px;
- z-index: 401 !important;
- margin: 8px 8px 0 0;
- position: absolute;
- margin-top: 96px;
- border: 1px solid $grey-5;
- border-radius: 6px;
- @include background-hash;
- ::-webkit-scrollbar {
- width: 10px;
- }
- ::-webkit-scrollbar-track {
- background: $grey-5;
- }
- ::-webkit-scrollbar-thumb {
- background: $grey;
- border-radius: 6px;
- }
- .contentModal {
- overflow-y: auto;
- max-width: 1100px;
- border-bottom: 1px solid $grey;
- margin-bottom: 10px;
- max-height: 500px;
- .blockFiltre {
- width: 100%;
- padding: 32px 40px 10px 40px;
- min-width: 450px;
- }
- .blockLigne {
- padding-left: 0;
- -moz-column-count: 2;
- -moz-column-gap: 46px;
- -webkit-column-count: 2;
- -webkit-column-gap: 46px;
- column-count: 2;
- column-gap: 46px;
- column-rule: dashed 1px $grey;
- @media #{$large-phone} {
- -moz-column-count: 1;
- -webkit-column-count: 1;
- column-count: 1;
- }
- }
- .ligneFiltre {
- padding: 5px 0 5px 0;
- }
- h4 {
- @include cn-bold-14;
- display: flex;
- align-items: center;
- margin-top: 0;
- }
- .nbResult {
- @include cn-regular-14;
- }
- label {
- @include cn-regular-14;
- }
- }
- .footer {
- margin: 0px 20px 16px 0;
- a {
- @include cn-bold-14;
- display: flex;
- align-items: center;
- text-decoration: underline;
- }
- height: 32px;
- button {
- height: 100%;
- border: none;
- cursor: pointer;
- background-color: $purple;
- @include cn-bold-14;
- line-height: 100%;
- align-items: center;
- text-align: center;
- color: $white;
- padding: 3px 16px 3px 16px;
- outline: none;
- }
- }
-}
.checkbox {
- .checkboxItem {
- /*position: relative;
- display: inline-grid;
- align-items: center;
- grid-template-columns: min-content auto;
- min-height: 25px;*/
- }
list-style-type: none;
input {
opacity: 0;
@@ -242,8 +121,6 @@
content: '';
position: absolute;
display: none;
- }
- &:after {
left: 7px;
top: 3px;
width: 4px;
diff --git a/src/app/structure-list/components/search/search.component.ts b/src/app/structure-list/components/search/search.component.ts
index c7440073c..c8baac522 100644
--- a/src/app/structure-list/components/search/search.component.ts
+++ b/src/app/structure-list/components/search/search.component.ts
@@ -96,13 +96,13 @@ export class SearchComponent implements OnInit {
// Fake service api
private mockService(module: Category[], titre: string, categ: any, nbCateg: number): void {
- let m = new Category();
- m.name = titre;
- m.modules = [];
+ const category = new Category();
+ category.name = titre;
+ category.modules = [];
for (let i = 0; i < nbCateg; i++) {
- m.modules.push(new Module(categ.id + i, categ.name + i));
+ category.modules.push(new Module(categ.id + i, categ.name + i));
}
- module.push(m);
+ module.push(category);
}
// Fake data
diff --git a/src/assets/scss/_buttons.scss b/src/assets/scss/_buttons.scss
new file mode 100644
index 000000000..4d203db52
--- /dev/null
+++ b/src/assets/scss/_buttons.scss
@@ -0,0 +1,31 @@
+@import './color';
+@import './shapes';
+
+@mixin btn-filter {
+ background: $white;
+ height: 40px;
+ width: 190px;
+ border: 1px solid $grey-6;
+ padding: 3px 16px 3px 16px;
+ outline: none;
+ border-radius: 4px;
+ cursor: pointer;
+}
+@mixin btn-search {
+ background: $white;
+ height: 34px;
+ border: none;
+ color: $primary-color;
+ padding: 3px 16px 3px 16px;
+ outline: none;
+ cursor: pointer;
+}
+@mixin btn-search-filter {
+ background: $secondary-color;
+ height: 40px;
+ border: none;
+ color: $white;
+ padding: 3px 16px 3px 16px;
+ outline: none;
+ cursor: pointer;
+}
diff --git a/src/assets/scss/_color.scss b/src/assets/scss/_color.scss
index 40d9d77e3..bf291a307 100644
--- a/src/assets/scss/_color.scss
+++ b/src/assets/scss/_color.scss
@@ -8,6 +8,7 @@ $grey-2: #4f4f4f;
$grey-3: #c3c3c3;
$grey-4: #f2ecf2;
$grey-5: #f2f2f2;
+$grey-6: #bdbdbd;
/* YELLOW */
$yellow: #f2cb04;
$yellow-light: #fff8d6;
@@ -17,13 +18,16 @@ $orange-light: #f29f05;
$orange-3: #fff4ea;
/* GREEN */
$green: #41c29c;
-/* OTHERS */
-$blue: #b3f8f8;
+/* BLUE */
+$blue: #348899;
+
+$blue-light: #b3f8f8;
$blue-dark: #2f5480;
+/* OTHERS */
$purple: #594d59;
$red-metro: #d50000;
/* APP COLORS */
-$primary-color: $yellow;
-$secondary-color: $orange;
+$primary-color: $red-metro;
+$secondary-color: $blue;
$default-link-color: $grey-2;
$button-secondary: $blue-dark;
diff --git a/src/assets/scss/_inputs.scss b/src/assets/scss/_inputs.scss
new file mode 100644
index 000000000..e69de29bb
--
GitLab