Commit 50fb1ccddd518bd796d794c95b44f1b0feaa090a
1 parent
a309577c
Changes /profile page css style
Signed-off-by: Tallys Martins <tallysmartins@gmail.com> Signed-off-by: Paulo Tada <paulohtfs@gmail.com>
Showing
10 changed files
with
47 additions
and
25 deletions
Show diff stats
src/app/index.scss
| @@ -39,6 +39,12 @@ $break-sm-min: 992px; | @@ -39,6 +39,12 @@ $break-sm-min: 992px; | ||
| 39 | $break-xxs-max: ($break-xxs-min - 1); | 39 | $break-xxs-max: ($break-xxs-min - 1); |
| 40 | $break-sm-max: ($break-sm-min - 1); | 40 | $break-sm-max: ($break-sm-min - 1); |
| 41 | $break-xs-max: ($break-xs-min - 1); | 41 | $break-xs-max: ($break-xs-min - 1); |
| 42 | +// TODO: improve this method to collect all the paddings with a single var | ||
| 43 | +$wrapper-padding: 15px 15px 35px 15px; | ||
| 44 | +$wrapper-padding-top: 15px; | ||
| 45 | +$wrapper-padding-right: 15px; | ||
| 46 | +$wrapper-padding-bottom: 35px; | ||
| 47 | +$wrapper-padding-left: 15px; | ||
| 42 | 48 | ||
| 43 | 49 | ||
| 44 | @import "../../bower_components/bootswatch/flatly/_variables.scss"; | 50 | @import "../../bower_components/bootswatch/flatly/_variables.scss"; |
src/app/layout/blocks/communities/communities-block.html
| 1 | - <div ng-repeat="profile in ctrl.profiles" class="col-xs-2 col-md-4 block-item"> | ||
| 2 | - <a ui-sref="main.profile.home({profile: profile.identifier})"> | ||
| 3 | - <noosfero-profile-image [profile]="profile"></noosfero-profile-image> | ||
| 4 | - </a> | ||
| 5 | - <p>{{profile.name}}</p> | ||
| 6 | - </div> | 1 | +<div ng-repeat="profile in ctrl.profiles" class="col-xs-2 col-md-4 block-item"> |
| 2 | + <a ui-sref="main.profile.home({profile: profile.identifier})"> | ||
| 3 | + <noosfero-profile-image [profile]="profile"></noosfero-profile-image> | ||
| 4 | + </a> | ||
| 5 | + <p>{{profile.name}}</p> | ||
| 6 | +</div> |
src/app/layout/scss/skins/_whbl.scss
| @@ -122,7 +122,7 @@ $whbl-font-color: #16191c; | @@ -122,7 +122,7 @@ $whbl-font-color: #16191c; | ||
| 122 | margin-bottom: 0; | 122 | margin-bottom: 0; |
| 123 | position: relative; | 123 | position: relative; |
| 124 | min-height: 1200px; | 124 | min-height: 1200px; |
| 125 | - padding: 15px 15px 35px 15px; | 125 | + padding: $wrapper-padding; |
| 126 | margin-left: 220px; | 126 | margin-left: 220px; |
| 127 | // border-left: 2px solid #e7ebee; | 127 | // border-left: 2px solid #e7ebee; |
| 128 | } | 128 | } |
src/app/profile/image/image.html
| 1 | <span class="profile-image-wrap" title="{{ctrl.profile.name}}"> | 1 | <span class="profile-image-wrap" title="{{ctrl.profile.name}}"> |
| 2 | - <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class="img-responsive profile-image img-avatar"> | 2 | + <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class=""> |
| 3 | <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image img-avatar"></i> | 3 | <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image img-avatar"></i> |
| 4 | </span> | 4 | </span> |
src/app/profile/info/profile-info.component.ts
| @@ -24,9 +24,6 @@ export class ProfileInfoComponent { | @@ -24,9 +24,6 @@ export class ProfileInfoComponent { | ||
| 24 | init() { | 24 | init() { |
| 25 | this.profileService.getCurrentProfile().then((profile: noosfero.Profile) => { | 25 | this.profileService.getCurrentProfile().then((profile: noosfero.Profile) => { |
| 26 | this.profile = profile; | 26 | this.profile = profile; |
| 27 | - return this.profileService.getActivities(<number>this.profile.id); | ||
| 28 | - }).then((response: restangular.IResponse) => { | ||
| 29 | - this.activities = response.data.activities; | ||
| 30 | }); | 27 | }); |
| 31 | } | 28 | } |
| 32 | } | 29 | } |
src/app/profile/info/profile-info.html
| @@ -28,13 +28,13 @@ | @@ -28,13 +28,13 @@ | ||
| 28 | </div> | 28 | </div> |
| 29 | </div> | 29 | </div> |
| 30 | </div> --> | 30 | </div> --> |
| 31 | -<div class="bg-image"> | 31 | +<div class="bg-image" style="background-color: black";> |
| 32 | 32 | ||
| 33 | </div> | 33 | </div> |
| 34 | 34 | ||
| 35 | -<div class="container" id="noosfero-profile"> | 35 | +<div class="container" id="noosfero-profile" style="background-color: aqua";> |
| 36 | <div class="col-sm-2"> | 36 | <div class="col-sm-2"> |
| 37 | - <noosfero-profile-image [profile]="vm.profile" class="img-avatar-main" data-pin-nopin="true"><noosfero-profile-image> | 37 | + <noosfero-profile-image [profile]="vm.profile" class="img-avatar-main" data-pin-nopin="true"></noosfero-profile-image> |
| 38 | <ul class="social"> | 38 | <ul class="social"> |
| 39 | <li>Facebook</li> | 39 | <li>Facebook</li> |
| 40 | <li>Twitter</li> | 40 | <li>Twitter</li> |
src/app/profile/profile.component.ts
| @@ -47,11 +47,6 @@ import {ProfileToolbarComponent} from "./profile-toolbar.component"; | @@ -47,11 +47,6 @@ import {ProfileToolbarComponent} from "./profile-toolbar.component"; | ||
| 47 | "toolbar@main": { | 47 | "toolbar@main": { |
| 48 | templateUrl: "app/profile/toolbar.html", | 48 | templateUrl: "app/profile/toolbar.html", |
| 49 | controller: ProfileToolbarComponent, | 49 | controller: ProfileToolbarComponent, |
| 50 | - }, | ||
| 51 | - "mainBlockContent": { | ||
| 52 | - templateUrl: "app/profile/activities/activities.html", | ||
| 53 | - controller: ProfileInfoComponent, | ||
| 54 | - controllerAs: "vm" | ||
| 55 | } | 50 | } |
| 56 | } | 51 | } |
| 57 | }, | 52 | }, |
src/app/profile/profile.html
| @@ -4,6 +4,7 @@ | @@ -4,6 +4,7 @@ | ||
| 4 | [attribute]="'custom_header'" | 4 | [attribute]="'custom_header'" |
| 5 | [profile]="vm.profile"> | 5 | [profile]="vm.profile"> |
| 6 | </custom-content> | 6 | </custom-content> |
| 7 | + <div class="row" ui-view="profile-info"></div> | ||
| 7 | <noosfero-boxes ng-if="vm.boxes" | 8 | <noosfero-boxes ng-if="vm.boxes" |
| 8 | [layout]="vm.profile.layout_template" | 9 | [layout]="vm.profile.layout_template" |
| 9 | [boxes]="vm.boxes" | 10 | [boxes]="vm.boxes" |
src/app/profile/profile.scss
| 1 | .profile-container { | 1 | .profile-container { |
| 2 | @extend .container-fluid; | 2 | @extend .container-fluid; |
| 3 | - padding: 0 1%; | 3 | + margin-top: -$wrapper-padding-top; |
| 4 | + margin-left: -$wrapper-padding-left; | ||
| 5 | + margin-bottom: -$wrapper-padding-bottom; | ||
| 6 | + margin-right: -$wrapper-padding-right; | ||
| 4 | @media (max-width: 978px) { | 7 | @media (max-width: 978px) { |
| 5 | padding: 0 2%; | 8 | padding: 0 2%; |
| 6 | } | 9 | } |
| @@ -14,8 +17,6 @@ | @@ -14,8 +17,6 @@ | ||
| 14 | @charset "UTF-8"; | 17 | @charset "UTF-8"; |
| 15 | /* CSS Document */ | 18 | /* CSS Document */ |
| 16 | 19 | ||
| 17 | -@import "font-awesome.min.css"; | ||
| 18 | -@import "font-awesome-ie7.min.css"; | ||
| 19 | /* Space out content a bit */ | 20 | /* Space out content a bit */ |
| 20 | body { | 21 | body { |
| 21 | padding-top: 0; | 22 | padding-top: 0; |
| @@ -144,11 +145,33 @@ a{ | @@ -144,11 +145,33 @@ a{ | ||
| 144 | 145 | ||
| 145 | /* NOOSFERO PROFILE */ | 146 | /* NOOSFERO PROFILE */ |
| 146 | .bg-image {} | 147 | .bg-image {} |
| 147 | -#noosfero-profile {background:#fff; margin: -200px auto auto; z-index:9999; left:0; right:0; border:1px solid #eee; padding:20px 0;} | ||
| 148 | - #noosfero-profile img {margin:10px; border:1px solid #eee;} | 148 | +#noosfero-profile { |
| 149 | + background:#fff; | ||
| 150 | + margin: -200px auto auto; | ||
| 151 | + z-index:9999; | ||
| 152 | + left:0; | ||
| 153 | + right:0; | ||
| 154 | + border:1px solid #eee; | ||
| 155 | + padding:20px 0; | ||
| 156 | + font-size: 14px; | ||
| 157 | + img, i { | ||
| 158 | + text-align: center; | ||
| 159 | + margin:10px; border:1px solid #eee; | ||
| 160 | + } | ||
| 161 | + .col-sm-2 { | ||
| 162 | + text-align: center; | ||
| 163 | + } | ||
| 164 | + h3 { | ||
| 165 | + margin-top: 16px; | ||
| 166 | + } | ||
| 167 | +} | ||
| 149 | ul.social {list-style:none; text-align:center;padding:0; margin:0;} | 168 | ul.social {list-style:none; text-align:center;padding:0; margin:0;} |
| 150 | #infocontato {max-width:200px;} | 169 | #infocontato {max-width:200px;} |
| 151 | -#infocontato .alert-info{margin:.5rem 0; padding:1rem; font-size:1rem; line-height:1.5rem;} | 170 | +#infocontato .alert-info{margin:.5rem 0; |
| 171 | + padding:1rem; | ||
| 172 | + font-size:1rem; | ||
| 173 | + line-height:1.5rem; | ||
| 174 | +} | ||
| 152 | #noosfero-groups {margin:auto;} | 175 | #noosfero-groups {margin:auto;} |
| 153 | 176 | ||
| 154 | .secondary {border:1px solid #eee; padding:1rem; margin-top:2rem;} | 177 | .secondary {border:1px solid #eee; padding:1rem; margin-top:2rem;} |