Skip to content

Commit

Permalink
fixes kolzchut/srm#845
Browse files Browse the repository at this point in the history
  • Loading branch information
@akariv
akariv committed Jul 21, 2024
1 parent b151e66 commit fab71e8
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 13 deletions.
1 change: 1 addition & 0 deletions projects/srm/src/app/consts.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,7 @@ export type Preset = {
export type HomepageEntry = {
group: string,
title: string,
group_link: string,
situation_id: string,
response_id: string,
query: string,
Expand Down
11 changes: 10 additions & 1 deletion projects/srm/src/app/homepage/homepage.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ <h1 class='tagline'>
<app-desktop-menu-links [homepage]='true'></app-desktop-menu-links>
</div>

<div class='homepage-groups'>
<div class='homepage-groups' #homepageGroups>
@for (group of groups; track group.title) {
<div class='homepage-group' [class.hovered]='hovered === group.title'
(mouseover)='hovered = group.title' (mouseleave)='hovered = null'
Expand Down Expand Up @@ -76,6 +76,15 @@ <h3>
clickOnReturn>{{item.title}}</a>
}
</div>
@if (!!group.query && !!group.group_link) {
<a [routerLink]='["/s", group.query]'
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>
Expand Down
49 changes: 41 additions & 8 deletions projects/srm/src/app/homepage/homepage.component.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -322,21 +322,21 @@
}

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

h2 {
padding: 0 24px;
}
Expand All @@ -350,6 +350,7 @@
width: 100%;
.desktop({
max-width: 260px;
height: min-content;
});

.homepage-group-title {
Expand Down Expand Up @@ -392,20 +393,52 @@
}
}

.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;
}
}

.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-white;
background: @color-blue-8;
border-radius: 8px;
h3 {
span {
color: @color-blue-1;
}
.arrow-left {
opacity: 1;
}
}
text-decoration: underline;
}
.homepage-group-more {
text-decoration: underline;
}
}

Expand Down
29 changes: 26 additions & 3 deletions projects/srm/src/app/homepage/homepage.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ 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 } from '@ngneat/until-destroy';
import { timer } from 'rxjs';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { fromEvent, timer } from 'rxjs';
import { LayoutService } from '../layout.service';
import { SearchService } from '../search.service';

Expand All @@ -24,11 +24,13 @@ export class HomepageComponent implements AfterViewInit{
groups: {
title: string,
query: string,
group_link: string,
items: HomepageEntry[]
}[] = [];
hovered: string | null = null;

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

Expand All @@ -41,14 +43,15 @@ export class HomepageComponent implements AfterViewInit{
if (!entry.title && !groups[entry.group]) {
const entries: HomepageEntry[] = [];
groups[entry.group] = entries;
this.groups.push({ title: entry.group, query: entry.query, items: 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();
});
}

Expand All @@ -64,6 +67,26 @@ 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() {
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
2 changes: 1 addition & 1 deletion projects/srm/src/index.prod.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-N6QJLRL');
function gtag(i){dataLayer.push(i)};
function gtag(i){window.dataLayer = window.dataLayer || [];dataLayer.push(i)};
</script>
<!-- End Google Tag Manager -->
</head>
Expand Down

0 comments on commit fab71e8

Please sign in to comment.