gallery album page update;

assets/style/gallery.scss

@@ -1,11 +1,3 @@
-//.gallery-block {
-//  margin: 2em 0 0;
-//  display: flex;
-//  justify-content: center;
-//  flex-wrap: wrap;
-//  align-items: flex-start;
-//}
-
 .gallery-block {
   margin: 2em 0 0;
   display: block;
@@ -42,12 +34,131 @@
 }
 
 .album-block {
-  width: 70%;
-  margin: 0 auto;
+  width: 100%;
+  margin: 1em auto 2em;
+
+  h3 {
+    text-align: center;
+    margin: 1.5em 0 1em;
+  }
+
+  .fotorama__nav-wrap {
+    margin: 6em 0 0;
+  }
+
+  .fotorama__stage{
+    overflow: inherit;
+  }
+
+  .fotorama__stage__frame{
+    overflow: inherit;
+  }
+
+  .album {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .album-item {
+    width: 80%;
+    box-sizing: border-box;
+    margin: 0 0 4em;
+    position: relative;
+    background-color: white;
+    padding: 6em;
+    box-shadow: 0 4px 14px -10px rgba(0,0,0, .85);
+
+    &.vertical {
+      width: 47%;
+      min-width: 30em;
+      max-width: 35em;
+    }
+
+    img{
+      width: 100%;
+      box-sizing: border-box;
+      border: .25em solid #eee;
+      border-top-color: #bbb;
+      border-left-color: #ddd;
+    }
+  }
+
+  .product-info{
+    text-align: center;
+    position: absolute;
+    width: 100%;
+    left: 0;
+    bottom: 1em;
+
+    & > div {
+      display: inline-block;
+      padding: .5em 1em;
+      background-color: white;
+      border: 1px solid #f5f5f5;
+      border-radius: .25em;
+      box-shadow: 0 5p/x 4px -4px rgba(0,0,0, .5);
+    }
+
+    p {
+      font-size: 0.75em;
+    }
+    
+    .title {
+      font-weight: bold;
+    }
+  }
 }
 
-@media (max-width: 31.25em) {
+@media screen and (max-width: 31.25em) {
+  .album-block {
+    width: 100%;
+    margin: 1em auto 2em;
+
+    h3 {
+      text-align: left;
+      margin: 1em 0 0.5em;
+    }
+
+    .album-item {
+      width: 100%;
+      padding: 1em 1em 5em;
+      margin: 0 0 2em;
+
+      img{
+        border: .1em solid #eee;
+        border-top-color: #bbb;
+        border-left-color: #ddd;
+      }
+    }
+
+    .product-info {
+      bottom: .5em;
+    }
+  }
+
   .gallery-album {
     margin: 0 0 1em;
   }
+}
+
+@media screen and (min-width: 31.25em) and (max-width: 59.99999em){
+  .album-block {
+    .album-item {
+      width: 100%;
+      padding: 2em 2em 5em;
+      margin: 0 0 2em;
+
+      img{
+        border: .15em solid #eee;
+        border-top-color: #bbb;
+        border-left-color: #ddd;
+      }
+    }
+
+    .product-info {
+      bottom: .5em;
+    }
+  }
 }

client/pages/gallery.js

@@ -4,7 +4,8 @@ module.exports = function (app) {
             restrict: "A",
             link: function (scope, element, attrs) {
                 element.addClass('fotorama');
-                var fotorama = $(element.fotorama()).data('fotorama');
+                var $fotorama = $(element.fotorama());
+                var fotorama = $fotorama.data('fotorama');
                 fotorama.setOptions({
                     width: "100%",
                     maxheight: 500,
@@ -12,6 +13,13 @@ module.exports = function (app) {
                     nav: "thumbs"
                 });
 
+                //$fotorama.on('fotorama:show', function (e, fotorama, extra) {
+                $fotorama.on('fotorama:error', function (e, fotorama, extra) {
+                    console.log('## ' + e.type);
+                    console.log('active frame', fotorama.activeFrame);
+                    console.log('additional data', extra);
+                });
+
                 scope.$watch(attrs.gFotorama, function (value) {
                     console.log(value);
                     fotorama.load(value);
@@ -32,7 +40,7 @@ module.exports = function (app) {
                                 albums: albums.map(function (album) {
                                     var preview = album.content[0];
                                     album.preview_url = preview.content.medium.url;
-                                    album.fotorama = album.content.map(productToFotorama);
+                                    //album.fotorama = album.content.map(productToFotorama);
 
                                     return album;
                                 })
@@ -53,7 +61,7 @@ module.exports = function (app) {
         }
     );
 
-    app.controller("AlbumPageController", function ($scope, $http, $routeParams) {
+    app.controller("AlbumPageController", function ($scope, $http, $routeParams, $compile) {
         var url = '/album/{year}/{course}/{album}'
             .replace('{year}', $routeParams.year)
             .replace('{course}', $routeParams.course)
@@ -67,13 +75,23 @@ module.exports = function (app) {
                 $scope.album = album;
             });
     });
-}
-;
+};
 
 function productToFotorama(product) {
+    //var tpl =  '<div class="album-item"><div><p>' + product.author + '</p><p>' + product.authorAge  + ' лет</p></div></div>';
+
+    var $e = $('<div class="album-item"><div></div></div>');
+    var $c = $e.find('.album-item div');
+    $('<p></p>').text(product.author).appendTo($c);
+    if(product['authorAge']) {
+        $('<p></p>').text(product['authorAge'] + ' лет').appendTo($c);
+    }
+
     return {
         img: product.content["big"].url,
         thumb: product.content["small"].url,
-        full: product.content["original"].url
-    }
+        full: product.content["original"].url,
+        //html: $.parseHTML(tpl)[0]
+        html: $e
+    };
 }

templates/views/gallery-album.html

@@ -1,4 +1,17 @@
 <div class="album-block" ng-controller="AlbumPageController">
     <h3>{{album.title}}</h3>
-    <div g-fotorama="album.fotorama"></div>
+    <!--<div g-fotorama="album.fotorama"></div>-->
+    
+    <div class="album">
+        <div class="album-item" ng-repeat="product in album.content">
+            <img ng-src="{{product.content.big.url}}" alt=""/>
+            <div class="product-info">
+                <div>
+                    <p class="title">{{product.title | removeNewline}}</p>
+                    <p>{{product.author}}</p>
+                    <p ng-show="product.authorAge">{{product.authorAge}} лет</p>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>