Andrey
/
object-type-constructor-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mobile image section

master
Boris Voropaev 2023-09-29 12:40:15 +03:00
parent 58865b32a1
commit c08fed5484
6 changed files with 160 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/app/_modules/pages/sections/types/basic/images/images-section.component.html
View File

@ -1,22 +1,22 @@
<div *ngIf="items?.length">
<div class="first" [ngClass]="imageClass">
<img class="" [src]="items[0].links.full" (click)="show(items[0].id)"/>
<img class="" [src]="items[0].links.full" (click)="show(0)"/>
</div>
<div *ngIf="imageType!=='carousel'&&!(imageType=='large-preview'&&items.length==1)"
class="items" [ngClass]="imageClass">
<div class="item" *ngFor="let item of items">
<img [src]="item.links?.full" (click)="show(item.id)"/>
<div class="item" *ngFor="let item of items; let i = index">
<img [src]="item.links?.full" (click)="show(i)"/>
</div>
</div>
<div *ngIf="imageType==='carousel'" class="carousel" id="section-{{section.id}}">
<div class="prev">
<img src="/assets/images/icons/chevron_left_48dp.svg"/>
<img src="/assets/images/icons/left_50.svg"/>
</div>
<div class="center">
<div class="content">
<swiper [config]="config">
<ng-template ngFor let-item [ngForOf]="items">
<ng-template swiperSlide>
@ -28,24 +28,33 @@
</swiper>
</div>
<div class="next">
<img src="/assets/images/icons/chevron_right_48dp.svg"/>
<img src="/assets/images/icons/right_50.svg"/>
</div>
</div>
<div *ngIf="showFullscreen" class="fullscreen">
<div class="close" (click)="showFullscreen = false"></div>
<div *ngIf="items.length > 1" class="left" (click)="go('decrement')">
<img *ngIf="backId!==''" src="/assets/images/icons/chevron_left_white_48dp.svg"/>
</div>
<div class="center">
<div class="photo"><img [src]="photo"/></div>
</div>
<div *ngIf="items.length > 1" class="right" (click)="go('increment')">
<img *ngIf="nextId!==''" src="/assets/images/icons/chevron_right_white_48dp.svg"/>
</div>
</div>
<div class="content center">
<img [src]="photo"/>
</div>
<div class="content between">
<div class="close" (click)="showFullscreen = false">
<img src="/assets/images/icons/close_50.svg"/>
</div>
<div *ngIf="items.length > 1" class="left" (click)="go('decrement')">
<img *ngIf="backId!==''" src="/assets/images/icons/left_50.svg"/>
</div>
<div *ngIf="items.length > 1" class="right" (click)="go('increment')">
<img *ngIf="nextId!==''" src="/assets/images/icons/right_50.svg"/>
</div>
</div>
<div class="content center bottom">
<div class="thumbnails" *ngFor="let item of items; let i = index">
<img [src]="item.links?.full" (click)="show(i)"/>
</div>
</div>
</div>
</div>
<!-- <span style="white-space: pre-wrap;">

124
src/app/_modules/pages/sections/types/basic/images/images-section.component.scss
View File

