Skip to content

Commit

Permalink
restructure homepage + icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@amirbashan
amirbashan committed Dec 18, 2024
1 parent 43eac9e commit ecd6265
Show file tree
Hide file tree
Showing 9 changed files with 242 additions and 260 deletions.
4 changes: 3 additions & 1 deletion projects/srm/src/app/app.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ import { SearchResultsPageComponent } from './search-results-page/search-results
import { SrpStaticFiltersComponent } from './search-results-page/srp-static-filters/srp-static-filters.component';
import { SrpMapToggleComponent } from './search-results-page/srp-map-toggle/srp-map-toggle.component';
import { SrpAreaSearchButtonsComponent } from './search-results-page/srp-area-search-buttons/srp-area-search-buttons.component';
import { QuickLinksComponent } from './quicklinks/quicklinks.component';

@NgModule({
declarations: [
Expand Down Expand Up @@ -155,7 +156,8 @@ import { SrpAreaSearchButtonsComponent } from './search-results-page/srp-area-se
SearchResultsPageComponent,
SrpStaticFiltersComponent,
SrpMapToggleComponent,
SrpAreaSearchButtonsComponent
SrpAreaSearchButtonsComponent,
QuickLinksComponent
],
imports: [
BrowserModule,
Expand Down
59 changes: 7 additions & 52 deletions projects/srm/src/app/homepage/homepage.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<div class='part1'>
<div class='part1-bg'></div>
<div class='header'>
<div class='menu-button layout-mobile'>
<div *ngIf='layout.desktop()' class='menu-button'>
<app-menu-icon colorScheme='light'></app-menu-icon>
</div>
<div class='logo-tagline'>
Expand All @@ -16,18 +16,18 @@ <h1 class='tagline'>
</div>
</div>

<div class='intro' [class.searching]='searchConfig.searching' >
<div *ngIf='layout.desktop()' class='intro' [class.searching]='searchConfig.searching' >
לחפש ולמצוא <strong>כל שירות</strong> חברתי<br/>
מכל רשות, עמותה או ארגון<br class='layout-mobile'/>&nbsp;בהתאמה אישית לצרכיך&nbsp;
מכל רשות, עמותה או ארגון&nbsp;בהתאמה אישית לצרכיך&nbsp;
</div>
<div class='search' role="main" #search [class.searching]='searchConfig.searching' >
<div class='searchbox-container layout-desktop' appArrowToTab (keydown)='keydown($event)'>
<div *ngIf='layout.desktop()' class='searchbox-container' appArrowToTab (keydown)='keydown($event)'>
<app-search-bar [config]='searchConfig' (focus)='$event ? updateFocus($event) : null' [homepage]='true'
interactionEvent='homepage-searchbar' interactionEventWhere='homepage'
></app-search-bar>
<app-autocomplete-results [config]='searchConfig'></app-autocomplete-results>
</div>
<div class='searchbox-container layout-mobile'>
<div *ngIf='layout.mobile()' class='searchbox-container'>
<app-search-bar [config]='searchConfig' (focus)='startSearch("", false)' [homepage]='true'
></app-search-bar>
</div>
Expand All @@ -41,57 +41,12 @@ <h1 class='tagline'>
</div>
</div>
<div class='part2'>
<div class='header layout-desktop'>
<div *ngIf='layout.desktop()' class='header'>
<app-desktop-menu-links [homepage]='true'></app-desktop-menu-links>
</div>

<div class='homepage-groups' #homepageGroups>
@for (group of groups; track group.title) {
<div class='homepage-group' [style.gridRowEnd]='"span 15"'>
@if (!!group.query) {
<div class='homepage-group-title'>
<h3>
<span>{{group.title}}</span>
<span class='arrow-left'></span>
</h3>
</div>
} @else {
<div class='homepage-group-title'>
<h3>
<span>{{group.title}}</span>
</h3>
</div>
}
<div class='homepage-group-items'>
@for (item of group.items; track item.query) {
<a class='homepage-group-item' [routerLink]='["/s", item.query]'
[queryParams]="{from: 'homepage-group-item'}"
interactionEvent='homepage-link' interactionEventWhere='homepage' [interactionEventContent]='item.title'
clickOnReturn>{{item.title}}</a>
}
</div>
@if (!!group.query && !!group.group_link) {
<a [routerLink]='["/s", group.query]'
[queryParams]="{from: 'homepage-group-more'}"
class='homepage-group-more'
interactionEvent='homepage-link-group' interactionEventWhere='homepage' [interactionEventContent]='group.title'
clickOnReturn>
<span class='after'></span>
<span>{{group.group_link}}</span>
</a>
}
</div>
}
</div>
<app-quickLinks></app-quickLinks>
<app-disclaimer-footer></app-disclaimer-footer>
</div>
</div>
<!-- <div class='backdrop layout-desktop' (focus)='updateFocus(false)' (click)='updateFocus(false)' tabindex="0">
<div class='top'></div>
<div class='bottom'>
<div class='close'></div>
</div>
</div> -->
</div>
<div class='alternate-search layout-mobile' [class.visible]='!searchVisible' (activated)='startSearch("", false)' clickOnReturn aria-label='ביצוע חיפוש באתר'></div>
</div>
158 changes: 0 additions & 158 deletions projects/srm/src/app/homepage/homepage.component.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -324,164 +324,6 @@
}
}

.homepage-groups {
.desktop({
padding: 48px 64px;
padding-bottom: 64px;
display: grid;
grid-gap: 0 16px;
grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
grid-auto-rows: 16px;
});
.mobile({
display: flex;
flex-flow: column;;
align-items: stretch;
padding: 16px 8px;
});

h2 {
padding: 0 24px;
}

.homepage-group {
display: flex;
flex-flow: column;
align-items: flex-start;
gap: 4px;
padding: 16px;
width: 100%;
.desktop({
max-width: 560px;
height: min-content;
});

.homepage-group-title {
text-decoration: none;
}
a.homepage-group-title {
cursor: pointer;
}

h3 {
margin: 0;
padding: 0 8px;
display: flex;
flex-flow: row;
align-items: center;
gap: 8px;
span {
.font-rag-sans;
color: @color-gray-1;
font-weight: 400;
.desktop({
font-size: 24px;
line-height: 28px;
});
.mobile({
font-size: 20px;
line-height: 20px;
});
.transition(color);
}
.arrow-left {
display: inline-block;
.background-image;
background-image: url(../../assets/img/icon-arrow-left-blue-3.svg);
background-size: 24px;
width: 24px;
height: 24px;
opacity: 0;
.transition(opacity);
}
}

.homepage-group-more {
display: flex;
flex-flow: row;
align-items: center;
.font-rag-sans;
color: @color-blue-2;
font-weight: 300;
.desktop({
font-size: 16px;
line-height: 28px;
padding: 8px;
});
.mobile({
font-size: 16px;
line-height: 20px;
padding: 8px;
});
cursor: pointer;
.after {
display: inline-block;
.background-image;
background-image: url(../../assets/img/icon-after.svg);
background-size: 16px;
width: 16px;
height: 16px;
}
&:hover {
text-decoration: underline;
font-weight: 400;
}
}

.transition(border-color background-color);
border: 1px solid rgba(255,255,255,0);
background-color: rgba(255,255,255,0);;
// &.hovered {
// border: 1px solid @color-blue-6;
// background: @color-blue-8;
// border-radius: 8px;
// h3 {
// span {
// color: @color-blue-1;
// }
// .arrow-left {
// opacity: 1;
// }
// text-decoration: underline;
// text-decoration-color: @color-blue-1;
// }
// }

.homepage-group-items {
display: flex;
flex-flow: row wrap;
align-items: center;
gap: 4px;
.homepage-group-item {
border-radius: 4px;
border: 1px solid @color-gray-6;
background-color: white;
.font-rag-sans;
color: @color-blue-2;
font-weight: 300;
display: inline-flex;
justify-content: center;
align-items: center;
.desktop({
padding: 0 8px;
font-size: 20px;
line-height: 28px;
});
.mobile({
padding: 4px 8px;
font-size: 16px;
line-height: 20px;
});
cursor: pointer;
&:hover {
border: 1px solid @color-blue-6;
background: @color-blue-7;
color: @color-blue-0;
}
}
}
}
}
}

}
Expand Down
53 changes: 4 additions & 49 deletions projects/srm/src/app/homepage/homepage.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import { ApiService } from '../api.service';
import { HomepageEntry, Preset, TaxonomyItem, prepareQuery } from '../consts';
import { PlatformService } from '../platform.service';
import { SearchConfig } from '../search/search-config';
import { Router } from '@angular/router';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { fromEvent, timer } from 'rxjs';
import { UntilDestroy } from '@ngneat/until-destroy';
import { timer } from 'rxjs';
import { LayoutService } from '../layout.service';
import { SearchService } from '../search.service';
import { AnalyticsService } from '../analytics.service';
Expand All @@ -22,37 +21,15 @@ import { AnalyticsService } from '../analytics.service';
export class HomepageComponent implements AfterViewInit{

public searchConfig: SearchConfig;
groups: {
title: string,
query: string,
group_link: string,
items: HomepageEntry[]
}[] = [];

@ViewChild('search') search: ElementRef;
@ViewChild('homepageGroups') homepageGroups: ElementRef;
searchVisibleObserver: IntersectionObserver;
searchVisible = true;

constructor(private api: ApiService, private platform: PlatformService, private router: Router, private layout: LayoutService, private searchSvc: SearchService, private analytics: AnalyticsService) {
constructor(private api: ApiService, private platform: PlatformService, private router: Router, public layout: LayoutService, private searchSvc: SearchService, private analytics: AnalyticsService) {
this.searchConfig = new SearchConfig(this, this.router, this.api, this.platform, () => {});
this.searchConfig.autoFocus = false;
api.getHomepage().subscribe((homepage) => {
const groups: any = [];
homepage.forEach((entry: HomepageEntry) => {
if (!entry.title && !groups[entry.group]) {
const entries: HomepageEntry[] = [];
groups[entry.group] = entries;
this.groups.push({ title: entry.group, query: entry.query, group_link: entry.group_link, items: entries});
}
});
homepage.forEach((entry: HomepageEntry) => {
if (!!entry.title && groups[entry.group]) {
groups[entry.group].push(entry);
}
});
this.resizeGroupItems();
});
}

ngAfterViewInit(): void {
Expand All @@ -67,28 +44,6 @@ export class HomepageComponent implements AfterViewInit{
}
}, options);
this.searchVisibleObserver.observe(this.search.nativeElement);
this.resizeGroupItems();
fromEvent(window, 'resize').pipe(
untilDestroyed(this),
).subscribe(() => {
console.log('RESIZE');
this.resizeGroupItems();
});
});
}

