Some style fixes, search results use routerlink

OpenBudget · Nov 24, 2023 · c336294 · c336294
1 parent 791ef38
commit c336294
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 19 deletions.
diff --git a/projects/budgetkey/src/app/item/item-page/item-page.component.html b/projects/budgetkey/src/app/item/item-page/item-page.component.html
@@ -1,4 +1,4 @@
-<app-container [showHeader]="true" [showSearchBar]="true">
+<app-container [showHeader]="true" [showSearchBar]="true" [listSideView]='true'>
   <div #container class="budgetkey-item-wrapper container-fluid" [ngClass]="'style-' + style" *ngIf='init'>
     <div class='item-container'>
       <app-item-budget0dig *ngIf='prefix("budget/00/")' [item]='item'></app-item-budget0dig>

diff --git a/projects/budgetkey/src/app/list-components/app-container/app-container.component.less b/projects/budgetkey/src/app/list-components/app-container/app-container.component.less
@@ -24,15 +24,22 @@
     .list {
       flex: 0 0 auto;
       width: 400px;
+      position: sticky;
+      left: 0;
+      top: 0;
+      max-height: 100vh;
+      overflow: scroll;
+      border-right: 1px solid #DAEAF5;
+      box-shadow: 0px 1px 2px 0px rgba(189, 189, 189, 0.60);
     }
 
     .main {
       flex: 0 1 auto;
-      width: auto;
+      width: 100%;
       display: flex;
       flex-flow: column;
       align-items: center;  
     }
   }  
 
-}
+}
diff --git a/projects/budgetkey/src/app/list-components/list-view/list-view.component.less b/projects/budgetkey/src/app/list-components/list-view/list-view.component.less
@@ -11,6 +11,7 @@
         background-image: url(../../../assets/lists/bg.png);
         background-size: 8px;
         background-repeat: repeat;
+        background: url(../../../assets/lists/bg.png), lightgray 0% 0% / 25px 25px repeat, #FFF;
         padding-top: 64px;
         padding-bottom: 56px;
         display: flex;
@@ -93,5 +94,6 @@
         flex-flow: column;
         gap: 8px;
         max-width: @max-width;
+        border-top: 2px solid #CFDDE7;
     }
 }
diff --git a/projects/budgetkey/src/app/list-components/search-result/search-result.component.html b/projects/budgetkey/src/app/list-components/search-result/search-result.component.html
@@ -33,10 +33,13 @@
             <div class='body-title' *ngIf='p.title'>
                 <app-add-to-list-icon [item]='item' *ngIf='listable'></app-add-to-list-icon>
                 <a [href]='href()' 
-                    [target]='bare ? "_blank" : "_self"'
-                    [style.color]='p.primaryColor'
-                    clickOnReturn
-                    [attr.aria-label]='p.title + " - מעבר לעמוד הפריט"'
+                   [target]='bare ? "_blank" : "_self"'
+                   [style.color]='p.primaryColor'
+                   clickOnReturn
+                   [attr.aria-label]='p.title + " - מעבר לעמוד הפריט"'
+                   [routerLink]='routerLink()'
+                   [queryParams]='{li: index}'
+                   [queryParamsHandling]='"merge"'
                 >
                     <span [innerHtml]='p.title' [title]='p.title'></span>
                     <div class='fadeoff'

diff --git a/projects/budgetkey/src/app/list-components/search-result/search-result.component.ts b/projects/budgetkey/src/app/list-components/search-result/search-result.component.ts
@@ -7,6 +7,7 @@ import { GlobalSettingsService } from '../../common-components/global-settings.s
 
 import * as dayjs from 'dayjs';
 import 'dayjs/locale/he';
+import { DomSanitizer } from '@angular/platform-browser';
 dayjs.locale('he');
 
 type StringOrFunc = string | ((x: any) => string);
