From ef175cf664b7f0c5a03c174c197a221cf5bbe51f Mon Sep 17 00:00:00 2001 From: Leonardo Merlin Date: Thu, 20 Aug 2015 04:30:42 -0300 Subject: [PATCH] Split content handler. Added PageContentController --- src/app/components/programa/programa.directive.js | 19 +++++++++++++++---- src/app/components/programa/programa.html | 16 +++++++++++++--- src/app/components/programa/programa.scss | 106 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------- src/app/components/programas/programas.scss | 2 +- src/app/index.route.js | 12 ++++++++++++ src/app/index.run.js | 2 +- src/app/pages/article/article.service.js | 7 +++++++ src/app/pages/header/header.html | 19 +++++++++++-------- src/app/pages/header/header.scss | 16 ++++++++++++++++ src/app/pages/programas/conheca-o-programa.html | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/app/pages/programas/programa.content.controller.js | 92 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/app/pages/programas/programa.controller.js | 1 + src/app/pages/programas/programa.html | 1 - src/app/pages/programas/programas.scss | 7 +++++++ 14 files changed, 298 insertions(+), 57 deletions(-) create mode 100644 src/app/pages/programas/conheca-o-programa.html create mode 100644 src/app/pages/programas/programa.content.controller.js diff --git a/src/app/components/programa/programa.directive.js b/src/app/components/programa/programa.directive.js index 52fca5e..f4f6fa0 100644 --- a/src/app/components/programa/programa.directive.js +++ b/src/app/components/programa/programa.directive.js @@ -9,10 +9,11 @@ function programaBox($rootScope) { /** @ngInject */ - function ProgramaController($state, Slug, $log) { + function ProgramaController(ArticleService, $state, Slug, $log) { $log.debug('ProgramaController'); var vm = this; + vm.ArticleService = ArticleService; vm.$state = $state; vm.Slug = Slug; vm.$log = $log; @@ -27,6 +28,8 @@ vm.program.slug = vm.Slug.slugify(vm.program.title); } + vm.displayType = vm.display; + // if(vm.program.color && !vm.program.bgColor){ // // 15% more darker // vm.program.colorDarker = window.ColorLuminance(vm.program.color, 0.15); @@ -79,10 +82,18 @@ ProgramaController.prototype.showContent = function () { var vm = this; - vm.$log.info('showContent'); + vm.$state.go('programa-conheca', { + slug: vm.program.slug + }, { + location: true + }); + }; + + ProgramaController.prototype.showPreview = function () { + var vm = this; + vm.$state.go('programa', { - slug: vm.program.slug, - program: vm.program + slug: vm.program.slug }, { location: true }); diff --git a/src/app/components/programa/programa.html b/src/app/components/programa/programa.html index fb8173d..2a1f8bc 100644 --- a/src/app/components/programa/programa.html +++ b/src/app/components/programa/programa.html @@ -1,5 +1,5 @@
-
+

{{::vm.getCategoryName()}}

@@ -10,7 +10,7 @@

{{::vm.program.title}}

-
+
@@ -18,7 +18,7 @@
-
+
{{::vm.getImageAlt()}}
@@ -26,5 +26,15 @@

+ +
+
+
+
+ +
+
+
+
diff --git a/src/app/components/programa/programa.scss b/src/app/components/programa/programa.scss index 36ec216..298ed1a 100644 --- a/src/app/components/programa/programa.scss +++ b/src/app/components/programa/programa.scss @@ -4,6 +4,46 @@ $scale: 1.1; $time: .2s; $darken: 15%; +// Commons +.button--themed { + padding: $program-box-space; + .btn { + color: #fff; + font-weight: bold; + padding: 15px 0; + border-left: 0; + border-right: 0; + border-top: 0; + border-radius: 6px; + + -webkit-transition: all $time ease-in-out; + -moz-transition: all $time ease-in-out; + -o-transition: all $time ease-in-out; + transition: all $time ease-in-out; + + @each $category, $color in $categories { + .#{$category} & { + background-color: $color; + border-bottom: 3px solid darken($color, $darken); + } + } + + &:hover, + &:focus { + @each $category, $color in $categories { + .#{$category} & { + background-color: darken($color, $darken); + } + } + } + + .contraste & { + color: #262626; + background-color: #fff; + } + } +} + .program-box { cursor: pointer; background-color: #fff; @@ -110,45 +150,6 @@ $darken: 15%; p { margin: 0; } } - &--button { - padding: $program-box-space; - .btn { - color: #fff; - font-weight: bold; - padding: 15px 0; - border-left: 0; - border-right: 0; - border-top: 0; - border-radius: 6px; - - -webkit-transition: all $time ease-in-out; - -moz-transition: all $time ease-in-out; - -o-transition: all $time ease-in-out; - transition: all $time ease-in-out; - - @each $category, $color in $categories { - .#{$category} & { - background-color: $color; - border-bottom: 3px solid darken($color, $darken); - } - } - - &:hover, - &:focus { - @each $category, $color in $categories { - .#{$category} & { - background-color: darken($color, $darken); - } - } - } - - .contraste & { - color: #262626; - background-color: #fff; - } - } - } - &--image-wrapper { position: relative; // width: 100%; @@ -231,4 +232,31 @@ $darken: 15%; .program-banner--abstract { padding-bottom: 10px; } + + .button--themed { + .btn { + font-size: 38px; + + @media (max-width: $screen-sm){ + font-size: 20px; + } + } + } +} + + +.program-content { + h2 { + font-size: 38px; + font-weight: 500; + margin-bottom: 40px; + padding-bottom: 20px; + + small { + display: block; + font-size: 16px; + padding-top: 5px; + text-transform: none; + } + } } diff --git a/src/app/components/programas/programas.scss b/src/app/components/programas/programas.scss index 09d58ea..a6e050e 100644 --- a/src/app/components/programas/programas.scss +++ b/src/app/components/programas/programas.scss @@ -64,7 +64,7 @@ position: absolute; top: -16px; left: -14px; - transform: scale(0.4); + transform: scale(0.35); } @each $category, $color in $categories { diff --git a/src/app/index.route.js b/src/app/index.route.js index 53b2069..e1e7b9f 100644 --- a/src/app/index.route.js +++ b/src/app/index.route.js @@ -57,6 +57,18 @@ 'footer': { templateUrl: 'app/pages/footer/footer.html' } } }) + .state('programa-conheca', { + url: '/programa/:slug/conheca-o-programa', + views: { + 'header': { templateUrl: 'app/pages/header/header.html' }, + 'main': { + templateUrl: 'app/pages/programas/conheca-o-programa.html', + controller: 'ProgramaContentPageController', + controllerAs: 'pageProgramaContent' + }, + 'footer': { templateUrl: 'app/pages/footer/footer.html' } + } + }) .state('sobre', { url: '/sobre', views: { diff --git a/src/app/index.run.js b/src/app/index.run.js index 3a9cdcc..e3f17e9 100644 --- a/src/app/index.run.js +++ b/src/app/index.run.js @@ -18,7 +18,7 @@ $rootScope.$on('$stateChangeStart', function(event, next) { if (!next.data || !next.data.authorizedRoles) { - $log.debug('public url/state'); + $log.debug('runAuth: public url/state'); return; } diff --git a/src/app/pages/article/article.service.js b/src/app/pages/article/article.service.js index f70c788..9eea74b 100644 --- a/src/app/pages/article/article.service.js +++ b/src/app/pages/article/article.service.js @@ -22,6 +22,7 @@ getTerms: getTerms, getArticleById: getArticleById, getArticleBySlug: getArticleBySlug, + getContentById: getContentById, setHomeAbstract: setHomeAbstract, getHomeAbstract: getHomeAbstract }; @@ -85,6 +86,12 @@ }, cbError); } + function getContentById (contentId, cbSuccess, cbError) { + return getArticleById(contentId, { + fields: 'id,body&content_type=ProposalsDiscussionPlugin::Topic' + }, cbSuccess, cbError); + } + function getHome (cbSuccess, cbError) { return getArticleById(idArticleHome, { fields: 'id,children,categories,abstract,title,image,url,setting,position', diff --git a/src/app/pages/header/header.html b/src/app/pages/header/header.html index 80c0cdd..890c502 100644 --- a/src/app/pages/header/header.html +++ b/src/app/pages/header/header.html @@ -1,15 +1,18 @@
-
- +
- +
+ + + +
diff --git a/src/app/pages/header/header.scss b/src/app/pages/header/header.scss index e69de29..e8d5424 100644 --- a/src/app/pages/header/header.scss +++ b/src/app/pages/header/header.scss @@ -0,0 +1,16 @@ +.accessibility-wrapper { + .icon-user { + display: inline-block; + vertical-align: middle; + width: 26px; + height: 26px; + border: 1px solid #ccc; + border-radius: 100%; + background-position: 1px 0px; + + .contraste & { + // XXX: chage for dinamic handler + background-position: -0px -24px; + } + } +} diff --git a/src/app/pages/programas/conheca-o-programa.html b/src/app/pages/programas/conheca-o-programa.html new file mode 100644 index 0000000..b1c88f8 --- /dev/null +++ b/src/app/pages/programas/conheca-o-programa.html @@ -0,0 +1,55 @@ +
+
+
+
+
+
+ +
+
+ +
+
+ + +
+
+
+
+
+ +
+
+
+ + +
+
+
+
+
+
+
+ +
+
diff --git a/src/app/pages/programas/programa.content.controller.js b/src/app/pages/programas/programa.content.controller.js new file mode 100644 index 0000000..88374b3 --- /dev/null +++ b/src/app/pages/programas/programa.content.controller.js @@ -0,0 +1,92 @@ +(function() { + 'use strict'; + + angular + .module('dialoga') + .controller('ProgramaContentPageController', ProgramaContentPageController); + + /** @ngInject */ + function ProgramaContentPageController(ArticleService, $state, $location, $scope, $rootScope, $log) { + $log.debug('ProgramaContentPageController'); + + var vm = this; + + vm.ArticleService = ArticleService; + vm.$state = $state; + vm.$location = $location; + vm.$scope = $scope; + vm.$rootScope = $rootScope; + vm.$log = $log; + + vm.init(); + } + + ProgramaContentPageController.prototype.init = function () { + var vm = this; + + var params = vm.$state.params; + var slug = params.slug; + + vm.program = null; + vm.currentCategory = null; + vm.loadingContent = null; + vm.error = null; + + vm.ArticleService.getHome(function(data){ + vm.categories = data.article.categories; + }, function (error) { + vm.$log.error(error); + }); + + vm.ArticleService.getArticleBySlug(slug, function(program){ + vm.program = program; + vm.currentCategory = vm.program.categories[0]; + + vm.$scope.$watch('programa.currentCategory', function(newValue, oldValue){ + if(newValue !== oldValue){ + vm.$state.go('inicio', { + tema: newValue.slug + }, { + location: true + }); + } + }); + + vm.loadContent(); + + }, function (error) { + vm.$log.error(error); + vm.$log.info('Rollback to home page.'); + vm.$state.go('inicio', {}, {location: true}); + }); + }; + + ProgramaContentPageController.prototype.loadContent = function () { + var vm = this; + + vm.loadingContent = true; + if(!vm.program.body){ + vm.ArticleService.getContentById(vm.program.id, function (data) { + vm.program.body = data.article.body; + vm.loadingContent = false; + }, function (error) { + vm.loadingContent = false; + vm.error = error; + }); + } + vm.loadingContent = false; + }; + + ProgramaContentPageController.prototype.goBack = function () { + var vm = this; + + var prevState = vm.$rootScope.$previousState; + if(prevState && prevState.state.name){ + vm.$state.go(prevState.state.name, prevState.params); + } else { + vm.$state.go('programa', { + slug: vm.program.slug + }); + } + }; +})(); diff --git a/src/app/pages/programas/programa.controller.js b/src/app/pages/programas/programa.controller.js index 9132d01..0e58f4e 100644 --- a/src/app/pages/programas/programa.controller.js +++ b/src/app/pages/programas/programa.controller.js @@ -29,6 +29,7 @@ vm.program = null; vm.currentCategory = null; + vm.loadingContent = null; vm.ArticleService.getHome(function(data){ vm.categories = data.article.categories; diff --git a/src/app/pages/programas/programa.html b/src/app/pages/programas/programa.html index 20686c2..a2e1cce 100644 --- a/src/app/pages/programas/programa.html +++ b/src/app/pages/programas/programa.html @@ -34,6 +34,5 @@
-
diff --git a/src/app/pages/programas/programas.scss b/src/app/pages/programas/programas.scss index 32b3b13..03dee93 100644 --- a/src/app/pages/programas/programas.scss +++ b/src/app/pages/programas/programas.scss @@ -7,6 +7,10 @@ &--item { margin: 8px 0; + + @media (max-width: $screen-xs) { + margin: 8px; + } } .navbar { @@ -28,4 +32,7 @@ } } +.program--aside { + margin-top: 20px; +} -- libgit2 0.21.2