sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-31 09:37:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merged PR 1532: #4064 Responsive Design Article Result List new Grid Layout

Browse Source 
#4064 Responsive Design Article Result List new Grid Layout
This commit is contained in:
Nino Righi
2023-05-31 13:32:48 +00:00
committed by Lorenz Hilpert
parent fb1fd1ec7c
commit eb7a01907a
5 changed files with 46 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.html
View File

@@ -20,24 +20,19 @@
<ng-template #mainOutlet>
<div class="bg-ucla-blue rounded w-[3rem] h-[4.125rem] animate-[load_1s_linear_infinite]"></div>
<div class="flex flex-col ml-4 w-[30%]">
<div class="h-4 bg-ucla-blue mb-2 w-[7.8125rem] animate-[load_1s_linear_infinite]"></div>
<div class="h-6 bg-ucla-blue mb-2 w-[12.5rem] animate-[load_1s_linear_infinite]"></div>
<div class="h-6 bg-ucla-blue w-[12.5rem] animate-[load_1s_linear_infinite]"></div>
<div class="flex flex-col ml-4 w-[36.6%]">
<div class="h-4 bg-ucla-blue mb-2 w-[8.8125rem] animate-[load_1s_linear_infinite]"></div>
<div class="h-6 bg-ucla-blue mb-2 w-[13.5rem] animate-[load_1s_linear_infinite]"></div>
<div class="h-6 bg-ucla-blue w-[13.5rem] animate-[load_1s_linear_infinite]"></div>
</div>
<div class="flex flex-col ml-14 w-[30%]">
<div class="h-4 bg-ucla-blue mb-2 w-[7.8125rem] animate-[load_1s_linear_infinite]"></div>
<div class="h-4 bg-ucla-blue mb-2 w-[7.8125rem] animate-[load_1s_linear_infinite]"></div>
<div class="h-4 bg-ucla-blue w-[7.8125rem] animate-[load_1s_linear_infinite]"></div>
<div class="flex flex-col w-[32.5%]">
<div class="h-4 bg-ucla-blue mb-2 w-[8.8125rem] animate-[load_1s_linear_infinite]"></div>
<div class="h-4 bg-ucla-blue mb-2 w-[8.8125rem] animate-[load_1s_linear_infinite]"></div>
<div class="h-4 bg-ucla-blue w-[8.8125rem] animate-[load_1s_linear_infinite]"></div>
</div>
<div class="flex flex-col ml-10 w-[20%]">
<div class="h-4 bg-ucla-blue mb-2 w-[7.8125rem] animate-[load_1s_linear_infinite]"></div>
<div class="h-4 bg-ucla-blue mb-2 w-[7.8125rem] animate-[load_1s_linear_infinite]"></div>
<div class="h-4 bg-ucla-blue w-[7.8125rem] animate-[load_1s_linear_infinite]"></div>
</div>
<div class="flex flex-col ml-2 w-[20%] items-end">
<div class="h-4 bg-ucla-blue mb-2 w-[7.8125rem] animate-[load_1s_linear_infinite]"></div>
<div class="h-4 bg-ucla-blue mb-2 w-[7.8125rem] animate-[load_1s_linear_infinite]"></div>
<div class="h-4 bg-ucla-blue w-[7.8125rem] animate-[load_1s_linear_infinite]"></div>
<div class="flex flex-col w-[20%]">
<div class="h-4 bg-ucla-blue mb-2 w-[8.8125rem] animate-[load_1s_linear_infinite]"></div>
<div class="h-4 bg-ucla-blue mb-2 w-[8.8125rem] animate-[load_1s_linear_infinite]"></div>
<div class="h-4 bg-ucla-blue w-[8.8125rem] animate-[load_1s_linear_infinite]"></div>
</div>
</ng-template>

20
apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.html
View File

