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);
}
}