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

mobile images swiper css

master
Boris Voropaev 2023-11-23 10:17:40 +03:00
parent a7acdc96f1
commit 5a7092e16e
6 changed files with 254 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/_modules/pages/sections/item/page-section.component.scss
View File

@ -1,16 +1 @@
.section {
margin-top: 24px;
display: flex;
flex-direction: column;
}
@media screen and (max-width: 768px) {
.section {
.content {
images-section {
width: 100%;
}
}
}
}

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

@ -1,7 +1,7 @@
<div *ngIf="items?.length">
<div *ngIf="imageType!=='carousel'&&!(imageType=='large-preview'&&items.length==1)"
class="items" [ngClass]="imageClass">
class="items" [ngClass]="imageType">
<div class="item" *ngFor="let item of items; let i = index">
<img [src]="item.links?.full" (click)="show(i)"/>
</div>

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

@ -1,213 +0,0 @@
.mobile{
display: none;
}
.desctop{
display: flex;
}
.close{
position: absolute;
top:24px;
right: 24px;
}
.items {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
gap: 8px;
img{
border: 1px solid var(--second-dis);
}
&.small{
.item{
margin-bottom: 16px;
img{
max-height: 273px;
max-width: 273px;
}
}
}
&.large{
display: flex;
flex-direction: column;
.item{
max-width: 100%;
margin-bottom: 32px;
img{
max-height: 468px;
max-width: 100%;
}
}
}
.item {
position: relative;
img {
cursor: pointer;
}
&:last-child {
margin-bottom: 0;
}
&.full-width {
display: flex;
flex-direction: column;
img {
width: 100%;
height: auto;
}
}
}
}
.carousel {
width: 100%;
display: flex;
align-items: center;
justify-content:center;
gap: 24px;
.prev, .next {
cursor: pointer;
z-index: 1;
&.prev{
left:0;
}
&.next{
right:0;
}
}
.center {
width: 600px;
}
}
.slide {
width: 600px;
height: 450px;
display: block;
img {
object-fit: cover;
width: 100%;
height: 100%;
}
}
.fullscreen {
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
position: fixed;
align-items: center;
justify-content: center;
background-color: rgba(37, 46, 52, 60%);
.content {
position: fixed;
display: flex;
pointer-events: none;
width: calc(100vw - 2 * 24px);
height: calc(100vh - 2 * 24px);
left: 24px;
right: 24px;
*{
pointer-events:all;
}
img {
object-fit: contain;
width: 100%;
height: 100%;
}
.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;
}
}
.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(--prime);
img{
width: 100%;
height: 100%;
object-fit:cover;
};
};
}
}
@media screen and (max-width: 480px) {
.desctop{
display: none !important;
}
.mobile{
display: flex !important;
}
.fullscreen {
.content {
position: fixed;
display: flex;
pointer-events: none;
width:100vw;
height:100vh;
left: 0;
right: 0;
}
.prev{
z-index: 5;
margin-right: -50px;
}
.next{
z-index: 5;
margin-left: -50px;
}
}
}

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

@ -46,13 +46,7 @@ export class ImagesSectionComponent {
let type = this.objectsService.getValue(this.section, 'image-type');
return type.name;
}
get imageClass(){
return {
small : this.imageType=='tiles',
large : this.imageType=='full-width',
carousel: this.imageType=='carousel'
}
}
set photo(activePhoto: string) {
this.activePhoto = activePhoto
}

252
src/assets/css/_pages-section.scss
View File

@ -1,3 +1,12 @@
pages-section{
.section {
margin-top: 24px;
display: flex;
flex-direction: column;
}
}
add-section{
.add{
position: relative;
@ -42,4 +51,247 @@ cards-section-items{
}
}
}
}
images-section{
display: block;
.mobile{
display: none;
}
.desctop{
display: flex;
}
.close{
position: absolute;
top:24px;
right: 24px;
}
.items {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
gap: 8px;
img{
border: 1px solid var(--second-dis);
}
&.tiles{
.item{
margin-bottom: 16px;
img{
max-height: 273px;
max-width: 273px;
}
}
}
&.full-width{
display: flex;
flex-direction: column;
.item{
max-width: 100%;
margin-bottom: 32px;
img{
max-height: 468px;
max-width: 100%;
}
}
}
.item {
position: relative;
img {
cursor: pointer;
}
&:last-child {
margin-bottom: 0;
}
&.full-width {
display: flex;
flex-direction: column;
img {
width: 100%;
height: auto;
}
}
}
}
.carousel {
width: 100%;
display: flex;
align-items: center;
justify-content:center;
gap: 24px;
.prev, .next {
cursor: pointer;
z-index: 1;
&.prev{
left:0;
}
&.next{
right:0;
}
}
.center {
width: 600px;
}
}
.slide {
width: 600px;
height: 450px;
display: block;
img {
object-fit: cover;
width: 100%;
height: 100%;
}
}
.fullscreen {
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
position: fixed;
align-items: center;
justify-content: center;
background-color: rgba(37, 46, 52, 60%);
.content {
position: fixed;
display: flex;
pointer-events: none;
width: calc(100vw - 2 * 24px);
height: calc(100vh - 2 * 24px);
left: 24px;
right: 24px;
*{
pointer-events:all;
}
img {
object-fit: contain;
width: 100%;
height: 100%;
}
.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;
}
}
.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(--prime);
img{
width: 100%;
height: 100%;
object-fit:cover;
};
};
}
}
@media screen and (max-width: 700px){
.carousel {
.prev, .next {
cursor: pointer;
z-index: 1;
position: absolute;
&.prev{
left: 36px;
z-index: 2;
}
&.next{
right: 36px;
}
}
.center {
width: 100%;
.slide {
width: calc( 100vw - 80px );
height: calc( (100vw - 80px) * 0.75 );
img {
}
}
}
}
}
@media screen and (max-width: 480px) {
.desctop{
display: none !important;
}
.mobile{
display: flex !important;
}
.fullscreen {
.content {
position: fixed;
display: flex;
pointer-events: none;
width:100vw;
height:100vh;
left: 0;
right: 0;
}
.prev{
z-index: 5;
margin-right: -50px;
}
.next{
z-index: 5;
margin-left: -50px;
}
}
}
}

22
src/environments/environment.ts
View File

@ -1,22 +0,0 @@
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.
export const environment = {
production: false,
apiUrl: 'http://api.nircms.lc',
clientId: 2,
clientSecret: 'X3UeoxxgzZTmBKRMlU1SESlDsAShzctArHucncE4',
project: null,
defaultLocale: 'ru'
};
/*
* For easier debugging in development mode, you can import the following file
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
*
* This import should be commented out in production mode because it will have a negative impact
* on performance if an error is thrown.
*/
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.