From 830cd80de10bbd331ae3dab0998adea96e57f070 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Sun, 16 Aug 2015 08:01:35 +0300 Subject: [PATCH] team page update: background picture is temporary broken; + backgroundPicture directive (unstable); --- assets/style/background-picture.scss | 14 +++++ assets/style/main.scss | 2 +- assets/style/team.scss | 85 ++++++++++++-------------- client/app.js | 6 +- client/directives/backgroundPicture.js | 26 ++++++++ client/directives/teamMemberProfile.js | 13 ++++ client/pages/team.js | 10 +-- templates/views/team.html | 17 +----- templates/views/team/profile.html | 18 ++++++ 9 files changed, 120 insertions(+), 71 deletions(-) create mode 100644 assets/style/background-picture.scss create mode 100644 client/directives/backgroundPicture.js create mode 100644 client/directives/teamMemberProfile.js create mode 100644 templates/views/team/profile.html diff --git a/assets/style/background-picture.scss b/assets/style/background-picture.scss new file mode 100644 index 00000000..05ad5555 --- /dev/null +++ b/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%; + } +} \ No newline at end of file diff --git a/assets/style/main.scss b/assets/style/main.scss index 54f232b7..390f7917 100644 --- a/assets/style/main.scss +++ b/assets/style/main.scss @@ -20,7 +20,7 @@ body { .content { flex: 1; - margin: 3em auto 0; + margin: 41px auto 0; } a { diff --git a/assets/style/team.scss b/assets/style/team.scss index c8262d6f..1347f999 100644 --- a/assets/style/team.scss +++ b/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; + } } + } } \ No newline at end of file diff --git a/client/app.js b/client/app.js index d6221106..90ee333b 100644 --- a/client/app.js +++ b/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"; }); diff --git a/client/directives/backgroundPicture.js b/client/directives/backgroundPicture.js new file mode 100644 index 00000000..46cb5b58 --- /dev/null +++ b/client/directives/backgroundPicture.js @@ -0,0 +1,26 @@ +module.exports = function (app) { + app.directive('backgroundPicture', function () { + return { + restrict: 'E', + template: '
', + 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); + } + } + }); +}; \ No newline at end of file diff --git a/client/directives/teamMemberProfile.js b/client/directives/teamMemberProfile.js new file mode 100644 index 00000000..13e36fda --- /dev/null +++ b/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){ + } + } + }); +}; \ No newline at end of file diff --git a/client/pages/team.js b/client/pages/team.js index a9548de0..101e3e0a 100644 --- a/client/pages/team.js +++ b/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; }); diff --git a/templates/views/team.html b/templates/views/team.html index 8e0cfb48..66d92737 100644 --- a/templates/views/team.html +++ b/templates/views/team.html @@ -1,18 +1,5 @@ - +
-
    -
  • - - -
    -

    {{person.names[1]}} {{person.names[2]}} {{person.names[3]}}

    -

    {{person.position}}

    -

    {{person.status}}

    -

    -

    {{person.edu}}

    -

    Диплом {{person.diploma}}

    -
    -
    • -
+
\ No newline at end of file diff --git a/templates/views/team/profile.html b/templates/views/team/profile.html new file mode 100644 index 00000000..bdb9f382 --- /dev/null +++ b/templates/views/team/profile.html @@ -0,0 +1,18 @@ +
+ + +
+ +
+ +
+

{{person.names[1]}} {{person.names[2]}} {{person.names[3]}}

+ +

{{person.position}}

+

{{person.status}}

+

+ +

{{person.edu}}

+

Диплом {{person.diploma}}

+
+
\ No newline at end of file