diff --git a/package-lock.json b/package-lock.json index 42b69ba..e07c692 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3245,6 +3245,16 @@ "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", "dev": true }, + "bindings": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", + "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", + "dev": true, + "optional": true, + "requires": { + "file-uri-to-path": "1.0.0" + } + }, "bl": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz", @@ -4972,6 +4982,14 @@ "entities": "^2.0.0" } }, + "dom7": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.0.tgz", + "integrity": "sha512-xOJ0LAHFwktyj8Xljz4R2wzRI+Y9mR0plkMP0WlqtwqAkqn/vbdAyRifiW/w8mXe17LGktntcAwsQ5fKVDBNYg==", + "requires": { + "ssr-window": "^4.0.0" + } + }, "domelementtype": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz", @@ -5582,6 +5600,13 @@ "escape-string-regexp": "^1.0.5" } }, + "file-uri-to-path": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", + "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", + "dev": true, + "optional": true + }, "fill-range": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", @@ -8164,6 +8189,13 @@ "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==", "dev": true }, + "nan": { + "version": "2.15.0", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz", + "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==", + "dev": true, + "optional": true + }, "nanoid": { "version": "3.1.25", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.25.tgz", @@ -8225,14 +8257,6 @@ "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==", "dev": true }, - "ng-gallery": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/ng-gallery/-/ng-gallery-5.0.0.tgz", - "integrity": "sha512-RFnMLJss8XbR7mmaKW39adPe78uzPp+ttv0l1hraq6IRcebTK7Ltzp8dVVg+fzdbx+cTmadespR6nD/icgrckg==", - "requires": { - "tslib": "^2.0.0" - } - }, "nice-napi": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz", @@ -12328,6 +12352,11 @@ "tweetnacl": "~0.14.0" } }, + "ssr-window": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.0.tgz", + "integrity": "sha512-qCg6wJNeGNTVcPK2KFNfwtHU1gA3UZDZdxogu+Ys5+Ue5PMOENxUb7sscpAWWo4mWOBkJRCwQ50IlyA7qZ0hxw==" + }, "ssri": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz", @@ -12570,6 +12599,15 @@ } } }, + "swiper": { + "version": "7.0.7", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-7.0.7.tgz", + "integrity": "sha512-oCpbG0zdBUFKMGlVlcRjtIQCJhAh5Y1+yX9wSYkhC6W92OExETtLXuWdNUiBnXQbWCx3n7nfFD7mxaCnWWDjPA==", + "requires": { + "dom7": "^4.0.0", + "ssr-window": "^4.0.0" + } + }, "symbol-observable": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz", @@ -13551,7 +13589,11 @@ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", "dev": true, - "optional": true + "optional": true, + "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1" + } }, "glob-parent": { "version": "3.1.0", diff --git a/package.json b/package.json index 1a3eab2..e28253c 100644 --- a/package.json +++ b/package.json @@ -31,8 +31,8 @@ "angulartics2": "^10.0.0", "core-js": "^3.6.5", "material-design-icons": "^3.0.1", - "ng-gallery": "^5.0.0", "rxjs": "^6.6.3", + "swiper": "^7.0.7", "tslib": "^2.0.0", "zone.js": "~0.11.4" }, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 32dfd7f..3c3493a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -2,11 +2,10 @@ import { BrowserModule, Title } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; -import { DatePipe } from '@angular/common'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { FlexLayoutModule } from '@angular/flex-layout'; import { LinuxStoreAngularMaterialModule } from './linux-store-angular-material/linux-store-angular-material.module'; -import { GalleryModule } from 'ng-gallery'; +import { SwiperModule } from 'swiper/angular'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @@ -26,7 +25,7 @@ import { AppDetailsMainComponent } from './shared/app-details-main/app-details-m import { AppDetailsDescriptionComponent } from './shared/app-details-description/app-details-description.component'; import { AppDetailsExtraInfoComponent, - AppDetailsExtraInfoLicenseModalComponent + AppDetailsExtraInfoLicenseModalComponent, } from './shared/app-details-extra-info/app-details-extra-info.component'; import { AppDetailsReviewsComponent } from './shared/app-details-reviews/app-details-reviews.component'; import { HomeComponent } from './pages/home/home.component'; @@ -43,7 +42,6 @@ import { BadgesComponent } from './pages/badges/badges.component'; import { FeedsComponent } from './pages/feeds/feeds.component'; import { NotFoundComponent } from './pages/not-found/not-found.component'; - @NgModule({ declarations: [ AppComponent, @@ -75,11 +73,11 @@ import { NotFoundComponent } from './pages/not-found/not-found.component'; FormsModule, HttpClientModule, BrowserAnimationsModule, - GalleryModule, + SwiperModule, FlexLayoutModule, LinuxStoreAngularMaterialModule, AppRoutingModule, - Angulartics2Module.forRoot() + Angulartics2Module.forRoot(), ], providers: [ Title, @@ -87,6 +85,6 @@ import { NotFoundComponent } from './pages/not-found/not-found.component'; AnalyticsService, SeoService ], - bootstrap: [AppComponent] + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} diff --git a/src/app/linux-store-api.service.ts b/src/app/linux-store-api.service.ts index 460fc22..0bc88a3 100644 --- a/src/app/linux-store-api.service.ts +++ b/src/app/linux-store-api.service.ts @@ -49,6 +49,17 @@ export class LinuxStoreApiService { this.appDetailsCache[request] = app; this.performingRequest[request] = false; }), + map((app) => { + // Get rid of faulty screenshots + const filteredScreenshots = app.screenshots.filter( + (screenshot) => + !!screenshot.imgDesktopUrl || + !!screenshot.imgMobileUrl || + !!screenshot.thumbUrl + ); + app.screenshots = filteredScreenshots; + return app; + }), catchError(this.handleError('getApp', null)) ); } else { diff --git a/src/app/shared/app-details-description/app-details-description.component.html b/src/app/shared/app-details-description/app-details-description.component.html index 64fc39e..6da8da2 100644 --- a/src/app/shared/app-details-description/app-details-description.component.html +++ b/src/app/shared/app-details-description/app-details-description.component.html @@ -1,10 +1,65 @@
- -
-

Changes in version {{app.currentReleaseVersion}}

-
+
+ + + + + + + + +
+ + +
+ +
+

+ Changes in version {{ app.currentReleaseVersion }} +

+
diff --git a/src/app/shared/app-details-description/app-details-description.component.scss b/src/app/shared/app-details-description/app-details-description.component.scss index 2b53693..95ca28d 100644 --- a/src/app/shared/app-details-description/app-details-description.component.scss +++ b/src/app/shared/app-details-description/app-details-description.component.scss @@ -1,20 +1,5 @@ -gallery { - margin: 2vh 0; - background: transparent; - padding-top: 0; - - ::ng-deep image-item div { - background-size: contain; - background-repeat: no-repeat; - } -} - -.gallery-mobile{ - max-height: 200px; -} - -.gallery-desktop{ - min-height: 450px; +.gallery { + margin-bottom: 2vh; } .app-details-description { diff --git a/src/app/shared/app-details-description/app-details-description.component.ts b/src/app/shared/app-details-description/app-details-description.component.ts index e117cab..b9d375a 100644 --- a/src/app/shared/app-details-description/app-details-description.component.ts +++ b/src/app/shared/app-details-description/app-details-description.component.ts @@ -1,8 +1,16 @@ -import { Component, OnInit, Input } from '@angular/core'; -import { ImageItem, GalleryItem } from 'ng-gallery'; +import { Component, OnInit, Input, OnChanges } from '@angular/core'; import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'; import { App } from '../../shared/app.model'; +import SwiperCore, { + A11y, + Autoplay, + Navigation, + Scrollbar, + Thumbs, +} from 'swiper'; + +SwiperCore.use([Navigation, Thumbs, Autoplay, Scrollbar, A11y]); @Component({ selector: 'store-app-details-description', @@ -11,21 +19,29 @@ import { App } from '../../shared/app.model'; }) export class AppDetailsDescriptionComponent implements OnInit { @Input() app: App; - items: GalleryItem[]; showCurrentReleaseInfo = false; showThumbnails = true; + moreThenOneImage = true; isHandset = false; + thumbsSwiper: SwiperCore; + setThumbsSwiper(swiper: SwiperCore) { + this.thumbsSwiper = swiper; + } + constructor(breakpointObserver: BreakpointObserver) { breakpointObserver .observe([Breakpoints.HandsetLandscape, Breakpoints.HandsetPortrait]) .subscribe((result) => { - if (result.matches) { - this.isHandset = true; - } + this.isHandset = result.matches; + this.setShowThumbnails(); }); } + private setShowThumbnails() { + this.showThumbnails = this.moreThenOneImage && !this.isHandset; + } + ngOnInit() { if (this.app) { if ( @@ -37,14 +53,9 @@ export class AppDetailsDescriptionComponent implements OnInit { this.showCurrentReleaseInfo = true; } - if (this.app.screenshots && this.app.screenshots.length > 0) { - this.items = this.app.screenshots.map( - (item) => - new ImageItem({ src: item.imgDesktopUrl, thumb: item.thumbUrl }) - ); - this.showThumbnails = - this.items && this.items.length > 1 && !this.isHandset; - } + this.moreThenOneImage = + this.app.screenshots && this.app.screenshots.length > 1; + this.setShowThumbnails(); } } } diff --git a/src/styles.scss b/src/styles.scss index 2f8bf4f..f3b443a 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,5 +1,6 @@ /* Self hosted material design fonts */ -@import '~material-design-icons/iconfont/material-icons.css'; +@import "~material-design-icons/iconfont/material-icons.css"; +@import "swiper/css/bundle"; .app { height: 100vh; // emmet h100vh @@ -129,8 +130,8 @@ http://www.google.com/design/spec/layout/adaptive-ui.html#adaptive-ui-breakpoint padding-right: 5%; } - /* desktop-medium */ - @media all and (min-width: 841px) and (max-width: 1280px) { +/* desktop-medium */ +@media all and (min-width: 841px) and (max-width: 1280px) { .store-content-container-narrow { padding-left: 20%; padding-right: 20%; @@ -165,3 +166,13 @@ http://www.google.com/design/spec/layout/adaptive-ui.html#adaptive-ui-breakpoint padding-right: 32%; } } + +.thumbs .swiper-slide { + height: 70px; + width: 90px; + opacity: 0.4; +} + +.thumbs .swiper-slide-thumb-active { + opacity: 1; +}