team page update: background picture is temporary broken; + backgroundPicture directive (unstable);

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/main.scss

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

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/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;
         });

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>