diff --git a/frontend/package.json b/frontend/package.json index e9fc84f..f0ba260 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -30,6 +30,7 @@ "@fortawesome/free-solid-svg-icons": "^5.15.3", "@ng-bootstrap/ng-bootstrap": "11.0.0-beta.1", "@ngtools/webpack": "^12.0.4", + "@nguniversal/express-engine": "^11.1.0", "@tabby-gang/to-string-loader": "^1.1.7-beta.1", "@types/node": "^11.9.5", "@typescript-eslint/eslint-plugin": "^4.28.4", @@ -40,13 +41,16 @@ "core-js": "^3.14.0", "css-loader": "^2.1.0", "deepmerge": "^4.2.2", + "domino": "^2.1.6", "dotenv": "^10.0.0", "eslint": "^7.31.0", + "express": "^4.17.1", "file-loader": "^1.1.11", "html-loader": "^2.1.2", "html-webpack-plugin": "^5.3.2", "js-yaml": "^4.1.0", "mini-css-extract-plugin": "^2.1.0", + "ngx-image-zoom": "^0.6.0", "ngx-toastr": "^14.0.0", "node-sass": "^6.0.0", "pug": "^3.0.2", @@ -59,6 +63,7 @@ "script-loader": "^0.7.2", "semver": "^7.3.5", "source-code-pro": "^2.30.1", + "source-map-support": "^0.5.19", "source-sans-pro": "^2.45.0", "style-loader": "^0.23.1", "throng": "^5.0.0", @@ -67,10 +72,6 @@ "webpack": "^5.38.1", "webpack-bundle-analyzer": "^4.4.2", "webpack-cli": "^4.7.2", - "zone.js": "^0.11.4", - "@nguniversal/express-engine": "^11.1.0", - "domino": "^2.1.6", - "express": "^4.17.1", - "source-map-support": "^0.5.19" + "zone.js": "^0.11.4" } } diff --git a/frontend/src/app.module.ts b/frontend/src/app.module.ts index 34fe7f0..b46e7d4 100644 --- a/frontend/src/app.module.ts +++ b/frontend/src/app.module.ts @@ -9,6 +9,8 @@ import { HttpClientModule, HttpClientXsrfModule, HTTP_INTERCEPTORS } from '@angu import { ClipboardModule } from '@angular/cdk/clipboard' import { TransferHttpCacheModule } from '@nguniversal/common' import { FontAwesomeModule } from '@fortawesome/angular-fontawesome' +import { NgxImageZoomModule } from 'ngx-image-zoom' + import { BackendXsrfInterceptor, UniversalInterceptor } from './interceptor' import { AppComponent } from './components/app.component' import { MainComponent } from './components/main.component' @@ -59,6 +61,7 @@ const ROUTES = [ NgbModalModule, FontAwesomeModule, ClipboardModule, + NgxImageZoomModule, RouterModule.forRoot(ROUTES), ], providers: [ diff --git a/frontend/src/components/home.component.pug b/frontend/src/components/home.component.pug index bba2981..32e3c57 100644 --- a/frontend/src/components/home.component.pug +++ b/frontend/src/components/home.component.pug @@ -49,7 +49,10 @@ .container .row .col-12.col-xl-6 - img.screenshot([src]='screenshots.window', loading='lazy') + lib-ngx-image-zoom( + [fullImage]='screenshots.window', + [thumbImage]='screenshots.window' + ) .col-12.col-xl-6 h1 The important stuff ul @@ -79,13 +82,19 @@ li Optional #[strong global hotkey] to focus/hide the terminal li Bracketed paste .col-12.col-xl-6 - img.screenshot([src]='screenshots.tabs', loading='lazy') + lib-ngx-image-zoom( + [fullImage]='screenshots.tabs', + [thumbImage]='screenshots.tabs' + ) .section.section-a .container .row .col-12.col-xl-6 - img.screenshot([src]='screenshots.ssh', loading='lazy') + lib-ngx-image-zoom( + [fullImage]='screenshots.ssh', + [thumbImage]='screenshots.ssh' + ) .col-12.col-xl-6 h1 SSH Client ul @@ -110,13 +119,19 @@ li Optional #[strong portable mode] li Current directory detection that works .col-12.col-xl-6 - img.screenshot([src]='screenshots.win', loading='lazy') + lib-ngx-image-zoom( + [fullImage]='screenshots.win', + [thumbImage]='screenshots.win' + ) .section.section-a .container .row .col-12.col-xl-6 - img.screenshot([src]='screenshots.serial', loading='lazy') + lib-ngx-image-zoom( + [fullImage]='screenshots.serial', + [thumbImage]='screenshots.serial' + ) .col-12.col-xl-6 h1 Serial Terminal ul diff --git a/frontend/src/components/home.component.scss b/frontend/src/components/home.component.scss index 33717a4..55533c6 100644 --- a/frontend/src/components/home.component.scss +++ b/frontend/src/components/home.component.scss @@ -96,11 +96,6 @@ strong { .section { padding: 50px 0; - - .screenshot { - min-width: 0; - max-width: 100%; - } } .section-a { @@ -109,3 +104,14 @@ strong { .section-b { } + +::ng-deep lib-ngx-image-zoom { + width: 100%; + display: block; + + img { + min-width: 100px; + max-width: 100%; + width: 100%; +} +} diff --git a/frontend/yarn.lock b/frontend/yarn.lock index b5227d3..a91e7b4 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -3084,6 +3084,11 @@ neo-async@^2.6.2: resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f" integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw== +ngx-image-zoom@^0.6.0: + version "0.6.0" + resolved "https://registry.yarnpkg.com/ngx-image-zoom/-/ngx-image-zoom-0.6.0.tgz#643dd775c62cf7b4845033bf4566c21f89c20a37" + integrity sha512-XWuC+bHvYr02C7TcnkK7Dv4BgohTt59sJNaaKRJ6p0js8tYuZdO0kiKVYgTBBctMuAd5hzXbbZgCjrmeG1Pmdw== + ngx-toastr@^14.0.0: version "14.0.0" resolved "https://registry.yarnpkg.com/ngx-toastr/-/ngx-toastr-14.0.0.tgz#20e4737ef330b892a453768cd98b980558aeb286"