@ -2,18 +2,14 @@
display: none;
&.large-preview{
display: block;
width: 663px;
height: 468px;
max-width: 80vw;
max-height: 49vw;
width: 100%;
max-width: 720px;
margin-bottom: 8px;
border-radius: 12px;
border: 1px solid rgba(45, 45, 45, 0.27);
overflow: hidden;
img{
object-fit: cover;
width: 100%;
height: 100%;
}
}
}
@ -140,46 +136,90 @@
align-items: center;
justify-content: center;
background-color: rgba(37, 46, 52, 60%);
.close{
position: absolute;
top:24px;
.content {
position: fixed;
display: flex;
pointer-events: none;
width: calc(100vw - 2 * 24px);
height: calc(100vh - 2 * 24px);
left: 24px;
right: 24px;
width: 48px;
height: 48px;
border-radius: 24px;
background: url('~src/assets/images/icons/close_blue_24dp.svg') center no-repeat;
background-color: #fff;
border: 2px solid var(--blue-1);
}
.left {
width: 72px;
flex-grow: 0;
display: flex;
cursor: pointer;
align-items: center;
justify-content: center;
}
.center {
flex-grow: 1;
display: flex;
justify-content: center;
width: 100%;
max-width: calc(100% - 144px);
*{
pointer-events:all;
}
img {
max-width: 100%;
width: auto;
height: 100%;
max-height: calc(100vh - 2 * 24px);
background-color: #fff;
object-fit: contain;
width: 100%;
height: 100%;
}
.close{
position: absolute;
top:24px;
right: 24px;
}
.left {
width: 72px;
flex-grow: 0;
display: flex;
cursor: pointer;
align-items: center;
justify-content: center;
}
.right {
width: 72px;
flex-grow: 0;
display: flex;
cursor: pointer;
align-items: center;
justify-content: center;
}
}
.right {
width: 72px;
flex-grow: 0;
display: flex;
cursor: pointer;
align-items: center;
justify-content: center;
.between{
justify-content:space-between;
}
.center{
justify-content:center;
}
.bottom{
align-items: flex-end;
gap: 8px;
.thumbnails{
position: static;
display: block;
width: 72px;
height: 52px;
border: 2px solid var(--blue-1);
img{
width: 100%;
height: 100%;
object-fit:cover;
};
};
}
}
@media screen and (max-width: 480px) {
.fullscreen {
.content {
position: fixed;
display: flex;
pointer-events: none;
width: calc(100vw - 2 * 16px);
height: calc(100vh - 2 * 16px);
left: 16px;
right: 16px;
}
}
}

7
src/app/_modules/pages/sections/types/basic/images/images-section.component.ts
View File

@ -84,17 +84,18 @@ export class ImagesSectionComponent {
})
}
show(id: string): void {
show(i:number): void {
this.parsedPhotos?.forEach((photo: any) => {
if (photo.id === id) {
if (photo.id === this.items[i].id) {
this.photo = photo.links.full
this.showFullscreen = true
}
})
this.activeIndex = i;
}
go(how: string) {
this.show(this.showId)
this.show(this.activeIndex)
switch(how) {
case 'decrement':
this.activeIndex--

16
src/assets/images/icons/close_50.svg Normal file
View File

@ -0,0 +1,16 @@
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.65" filter="url(#filter0_d_1032_18617)">
<path d="M17.5334 32.3327L15.6667 30.466L23.1334 22.9993L15.6667 15.5327L17.5334 13.666L25.0001 21.1327L32.4667 13.666L34.3334 15.5327L26.8667 22.9993L34.3334 30.466L32.4667 32.3327L25.0001 24.866L17.5334 32.3327Z" fill="white"/>
</g>
<defs>
<filter id="filter0_d_1032_18617" x="3" y="3" width="44" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="3"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1032_18617"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1032_18617" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

16
src/assets/images/icons/left_50.svg Normal file
View File

@ -0,0 +1,16 @@
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.65" filter="url(#filter0_d_1032_18583)">
<path d="M24.966 6.99959C28.1373 6.99967 31.2374 7.94015 33.8742 9.7021C36.511 11.464 38.5661 13.9683 39.7796 16.8983C40.9931 19.8282 41.3106 23.0522 40.6918 26.1625C40.073 29.2729 38.5458 32.1299 36.3033 34.3723C33.2901 37.3491 29.2214 39.0128 24.9857 38.9999C20.75 38.9871 16.6915 37.2987 13.6964 34.3036C10.7013 31.3085 9.01293 27.25 9.00007 23.0143C8.98721 18.7786 10.6509 14.7099 13.6277 11.6967C15.1133 10.2031 16.8803 9.01896 18.8265 8.21272C20.7727 7.40648 22.8595 6.99415 24.966 6.99959ZM27.1197 33.03L29.4757 30.67L21.8253 23L29.4757 15.34L27.1197 12.98L17.0982 23L27.1197 33.03Z" fill="white"/>
</g>
<defs>
<filter id="filter0_d_1032_18583" x="3" y="3" width="44" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="3"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.251 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1032_18583"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1032_18583" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

16
src/assets/images/icons/right_50.svg Normal file
View File

@ -0,0 +1,16 @@
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.65" filter="url(#filter0_d_1032_18586)">
<path d="M25.0348 7.00005C21.8636 7.00014 18.7635 7.94057 16.1267 9.70245C13.4899 11.4643 11.4347 13.9685 10.2211 16.8984C9.00742 19.8282 8.68979 23.0522 9.30835 26.1625C9.92691 29.2729 11.4539 32.13 13.6962 34.3726C16.7095 37.3495 20.7783 39.0132 25.0142 39.0004C29.25 38.9875 33.3087 37.2992 36.3039 34.304C39.2991 31.3088 40.9874 27.2501 41.0003 23.0143C41.0131 18.7784 39.3494 14.7096 36.3725 11.6963C34.8869 10.203 33.1199 9.01904 31.1739 8.21295C29.2278 7.40687 27.1412 6.99462 25.0348 7.00005ZM22.8801 33.03L20.525 30.67L28.1747 23L20.525 15.34L22.8801 12.98L32.9019 23L22.8801 33.03Z" fill="white"/>
</g>
<defs>
<filter id="filter0_d_1032_18586" x="3.00037" y="3" width="44" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="3"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1032_18586"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1032_18586" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB