From 1b15d33841d34569fdc5f94a8c1cc21889a76383 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danyi=20D=C3=A1vid?= Date: Sun, 8 Jul 2018 19:25:26 +0200 Subject: [PATCH] * turned into column based design --- src/app/gallery/album/album.component.css | 41 +++++++++++++++---- src/app/gallery/album/album.component.html | 26 ++++-------- src/app/gallery/album/album.component.ts | 33 +-------------- src/app/gallery/gallery/gallery.component.css | 27 ++++++++++-- .../gallery/gallery/gallery.component.html | 14 +------ src/app/gallery/gallery/gallery.component.ts | 33 +-------------- .../gallery/thumbnail/thumbnail.component.css | 34 ++++++++++++--- src/styles.css | 41 ++++++++----------- 8 files changed, 114 insertions(+), 135 deletions(-) diff --git a/src/app/gallery/album/album.component.css b/src/app/gallery/album/album.component.css index da2b2d0..2c26ea8 100644 --- a/src/app/gallery/album/album.component.css +++ b/src/app/gallery/album/album.component.css @@ -1,23 +1,46 @@ .main.container { margin-left: auto; margin-right: auto; + margin-bottom: 80px; padding-left: 10px; } .row { - display: block; - float: left; - width: 510px; + line-height: 0; + column-gap: 20px; } -.align.right { - float: right; +a { + cursor: pointer; + color: #2AA198; + text-decoration: none; + transition-property: color; + transition-duration: 0.5s; + transition-timing-function: ease-out; } -.align.left { - float: left; +a:hover { + color: #2a70a1; + text-decoration: none; } -h1 { - padding-right: 15px; +/* mobile */ +@media only screen and (max-width: 779px) { + .row { + column-count: 1; + } +} + +/* tablet */ +@media only screen and (min-width: 780px) and (max-width: 1219px) { + .row { + column-count: 2; + } +} + +/* desktop */ +@media screen and (min-width: 1220px) { + .row { + column-count: 3; + } } diff --git a/src/app/gallery/album/album.component.html b/src/app/gallery/album/album.component.html index 2faee38..46403d3 100644 --- a/src/app/gallery/album/album.component.html +++ b/src/app/gallery/album/album.component.html @@ -1,25 +1,15 @@
-

{{album.name}} - +

-

+ {{album.name}} + +

- +
- -
-
- -
\ No newline at end of file diff --git a/src/app/gallery/album/album.component.ts b/src/app/gallery/album/album.component.ts index 263e48a..ba60f81 100644 --- a/src/app/gallery/album/album.component.ts +++ b/src/app/gallery/album/album.component.ts @@ -7,11 +7,6 @@ import { Album, Image } from "../shared"; import { DisplayImageService } from "../display-image/display-image.service"; import { Thumbnail } from "../shared/thumbnail.model"; -const IDX_LEFT = 0; -const IDX_MIDDLE = 1; -const IDX_RIGHT = 2; -const THUMB_MARGIN = 10; - @Component({ selector: 'app-album', templateUrl: './album.component.html', @@ -20,14 +15,7 @@ const THUMB_MARGIN = 10; export class AlbumComponent implements OnInit { public album: Album = new Album(); - - private leftHeight: number = 0; - private middleHeight: number = 0; - private rightHeight: number = 0; - - public thumbnailsLeft: Array = []; - public thumbnailsMiddle: Array = []; - public thumbnailsRight: Array = []; + public thumbnails: Array = []; constructor(private titleService: Title, private route: ActivatedRoute, @@ -69,24 +57,7 @@ export class AlbumComponent implements OnInit { extraLeft: '', }, height: image.thumbHeight, - }).map(thumbnail => { - let heights = [this.leftHeight, this.middleHeight, this.rightHeight]; - let idx = heights.reduce((low, nxt, idx) => nxt < heights[low] ? idx : low, 0); - switch (idx) { - case IDX_LEFT: - this.thumbnailsLeft.push(thumbnail); - this.leftHeight += thumbnail.height + THUMB_MARGIN; - break; - case IDX_MIDDLE: - this.thumbnailsMiddle.push(thumbnail); - this.middleHeight += thumbnail.height + THUMB_MARGIN; - break; - case IDX_RIGHT: - this.thumbnailsRight.push(thumbnail); - this.rightHeight += thumbnail.height + THUMB_MARGIN; - break; - } - }); + }).map(thumbnail => this.thumbnails.push(thumbnail)); } public get exportUrl(): string { diff --git a/src/app/gallery/gallery/gallery.component.css b/src/app/gallery/gallery/gallery.component.css index 2e7c142..ce5c947 100644 --- a/src/app/gallery/gallery/gallery.component.css +++ b/src/app/gallery/gallery/gallery.component.css @@ -1,11 +1,32 @@ .main.container { margin-left: auto; margin-right: auto; + margin-bottom: 80px; padding-left: 10px; } .row { - display: block; - float: left; - width: 510px; + line-height: 0; + column-gap: 20px; +} + +/* mobile */ +@media only screen and (max-width: 779px) { + .row { + column-count: 1; + } +} + +/* tablet */ +@media only screen and (min-width: 780px) and (max-width: 1219px) { + .row { + column-count: 2; + } +} + +/* desktop */ +@media screen and (min-width: 1220px) { + .row { + column-count: 4; + } } diff --git a/src/app/gallery/gallery/gallery.component.html b/src/app/gallery/gallery/gallery.component.html index 4b40d69..d3d5425 100644 --- a/src/app/gallery/gallery/gallery.component.html +++ b/src/app/gallery/gallery/gallery.component.html @@ -1,19 +1,7 @@

Albums

- -
-
- -
-
- diff --git a/src/app/gallery/gallery/gallery.component.ts b/src/app/gallery/gallery/gallery.component.ts index d57bc71..cc8f5bc 100644 --- a/src/app/gallery/gallery/gallery.component.ts +++ b/src/app/gallery/gallery/gallery.component.ts @@ -6,11 +6,6 @@ import { Album } from "../shared"; import { ActivatedRoute } from "@angular/router"; import { Thumbnail } from "../shared/thumbnail.model"; -const IDX_LEFT = 0; -const IDX_MIDDLE = 1; -const IDX_RIGHT = 2; -const THUMB_MARGIN = 10; - @Component({ selector: 'app-gallery', templateUrl: './gallery.component.html', @@ -19,14 +14,7 @@ const THUMB_MARGIN = 10; export class GalleryComponent implements OnInit { public albums: Array = []; - - private leftHeight: number = 0; - private middleHeight: number = 0; - private rightHeight: number = 0; - - public thumbnailsLeft: Array = []; - public thumbnailsMiddle: Array = []; - public thumbnailsRight: Array = []; + public thumbnails: Array = []; constructor(private titleService: Title, private route: ActivatedRoute, @@ -55,24 +43,7 @@ export class GalleryComponent implements OnInit { extraLeft: album.date, }, height: album.coverImage.thumbHeight, - }).map(thumbnail => { - let heights = [this.leftHeight, this.middleHeight, this.rightHeight]; - let idx = heights.reduce((low, nxt, idx) => nxt < heights[low] ? idx : low, 0); - switch (idx) { - case IDX_LEFT: - this.thumbnailsLeft.push(thumbnail); - this.leftHeight += thumbnail.height + THUMB_MARGIN; - break; - case IDX_MIDDLE: - this.thumbnailsMiddle.push(thumbnail); - this.middleHeight += thumbnail.height + THUMB_MARGIN; - break; - case IDX_RIGHT: - this.thumbnailsRight.push(thumbnail); - this.rightHeight += thumbnail.height + THUMB_MARGIN; - break; - } - }); + }).map(thumbnail => this.thumbnails.push(thumbnail)); } private imageUrl(album: Album): string { diff --git a/src/app/gallery/thumbnail/thumbnail.component.css b/src/app/gallery/thumbnail/thumbnail.component.css index e9a1d24..4600fa4 100644 --- a/src/app/gallery/thumbnail/thumbnail.component.css +++ b/src/app/gallery/thumbnail/thumbnail.component.css @@ -1,12 +1,17 @@ :host { - display: flex; + display: block; + margin: 0 0 20px 0; +} + +img { + width: 100%; + height: auto; } .thumbnail { position: relative; - display: inline-block; - margin-right: 10px; - margin-bottom: 10px; + display: block; + overflow: hidden; } .thumbnail img.image { @@ -21,15 +26,32 @@ bottom: 0; left: 0; right: 0; + line-height: 1rem; transform-origin: 50% 100%; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease-out; - transform: scaleY(0); + transform: translateY(100%); +} + +a:link, +a:visited, +a:hover, +a:active +{ + color: #ffffff; +} + +.thumbnail > div.label > h1 { + font-size: 150%; +} + +.thumbnail > div.label > h2 { + font-size: 120%; } .thumbnail:hover > div.label { - transform: scaleY(1); + transform: translateY(0); } .align.right { diff --git a/src/styles.css b/src/styles.css index 0cb6a92..2863144 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,51 +1,44 @@ /* 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'); -/*html,*/ -/*body {*/ - /*height: 100%;*/ -/*}*/ - body { margin: 0; padding: 0; overflow-x: hidden; min-width: 320px; - background: #002B36; + background: #ffffff; font-family: "Source Sans Pro", 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.4285em; - color: #839496; + color: rgb(30%, 30%, 30%); user-select: none; } -a { - cursor: pointer; - color: #2AA198; - text-decoration: none; +a:link, +a:visited, +a:hover, +a:active +{ + color: #ffffff; } -a:hover { - color: #2AA198; - text-decoration: none; -} - - -/* app style */ -@media screen and (min-width: 600px) { +/* mobile */ +@media only screen and (max-width: 779px) { .main.container { - width: 515px; + width: calc(100% - 20px); } } -@media screen and (min-width: 1200px) { +/* tablet */ +@media only screen and (min-width: 780px) and (max-width: 1219px) { .main.container { - width: 1030px; + width: calc(100% - 80px); } } -@media screen and (min-width: 1600px) { +/* desktop */ +@media screen and (min-width: 1220px) { .main.container { - width: 1545px; + width: calc(100% - 80px); } }