kolzchut/srm#409 - layout, back-button

kolzchut · Aug 6, 2023 · ab839d2 · ab839d2
1 parent 10b35e7
commit ab839d2
Show file tree

Hide file tree

Showing 12 changed files with 114 additions and 78 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -11,27 +11,35 @@
     </div>
 </ng-container>
 <ng-container *ngIf='active'>
-    <div class='situations'>
-        <div class='section' *ngIf='responseItems && responseItems.length'>
-            <div class='section-header'>
-                <!-- <div class='title' *ngIf='!searchParams.response'>סוגי שירות:</div>
-                <div class='title' *ngIf='!!searchParams.response'>סוגי שירות נוספים:</div> -->
-                <div class='title'>סוגי שירות:</div>
-                <a class='clear' (activated)='currentSearchParams.filter_responses = []; pushSearchParams()' clickOnReturn role='button' tabindex="0" aria-label="ניקוי המסננים לסוגי השירותים">ניקוי</a>
-            </div>
-            <app-response-selection-widget [responses]='responseItems' [selectedResponses]='this.currentSearchParams?.filter_responses || []' (toggle)='toggleResponse($event)'></app-response-selection-widget>
+    <div class='filtering-header layout-desktop'>
+        <button class='back' (activated)='clear()' aria-label='סגירת הסינון וחזרה לרשימת התוצאות' clickOnReturn></button>
+        <div class='geo-filter'>
+
         </div>
