Add photos in album view

src/App.vue

@@ -122,7 +122,6 @@ export default class App extends Vue {
 
   @Watch('leftPanelClosed')
   onLeftPanelClosedChange(val: boolean, oldValue: boolean) {
-    console.log(val, oldValue);
     this.changeLeftPanelStatus(val);
   }
 }

src/components/Album.vue

@@ -58,15 +58,9 @@ export default class Album extends Vue {
     }
   }
 
-  get backgroundMaskStyle() {
-    return {
-      'margin-top': `-${this.height}`
-    };
-  }
-
   get coverStyle() {
     return {
-      'background-image': `url('pictures/albums/${this.data.folderName}/${this.data.files[0]}')`,
+      'background-image': `url('pictures/albums/${this.data.folderName}/${this.data.coverFileName}')`,
     };
   }
 

src/components/Photo.vue

@@ -0,0 +1,99 @@
+<template>
+  <transition appear name="fade">
+    <div class="photo"
+        :style="photoStyle"
+        ref="element">
+    </div>
+  </transition>
+</template>
+
+<script lang="ts">
+import 'reflect-metadata';
+import { Vue, Component, Prop, Ref } from 'vue-property-decorator';
+
+import { IAlbum } from '@/store/albums/state';
+
+@Component({
+  name: 'Photo',
+})
+export default class Photo extends Vue {
+  @Prop({required: true})
+  public readonly file!: string;
+
+  @Prop({required: true})
+  public readonly album!: IAlbum;
+
+  @Ref('element') public readonly element!: HTMLElement;
+
+  public height: string = '10px';
+
+  updateHeight(): void {
+    if (this.element === undefined)
+      return;
+
+    this.height = `${this.element.clientWidth}px`;
+  }
+
+  created() {
+    window.addEventListener("resize", this.updateHeight);
+  }
+
+  destroyed() {
+    window.removeEventListener("resize", this.updateHeight);
+  }
+
+  get photoStyle() {
+    return {
+      'background-image': `url('/pictures/albums/${this.album.folderName}/${this.file}')`,
+      'height': this.height,
+    }
+  }
+
+  mounted() {
+    this.updateHeight();
+  }
+}
+</script>
+
+<style scoped>
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+.photo {
+  background-size: cover;
+  position: relative;
+}
+
+@media (max-width: 461px) {
+  .photo {
+    flex: 1 100%;
+    max-width: 100%;
+  }
+}
+
+@media (min-width: 460px) and (max-width: 1401px) {
+  .photo {
+    flex: 1 50%;
+    max-width: 50%;
+  }
+}
+
+@media (min-width: 1400px) and (max-width: 1501px) {
+  .photo {
+    flex: 1 33.333%;
+    max-width: 33.333%;
+  }
+}
+
+@media (min-width: 1500px) {
+  .photo {
+    flex: 1 25%;
+    max-width: 25%;
+  }
+}
+</style>

src/views/Album.vue

@@ -4,26 +4,35 @@
       :title="title" 
       :description="description" 
       :picture="picture"></LeftBlock>
+    <div class="photos-wrapper">
+      <div class="photos" v-if="album !== null">
+        <Photo v-for="file in filesToShow" :key="file" :file="file" :album="album"></Photo>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import 'reflect-metadata';
-import { Vue, Component, Prop } from 'vue-property-decorator';
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
 
 import { StoreType } from '@/store';
 import { IAlbum } from '@/store/albums/state';
 
 import LeftBlock from '@/components/LeftBlock.vue';
+import Photo from '@/components/Photo.vue';
 
 
 @Component({
   name: 'AlbumPage',
   components: {
     LeftBlock,
+    Photo,
   }
 })
 export default class AlbumPage extends Vue {
+  public filesToShow: string[] = [];
+
   get album(): IAlbum | null {
     const albums = (this.$store as StoreType).state.albums.albums;
 
@@ -55,9 +64,51 @@ export default class AlbumPage extends Vue {
       return '';
     return `/pictures/albums/${this.album.folderName}/${this.album.coverFileName}`
   }
+
+  updateFiles() {
+    this.filesToShow = [];
+
+    if (this.album === null)
+      return;
+
+    this.album.files.forEach((item, index) => {
+      setTimeout(() => this.filesToShow.push(item), 300 * index);
+    })
+  }
+
+  @Watch('album')
+  onAlbumsSourceChanged(val: IAlbum[], oldVal: IAlbum[] | null) {
+    this.updateFiles();
+  }
+
+  mounted() {
+    this.updateFiles();
+  }
 }
 </script>
 
-<style>
+<style scoped>
+.photos-wrapper {
+  display: inline-block;
+  vertical-align: top;
+}
 
+@media (max-width: 961px) {
+  .photos-wrapper {
+    width: calc(100vw);
+  }
+}
+
+@media (min-width: 960px) {
+  .photos-wrapper {
+    width: calc(100vw - 405px);
+    margin-left: 405px;
+  }
+}
+
+.photos {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
 </style>