* user selection disabled

* animations added
* history handling fixed

.angular-cli.json

@@ -19,6 +19,7 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
+        "../node_modules/normalize.css/normalize.css",
         "assets/css/font-awesome.css",
         "styles.css"
       ],
@@ -41,6 +42,7 @@
       "tsconfig": "tsconfig.app-ssr.json",
       "prefix": "app",
       "styles": [
+        "../node_modules/normalize.css/normalize.css",
         "assets/css/font-awesome.css",
         "styles.css"
       ],

package-lock.json

@@ -5273,6 +5273,11 @@
         "sort-keys": "1.1.2"
       }
     },
+    "normalize.css": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-7.0.0.tgz",
+      "integrity": "sha1-q/sd2CRwZ04DIrU86xqvQSk45L8="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",

package.json

@@ -24,6 +24,7 @@
     "@angular/platform-server": "^4.3.3",
     "@angular/router": "^4.2.4",
     "core-js": "^2.4.1",
+    "normalize.css": "^7.0.0",
     "pm2": "^2.6.1",
     "rxjs": "^5.4.2",
     "zone.js": "^0.8.14"

src/app/animations/fade-in.animation.ts

@@ -0,0 +1,14 @@
+import {trigger, state, animate, transition, style} from '@angular/animations';
+
+export const fadeInAnimation =
+  trigger('fadeInAnimation', [
+    // route 'enter' transition
+    transition(':enter', [
+
+      // styles at start of transition
+      style({opacity: 0}),
+
+      // animation and styles at end of transition
+      animate('3s', style({opacity: 1}))
+    ]),
+  ]);

src/app/animations/index.ts

@@ -0,0 +1,2 @@
+export * from './fade-in.animation';
+export * from './slide-in-out.animation';

src/app/animations/slide-in-out.animation.ts

@@ -0,0 +1,51 @@
+import {trigger, state, animate, transition, style} from '@angular/animations';
+
+export const slideInOutAnimation =
+  trigger('slideInOutAnimation', [
+
+    // end state styles for route container (host)
+    state('*', style({
+      // the view covers the whole screen with a semi tranparent background
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      // backgroundColor: 'rgba(0, 0, 0, 0.8)'
+    })),
+
+    // route 'enter' transition
+    transition(':enter', [
+
+      // styles at start of transition
+      style({
+        // start with the content positioned off the right of the screen,
+        // -400% is required instead of -100% because the negative position adds to the width of the element
+        top: '-100%',
+
+        // start with background opacity set to 0 (invisible)
+        // backgroundColor: 'rgba(0, 0, 0, 0)'
+      }),
+
+      // animation and styles at end of transition
+      animate('.5s ease-in-out', style({
+        // transition the right position to 0 which slides the content into view
+        top: 0,
+
+        // transition the background opacity to 0.8 to fade it in
+        // backgroundColor: 'rgba(0, 0, 0, 0.8)'
+      }))
+    ]),
+
+    // route 'leave' transition
+    transition(':leave', [
+      // animation and styles at end of transition
+      animate('.5s ease-in-out', style({
+        // transition the right position to -400% which slides the content out of view
+        top: '-100%',
+
+        // transition the background opacity to 0 to fade it out
+        // backgroundColor: 'rgba(0, 0, 0, 0)'
+      }))
+    ])
+  ]);

src/app/app.module.ts

@@ -1,4 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations"
 import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -13,6 +14,7 @@ import { GalleryModule } from "./gallery/gallery.module";
     BrowserModule.withServerTransition({
       appId: 'angullary'
     }),
+    BrowserAnimationsModule,
     AppRoutingModule,
     GalleryModule,
   ],

src/app/gallery/album/album.component.ts