-        <app-search-filters-situation-section title='קהלי יעד' [situations]='audiences' [searchParams]='currentSearchParams' [field]='"filter_situations"' (push)='pushSearchParams()'></app-search-filters-situation-section>
-        <app-search-filters-situation-section title='מצבים רפואיים ומוגבלויות' [situations]='health_issues' [searchParams]='currentSearchParams' [field]='"filter_health"' (push)='pushSearchParams()'></app-search-filters-situation-section>
-        <app-search-filters-situation-section title='מוכרות ממשלתית' [situations]='others.benefit_holders' [searchParams]='currentSearchParams' [field]='"filter_benefit_holders"' (push)='pushSearchParams()'></app-search-filters-situation-section>
-        <app-search-filters-situation-section title='מצב תעסוקתי' [situations]='others.employment' [searchParams]='currentSearchParams' [field]='"filter_employment"' (push)='pushSearchParams()'></app-search-filters-situation-section>
-        <app-search-filters-situation-section title='אירועי חיים' [situations]='others.life_events' [searchParams]='currentSearchParams' [field]='"filter_life_events"' (push)='pushSearchParams()'></app-search-filters-situation-section>
-        <app-search-filters-situation-section title='דחיפות' [situations]='others.urgency' [searchParams]='currentSearchParams' [field]='"filter_urgency"' (push)='pushSearchParams()'></app-search-filters-situation-section>
-        <app-search-filters-situation-section title='קהילה' [situations]='others.community' [searchParams]='currentSearchParams' [field]='"filter_community"' (push)='pushSearchParams()'></app-search-filters-situation-section>
-        <app-search-filters-situation-section title='תפקיד' [situations]='others.role' [searchParams]='currentSearchParams' [field]='"filter_role"' (push)='pushSearchParams()'></app-search-filters-situation-section>
-        <app-search-filters-situation-section title='קבוצות גיל' [situations]='age_groups' [searchParams]='currentSearchParams' [field]='"filter_age_groups"' (push)='pushSearchParams()'></app-search-filters-situation-section>
-        <app-search-filters-situation-section title='מיועד עבור' [situations]='others.gender' [searchParams]='currentSearchParams' [field]='"filter_gender"' (push)='pushSearchParams()'></app-search-filters-situation-section>
-        <app-search-filters-situation-section title='לדוברי שפות (שאינן עברית)' [situations]='languages' [searchParams]='currentSearchParams' [field]='"filter_languages"' (push)='pushSearchParams()'></app-search-filters-situation-section>
+    </div>
+    <div class='situations-container'>
+        <div class='situations'>
+            <div class='section' *ngIf='responseItems && responseItems.length'>
+                <div class='section-header'>
+                    <!-- <div class='title' *ngIf='!searchParams.response'>סוגי שירות:</div>
+                    <div class='title' *ngIf='!!searchParams.response'>סוגי שירות נוספים:</div> -->
+                    <div class='title'>סוגי שירות:</div>
+                    <a class='clear' (activated)='currentSearchParams.filter_responses = []; pushSearchParams()' clickOnReturn role='button' tabindex="0" aria-label="ניקוי המסננים לסוגי השירותים">ניקוי</a>
+                </div>
+                <app-response-selection-widget [responses]='responseItems' [selectedResponses]='this.currentSearchParams?.filter_responses || []' (toggle)='toggleResponse($event)'></app-response-selection-widget>
+            </div>
+            <app-search-filters-situation-section title='קהלי יעד' [situations]='audiences' [searchParams]='currentSearchParams' [field]='"filter_situations"' (push)='pushSearchParams()'></app-search-filters-situation-section>
+            <app-search-filters-situation-section title='מצבים רפואיים ומוגבלויות' [situations]='health_issues' [searchParams]='currentSearchParams' [field]='"filter_health"' (push)='pushSearchParams()'></app-search-filters-situation-section>
+            <app-search-filters-situation-section title='מוכרות ממשלתית' [situations]='others.benefit_holders' [searchParams]='currentSearchParams' [field]='"filter_benefit_holders"' (push)='pushSearchParams()'></app-search-filters-situation-section>
+            <app-search-filters-situation-section title='מצב תעסוקתי' [situations]='others.employment' [searchParams]='currentSearchParams' [field]='"filter_employment"' (push)='pushSearchParams()'></app-search-filters-situation-section>
+            <app-search-filters-situation-section title='אירועי חיים' [situations]='others.life_events' [searchParams]='currentSearchParams' [field]='"filter_life_events"' (push)='pushSearchParams()'></app-search-filters-situation-section>
+            <app-search-filters-situation-section title='דחיפות' [situations]='others.urgency' [searchParams]='currentSearchParams' [field]='"filter_urgency"' (push)='pushSearchParams()'></app-search-filters-situation-section>
+            <app-search-filters-situation-section title='קהילה' [situations]='others.community' [searchParams]='currentSearchParams' [field]='"filter_community"' (push)='pushSearchParams()'></app-search-filters-situation-section>
+            <app-search-filters-situation-section title='תפקיד' [situations]='others.role' [searchParams]='currentSearchParams' [field]='"filter_role"' (push)='pushSearchParams()'></app-search-filters-situation-section>
+            <app-search-filters-situation-section title='קבוצות גיל' [situations]='age_groups' [searchParams]='currentSearchParams' [field]='"filter_age_groups"' (push)='pushSearchParams()'></app-search-filters-situation-section>
+            <app-search-filters-situation-section title='מיועד עבור' [situations]='others.gender' [searchParams]='currentSearchParams' [field]='"filter_gender"' (push)='pushSearchParams()'></app-search-filters-situation-section>
+            <app-search-filters-situation-section title='לדוברי שפות (שאינן עברית)' [situations]='languages' [searchParams]='currentSearchParams' [field]='"filter_languages"' (push)='pushSearchParams()'></app-search-filters-situation-section>
+        </div>    
     </div>
     <div class='submit'>
         <div class='inner'>
@@ -43,8 +51,8 @@
                 </span>
                 <span *ngIf='resultCountBounded > 0 && resultCountBounded !== resultCount' class='bounded'>
                     &nbsp;
-                    <span *ngIf='resultCountBounded > 1'>({{resultCountBounded.toLocaleString()}} תוצאות באיזור המפה)</span>
-                    <span *ngIf='resultCountBounded === 1'>(תוצאה אחת באיזור המפה)</span>
+                    <span *ngIf='resultCountBounded > 1'>({{resultCountBounded.toLocaleString()}} באיזור המפה)</span>
+                    <span *ngIf='resultCountBounded === 1'>(אחת באיזור המפה)</span>
                 </span>
                 <div class='count' *ngIf='totalFilters'>{{totalFilters}}</div>
             </button>

diff --git 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
@@ -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
@@ -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
diff --git 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 {