diff --git a/assets/style/gallery.scss b/assets/style/gallery.scss index cc7fb114..83a90a72 100644 --- a/assets/style/gallery.scss +++ b/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; + } + } } \ No newline at end of file diff --git a/client/pages/gallery.js b/client/pages/gallery.js index a10be5d4..a8942158 100644 --- a/client/pages/gallery.js +++ b/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 = '
' + product.author + '
' + product.authorAge + ' лет
{{product.title | removeNewline}}
+{{product.author}}
+{{product.authorAge}} лет
+