v3.4.0

assets/style/background-picture.scss

@@ -0,0 +1,14 @@
+.background-picture {
+  overflow-x: hidden;
+  width: 100%;
+  height: 95vh;
+  background-repeat: no-repeat;
+
+  &.vertical {
+    background-size: 100% auto;
+  }
+
+  &.horizontal {
+    background-size: auto 100%;
+  }
+}

assets/style/home.scss

@@ -9,28 +9,17 @@
   }
 }
 
+.page.page-home{
+  width: 90%;
+  margin: 0 auto;
+}
+
 .main-block {
-  width: 100%;
-  margin-top: 5px;
-
-  .telephone {
-    font-size: 1.25em;
-    margin-left: 30px;
-  }
-
   h1 {
     font-size: 18pt;
     text-align: center;
     font-weight: normal;
-    margin: 1em 0 0;
+    margin: 1.2em 0 0;
     padding: 0;
   }
 }
-
-@media screen and (max-device-width: 500px) {
-  .main-block {
-    .telephone {
-      display: none;
-    }
-  }
-}

assets/style/main.scss

@@ -20,8 +20,7 @@ body {
 
 .content {
   flex: 1;
-  width: 90%;
-  margin: 3em auto 0;
+  margin: 41px auto 0;
 }
 
 a {

assets/style/page.scss

@@ -1,10 +1,6 @@
 .page {
-//  position: absolute;
-//  bottom: 0;
-//  top: 0;
-  padding-top: 0px;
+  padding-top: 0;
   width: 100%;
-//  z-index: -1;
 }
 
 .page.ng-leave {

assets/style/tape-viewer.scss

@@ -1,5 +1,5 @@
 .tape-block{
-  width: 70%;
+  width: 60%;
   max-width: 1000px;
 
   margin: 2em auto;
@@ -11,7 +11,7 @@
   }
 }
 
-.tape-block-content{
+.tape-block__body{
   position: relative;
   width: 100%;
 
@@ -53,7 +53,7 @@
     margin: 1.5em auto;
   }
 
-  .tape-block-content {
+  .tape-block__body {
     .tape {
       width: 62px;
       height: 62px;

assets/style/team.scss

@@ -1,57 +1,48 @@
 .page-team {
-    &.ng-leave {
-        animation: slideOutLeft 0.3s both ease-in;
-    }
+  &.ng-leave {
+    animation: slideOutLeft 0.3s both ease-in;
+  }
 
-    &.ng-enter {
-        animation: slideInRight 0.3s both ease-in;
-    }
+  &.ng-enter {
+    animation: slideInRight 0.3s both ease-in;
+  }
 }
 
-.background-picture{
+.team-block {
+  background-color: white;
+  width: 100%;
+  padding-top: 3em;
+
+  .team-member {
+    width: 80%;
+    margin: 0 auto 3em;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+
+  .team-member__picture {
+    width: 20%;
+    max-width: 15em;
+    min-width: 12em;
+    margin: 0 1em;
+  }
+
+  .team-member__picture img {
     width: 100%;
-    position: fixed;
-    top:0;
-    left: 0;
-    z-index: -999;
-}
+  }
 
-.team-block{
-    background-color: white;
-    width:100%;
-    min-height: 100px;
-    padding-top: 100px;
-    padding-bottom: 100px;
-    margin-top: 63%;
+  .team-member__info {
+    width: 60%;
+    margin: 0 1em;
 
-    ul{
-        list-style:none;
-    }
+    h3 {
+      font-weight: 200;
 
-    .team-member{
-        margin: 0 auto 50px auto;
-        width: 70%;
-
-        img{
-            width: 40%;
-            max-width: 600px;
-            min-width: 200px;
-            display: inline-block;
-        }
-
-        .info{
-            display: inline-block;
-            float: right;
-            width: 55%;
-            line-height: 2em;
-
-            h3{
-                font-weight: 100;
-
-                span{
-                    font-weight: 600;
-                }
-            }
-        }
+      span {
+        font-weight: 600;
+      }
     }
+  }
 }

client/app.js

@@ -81,6 +81,8 @@ app.run(function ($location, $rootScope, $http) {
 require("./api/api")(app);
 require("./services/io")(app);
 require("./directives/mainMenu")(app);
+require("./directives/teamMemberProfile")(app);
+require("./directives/backgroundPicture")(app);
 require("./ui/menu")(app);
 require("./ui/breadcrumbs")(app);
 require("./ui/timeline")(app);
@@ -100,10 +102,6 @@ app.controller("SchedulePageController", function ($scope) {
     $scope.pageClass = "page-schedule";
 });
 
-app.controller("TeamPageController", function ($scope) {
-    $scope.pageClass = "page-team";
-});
-
 app.controller("DocsPageController", function ($scope) {
     $scope.pageClass = "page-docs";
 });

client/directives/backgroundPicture.js

@@ -0,0 +1,26 @@
+module.exports = function (app) {
+    app.directive('backgroundPicture', function () {
+        return {
+            restrict: 'E',
+            template: '<div class="background-picture" />',
+            scope: {
+                src: '='
+            },
+            link: function($scope, $element){
+                var element = $element.find('.background-picture').get(0);
+                element.style.backgroundImage = `url('${$scope.src}')`;
+
+                setTimeout(function () {
+                    var w = element.offsetWidth;
+                    var h = element.offsetHeight;
+
+                    if (w > h) {
+                        element.classList.add('horizontal');
+                    } else {
+                        element.classList.add('vertical');
+                    }
+                }, 100);
+            }
+        }
+    });
+};

client/directives/teamMemberProfile.js

@@ -0,0 +1,13 @@
+module.exports = function (app) {
+    app.directive('teamMemberProfile', function (menu) {
+        return {
+            restrict: 'E',
+            templateUrl: '/views/team/profile.html',
+            scope: {
+                person: '=profile'
+            },
+            link: function(scope, element){
+            }
+        }
+    });
+};

client/pages/home.js

@@ -3,27 +3,36 @@
  */
 
 module.exports = function (app) {
-    app.controller("HomePageController", function ($scope, config) {
+    app.controller('HomePageController', function ($scope, config) {
         var fotorama;
 
-        $scope.pageClass = "page-home";
+        $scope.pageClass = 'page-home';
 
         var $tape = $('.tape-block');
-        var $fotorama = $('.fotorama');
+        var $fotorama = $tape.find('.tape-block__content');
 
         $tape.addClass('simplified');
         $fotorama.on('fotorama:ready', function () {
             $tape.removeClass('simplified');
             fotorama.setOptions({
-                nav: 'dots'
+                nav: 'dots',
+                transition: 'crossfade',
+                autoplay: '6000',
+                arrows: 'false',
+                width: '100%',
+                fit: 'cover',
+                loop: 'true'
             });
         });
 
         fotorama = $fotorama.fotorama().data('fotorama');
-        fotorama.load([
-            {img: 'http://static.shburg.org/art/img/cat1.jpg'},
-            {img: 'http://static.shburg.org/art/img/cat2.jpg'},
-            {img: 'http://static.shburg.org/art/img/cat3.jpg'}
-        ]);
+
+        setTimeout(function(){
+            fotorama.load([
+                {img: 'http://static.shburg.org/art/img/cat1.jpg'},
+                {img: 'http://static.shburg.org/art/img/cat2.jpg'},
+                {img: 'http://static.shburg.org/art/img/cat3.jpg'}
+            ]);
+        }, 100);
     });
 };

client/pages/team.js

@@ -1,9 +1,11 @@
-var populate = require("../../utils/populate").populate;
-const course = require("../../models/course");
+var populate = require('../../utils/populate').populate;
+const course = require('../../models/course');
 
 module.exports = function (app) {
-    app.controller("TeamController", function ($scope, team) {
-        $scope.team = team.team.map(function (person) {
+    app.controller('TeamPageController', function ($scope, team) {
+        $scope.pageClass = 'page-team';
+
+        $scope.teamMembers = team.team.map(function (person) {
             person.names = team.splitName(person.name);
             return person;
         });

deploy.sh

@@ -1,10 +1,16 @@
 #!/bin/sh
 
+echo "Deploying art.shburg.org"
+
 NODE_ENV=production gulp
 
-tarfile=build.tar.gz
+server="art.shburg.org"
+app_port=1800
+tarfile="build.tar.gz"
 tarpath=$TMPDIR$tarfile
+destpath="~/www/art.shburg.org"
 
+echo "Packing..."
 env GZIP=-9 tar -czf $tarpath \
     --disable-copyfile \
     --exclude=node_modules \
@@ -14,11 +20,14 @@ env GZIP=-9 tar -czf $tarpath \
     --exclude=deploy.sh \
     --exclude=install.sh .
 
-echo "build file: $tarpath"
+echo "Build file: $tarpath"
+
+ssh hoster.et "rm -rf $destpath/*"
+scp $tarpath hoster@$server:$destpath
+echo "Build file successfully uploaded on server"
+
+echo "Installing..."
+ssh hoster.et "bash -s" -- < ./install.sh $destpath $tarfile $app_port
 
-ssh shburg.et "rm -rf art/*"
-scp $tarpath shburg@146.185.183.243:~
-scp install.sh shburg@146.185.183.243:~
-ssh shburg.et "./install.sh"
 rm $tarpath
-echo "art.shlisselburg.org deployment completed successfully"
+echo "Done"

install.sh

@@ -1,14 +1,19 @@
 #!/bin/sh
 
-gunzip build.tar.gz
-tar xf build.tar -C ~/art
-rm build.tar
+dir_path="$1"
+build_file="$2"
+port="$3"
+
+cd $dir_path
+
+gunzip -c $build_file | tar xopf -
+
+#rm build.tar
 
-cd ~/art
 npm install --production --loglevel error
 
 export NODE_ENV=production
-export PORT=18010
+export PORT=$port
 
 #starting www
 if forever restart bin/www.js; then

models/team.json

@@ -61,7 +61,7 @@
 		"edu": "Педагогический институт имени А. И. Герцена",
 		"diploma": "ПП №224197",
 		"status": "Высшая квалификационная категория по истории искусства",
-		"picture": "http://static.shburg.org/art/team/teacher.jpg"
+		"picture": "http://static.shburg.org/art/team/teacher12.jpg"
 	},
 	{
 		"id": "rk-timashev",
@@ -104,7 +104,7 @@
 	},
 	{
 		"id": "ea-burovtseva",
-		"name": "Ев Ал Буровцева",
+		"name": "Елена Ал Буровцева",
 		"position": "Преподаватель керамики",
 		"edu": "",
 		"diploma": "",

nginx.conf

@@ -14,8 +14,8 @@ server {
 		proxy_set_header X-Forwarded-For $remote_addr;
 	}
 
-	error_log /var/log/nginx/hudozhka.error.log;
-	access_log /var/log/nginx/hudozhka.access.log;
+	error_log /var/log/nginx/art.shburg.error.log;
+	access_log /var/log/nginx/art.shburg.access.log;
 }
 
 server {
@@ -30,5 +30,5 @@ map $http_upgrade $connection_upgrade {
 }
 
 upstream hudozka {
-    server localhost:18010;
-}
+    server localhost:1800;
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "Hudozka",
   "private": true,
-  "version": "3.1.0",
+  "version": "3.4.0",
   "description": "",
   "main": "bin/www.js",
   "scripts": {
@@ -24,7 +24,7 @@
     "koa-prerender": "^1.0.3",
     "koa-route": "^2.4.0",
     "koa-static": "^1.4.9",
-    "koa-useragent": "0.0.5",
+    "koa-useragent": "0.1.1",
     "koa.io": "0.0.3",
     "mz": "^1.3.0",
     "promised-mongo": "git+https://git@github.com/tmshv/promised-mongo",

templates/views/home.html

@@ -1,36 +1,28 @@
 <div class="main-block">
     <!--<div>-->
-        <!--&lt;!&ndash;<a href="tel://{{telephone}}"></a>&ndash;&gt;-->
-        <!--<span class="telephone">{{contact.telephone}}</span>-->
+    <!--&lt;!&ndash;<a href="tel://{{telephone}}"></a>&ndash;&gt;-->
+    <!--<span class="telephone">{{contact.telephone}}</span>-->
 
-        <!--&lt;!&ndash;<ul class="submenu">&ndash;&gt;-->
-            <!--&lt;!&ndash;<li><a href="/team#director">директор</a><p>М. Г. Тимашева</p></li>&ndash;&gt;-->
-            <!--&lt;!&ndash;<li><a href="/enter">поступление</a></li>&ndash;&gt;-->
-            <!--&lt;!&ndash;<li><a href="/contacts">контактная информация</a></li>&ndash;&gt;-->
-            <!--&lt;!&ndash;<li><a href="/awards">награды</a></li>&ndash;&gt;-->
-        <!--&lt;!&ndash;</ul>&ndash;&gt;-->
+    <!--&lt;!&ndash;<ul class="submenu">&ndash;&gt;-->
+    <!--&lt;!&ndash;<li><a href="/team#director">директор</a><p>М. Г. Тимашева</p></li>&ndash;&gt;-->
+    <!--&lt;!&ndash;<li><a href="/enter">поступление</a></li>&ndash;&gt;-->
+    <!--&lt;!&ndash;<li><a href="/contacts">контактная информация</a></li>&ndash;&gt;-->
+    <!--&lt;!&ndash;<li><a href="/awards">награды</a></li>&ndash;&gt;-->
+    <!--&lt;!&ndash;</ul>&ndash;&gt;-->
     <!--</div>-->
 
     <h1>Шлиссельбургская детская художественная&nbsp;школа</h1>
 </div>
 
 <div class="tape-block">
-    <div class="tape-block-content">
+    <div class="tape-block__body">
         <div class="tape tape-tl"></div>
         <div class="tape tape-tr"></div>
         <div class="tape tape-bl"></div>
         <div class="tape tape-br"></div>
 
-        <div class="fotorama"
-             data-transition="crossfade"
-             data-autoplay="6000"
-             data-nav="false"
-             data-arrows="false"
-             data-width="100%"
-             data-fit="cover"
-             data-loop="true">
-        </div>
+        <div class="tape-block__content"></div>
     </div>
 </div>
 
-<timeline></timeline>
+<timeline></timeline>

templates/views/team.html

@@ -1,18 +1,5 @@
-<img class="background-picture" src="http://static.shlisselburg.org/art/team/team.jpg">
+<!--<background-picture src="'http://static.shlisselburg.org/art/team/team.jpg'"></background-picture>-->
 
 <div class="team-block">
-    <ul ng-controller="TeamController">
-        <li class="team-member" ng-repeat="person in team">
-            <a name="{{person.anchor}}"></a>
-            <img ng-src="{{person.picture}}">
-            <div class="info">
-                <h3>{{person.names[1]}} {{person.names[2]}} <span>{{person.names[3]}}</span></h3>
-                <p>{{person.position}}</p>
-                <p>{{person.status}}</p>
-                <p></p>
-                <p class="edu">{{person.edu}} </p>
-                <p class="diploma">Диплом {{person.diploma}}</p>
-            </div>
-        </li>
-    </ul>
+    <team-member-profile ng-repeat="person in teamMembers track by $index" profile="person"/>
 </div>

templates/views/team/profile.html

@@ -0,0 +1,18 @@
+<div class="team-member">
+    <a name="{{person.anchor}}"></a>
+
+    <div class="team-member__picture">
+        <img ng-src="{{person.picture}}">
+    </div>
+
+    <div class="team-member__info">
+        <h3>{{person.names[1]}} {{person.names[2]}} <span>{{person.names[3]}}</span></h3>
+
+        <p>{{person.position}}</p>
+        <p>{{person.status}}</p>
+        <p></p>
+
+        <p class="edu">{{person.edu}} </p>
+        <p class="diploma">Диплом {{person.diploma}}</p>
+    </div>
+</div>