yvan/gallery-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

* turned into column based design

Browse Source
This commit is contained in:
Danyi Dávid 2018-07-08 19:25:26 +02:00
parent 04ba910717
commit 1b15d33841
8 changed files with 114 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/app/gallery/album/album.component.css
View File

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

26
src/app/gallery/album/album.component.html
View File

@ -1,25 +1,15 @@
<div class="main container">
<h1>{{album.name}}<span class="align right">
<a [href]="exportUrl" title="Download compressed album"><i class="fa fa-download"></i></a>
<h1>
<a [routerLink]="['']" title="Back to albums list"><i class="fa fa-level-up"></i></a>
</span></h1>
{{album.name}}
<a [href]="exportUrl" title="Download compressed album"><i class="fa fa-download"></i></a>
</h1>
<div class="row images">
<app-thumbnail *ngFor="let thumbnail of thumbnailsLeft"
[image]="thumbnail.image"
[label]="thumbnail.label"
(click)="imageClick(album.slug, thumbnail.path)"></app-thumbnail>
<app-thumbnail *ngFor="let thumbnail of thumbnails"
[image]="thumbnail.image"
[label]="thumbnail.label"
(click)="imageClick(album.slug, thumbnail.path)"></app-thumbnail>
</div>
<div class="row images">
<app-thumbnail *ngFor="let thumbnail of thumbnailsMiddle"
[image]="thumbnail.image"
[label]="thumbnail.label"
(click)="imageClick(album.slug, thumbnail.path)"></app-thumbnail>
</div>
<div class="row images">
<app-thumbnail *ngFor="let thumbnail of thumbnailsRight"
[image]="thumbnail.image"
[label]="thumbnail.label"
(click)="imageClick(album.slug, thumbnail.path)"></app-thumbnail>
</div>
</div>
<app-display-image (imageChange)="switchImage($event)"></app-display-image>

33
src/app/gallery/album/album.component.ts
View File

@ -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<Thumbnail> = [];
public thumbnailsMiddle: Array<Thumbnail> = [];
public thumbnailsRight: Array<Thumbnail> = [];
public thumbnails: Array<Thumbnail> = [];
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 {

27
src/app/gallery/gallery/gallery.component.css
View File

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

14
src/app/gallery/gallery/gallery.component.html
View File

@ -1,19 +1,7 @@
<div class="main container">
<h1>Albums</h1>
<div class="row images">
<a app-thumbnail *ngFor="let thumbnail of thumbnailsLeft"
[image]="thumbnail.image"
[label]="thumbnail.label"
[routerLink]="['/album', thumbnail.slug]"></a>
</div>
<div class="row images">
<a app-thumbnail *ngFor="let thumbnail of thumbnailsMiddle"
[image]="thumbnail.image"
[label]="thumbnail.label"
[routerLink]="['/album', thumbnail.slug]"></a>
</div>
<div class="row images">
<a app-thumbnail *ngFor="let thumbnail of thumbnailsRight"
<a app-thumbnail *ngFor="let thumbnail of thumbnails"
[image]="thumbnail.image"
[label]="thumbnail.label"
[routerLink]="['/album', thumbnail.slug]"></a>

33
src/app/gallery/gallery/gallery.component.ts
View File

@ -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<Album> = [];
private leftHeight: number = 0;
private middleHeight: number = 0;
private rightHeight: number = 0;
public thumbnailsLeft: Array<Thumbnail> = [];
public thumbnailsMiddle: Array<Thumbnail> = [];
public thumbnailsRight: Array<Thumbnail> = [];
public thumbnails: Array<Thumbnail> = [];
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 {

34
src/app/gallery/thumbnail/thumbnail.component.css
View File

@ -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 {

41
src/styles.css
View File

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