diff --git a/projects/srm/src/app/branch-container/branch-container.component.less b/projects/srm/src/app/branch-container/branch-container.component.less index 882fa69b..754dc3f4 100644 --- a/projects/srm/src/app/branch-container/branch-container.component.less +++ b/projects/srm/src/app/branch-container/branch-container.component.less @@ -89,8 +89,7 @@ border: 1px solid @color-gray-5; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); border-radius: 24px; - .button-image; - .background-image; + .button-image(none); background-size: 24px; display: flex; flex-flow: column; diff --git a/projects/srm/src/app/branch-header/branch-header.component.less b/projects/srm/src/app/branch-header/branch-header.component.less index 9193f834..8a95cdca 100644 --- a/projects/srm/src/app/branch-header/branch-header.component.less +++ b/projects/srm/src/app/branch-header/branch-header.component.less @@ -18,8 +18,7 @@ padding-bottom: 8px; .control-icon { - .button-image; - .background-image; + .button-image(none); background-image: url(../../assets/img/icon-close.svg); width: 12px; height: 12px; @@ -33,8 +32,7 @@ } } .back-icon { - .button-image; - .background-image; + .button-image(none); background-image: url(../../assets/img/icon-arrow-right-gray-3.svg); background-size: 24px; background-position: center right 12px; diff --git a/projects/srm/src/app/card-container/card-container.component.less b/projects/srm/src/app/card-container/card-container.component.less index b0cb6fba..8a8ab5a9 100644 --- a/projects/srm/src/app/card-container/card-container.component.less +++ b/projects/srm/src/app/card-container/card-container.component.less @@ -86,8 +86,7 @@ border: 1px solid @color-gray-5; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); border-radius: 24px; - .button-image; - .background-image; + .button-image(none); background-size: 24px; display: flex; flex-flow: column; diff --git a/projects/srm/src/app/click-on-return.directive.ts b/projects/srm/src/app/click-on-return.directive.ts index e93733ed..49043739 100644 --- a/projects/srm/src/app/click-on-return.directive.ts +++ b/projects/srm/src/app/click-on-return.directive.ts @@ -17,6 +17,7 @@ export class ClickOnReturnDirective implements AfterViewInit{ } }); el.addEventListener('click', (event: MouseEvent) => { + event.stopPropagation(); this.activated.emit(event); }); el.setAttribute('tabindex', '0'); diff --git a/projects/srm/src/app/image-button/image-button.component.less b/projects/srm/src/app/image-button/image-button.component.less index 0ba24c64..8f0d6705 100644 --- a/projects/srm/src/app/image-button/image-button.component.less +++ b/projects/srm/src/app/image-button/image-button.component.less @@ -6,8 +6,7 @@ height: 100%; button { - .button-image; - .background-image; + .button-image(none); width: 100%; height: 100%; display: block; diff --git a/projects/srm/src/app/menu-icon/menu-icon.component.less b/projects/srm/src/app/menu-icon/menu-icon.component.less index 035d60d1..9dd0dadb 100644 --- a/projects/srm/src/app/menu-icon/menu-icon.component.less +++ b/projects/srm/src/app/menu-icon/menu-icon.component.less @@ -6,8 +6,7 @@ display: flex; .menu-icon { - .button-image; - .background-image; + .button-image(none); width: 24px; height: 24px; background-image: url(../../assets/img/icon-hamburger-gray-3.svg); diff --git a/projects/srm/src/app/search-filters/search-filters.component.html b/projects/srm/src/app/search-filters/search-filters.component.html index 349206cd..864401f5 100644 --- a/projects/srm/src/app/search-filters/search-filters.component.html +++ b/projects/srm/src/app/search-filters/search-filters.component.html @@ -11,27 +11,35 @@ -
-
-
- -
סוגי שירות:
- ניקוי -
- +
+ +
+
- - - - - - - - - - - +
+
+
+
+
+ +
סוגי שירות:
+ ניקוי +
+ +
+ + + + + + + + + + + +
@@ -43,8 +51,8 @@   - ({{resultCountBounded.toLocaleString()}} תוצאות באיזור המפה) - (תוצאה אחת באיזור המפה) + ({{resultCountBounded.toLocaleString()}} באיזור המפה) + (אחת באיזור המפה)
{{totalFilters}}
diff --git a/projects/srm/src/app/search-filters/search-filters.component.less b/projects/srm/src/app/search-filters/search-filters.component.less index 2184170f..4f8971db 100644 --- a/projects/srm/src/app/search-filters/search-filters.component.less +++ b/projects/srm/src/app/search-filters/search-filters.component.less @@ -30,47 +30,74 @@ flex-flow: column; align-items: center; - .desktop({ - padding: 16px 56px; - padding-bottom: 48px; - }); - .mobile({ - padding: 16px 16px; - padding-bottom: 48px; - }); - - .situations { + .filtering-header { width: 100%; - .section { - padding: 0; - - .section-header { - display: flex; - flex-flow: row; - align-items: center; - justify-content: space-between; - .title { - .font-rag-sans; - font-weight: 600; - font-size: 16px; - line-height: 21px; - color: @color-gray-1; - padding: 0 8px; - } - .clear { - .font-rag-sans; - font-weight: 400; - font-size: 13px; - line-height: 17px; - color: @color-gray-3; - cursor: pointer; - margin: 0 8px; + display: flex; + flex-flow: row; + gap: 8px; + align-items: center; + border-bottom: 1px solid @color-blue-7; + background: @color-white; + .desktop({ + height: 56px; + padding: 0 8px; + .back { + .button-image(@color-blue-8); + width: 40px; + height: 40px; + background-image: url('../../assets/img/icon-back-blue-1.svg'); + background-size: 30px; + border-radius: 24px; + border: 1px solid @color-blue-6; + } + }); + } + .situations-container { + width: 100%; + display: flex; + flex-flow: column; + align-items: center; + .desktop({ + padding: 16px 56px; + padding-bottom: 48px; + }); + .mobile({ + padding: 16px 16px; + padding-bottom: 48px; + }); + .situations { + width: 100%; + .section { + padding: 0; + + .section-header { + display: flex; + flex-flow: row; + align-items: center; + justify-content: space-between; + .title { + .font-rag-sans; + font-weight: 600; + font-size: 16px; + line-height: 21px; + color: @color-gray-1; + padding: 0 8px; + } + .clear { + .font-rag-sans; + font-weight: 400; + font-size: 13px; + line-height: 17px; + color: @color-gray-3; + cursor: pointer; + margin: 0 8px; + } } + padding-bottom: 16px; + margin-bottom: 16px; + border-bottom: 1px solid @color-gray-6; } - padding-bottom: 16px; - margin-bottom: 16px; - border-bottom: 1px solid @color-gray-6; - } + } } .submit { diff --git a/projects/srm/src/app/search/search.less b/projects/srm/src/app/search/search.less index e7701f15..69736f12 100644 --- a/projects/srm/src/app/search/search.less +++ b/projects/srm/src/app/search/search.less @@ -1,8 +1,7 @@ @import url(../../common.less); .search-icon { - .button-image; - .background-image; + .button-image(none); flex: 0 0 auto; width: 32px; height: 32px; diff --git a/projects/srm/src/app/searchbox-header/searchbox-header.component.less b/projects/srm/src/app/searchbox-header/searchbox-header.component.less index 8cf317db..82e5ec0e 100644 --- a/projects/srm/src/app/searchbox-header/searchbox-header.component.less +++ b/projects/srm/src/app/searchbox-header/searchbox-header.component.less @@ -139,8 +139,7 @@ } .search-icon { - .button-image; - .background-image; + .button-image(none); width: 24px; height: 24px; flex: 0 0 auto; diff --git a/projects/srm/src/assets/img/icon-back-blue-1.svg b/projects/srm/src/assets/img/icon-back-blue-1.svg new file mode 100644 index 00000000..5061d0d4 --- /dev/null +++ b/projects/srm/src/assets/img/icon-back-blue-1.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/projects/srm/src/common.less b/projects/srm/src/common.less index 894108b8..75e0c27e 100644 --- a/projects/srm/src/common.less +++ b/projects/srm/src/common.less @@ -70,12 +70,13 @@ background-size: contain; } -.button-image { +.button-image(@color) { border: none; - background: none; margin: 0; padding: 0; cursor: pointer; + background: @color; + .background-image; } .tags-container {