-
-
+
diff --git a/src/app/gallery/gallery/gallery.component.ts b/src/app/gallery/gallery/gallery.component.ts
index 5249395..890bfa5 100644
--- a/src/app/gallery/gallery/gallery.component.ts
+++ b/src/app/gallery/gallery/gallery.component.ts
@@ -1,24 +1,74 @@
-import { Component, OnInit } from '@angular/core';
-import { Title } from "@angular/platform-browser";
+import {Component, OnInit} from '@angular/core';
+import {Title} from "@angular/platform-browser";
-import { Album } from "../shared";
-import { ActivatedRoute } from "@angular/router";
+import {Album} from "../shared";
+import {ActivatedRoute} from "@angular/router";
+import {environment} from "../../../environments/environment";
+import {Thumbnail} from "../shared/thumbnail.model";
@Component({
selector: 'app-gallery',
templateUrl: './gallery.component.html',
- styleUrls: ['./gallery.component.css']
+ styleUrls: ['./gallery.component.css'],
})
export class GalleryComponent implements OnInit {
public albums: Array
= [];
+ private thumbnails: Array;
constructor(private titleService: Title,
- private route: ActivatedRoute) {}
+ private route: ActivatedRoute) {
+ }
ngOnInit() {
- this.titleService.setTitle('Albums');
- this.route.data.subscribe((data: { albums: Array}) => this.albums = data.albums);
+ this.titleService.setTitle('Albums - photos.yvan.hu');
+ this.route.data.subscribe((data: { albums: Array }) => {
+ this.albums = data.albums;
+ this.thumbnails = this.initThumbnails();
+ });
+ }
+
+ private initThumbnails(): Array {
+ return this.albums.map(album => {
+ slug: album.slug,
+ image: this.imageUrl(album),
+ label: {
+ title: album.name,
+ extraRight: album.images.length + ' images',
+ extraLeft: album.date,
+ },
+ });
+ }
+
+ get thumbnailsLeft(): Array {
+ let thumbs = [];
+ for (let i=0;i {
+ let thumbs = [];
+ for (let i=1;i {
+ let thumbs = [];
+ for (let i=2;i div.label {
+ padding-left: 14px;
+ padding-right: 14px;
+ background-color: rgba(0, 0, 0, 0.75);
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ transform-origin: 50% 100%;
+ transition-property: transform;
+ transition-duration: 0.15s;
+ transition-timing-function: ease-out;
+ transform: scaleY(0);
+}
+
+.thumbnail:hover > div.label {
+ transform: scaleY(1);
+}
+
+.align.right {
+ float: right;
+}
+
+.align.left {
+ float: left;
+}
diff --git a/src/app/gallery/thumbnail/thumbnail.component.html b/src/app/gallery/thumbnail/thumbnail.component.html
new file mode 100644
index 0000000..aeb7e8b
--- /dev/null
+++ b/src/app/gallery/thumbnail/thumbnail.component.html
@@ -0,0 +1,7 @@
+
+ 
+
+
{{label.title}}
+
+
+
diff --git a/src/app/gallery/album-item/album-item.component.spec.ts b/src/app/gallery/thumbnail/thumbnail.component.spec.ts
similarity index 55%
rename from src/app/gallery/album-item/album-item.component.spec.ts
rename to src/app/gallery/thumbnail/thumbnail.component.spec.ts
index 62a0341..7b71f64 100644
--- a/src/app/gallery/album-item/album-item.component.spec.ts
+++ b/src/app/gallery/thumbnail/thumbnail.component.spec.ts
@@ -1,20 +1,20 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { AlbumItemComponent } from './album-item.component';
+import { ThumbnailComponent } from './thumbnail.component';
-describe('AlbumItemComponent', () => {
- let component: AlbumItemComponent;
- let fixture: ComponentFixture;
+describe('ThumbnailComponent', () => {
+ let component: ThumbnailComponent;
+ let fixture: ComponentFixture;
beforeEach(async(() => {
TestBed.configureTestingModule({
- declarations: [ AlbumItemComponent ]
+ declarations: [ ThumbnailComponent ]
})
.compileComponents();
}));
beforeEach(() => {
- fixture = TestBed.createComponent(AlbumItemComponent);
+ fixture = TestBed.createComponent(ThumbnailComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
diff --git a/src/app/gallery/thumbnail/thumbnail.component.ts b/src/app/gallery/thumbnail/thumbnail.component.ts
new file mode 100644
index 0000000..62036a7
--- /dev/null
+++ b/src/app/gallery/thumbnail/thumbnail.component.ts
@@ -0,0 +1,20 @@
+import {Component, Input, OnInit} from '@angular/core';
+
+import {ThumbLabel} from "../shared/thumb-label.model";
+
+@Component({
+ selector: 'app-thumbnail',
+ templateUrl: './thumbnail.component.html',
+ styleUrls: ['./thumbnail.component.css']
+})
+export class ThumbnailComponent implements OnInit {
+
+ @Input() image: string = "";
+ @Input() label: ThumbLabel = null;
+ @Input() target: any = {};
+
+ constructor() {}
+
+ ngOnInit() {}
+
+}
diff --git a/src/styles.css b/src/styles.css
index ece23f7..3f7ee86 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,12 +1,65 @@
/* 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;
}
-.main.container,
-.main.fullwide-container {
- margin-top: 1em;
+
+html,
+body {
+ height: 100%;
}
-.ui.fullwide-container {
- margin-left: 1em;
- margin-right: 1em;
+
+body {
+ margin: 0;
+ padding: 0;
+ overflow-x: hidden;
+ min-width: 320px;
+ background: #002B36;
+ font-family: "Source Sans Pro", 'Helvetica Neue', Arial, Helvetica, sans-serif;
+ font-size: 14px;
+ line-height: 1.4285em;
+ color: #839496;
+}
+
+a {
+ cursor: pointer;
+ color: #2AA198;
+ text-decoration: none;
+}
+
+a:hover {
+ color: #2AA198;
+ text-decoration: none;
+}
+
+
+/* app style */
+@media screen and (min-width: 600px) {
+ .main.container {
+ width: 540px;
+ }
+}
+
+@media screen and (min-width: 1200px) {
+ .main.container {
+ width: 1060px;
+ }
+}
+
+@media screen and (min-width: 1600px) {
+ .main.container {
+ width: 1580px;
+ }
}