Skip to content

Images fix #254

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
imitev-bae wants to merge 3 commits into
base: feat/new-search-page
Choose a base branch
from
Open

Images fix #254

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5a433c5
reverting image styling of cards to old version to support old offers
imitev-solved May 19, 2026
54c6785
Allow looping between start and end of card carrousel
imitev-solved May 19, 2026
c6d11d4
apply same fix to featured cards in /browse page
imitev-solved May 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions src/app/pages/browse/browse.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,11 +114,12 @@ <h2 class="text-[28px] font-bold text-[#0b1220] sm:text-[32px] lg:text-[36px]">
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 popular-grid" [attr.data-direction]="popularDirection">
@for (offer of popularPages[page]; track offer.id) {
<div class="popular-card flex h-[438px] flex-col rounded-[20px] border border-[#d5dace] bg-white p-2">
<div class="h-[170px] w-full shrink-0 overflow-hidden rounded-[14px] bg-[#e2e9f5]">
<div class="relative h-[170px] w-full shrink-0 overflow-hidden rounded-[14px] bg-[#e2e9f5] flex justify-center items-center">
<div class="absolute inset-0 bg-cover bg-center opacity-75" [style.background-image]="'url(' + offer.imageUrl + ')'" style="filter: blur(20px);"></div>
<img
[src]="offer.imageUrl"
[alt]="offer.name"
class="h-full w-full object-cover"
class="relative z-10 h-full w-full object-contain"
/>
</div>
<div class="flex flex-1 flex-col gap-3 px-4 pt-6 pb-6">
Expand Down
21 changes: 13 additions & 8 deletions src/app/pages/dashboard/dashboard-services/dashboard-services.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,23 +18,28 @@ <h2 class="text-[32px] md:text-[38px] lg:text-[42px] font-extrabold text-[#0f172
</a>
</div>

<app-carousel [items]="productOfferings()" [visible]="visibleItems">
<app-carousel [items]="productOfferings()" [visible]="visibleItems" [loop]="true">
@for (productOffering of productOfferings(); track productOffering.id) {
<div class="shrink-0 px-3 md:px-4" [style.width.%]="100 / visibleItems">
<div class="bg-white rounded-2xl border shadow-sm hover:shadow-lg transition-all flex flex-col h-full">
<div class="flex flex-col w-full h-[460px] bg-white rounded-[16px] border border-[#D8DADE] hover:shadow-md transition-shadow font-[Blinker]">

<div class="h-52 rounded-t-2xl overflow-hidden">
<img [src]="getProductImage(productOffering)" class="w-full h-full object-contain" />
<div class="px-2 pt-2">
<div class="relative h-[180px] w-full rounded-xl bg-[#EBECEE] overflow-hidden flex justify-center items-center">
<div class="absolute inset-0 bg-cover bg-center opacity-75" [style.background-image]="'url(' + getProductImage(productOffering) + ')'" style="filter: blur(20px);"></div>
<img class="relative z-10 h-full w-full object-contain" [src]="getProductImage(productOffering)" alt="Product image">
</div>
</div>

<div class="p-6 flex flex-col flex-1">
<h3 class="text-xl font-bold text-slate-800">
<div class="flex-1 flex flex-col px-4 pt-4 pb-4 min-h-0">
<h3 class="text-[20px] font-bold leading-tight line-clamp-2 text-[#14274A] mb-2 break-words">
{{ productOffering.name }}
</h3>

<p class="mt-3 text-slate-600 text-sm line-clamp-3" [innerHTML]="productOffering.description"></p>
<div class="flex-1 min-h-0 overflow-hidden">
<p class="text-[14px] font-normal leading-[22px] text-[#0B1528] line-clamp-3" [innerHTML]="productOffering.description"></p>
</div>

<a class="mt-auto border-2 border-blue-700 text-blue-700 rounded-lg py-3 font-semibold flex items-center justify-center gap-2 hover:bg-blue-700 hover:text-white transition-all"
<a class="mt-4 border-2 border-blue-700 text-blue-700 rounded-lg py-2.5 font-semibold flex items-center justify-center gap-2 hover:bg-blue-700 hover:text-white transition-all"
[href]="'/search;keywords=' + productOffering.name">
{{ "DASHBOARD.marketplace.viewService" | translate }}
</a>
Expand Down
10 changes: 6 additions & 4 deletions src/app/pages/product-details/product-details.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,11 +62,13 @@
</div>
</div>

<div class="hidden lg:block rounded-2xl bg-[#EBECEE] aspect-[2/1] overflow-hidden">
<img class="h-full w-full object-cover" src="{{getProductImage()}}" alt="Product image">
<div class="relative hidden lg:block rounded-2xl bg-[#EBECEE] aspect-[2/1] overflow-hidden">
<div class="absolute inset-0 bg-cover bg-center opacity-75" [style.background-image]="'url(' + getProductImage() + ')'" style="filter: blur(20px);"></div>
<img class="relative z-10 h-full w-full object-contain" src="{{getProductImage()}}" alt="Product image">
</div>
<div class="lg:hidden rounded-2xl bg-[#EBECEE] aspect-[2/1] overflow-hidden">
<img class="h-full w-full object-cover" src="{{getProductImage()}}" alt="Product image">
<div class="relative lg:hidden rounded-2xl bg-[#EBECEE] aspect-[2/1] overflow-hidden">
<div class="absolute inset-0 bg-cover bg-center opacity-75" [style.background-image]="'url(' + getProductImage() + ')'" style="filter: blur(20px);"></div>
<img class="relative z-10 h-full w-full object-contain" src="{{getProductImage()}}" alt="Product image">
</div>
</div>

Expand Down
16 changes: 9 additions & 7 deletions src/app/shared/card/card.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@
<div (click)="goToProductDetails(productOff)" class="flex flex-col w-full h-[430px] bg-white rounded-[16px] border border-[#D8DADE] hover:shadow-md transition-shadow cursor-pointer font-[Blinker]">

<div class="px-2 pt-2">
<div class="h-[170px] w-full rounded-xl bg-[#EBECEE] overflow-hidden">
<img class="h-full w-full object-cover" src="{{getProductImage()}}" alt="Product image">
<div class="relative h-[170px] w-full rounded-xl bg-[#EBECEE] overflow-hidden flex justify-center items-center">
<div class="absolute inset-0 bg-cover bg-center opacity-75" [style.background-image]="'url(' + getProductImage() + ')'" style="filter: blur(20px);"></div>
<img class="relative z-10 h-full w-full object-contain" src="{{getProductImage()}}" alt="Product image">
</div>
</div>

Expand All @@ -12,7 +13,7 @@
<svg class="h-[18px] w-[18px] text-[#526179] shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21" />
</svg>
<span class="truncate min-w-0" [title]="orgInfo?.tradingName || prodSpec?.brand || ''">{{ orgInfo?.tradingName || prodSpec?.brand || 'Owner/Brand' }}</span>
<span class="truncate min-w-0" [title]="orgInfo?.tradingName || prodSpec.brand || ''">{{ orgInfo?.tradingName || prodSpec.brand || 'Owner/Brand' }}</span>
</div>

<h5 data-cy="searchOfferTitle" [ngClass]="{'break-all': hasLongWord(productOff?.name, 20), 'break-words': !hasLongWord(productOff?.name, 20)}"
Expand All @@ -37,8 +38,9 @@
<div (click)="goToProductDetails(productOff)" class="flex w-full bg-white rounded-[16px] border border-[#D8DADE] hover:shadow-md transition-shadow cursor-pointer font-[Blinker]">

<div class="p-2 pr-0 shrink-0">
<div class="h-full w-[260px] min-h-[180px] rounded-xl bg-[#EBECEE] overflow-hidden">
<img class="h-full w-full object-cover" src="{{getProductImage()}}" alt="Product image">
<div class="relative h-full w-[260px] min-h-[180px] rounded-xl bg-[#EBECEE] overflow-hidden flex justify-center items-center">
<div class="absolute inset-0 bg-cover bg-center opacity-75" [style.background-image]="'url(' + getProductImage() + ')'" style="filter: blur(20px);"></div>
<img class="relative z-10 h-full w-full object-contain" src="{{getProductImage()}}" alt="Product image">
</div>
</div>

Expand All @@ -47,7 +49,7 @@
<svg class="h-[18px] w-[18px] text-[#526179] shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21" />
</svg>
<span class="truncate min-w-0" [title]="orgInfo?.tradingName || prodSpec?.brand || ''">{{ orgInfo?.tradingName || prodSpec?.brand || 'Owner/Brand' }}</span>
<span class="truncate min-w-0" [title]="orgInfo?.tradingName || prodSpec.brand || ''">{{ orgInfo?.tradingName || prodSpec.brand || 'Owner/Brand' }}</span>
</div>

<h5 data-cy="searchOfferTitle" [ngClass]="{'break-all': hasLongWord(productOff?.name, 20), 'break-words': !hasLongWord(productOff?.name, 20)}"
Expand Down Expand Up @@ -76,7 +78,7 @@
<span class="font-semibold text-[#14274A]">{{ cheapestPrice.unit }}{{ cheapestPrice.price | number:'1.2-2' }}{{ cheapestPrice.text ? '/' + cheapestPrice.text : '' }}</span>
</div>
}
@if (prodSpec?.brand) {
@if (prodSpec.brand) {
<div class="border-l border-gray-200 pl-6">
<span class="text-[12px] text-[#8896A8] block">Technology</span>
<span class="font-medium text-[#14274A]">{{ prodSpec.brand }}</span>
Expand Down
4 changes: 2 additions & 2 deletions src/app/shared/carousel/carousel.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div [class]="wrapperClass">

<button (click)="prev()" [disabled]="index === 0" [class]="leftButtonClass">
<button (click)="prev()" [disabled]="!loop && index === 0" [class]="leftButtonClass">

<fa-icon [icon]="faChevronLeft">
</fa-icon>
Expand All @@ -24,7 +24,7 @@



<button (click)="next()" [disabled]="index === maxIndex" [class]="rightButtonClass">
<button (click)="next()" [disabled]="!loop && index === maxIndex" [class]="rightButtonClass">

<fa-icon [icon]="faChevronRight">
</fa-icon>
Expand Down
11 changes: 11 additions & 0 deletions src/app/shared/carousel/carousel.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,9 @@ export class CarouselComponent<T> implements OnChanges {
@Input()
sidePadding = true;

@Input()
loop = false;

/**
* Current visible index.
*
Expand Down Expand Up @@ -255,6 +258,10 @@ export class CarouselComponent<T> implements OnChanges {
* Move forward by one step.
*/
next(): void {
if (this.loop && this.index >= this.maxIndex) {
this.index = 0;
return;
}
this.index = Math.min(
this.index + 1,
this.maxIndex
Expand All @@ -265,6 +272,10 @@ export class CarouselComponent<T> implements OnChanges {
* Move backward by one step.
*/
prev(): void {
if (this.loop && this.index <= 0) {
this.index = this.maxIndex;
return;
}
this.index = Math.max(
this.index - 1,
0
Expand Down