@@ -558,7 +559,7 @@ export class SearchResultComponent implements OnInit {
 
   public p: Parameter;
 
-  constructor(private globalSettings: GlobalSettingsService) { }
+  constructor(private globalSettings: GlobalSettingsService, private sanitizer: DomSanitizer) { }
 
   ngOnInit() {
     const parts = this.item.source.doc_id.split('/');
@@ -680,13 +681,21 @@ export class SearchResultComponent implements OnInit {
     return x['payments'][x['payments'].length - 1];
   }
 
+  routerLink() {
+    const doc_id = this.item.source.doc_id;
+    if (doc_id.indexOf('activities/gov_social_service') === 0) {
+      return null;
+    }
+    return [`/i/${doc_id}`];
+  }
+
   href() {
     const doc_id = this.item.source.doc_id;
-    let base = '';
     if (doc_id.indexOf('activities/gov_social_service') === 0) {
-      base = 'https://www.socialpro.org.il';
+      const theme = (!this.bare && this.globalSettings.themeId) ? `&theme=${this.globalSettings.themeId}` : '';
+      return this.sanitizer.bypassSecurityTrustUrl(`https://www.socialpro.org.il/i/${doc_id}?li=${this.index}${theme}`);
     }
-    return base + '/i/' + doc_id + '?li=' + this.index + (!this.bare && this.globalSettings.themeId ? '&theme=' + this.globalSettings.themeId : '');
+    return null;
   }
 
   remainingTime(x: any) {

diff --git a/projects/budgetkey/src/app/search/search-page/search-page.component.html b/projects/budgetkey/src/app/search/search-page/search-page.component.html
@@ -1,5 +1,5 @@
 <app-container [listSideView]='true'>
-    <div class="container" *ngIf='init'>
+    <div class="inner" *ngIf='init'>
         <app-search></app-search>
     </div>
 </app-container>

diff --git a/projects/budgetkey/src/app/search/search-page/search-page.component.less b/projects/budgetkey/src/app/search/search-page/search-page.component.less
@@ -4,11 +4,15 @@
             background: #fafafa fixed;
             min-height: 400px;
             display: block;
-            .container {
+            .inner {
               display:flex;
               flex-flow: column;
               align-content: center;
               align-items: center;
+              padding: 0 32px;
+              width: 100%;
+              max-width: 100%;
+              overflow-x: hidden;                
               app-search {
                 display: flex;
                 flex-flow: column;
@@ -50,7 +54,7 @@
             }
 
             app-container {
-              .container {
+              .inner {
                 app-search {
                   & > .row {
                     width: 100vw;

diff --git a/projects/budgetkey/src/app/search/vertical-results/vertical-results.component.html b/projects/budgetkey/src/app/search/vertical-results/vertical-results.component.html
@@ -1,7 +1,6 @@
 <div class="search_body">
   <ng-container *ngFor="let item of ((searchManager.searchResults | async)?.docs || []); let i = index" >
     <search-result [item]="item" [index]="i" [kind]="item.type" [bare]='bare'></search-result>
-    <div class='separator'></div>
   </ng-container>
   <div i18n="@@statusText" class="status" [innerHtml]='getStatusText()'></div>
 </div>
diff --git a/projects/budgetkey/src/app/search/vertical-results/vertical-results.component.less b/projects/budgetkey/src/app/search/vertical-results/vertical-results.component.less
@@ -1,5 +1,11 @@
-.search_body {
-    .separator {
-        height: 20px;
-    }   
+:host {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    .search_body {
+        display: flex;
+        flex-flow: column;
+        gap: 20px;
+        max-width: 800px;
+    }
 }
diff --git a/projects/budgetkey/src/styles.less b/projects/budgetkey/src/styles.less
@@ -8,6 +8,13 @@
 @import (css) url('//fonts.googleapis.com/css?family=Heebo:900&amp;subset=hebrew');
 @import (css) url('//next.obudget.org/_fonts/stylesheet.css');
 
+html {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;    
+}
+
 body {
   display: block;
   margin: 0;
@@ -16,8 +23,19 @@ body {
   -webkit-font-feature-settings: 'tnum','lnum';
   -moz-font-feature-settings: 'tnum','lnum';
   overflow-x: hidden;
+  direction: rtl;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overscroll-behavior: none;
 }
 
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+
 @font-face {
   font-family: 'arrows';
   src: url('data:application/octet-stream;base64,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') format('woff'),