From 10073da65ba27eabfc78653640d81870003f0f94 Mon Sep 17 00:00:00 2001 From: Leonardo Merlin Date: Tue, 17 Nov 2015 16:34:26 -0200 Subject: [PATCH] Fixes #23 and refact directive name from 'navbar' to 'app-navbar' --- src/app/components/app-navbar/app-navbar.directive.js | 37 +++++++++++++++++++++++++++++++++++++ src/app/components/app-navbar/app-navbar.html | 101 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/app/components/app-navbar/app-navbar.scss | 222 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/app/components/navbar/navbar.directive.js | 37 ------------------------------------- src/app/components/navbar/navbar.html | 70 ---------------------------------------------------------------------- src/app/components/navbar/navbar.scss | 222 ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ 6 files changed, 360 insertions(+), 329 deletions(-) create mode 100644 src/app/components/app-navbar/app-navbar.directive.js create mode 100644 src/app/components/app-navbar/app-navbar.html create mode 100644 src/app/components/app-navbar/app-navbar.scss delete mode 100644 src/app/components/navbar/navbar.directive.js delete mode 100644 src/app/components/navbar/navbar.html delete mode 100644 src/app/components/navbar/navbar.scss diff --git a/src/app/components/app-navbar/app-navbar.directive.js b/src/app/components/app-navbar/app-navbar.directive.js new file mode 100644 index 0000000..01fe9b9 --- /dev/null +++ b/src/app/components/app-navbar/app-navbar.directive.js @@ -0,0 +1,37 @@ +(function() { + 'use strict'; + + angular + .module('dialoga') + .directive('appNavbar', appNavbar); + + /** @ngInject */ + function appNavbar() { + + /** @ngInject */ + function NavbarController($log) { + $log.debug('NavbarController'); + + var vm = this; + + vm.scrollTo = function(hash) { + var $el = angular.element('#' + hash); + angular.element('body').animate({scrollTop: $el.offset().top}, 'slow'); + }; + } + + var directive = { + restrict: 'E', + templateUrl: 'app/components/app-navbar/app-navbar.html', + scope: { + creationDate: '=' + }, + controller: NavbarController, + controllerAs: 'vm', + bindToController: true + }; + + return directive; + } + +})(); diff --git a/src/app/components/app-navbar/app-navbar.html b/src/app/components/app-navbar/app-navbar.html new file mode 100644 index 0000000..113cb13 --- /dev/null +++ b/src/app/components/app-navbar/app-navbar.html @@ -0,0 +1,101 @@ +
+ + + +
diff --git a/src/app/components/app-navbar/app-navbar.scss b/src/app/components/app-navbar/app-navbar.scss new file mode 100644 index 0000000..bf96b5c --- /dev/null +++ b/src/app/components/app-navbar/app-navbar.scss @@ -0,0 +1,222 @@ +.app-navbar { + + border-bottom: 2px solid #f1f1f1; + + .navbar { + margin-bottom: 0; + border: none; + } + + .navbar-brand { + height: auto; + padding-bottom: 0; + padding-left: 0; + + @media screen and (max-width: $screen-md) { + padding: 20px 0; + margin: 20px 0; + } + } + + .navbar-toggle { + border-radius: 100%; + background-color: #5e749d; + + .icon-bar { + height: 3px; + background-color: #fff; + } + + @media screen and (max-width: $screen-md) { + padding: 12px 10px; + margin: 0; + } + } + + .navbar-nav .divider span { + display: block; + + @media screen and (max-width: $screen-md) { + display: none; + } + } + + .dropdown-menu { + padding: 0; + } + + .navbar-nav { + + li > a { + text-transform: uppercase; + color: #616161; + font-weight: bold; + + &:hover, + &:focus { + background: none; + } + + .contraste & { + color: #fff; + } + } + + li.active > a { + border-bottom: 2px solid #77BB34; + } + } + + .contraste & { + .nav > li > a:hover, + .nav > li > a:focus { + color: #fff; + } + + .active a { + border-bottom-color: #fff; + } + } + + // <= Mobile + @media screen and (max-width: ($screen-sm - 1)) { + .navbar-collapse { + margin: 0 -15px; + } + + .navbar-nav { + background-color: #eee; + + & > li { + // border-top: 1px solid #ccc; + -moz-border-image: -moz-linear-gradient(left, #eee 0%, #ccc 100%); + -webkit-border-image: -webkit-linear-gradient(left, #eee 0%, #ccc 100%); + border-image: linear-gradient(to right, #eee 0%, #ccc 100%); + border-image-slice: 1; + + border-top: 1px solid #ccc; + border-bottom: 0px solid #ccc; + border-left: 0px solid #ccc; + border-right: 0px solid #ccc; + &:last-child { + border-bottom: 1px solid #ccc; + } + } + + & > li > a { + padding: 12px 20px; + margin: 0; + text-align: right; + } + + & > li.active > a { + border-bottom: none; + border-right: 4px solid #77BB34; + } + + .dropdown-toggle { + margin-top: 0px; + + } + .dropdown-menu { + position: relative; + margin-right: 10px; + } + + .social-share { + float: right; + } + } + + } + + // >= Table, < Destop + @media screen and (min-width: $screen-sm) and (max-width: ($screen-md - 1)) { + .navbar-brand { + padding-top: 0; + margin-top: 0; + margin-bottom: 60px; + } + + .navbar-collapse { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + + ul.navbar-nav { + width: 100%; + float: none; + } + + li > a { + margin: 0 10px; + padding: 0 0 10px 0; + } + + li.dropdown { + position: absolute; + right: 0; + bottom: 0; + + .dropdown-toggle { + position: relative; + width: 160px; + margin: 0 5px 5px 0; + padding: 0; + } + } + } + } + // >= Desktop + @media screen and (min-width: $screen-md) { + + li > a { + padding: 15px 0; + margin: 0 9px; + } + + li.divider span{ + padding: 12px 0; + line-height: 20px; + } + + li.dropdown { + .dropdown-toggle { + padding: 6px 10px; + margin: 0; + } + } + } + + // > Desktop Large + @media screen and (min-width: $screen-lg) { + .navbar-brand { + margin-bottom: 30px; + } + + ul.navbar-nav { + position: absolute; + right: 0; + bottom: 0; + } + + li.divider span{ + padding: 12px 6px; + } + } +} + +#dialoga-nas-redes { + position: absolute; + right: 0; + top: 0; + z-index: 1000; + + .text { + position: absolute; + top: 5px; + right: 210px; + width: 100px; + } +} diff --git a/src/app/components/navbar/navbar.directive.js b/src/app/components/navbar/navbar.directive.js deleted file mode 100644 index 42ee8ac..0000000 --- a/src/app/components/navbar/navbar.directive.js +++ /dev/null @@ -1,37 +0,0 @@ -(function() { - 'use strict'; - - angular - .module('dialoga') - .directive('appNavbar', appNavbar); - - /** @ngInject */ - function appNavbar() { - - /** @ngInject */ - function NavbarController($log) { - $log.debug('NavbarController'); - - var vm = this; - - vm.scrollTo = function(hash) { - var $el = angular.element('#' + hash); - angular.element('body').animate({scrollTop: $el.offset().top}, 'slow'); - }; - } - - var directive = { - restrict: 'E', - templateUrl: 'app/components/navbar/navbar.html', - scope: { - creationDate: '=' - }, - controller: NavbarController, - controllerAs: 'vm', - bindToController: true - }; - - return directive; - } - -})(); diff --git a/src/app/components/navbar/navbar.html b/src/app/components/navbar/navbar.html deleted file mode 100644 index 2ab9ec6..0000000 --- a/src/app/components/navbar/navbar.html +++ /dev/null @@ -1,70 +0,0 @@ -
- - - -
diff --git a/src/app/components/navbar/navbar.scss b/src/app/components/navbar/navbar.scss deleted file mode 100644 index bf96b5c..0000000 --- a/src/app/components/navbar/navbar.scss +++ /dev/null @@ -1,222 +0,0 @@ -.app-navbar { - - border-bottom: 2px solid #f1f1f1; - - .navbar { - margin-bottom: 0; - border: none; - } - - .navbar-brand { - height: auto; - padding-bottom: 0; - padding-left: 0; - - @media screen and (max-width: $screen-md) { - padding: 20px 0; - margin: 20px 0; - } - } - - .navbar-toggle { - border-radius: 100%; - background-color: #5e749d; - - .icon-bar { - height: 3px; - background-color: #fff; - } - - @media screen and (max-width: $screen-md) { - padding: 12px 10px; - margin: 0; - } - } - - .navbar-nav .divider span { - display: block; - - @media screen and (max-width: $screen-md) { - display: none; - } - } - - .dropdown-menu { - padding: 0; - } - - .navbar-nav { - - li > a { - text-transform: uppercase; - color: #616161; - font-weight: bold; - - &:hover, - &:focus { - background: none; - } - - .contraste & { - color: #fff; - } - } - - li.active > a { - border-bottom: 2px solid #77BB34; - } - } - - .contraste & { - .nav > li > a:hover, - .nav > li > a:focus { - color: #fff; - } - - .active a { - border-bottom-color: #fff; - } - } - - // <= Mobile - @media screen and (max-width: ($screen-sm - 1)) { - .navbar-collapse { - margin: 0 -15px; - } - - .navbar-nav { - background-color: #eee; - - & > li { - // border-top: 1px solid #ccc; - -moz-border-image: -moz-linear-gradient(left, #eee 0%, #ccc 100%); - -webkit-border-image: -webkit-linear-gradient(left, #eee 0%, #ccc 100%); - border-image: linear-gradient(to right, #eee 0%, #ccc 100%); - border-image-slice: 1; - - border-top: 1px solid #ccc; - border-bottom: 0px solid #ccc; - border-left: 0px solid #ccc; - border-right: 0px solid #ccc; - &:last-child { - border-bottom: 1px solid #ccc; - } - } - - & > li > a { - padding: 12px 20px; - margin: 0; - text-align: right; - } - - & > li.active > a { - border-bottom: none; - border-right: 4px solid #77BB34; - } - - .dropdown-toggle { - margin-top: 0px; - - } - .dropdown-menu { - position: relative; - margin-right: 10px; - } - - .social-share { - float: right; - } - } - - } - - // >= Table, < Destop - @media screen and (min-width: $screen-sm) and (max-width: ($screen-md - 1)) { - .navbar-brand { - padding-top: 0; - margin-top: 0; - margin-bottom: 60px; - } - - .navbar-collapse { - position: absolute; - left: 0; - bottom: 0; - width: 100%; - - ul.navbar-nav { - width: 100%; - float: none; - } - - li > a { - margin: 0 10px; - padding: 0 0 10px 0; - } - - li.dropdown { - position: absolute; - right: 0; - bottom: 0; - - .dropdown-toggle { - position: relative; - width: 160px; - margin: 0 5px 5px 0; - padding: 0; - } - } - } - } - // >= Desktop - @media screen and (min-width: $screen-md) { - - li > a { - padding: 15px 0; - margin: 0 9px; - } - - li.divider span{ - padding: 12px 0; - line-height: 20px; - } - - li.dropdown { - .dropdown-toggle { - padding: 6px 10px; - margin: 0; - } - } - } - - // > Desktop Large - @media screen and (min-width: $screen-lg) { - .navbar-brand { - margin-bottom: 30px; - } - - ul.navbar-nav { - position: absolute; - right: 0; - bottom: 0; - } - - li.divider span{ - padding: 12px 6px; - } - } -} - -#dialoga-nas-redes { - position: absolute; - right: 0; - top: 0; - z-index: 1000; - - .text { - position: absolute; - top: 5px; - right: 210px; - width: 100px; - } -} -- libgit2 0.21.2