+ AlbumCollection component; gallery style fix

src/client/app.js

@@ -3,6 +3,7 @@ import Breadcrumbs from './components/Breadcrumbs';
 import Document from './components/Document';
 import Award from './components/Award';
 import GalleryItem from './components/GalleryItem';
+import AlbumCollection from './components/AlbumCollection';
 import TeacherProfile from './components/TeacherProfile';
 import Timeline from './components/Timeline';
 import TimelineRecord from './components/TimelineRecord';
@@ -85,6 +86,7 @@ app.run(($location, $rootScope, $http) => {
     Document,
     Award,
     GalleryItem,
+    AlbumCollection,
     TeacherProfile,
     AppController,
     HomeController,

src/client/components/AlbumCollection.js

@@ -0,0 +1,11 @@
+import template from '../../templates/components/album-collection.html';
+
+export default function (app) {
+    app.component('albumCollection', {
+        bindings: {
+            title: '@',
+            albums: '<'
+        },
+        template: template
+    });
+};

src/style/components/album-collection.scss

@@ -0,0 +1,14 @@
+@import "../variables";
+
+.album-collection{
+  &__body{
+    display: flex;
+    flex-wrap: wrap;
+    position: relative;
+    align-items:flex-end;
+  }
+
+  &__title{
+
+  }
+}

src/style/components/gallery-item.scss

@@ -1,14 +1,18 @@
 @import "../variables";
 
 $img-max-width: 500px;
+$double-margin-half: $double-margin / 2;
+$percentage: 25%;
+
+gallery-item {
+  width: $percentage;
+  padding: 0 $double-margin-half;
+  box-sizing: padding-box;
 
-.gallery-item {
-  width: calc(33% - #{$single-margin});
   margin-bottom: $single-margin;
 
-  img {
+  img{
     width: 100%;
-    max-width: $img-max-width;
   }
 }
 

src/style/gallery.scss

@@ -1,18 +0,0 @@
-@import "variables";
-
-.album-collection{
-
-}
-
-.album-collection__body{
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  align-items: flex-start;
-
-  margin-bottom: $double-margin;
-}
-
-.album-collection__title{
-
-}

src/style/style.scss

@@ -1,3 +1,4 @@
+@import "components/album-collection";
 @import "components/gallery-item";
 @import "components/document";
 @import "components/teacher-proifile";
@@ -15,7 +16,6 @@
 @import "content";
 @import "page-animation";
 
-@import "gallery";
 @import "docs";
 @import "document";
 @import "album";

src/templates/components/album-collection.html

@@ -0,0 +1,6 @@
+<div class="album-collection">
+    <h2 class="album-collection__title">{{$ctrl.title}}</h2>
+    <div class="album-collection__body">
+        <gallery-item ng-repeat="album in $ctrl.albums" record="album"></gallery-item>
+    </div>
+</div>

src/templates/views/gallery.html

@@ -1,8 +1,5 @@
 <div class="content content_wide" ng-controller="GalleryController">
-    <div class="album-collection" ng-repeat="period in years">
-        <h2 class="album-collection__title">{{period.year}}</h2>
-        <div class="album-collection__body">
-            <gallery-item ng-repeat="album in period.albums" record="album"></gallery-item>
-        </div>
-    </div>
+    <album-collection ng-repeat="i in years"
+            title="{{i.year}}" albums="i.albums"
+    ></album-collection>
 </div>