diff --git a/projects/budgetkey/src/app/common-components/components/header/bk-header.component.html b/projects/budgetkey/src/app/common-components/components/header/bk-header.component.html index 460599a..6b26e31 100644 --- a/projects/budgetkey/src/app/common-components/components/header/bk-header.component.html +++ b/projects/budgetkey/src/app/common-components/components/header/bk-header.component.html @@ -4,10 +4,11 @@ -
+
-
+
+
@@ -17,14 +18,37 @@ עב
-
+
-
+
+ +
+ + + שיתוף בטוויטר + + + + שיתוף בפייסבוק + + + + שיתוף בוואטסאפ + + + + שיתוף אחר + +
+
+
- + + +
diff --git a/projects/budgetkey/src/app/common-components/components/header/bk-header.component.less b/projects/budgetkey/src/app/common-components/components/header/bk-header.component.less index 0c374f9..c0a7204 100644 --- a/projects/budgetkey/src/app/common-components/components/header/bk-header.component.less +++ b/projects/budgetkey/src/app/common-components/components/header/bk-header.component.less @@ -8,6 +8,13 @@ header { align-items: center; background-color: #f8f8f8; border-color: #e7e7e7; + gap: 24px; + .desktop({ + padding: 0 24px; + }); + .mobile({ + padding: 0 16px; + }); .skip-to-content { position: absolute; @@ -27,10 +34,10 @@ header { } div.logo { + flex: 0 0 auto; width: 80px; height: 100%; padding: 2px 0; - margin-right: 2%; a { width: 100%; @@ -43,7 +50,6 @@ header { } div.search-div{ - margin-right: 5%; padding: 0; flex: 1; @@ -52,15 +58,13 @@ header { } } div.menu-links { - margin-right: auto; display: flex; align-items: center; flex-flow: row; justify-content: left; - margin-left: 40px; + gap: 40px; a { - margin-right: 40px; cursor: pointer; white-space: nowrap; text-align: center; @@ -71,9 +75,13 @@ header { } } - div.collapsed-search { - display: none; + .mobile-separator { margin-right: auto; + margin-left: -24px; + } + + div.collapsed-search { + flex: 0 0 auto; width: 34px; height: 34px; border-radius: 17px; @@ -84,16 +92,14 @@ header { cursor: pointer; } - div.collapsed-menu { - display: none; + div.collapsed-menu, div.collapsed-share { + flex: 0 0 auto; position: relative; - margin-right: auto; - margin-left: 10px; cursor: pointer; - &.with-search { - margin-right: 10px; - } + // &.with-search { + // margin-right: 10px; + // } &:hover .menu { display: flex; @@ -104,17 +110,17 @@ header { .menu { position: absolute; - top: 16px; - right: -114px; + top: 32px; + right: -100px; flex-flow: column; align-items: flex-start; - width: 130px; + width: 150px; border: 1px solid #EEEEEE; border-radius: 4px; background-color: #FFFFFF; box-shadow: 0 2px 10px 0 rgba(0,0,0,0.1); display: none; - z-index: 10; + z-index: 100; .menu-line { @@ -122,8 +128,12 @@ header { padding: 6px 10px; width: 100%; color: #505050; - font-family: "Abraham TRIAL"; font-size: 14px; + .font-abraham; + display: flex; + flex-flow: row; + align-items: center; + gap: 8px; } .menu-line:hover { @@ -134,9 +144,66 @@ header { } } + div.collapsed-share { + width: 32px; + height: 32px; + .share-icon { + display: flex; + width: 100%; + height: 100%; + .background-image; + width: 32px; + height: 32px; + background-size: 32px; + background-image: url(../../../../assets/common/img/icon-share-main.svg); + } + .menu { + top: 32px; + right: 16px; + transform: translateX(50%); + + .menu-line { + .icon { + .background-image; + width: 24px; + height: 24px; + background-size: 24px; + background-image: url(../../../../assets/common/img/icon-share-main.svg); + + &.twitter { + background-image: url(../../../../assets/common/img/icon-share-twitter.svg); + } + &.facebook { + background-image: url(../../../../assets/common/img/icon-share-facebook.svg); + } + &.whatsapp { + background-image: url(../../../../assets/common/img/icon-share-whatsapp.svg); + } + &.mobile-share { + background-image: url(../../../../assets/common/img/icon-share-mobile-share.svg); + } + } + + &:hover { + .icon { + &.twitter { + background-image: url(../../../../assets/common/img/icon-share-twitter-hover.svg); + } + &.facebook { + background-image: url(../../../../assets/common/img/icon-share-facebook-hover.svg); + } + &.whatsapp { + background-image: url(../../../../assets/common/img/icon-share-whatsapp-hover.svg); + } + &.mobile-share { + background-image: url(../../../../assets/common/img/icon-share-mobile-share-hover.svg); + } + } + } + } + } + } div.auth-widget{ - margin-right: 5px; - margin-left: 2%; padding: 0; display: block; @@ -144,22 +211,4 @@ header { color: #505050 !important; } } - - @media only screen and (max-width: 799px) { - div.menu-links { - display: none; - } - div.collapsed-menu { - display: inherit; - flex-grow: 0; - } - div.collapsed-search { - display: block; - flex-grow: 0; - } - div.search-div { - display: none; - } - } - } \ No newline at end of file diff --git a/projects/budgetkey/src/app/common-components/components/header/bk-header.component.ts b/projects/budgetkey/src/app/common-components/components/header/bk-header.component.ts index 6dcd639..240d672 100644 --- a/projects/budgetkey/src/app/common-components/components/header/bk-header.component.ts +++ b/projects/budgetkey/src/app/common-components/components/header/bk-header.component.ts @@ -1,10 +1,11 @@ -import {Component, Inject, Input} from '@angular/core'; +import {Component, Inject, Input, signal} from '@angular/core'; import { GlobalSettingsService } from '../../global-settings.service'; import { Router } from '@angular/router'; import { platform } from 'os'; import { PlatformService } from '../../platform.service'; import { WindowService } from '../../window.service'; -import { EMPTY, fromEvent, switchMap, take, timer } from 'rxjs'; +import { EMPTY, Subscription, fromEvent, switchMap, take, timer } from 'rxjs'; +import { SeoService } from '../../seo.service'; @Component({ selector: 'app-bk-header', @@ -13,52 +14,78 @@ import { EMPTY, fromEvent, switchMap, take, timer } from 'rxjs'; }) export class BkHeaderComponent { - @Input() showSearchBar = false; - @Input() showLanguages = false; - public showAuth = false; - public showCollapsedMenu = false; + @Input() showSearchBar = false; + @Input() showLanguages = false; + @Input() showShare = true; + public showAuth = false; + public showCollapsedMenu = signal(false); + public showShareMenu = signal(false); + collapseMenuSub: Subscription | null = null; + shareMenuSub: Subscription | null = null; - constructor (public globalSettings: GlobalSettingsService, private router: Router, private platform: PlatformService, private window: WindowService) { - this.showAuth = !globalSettings.theme.disableAuth && this.platform.browser(); - } + constructor (public globalSettings: GlobalSettingsService, private router: Router, private platform: PlatformService, private window: WindowService, public seo: SeoService) { + this.showAuth = !globalSettings.theme.disableAuth && this.platform.browser(); + } - doSearch(href?: string) { - const themeId = this.globalSettings.theme.themeId; - let _href = href || `https://next.obudget.org/s/?theme=${themeId}&lang=${this.globalSettings.lang}`; - this.doNavigateURL(_href, '_self'); - } + doSearch(href?: string) { + const themeId = this.globalSettings.theme.themeId; + let _href = href || `https://next.obudget.org/s/?theme=${themeId}&lang=${this.globalSettings.lang}`; + this.doNavigateURL(_href, '_self'); + } - switchLang(lang: string) { - const param = 'lang=' + lang; - let search = window.location.search; - search = search.replace(RegExp('lang=[a-z]{2}'), param); - if (search.indexOf(param) < 0) { - if (search[0] === '?') { - search += '&' + param; - } else { - search = '?' + param; - } + switchLang(lang: string) { + const param = 'lang=' + lang; + let search = window.location.search; + search = search.replace(RegExp('lang=[a-z]{2}'), param); + if (search.indexOf(param) < 0) { + if (search[0] === '?') { + search += '&' + param; + } else { + search = '?' + param; } - window.location.search = search; } + window.location.search = search; + } - doNavigate(href: string) { - this.doNavigateURL(href, '_blank'); - } + doNavigate(href: string) { + this.doNavigateURL(href, '_blank'); + } - doNavigateURL(href: string, target: string) { - window.open(href, target); - } + doNavigateURL(href: string, target: string) { + window.open(href, target); + } - openCollapsedMenu() { - this.showCollapsedMenu = true; - if (this.window._) { - timer(100).pipe( - switchMap(() => this.window._ ? fromEvent(this.window._, 'click') : EMPTY), - take(1), - ).subscribe(() => { - this.showCollapsedMenu = false; - }); - } + openCollapsedMenu() { + if (this.showCollapsedMenu()) { + this.showCollapsedMenu.set(false); + return; + } + this.showCollapsedMenu.set(true); + if (this.window._) { + this.collapseMenuSub?.unsubscribe(); + this.collapseMenuSub = timer(100).pipe( + switchMap(() => this.window._ ? fromEvent(this.window._, 'click') : EMPTY), + take(1), + ).subscribe(() => { + this.showCollapsedMenu.set(false); + }); + } + } + + openShareMenu() { + if (this.showShareMenu()) { + this.showShareMenu.set(false); + return; + } + this.showShareMenu.set(true); + if (this.window._) { + this.shareMenuSub?.unsubscribe(); + this.shareMenuSub = timer(100).pipe( + switchMap(() => this.window._ ? fromEvent(this.window._, 'click') : EMPTY), + take(1), + ).subscribe(() => { + this.showShareMenu.set(false); + }); } + } } diff --git a/projects/budgetkey/src/app/common-components/layout.service.ts b/projects/budgetkey/src/app/common-components/layout.service.ts index 8847a1c..8dbfa26 100644 --- a/projects/budgetkey/src/app/common-components/layout.service.ts +++ b/projects/budgetkey/src/app/common-components/layout.service.ts @@ -21,10 +21,10 @@ export class LayoutService { } get mobile() { - return (this.window._?.innerWidth || 0) < 768; + return (this.window._?.innerWidth || 0) < 1000; } get desktop() { - return (this.window._?.innerWidth || 0) >= 768; + return (this.window._?.innerWidth || 0) >= 1000; } } diff --git a/projects/budgetkey/src/app/common-components/seo.service.ts b/projects/budgetkey/src/app/common-components/seo.service.ts index cae8b94..a13df98 100644 --- a/projects/budgetkey/src/app/common-components/seo.service.ts +++ b/projects/budgetkey/src/app/common-components/seo.service.ts @@ -1,13 +1,20 @@ import { Inject, Injectable } from "@angular/core"; import { NgxSeo, NgxSeoService } from "@avivharuzi/ngx-seo"; import { GlobalSettingsService } from "./global-settings.service"; -import { Meta } from "@angular/platform-browser"; +import { DomSanitizer, Meta, SafeUrl } from "@angular/platform-browser"; import { DOCUMENT } from "@angular/common"; @Injectable() export class SeoService { - constructor(private seo: NgxSeoService, private globalSettings: GlobalSettingsService, @Inject(DOCUMENT) private document: any) {} + twitterShare: SafeUrl; + fbShare: SafeUrl; + whatsappShare: SafeUrl; + scrolledOnce = false; + shareData: { text: any; url: string; }; + + constructor(private seo: NgxSeoService, private globalSettings: GlobalSettingsService, + private sanitizer: DomSanitizer, @Inject(DOCUMENT) private document: any) {} setSeo(title: string, canonical: string) { // const seo: NgxSeo = { @@ -35,5 +42,26 @@ export class SeoService { const head = this.document.getElementsByTagName('head')[0]; const link = head.querySelector('link[rel="canonical"]'); link?.setAttribute('href', canonical); + + this.prepareShare(title.replace(this.globalSettings.siteName, '#מפתח_התקציב'), canonical); + } + + prepareShare(shareText: string, url: string) { + this.shareData = { + text: shareText, + url + }; + this.twitterShare = this.sanitizer.bypassSecurityTrustUrl(`http://twitter.com/share?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(url)}`); + this.fbShare = this.sanitizer.bypassSecurityTrustUrl(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`); + this.whatsappShare = this.sanitizer.bypassSecurityTrustUrl(`https://wa.me/?text=${encodeURIComponent(shareText)} ${encodeURIComponent(url)}`); } + + async mobileShare() { + try { + await navigator.share(this.shareData); + } catch (err) { + console.log('Failed to share', err); + } + } + } \ No newline at end of file diff --git a/projects/budgetkey/src/app/search/search-filter-menu-bar/search-filter-menu-bar.component.less b/projects/budgetkey/src/app/search/search-filter-menu-bar/search-filter-menu-bar.component.less index 0c0bc63..a31a41c 100644 --- a/projects/budgetkey/src/app/search/search-filter-menu-bar/search-filter-menu-bar.component.less +++ b/projects/budgetkey/src/app/search/search-filter-menu-bar/search-filter-menu-bar.component.less @@ -1,15 +1,10 @@ +@import '../../../common.less'; -.search-filter-bar { - @media only screen and (max-width: 600px) { +:host { + padding: 16px; + .search-filter-bar { display: flex; - flex-flow: column; - } - - display: flex; - width: 100%; - flex-flow: row; - margin-top: 15px; - &.bare { - margin-top: 0; - } + width: 100%; + flex-flow: row wrap; + } } diff --git a/projects/budgetkey/src/app/search/search/search.component.ts b/projects/budgetkey/src/app/search/search/search.component.ts index 1ac1d7d..d3ccf86 100644 --- a/projects/budgetkey/src/app/search/search/search.component.ts +++ b/projects/budgetkey/src/app/search/search/search.component.ts @@ -11,6 +11,7 @@ import { SearchBarType } from '../../common-components/components/searchbar/bk-s import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'; import { timer } from 'rxjs'; import { PlatformService } from '../../common-components/platform.service'; +import { SeoService } from '../../common-components/seo.service'; @UntilDestroy() @Component({ @@ -37,7 +38,8 @@ export class SearchComponent implements OnInit { private route: ActivatedRoute, private router: Router, public globalSettings: GlobalSettingsService, - private ps: PlatformService + private ps: PlatformService, + private seo: SeoService ) { this.searchState = new SearchState(this.globalSettings.theme.searchBarConfig); this.docTypes = this.globalSettings.theme.searchBarConfig; @@ -86,6 +88,7 @@ export class SearchComponent implements OnInit { kinds: sp.docType.id }); } + this.seo.setSeo(this.globalSettings.siteName + ' - חיפוש ' + sp.term, `https://next.obudget.org/s?q=${encodeURIComponent(sp.term)}`); } }); }); diff --git a/projects/budgetkey/src/assets/common/img/icon-share-facebook-hover.svg b/projects/budgetkey/src/assets/common/img/icon-share-facebook-hover.svg new file mode 100644 index 0000000..dd1c9ed --- /dev/null +++ b/projects/budgetkey/src/assets/common/img/icon-share-facebook-hover.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/projects/budgetkey/src/assets/common/img/icon-share-facebook.svg b/projects/budgetkey/src/assets/common/img/icon-share-facebook.svg new file mode 100644 index 0000000..f3490a1 --- /dev/null +++ b/projects/budgetkey/src/assets/common/img/icon-share-facebook.svg @@ -0,0 +1,4 @@ + + + + diff --git a/projects/budgetkey/src/assets/common/img/icon-share-main.svg b/projects/budgetkey/src/assets/common/img/icon-share-main.svg new file mode 100644 index 0000000..34b3e85 --- /dev/null +++ b/projects/budgetkey/src/assets/common/img/icon-share-main.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/projects/budgetkey/src/assets/common/img/icon-share-mobile-share-hover.svg b/projects/budgetkey/src/assets/common/img/icon-share-mobile-share-hover.svg new file mode 100644 index 0000000..4b62faa --- /dev/null +++ b/projects/budgetkey/src/assets/common/img/icon-share-mobile-share-hover.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/projects/budgetkey/src/assets/common/img/icon-share-mobile-share.svg b/projects/budgetkey/src/assets/common/img/icon-share-mobile-share.svg new file mode 100644 index 0000000..9778f5a --- /dev/null +++ b/projects/budgetkey/src/assets/common/img/icon-share-mobile-share.svg @@ -0,0 +1,4 @@ + + + + diff --git a/projects/budgetkey/src/assets/common/img/icon-share-twitter-hover.svg b/projects/budgetkey/src/assets/common/img/icon-share-twitter-hover.svg new file mode 100644 index 0000000..cde1eb7 --- /dev/null +++ b/projects/budgetkey/src/assets/common/img/icon-share-twitter-hover.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/projects/budgetkey/src/assets/common/img/icon-share-twitter.svg b/projects/budgetkey/src/assets/common/img/icon-share-twitter.svg new file mode 100644 index 0000000..209c5bc --- /dev/null +++ b/projects/budgetkey/src/assets/common/img/icon-share-twitter.svg @@ -0,0 +1,4 @@ + + + + diff --git a/projects/budgetkey/src/assets/common/img/icon-share-whatsapp-hover.svg b/projects/budgetkey/src/assets/common/img/icon-share-whatsapp-hover.svg new file mode 100644 index 0000000..13c6c24 --- /dev/null +++ b/projects/budgetkey/src/assets/common/img/icon-share-whatsapp-hover.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/projects/budgetkey/src/assets/common/img/icon-share-whatsapp.svg b/projects/budgetkey/src/assets/common/img/icon-share-whatsapp.svg new file mode 100644 index 0000000..240071b --- /dev/null +++ b/projects/budgetkey/src/assets/common/img/icon-share-whatsapp.svg @@ -0,0 +1,4 @@ + + + + diff --git a/projects/budgetkey/src/assets/themes/theme.budgetkey.am.json b/projects/budgetkey/src/assets/themes/theme.budgetkey.am.json index e52e897..4b5a2ad 100644 --- a/projects/budgetkey/src/assets/themes/theme.budgetkey.am.json +++ b/projects/budgetkey/src/assets/themes/theme.budgetkey.am.json @@ -50,17 +50,13 @@ "href": "/about/", "title": "מי אנחנו" }, - { - "href": "http://www.hasadna.org.il/%D7%9E%D7%A4%D7%AA%D7%97-%D7%94%D7%AA%D7%A7%D7%A6%D7%99%D7%91/", - "title": "הסדנא" - }, { "href": "https://www.jgive.com/new/he/ils/donation-targets/3268#donation-modal", "title": "תרמו לנו" }, { "href": "https://chat.whatsapp.com/BXxxMMpukgjCrn5wN4RB12", - "title": "קבוצת המשתמשים בווטסאפ " + "title": "קבוצת המשתמשים
בווטסאפ " } ], "searchBarConfig": [ diff --git a/projects/budgetkey/src/assets/themes/theme.budgetkey.ar.json b/projects/budgetkey/src/assets/themes/theme.budgetkey.ar.json index feb1709..70399bf 100644 --- a/projects/budgetkey/src/assets/themes/theme.budgetkey.ar.json +++ b/projects/budgetkey/src/assets/themes/theme.budgetkey.ar.json @@ -50,17 +50,13 @@ "href": "/about/", "title": "من نحن" }, - { - "href": "http://www.hasadna.org.il/%D7%9E%D7%A4%D7%AA%D7%97-%D7%94%D7%AA%D7%A7%D7%A6%D7%99%D7%91/", - "title": "الورشة" - }, { "href": "https://www.jgive.com/new/he/ils/donation-targets/3268#donation-modal", "title": "تبرّعوا لنا" }, { "href": "https://chat.whatsapp.com/BXxxMMpukgjCrn5wN4RB12", - "title": "קבוצת המשתמשים בווטסאפ " + "title": "קבוצת המשתמשים
בווטסאפ " } ], "searchBarConfig": [ diff --git a/projects/budgetkey/src/assets/themes/theme.budgetkey.en.json b/projects/budgetkey/src/assets/themes/theme.budgetkey.en.json index adf3f8c..489abb9 100644 --- a/projects/budgetkey/src/assets/themes/theme.budgetkey.en.json +++ b/projects/budgetkey/src/assets/themes/theme.budgetkey.en.json @@ -50,17 +50,13 @@ "href": "/about/", "title": "About Us" }, - { - "href": "http://www.hasadna.org.il/%D7%9E%D7%A4%D7%AA%D7%97-%D7%94%D7%AA%D7%A7%D7%A6%D7%99%D7%91/", - "title": "The Public Knowledge Workshop" - }, { "href": "https://www.jgive.com/new/he/ils/donation-targets/3268#donation-modal", "title": "Donate" }, { "href": "https://chat.whatsapp.com/BXxxMMpukgjCrn5wN4RB12", - "title": "קבוצת המשתמשים בווטסאפ " + "title": "קבוצת המשתמשים
בווטסאפ " } ], "searchBarConfig": [ diff --git a/projects/budgetkey/src/assets/themes/theme.budgetkey.he.json b/projects/budgetkey/src/assets/themes/theme.budgetkey.he.json index 29e40d4..4b5a2ad 100644 --- a/projects/budgetkey/src/assets/themes/theme.budgetkey.he.json +++ b/projects/budgetkey/src/assets/themes/theme.budgetkey.he.json @@ -50,10 +50,6 @@ "href": "/about/", "title": "מי אנחנו" }, - { - "href": "http://www.hasadna.org.il/%D7%9E%D7%A4%D7%AA%D7%97-%D7%94%D7%AA%D7%A7%D7%A6%D7%99%D7%91/", - "title": "הסדנא" - }, { "href": "https://www.jgive.com/new/he/ils/donation-targets/3268#donation-modal", "title": "תרמו לנו" diff --git a/projects/budgetkey/src/assets/themes/theme.budgetkey.ru.json b/projects/budgetkey/src/assets/themes/theme.budgetkey.ru.json index e52e897..4b5a2ad 100644 --- a/projects/budgetkey/src/assets/themes/theme.budgetkey.ru.json +++ b/projects/budgetkey/src/assets/themes/theme.budgetkey.ru.json @@ -50,17 +50,13 @@ "href": "/about/", "title": "מי אנחנו" }, - { - "href": "http://www.hasadna.org.il/%D7%9E%D7%A4%D7%AA%D7%97-%D7%94%D7%AA%D7%A7%D7%A6%D7%99%D7%91/", - "title": "הסדנא" - }, { "href": "https://www.jgive.com/new/he/ils/donation-targets/3268#donation-modal", "title": "תרמו לנו" }, { "href": "https://chat.whatsapp.com/BXxxMMpukgjCrn5wN4RB12", - "title": "קבוצת המשתמשים בווטסאפ " + "title": "קבוצת המשתמשים
בווטסאפ " } ], "searchBarConfig": [ diff --git a/projects/budgetkey/src/common.less b/projects/budgetkey/src/common.less index 1a2b028..7d6afdc 100644 --- a/projects/budgetkey/src/common.less +++ b/projects/budgetkey/src/common.less @@ -71,7 +71,7 @@ } -@mobile-threshold: 768px; +@mobile-threshold: 1000px; .mobile(@rules) { @media only screen and (max-width: (@mobile-threshold - 1px)) { diff --git a/themes/theme.budgetkey.he.json b/themes/theme.budgetkey.he.json index f79fd42..cc31a15 100644 --- a/themes/theme.budgetkey.he.json +++ b/themes/theme.budgetkey.he.json @@ -502,10 +502,6 @@ "href": "/about/", "title": "מי אנחנו" }, - { - "href": "http://www.hasadna.org.il/%D7%9E%D7%A4%D7%AA%D7%97-%D7%94%D7%AA%D7%A7%D7%A6%D7%99%D7%91/", - "title": "הסדנא" - }, { "href": "https://www.jgive.com/new/he/ils/donation-targets/3268#donation-modal", "title": "תרמו לנו"