From e3e43e8769ab23b83b57c678cf75b16c2717b997 Mon Sep 17 00:00:00 2001 From: Michel Felipe de Oliveira Ferreira - SUPDE/DESDR/DE502 <03385437598@serpro-1552831.(none)> Date: Wed, 23 Mar 2016 18:33:19 -0300 Subject: [PATCH] Added tabs and two columns main layout into profile-info component --- gulp/styles.js | 3 ++- src/app/index.scss | 16 ++++++++++++++++ src/app/layout/scss/_bootstrap-overrides.scss | 94 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/app/layout/scss/_mixins.scss | 5 +++++ src/app/profile/info/profile-info.html | 31 +++++++++++++++++++++++++++---- src/languages/en.json | 10 +++++----- src/languages/pt.json | 9 +++++---- 7 files changed, 154 insertions(+), 14 deletions(-) create mode 100644 src/app/layout/scss/_bootstrap-overrides.scss create mode 100644 src/app/layout/scss/_mixins.scss diff --git a/gulp/styles.js b/gulp/styles.js index 9eada3f..b46de71 100644 --- a/gulp/styles.js +++ b/gulp/styles.js @@ -27,7 +27,8 @@ var buildStyles = function() { var injectFiles = gulp.src([ path.join(conf.paths.src, '/app/**/*.scss'), - path.join('!' + conf.paths.src, '/app/index.scss') + path.join('!' + conf.paths.src, '/app/index.scss'), + path.join('!' + conf.paths.src, '/app/layout/scss/*.scss') ], { read: false }); var injectOptions = { diff --git a/src/app/index.scss b/src/app/index.scss index 2f8ec30..22b0979 100644 --- a/src/app/index.scss +++ b/src/app/index.scss @@ -16,6 +16,20 @@ $panel-default-text: rgb(44, 62, 80); $link-color: #007EBB; $body-bg: #f5f8fa; $page-header-border-color: #eee; + +//global bg color +$main-bg-color: #e7ebee; + +//primary colors +$primary-color: #03a9f4; +$primary-color-dark: #0288d1; + +//GRID - media queries breakpoints +$break-xxs-min: 420px; +$break-xs-min: 768px; + +$break-xxs-max: ($break-xxs-min - 1); +$break-xs-max: ($break-xs-min - 1); @import "../../bower_components/bootswatch/flatly/_variables.scss"; /** @@ -52,3 +66,5 @@ h1, h2, h3, h4, h5 { // endinjector @import "../../bower_components/bootswatch/flatly/_bootswatch.scss"; +@import "layout/scss/mixins"; +@import "layout/scss/bootstrap-overrides"; diff --git a/src/app/layout/scss/_bootstrap-overrides.scss b/src/app/layout/scss/_bootstrap-overrides.scss new file mode 100644 index 0000000..a522883 --- /dev/null +++ b/src/app/layout/scss/_bootstrap-overrides.scss @@ -0,0 +1,94 @@ +/* MAINBOX */ +.main-box { + border: 1px solid #e7ebee; + box-shadow: 0px 1px 1px rgba(0,0,0,0.1); + margin-bottom: 16px; + /* overflow: hidden; */ + @include border-radius($border-radius-base); + + @media (max-width: $break-xs-max) { + margin-bottom: 10px; + } + + h2 { + font-size: 1.3em; + line-height: 29px; + margin: 0; + padding: 0; + + @media (max-width: $break-xxs-max) { + margin-bottom: 5px; + } + } + &.no-header { + padding-top: 20px; + } + .main-box-header { + min-height: 50px; + padding: 10px 20px; + + &.with-border { + border-bottom: 1px solid #ecf0f1; + } + } + .main-box-body { + padding: 0 20px 20px 20px; + } +} + +/* TABS */ +.nav-tabs { + background: #f9f9f9; + border-color: transparent; + margin-bottom: 15px; + @include border-radius(3px 3px 0 0); + + > li > a { + @include border-radius(0); + font-size: 1.125em; + font-weight: 300; + outline: none; + color: #555; + margin-right: 3px; + } + > li > a:hover, + > li > a:focus { + border-color: transparent; + @include border-radius(3px 3px 0 0); + color: #555; + border-bottom: 0; + background: rgba(219, 221, 223, 0.46); + } + > li.active > a, + > li.active > a:hover, + > li.active > a:focus { + @include border-radius(3px 3px 0 0); + border-left: 0; + border-top: 2px solid #03a9f4; + border-right: 0; + background: #fff; + } +} +.nav .open > a, +.nav .open > a:hover, +.nav .open > a:focus { + border-color: $main-bg-color; +} +.nav .caret { + border-bottom-color: $primary-color; + border-top-color: $primary-color; +} +.main-box .tabs-header { + min-height: 50px; + padding: 10px 20px; +} +.main-box .tab-content-body { + padding: 0 20px 20px 20px; + margin-bottom: 0; +} +.main-box .tab-content { + padding: 0 10px; +} +.tabs-wrapper.tabs-no-header .tab-content { + padding: 0 20px 20px; +} diff --git a/src/app/layout/scss/_mixins.scss b/src/app/layout/scss/_mixins.scss new file mode 100644 index 0000000..37063cb --- /dev/null +++ b/src/app/layout/scss/_mixins.scss @@ -0,0 +1,5 @@ +// MIXINS +@mixin border-radius($radius) { + border-radius: $radius; + background-clip: padding-box; /* stops bg color from leaking outside the border: */ +} diff --git a/src/app/profile/info/profile-info.html b/src/app/profile/info/profile-info.html index c98d4d2..31cd2b6 100644 --- a/src/app/profile/info/profile-info.html +++ b/src/app/profile/info/profile-info.html @@ -1,6 +1,29 @@ -

{{vm.profile.name}}

-
-

{{"profile.wall" | translate}}

- + +
+
+
+

{{vm.profile.name}}

+
+
+ +
+ {{"profile.member_since" | translate}}: {{vm.profile.created_at}} +
+
+
+
+ +
+
+ + + + + + + + +
+
diff --git a/src/languages/en.json b/src/languages/en.json index 902666b..b282f6e 100644 --- a/src/languages/en.json +++ b/src/languages/en.json @@ -1,4 +1,4 @@ -{ +{ "noosfero.name" : "Noosfero", "blocks.profile_image.control_panel": "Control Panel", "navbar.profile": "Profile", @@ -9,7 +9,9 @@ "language.en": "English", "language.pt": "Portuguese", "language.selector": "Language", - "profile.wall": "Profile Wall", + "profile.member_since": "Member since", + "profile.about": "About me", + "activities.title": "Activities", "activities.create_article.description": "has published on", "activities.add_member_in_community.description": "has joined the community", "activities.new_friendship.description": "has made {friends, plural, one{one new friend} other{# new friends}}:", @@ -22,7 +24,5 @@ "notification.error.default.title": "Oops...", "notification.profile.not_found": "Page not found", "notification.http_error.401.message": "Unauthorized", - "notification.http_error.500.message": "Server error", - "comment.post": "Post", - "comment.reply": "reply" + "notification.http_error.500.message": "Server error" } diff --git a/src/languages/pt.json b/src/languages/pt.json index 07c9e67..4b7a0b2 100644 --- a/src/languages/pt.json +++ b/src/languages/pt.json @@ -1,4 +1,4 @@ -{ +{ "noosfero.name" : "Noosfero", "blocks.profile_image.control_panel": "Painel de Controle", "navbar.profile": "Perfil", @@ -10,6 +10,9 @@ "language.pt": "Português", "language.selector": "Idioma", "profile.wall": "Mural do Perfil", + "profile.member_since": "Membro desde", + "profile.about": "Meus dados", + "activities.title": "Atividades", "activities.create_article.description": "publicou em", "activities.add_member_in_community.description": "entrou na comunidade", "activities.new_friendship.description": "fez {friends, plural, one{um novo amigo} other{# novos amigos}}:", @@ -22,7 +25,5 @@ "notification.error.default.title": "Oops...", "notification.profile.not_found": "Página não encontrada", "notification.http_error.401.message": "Não autorizado", - "notification.http_error.500.message": "Erro no servidor", - "comment.post": "Postar", - "comment.reply": "responder" + "notification.http_error.500.message": "Erro no servidor" } -- libgit2 0.21.2