@@ -38,7 +38,7 @@
[class.text-lg]="item?.product?.name?.length >= 40 && isTablet"
[class.text-md]="item?.product?.name?.length >= 50 && isTablet"
[class.text-p3]="item?.product?.name?.length >= 60 || !isTablet"
[class.text-xs]="item?.product?.name?.length >= 100 || (!isTablet && item?.product?.name?.length >= 70)"
[class.text-xs]="item?.product?.name?.length >= 100"
>
{{ item?.product?.name }}
</div>
@@ -52,7 +52,7 @@
src="assets/images/Icon_{{ item?.product?.format }}.svg"
[alt]="item?.product?.formatDetail"
/>
{{ item?.product?.formatDetail | substr: 25 }}
{{ item?.product?.formatDetail | substr: 30 }}
</div>
</div>
@@ -65,7 +65,10 @@
{{ publicationDate }}
</div>
<div class="page-search-result-item__item-price desktop-small:text-p3 font-bold justify-self-end">
<div
class="page-search-result-item__item-price desktop-small:text-p3 font-bold justify-self-end"
[class.page-search-result-item__item-price-main]="mainOutletActive$ | async"
>
{{ item?.catalogAvailability?.price?.value?.value | currency: 'EUR':'code' }}
</div>
@@ -111,12 +114,13 @@
</ui-tooltip>
<div
class="page-search-result-item__item-ssc desktop-small:text-p3 justify-self-start"
[class.justify-self-end]="!(mainOutletActive$ | async)"
[class.xs]="item?.catalogAvailability?.sscText?.length >= 60"
class="page-search-result-item__item-ssc desktop-small:text-p3 w-full text-right overflow-hidden text-ellipsis whitespace-nowrap"
[class.page-search-result-item__item-ssc-main]="mainOutletActive$ | async"
>
<strong>{{ item?.catalogAvailability?.ssc }}</strong> -
{{ !isTablet ? item?.catalogAvailability?.sscText : (item?.catalogAvailability?.sscText | substr: 18) }}
<div class="hidden" [class.page-search-result-item__item-ssc-tooltip]="mainOutletActive$ | async">
{{ item?.catalogAvailability?.ssc }} - {{ item?.catalogAvailability?.sscText }}
</div>
<strong>{{ item?.catalogAvailability?.ssc }}</strong> - {{ item?.catalogAvailability?.sscText }}
</div>
</div>
</a>

24
apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.scss
View File

@@ -9,7 +9,7 @@
}
.page-search-result-item__item-grid-container {
@apply grid grid-flow-row gap-[0.375rem];
@apply grid grid-flow-row gap-y-[0.375rem] gap-x-6;
grid-template-areas:
'contributors contributors contributors'
'title title price'
@@ -23,11 +23,11 @@
.page-search-result-item__item-grid-container-main {
@apply gap-x-4;
grid-template-rows: 1.3125rem 1.3125rem auto;
grid-template-columns: 30% 30% 20% 8.8% auto;
grid-template-columns: 37.5% 32.5% 20% auto;
grid-template-areas:
'contributors format stock price .'
'title manufacturer ssc . select'
'title misc . . .';
'contributors format price .'
'title manufacturer stock select'
'title misc ssc .';
}
.page-search-result-item__item-contributors {
@@ -38,6 +38,10 @@
grid-area: price;
}
.page-search-result-item__item-price-main {
@apply justify-self-start;
}
.page-search-result-item__item-title {
grid-area: title;
}
@@ -66,6 +70,16 @@
grid-area: ssc;
}
.page-search-result-item__item-ssc:hover {
.page-search-result-item__item-ssc-tooltip {
@apply absolute whitespace-normal w-[25%] block rounded bg-white z-tooltip p-2 -mt-[2rem] -ml-[4rem] text-p2 shadow;
}
}
.page-search-result-item__item-ssc-main {
@apply text-left overflow-hidden text-ellipsis whitespace-nowrap;
}
.page-search-result-item__item-image {
box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.197935);
}

2
apps/page/catalog/src/lib/article-search/search-results/search-results.component.html
View File

@@ -40,7 +40,7 @@
<div class="page-search-results__order-by" [class.page-search-results__order-by-main]="mainOutletActive$ | async">
<shared-order-by-filter
[groupBy]="(mainOutletActive$ | async) ? [2, 2, 1, 1] : []"
[groupBy]="(mainOutletActive$ | async) ? [2, 2, 2] : []"
[orderBy]="(filter$ | async)?.orderBy"
(selectedOrderByChange)="search(); updateBreadcrumbs()"
>

12
apps/page/catalog/src/lib/article-search/search-results/search-results.component.scss
View File

@@ -49,21 +49,13 @@
::ng-deep page-search-results .page-search-results__order-by-main shared-order-by-filter {
@apply grid grid-flow-col justify-items-start gap-x-4 justify-start;
grid-template-columns: 30% 30% 20% 8.8% auto;
grid-template-columns: 37.5% 32.5% 20% auto;
.group {
@apply desktop-small:justify-start;
}
.group:last-child {
@apply justify-self-end;
.order-by-filter-button {
@apply ml-12 mr-0;
}
}
.order-by-filter-button {
@apply ml-0 mr-12;
@apply ml-0 mr-7;
}
}