resizeGroupItems() {
this.platform.browser(() => {
timer(0).subscribe(() => {
const el = this.homepageGroups.nativeElement as HTMLElement;
const items = el.querySelectorAll('.homepage-group') as NodeListOf<HTMLElement>;
items.forEach((item: HTMLElement) => {
const rowHeight = parseInt(getComputedStyle(el).getPropertyValue('grid-auto-rows'));
const rowGap = parseInt(getComputedStyle(el).getPropertyValue('grid-row-gap'));
const rowSpan = Math.ceil((item.getBoundingClientRect().height + rowGap)/(rowHeight + rowGap));
item.style.gridRowEnd = 'span ' + rowSpan;
});
});
});
}

Expand Down
35 changes: 35 additions & 0 deletions projects/srm/src/app/quicklinks/quicklinks.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<div class='homepage-groups' #homepageGroups>
@for (group of groups; track group.title) {
<div class='homepage-group' [style.gridRowEnd]='"span 15"'>
<div class='homepage-group-title'>
<h3>
<img src='../../assets/img/filter-category-icon-title.svg'>
<span>{{group.title}}</span>
<span *ngIf='(!!group.query)' class='arrow-left'></span>
</h3>
</div>
<div class='homepage-group-items'>
@for (item of group.items; track item.query) {
<a class='homepage-group-item' [routerLink]='["/s", item.query]'
[queryParams]="{from: 'homepage-group-item'}"
interactionEvent='homepage-link' interactionEventWhere='homepage' [interactionEventContent]='item.title'
clickOnReturn>
<img src='../../assets/img/filter-category-icon.svg'>
<span>
{{item.title}}
</span>
</a>
}
</div>
<a *ngIf='(!!group.query && !!group.group_link)'
class='homepage-group-more'
[routerLink]='["/s", group.query]'
[queryParams]="{from: 'homepage-group-more'}"
interactionEvent='homepage-link-group' interactionEventWhere='homepage' [interactionEventContent]='group.title'
clickOnReturn>
<span class='after'></span>
<span>{{group.group_link}}</span>
</a>
</div>
}
</div>
Loading

0 comments on commit ecd6265

Please sign in to comment.