@@ -32,20 +32,26 @@ export class AlbumComponent implements OnInit {
 
     constructor(private titleService: Title,
                 private route: ActivatedRoute,
-              private displayImageService: DisplayImageService) {}
+                private displayImageService: DisplayImageService) {
+    }
 
     ngOnInit() {
         this.route.data.subscribe((data: { albums: Array<Album> }) => {
             this.album = data.albums.find(album => album.slug == this.route.snapshot.params.slug);
             this.titleService.setTitle(`${this.album.name} - photos.yvan.hu`);
             this.initThumbnails();
-      if(this.route.snapshot.params.image) {
+            this.route.params.subscribe((params: {
+                slug: string,
+                image: string
+            }) => {
+                if (params.image) {
                     this.imageClick(
-          this.route.snapshot.params.slug,
-          this.route.snapshot.params.image
-        );
+                        params.slug,
+                        params.image
+                    )
                 }
             });
+        });
     }
 
     private initThumbnails() {

src/app/gallery/display-image/display-image.component.ts

@@ -4,6 +4,7 @@ import { Location } from "@angular/common";
 import { environment } from "../../../environments/environment";
 import { Title } from "@angular/platform-browser";
 import { DisplayImageService } from "./display-image.service";
+import { Router } from "@angular/router";
 
 @Component({
     selector: 'app-display-image',
@@ -24,12 +25,13 @@ export class DisplayImageComponent implements OnInit {
     private visible: boolean = false;
 
     public constructor(private titleService: Title,
-              private locationService: Location,
+                       private router: Router,
                        private displayImageService: DisplayImageService) {
         displayImageService.activate = this.activate.bind(this);
     }
 
-  public ngOnInit() {}
+    public ngOnInit() {
+    }
 
     public get modalStyle(): any {
         return {
@@ -43,17 +45,14 @@ export class DisplayImageComponent implements OnInit {
     }
 
     public get imageUrl(): string {
-    try {
-      return environment.apiUrl + `/image/${this.slug}/${this.image}`;
-    } catch (e) {
-      return '';
-    }
+        let url = environment.apiUrl + `/image/${this.slug}/${this.image}`;
+        return url;
     }
 
     public activate(slug = "", image = "", extitle = "") {
         this.init(slug, image, extitle);
 
-    this.locationService.go(`/album/${this.slug}/${this.image}`);
+        this.router.navigate([`/album/${this.slug}/${this.image}`]);
 
         return new Promise<boolean>(resolve => {
             this.show(resolve);
@@ -76,7 +75,7 @@ export class DisplayImageComponent implements OnInit {
     private hide() {
         this.visible = false;
         this.titleService.setTitle(`${this.albumTitle} - photos.yvan.hu`);
-    this.locationService.go(`/album/${this.slug}`);
+        this.router.navigate([`${this.albumTitle} - photos.yvan.hu`]);
     }
 
     private nextImage() {

src/app/gallery/thumbnail/thumbnail.component.css

@@ -1,3 +1,7 @@
+:host {
+    display: flex;
+}
+
 .thumbnail {
     position: relative;
     display: inline-block;

src/environments/environment.ts

@@ -5,5 +5,6 @@
 
 export const environment = {
     production: false,
-    apiUrl: 'http://localhost:8888',
+    // apiUrl: 'http://localhost:8888',
+    apiUrl: 'http://photos-api.yvan.hu',
 };

src/styles.css

@@ -1,25 +1,10 @@
 /* You can add global styles to this file, and also import other style files */
 @import url('https://fonts.googleapis.com/css?family=Source Sans Pro:400,700,400italic,700italic&subset=latin');
 
-*,
-*:before,
-*:after {
-    box-sizing: inherit;
-}
-
-html {
-    box-sizing: border-box;
-}
-
-body {
-    margin: 0;
-    background-color: #FFFFFF;
-}
-
-html,
-body {
-    height: 100%;
-}
+/*html,*/
+/*body {*/
+    /*height: 100%;*/
+/*}*/
 
 body {
     margin: 0;
@@ -31,6 +16,7 @@ body {
     font-size: 14px;
     line-height: 1.4285em;
     color: #839496;
+    user-select: none;
 }
 
 a {