Commit 50fb1ccddd518bd796d794c95b44f1b0feaa090a

Authored by Tallys Martins
1 parent a309577c

Changes /profile page css style

Signed-off-by: Tallys Martins <tallysmartins@gmail.com>
Signed-off-by: Paulo Tada <paulohtfs@gmail.com>
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/info/profile-info.scss 0 → 100644
src/app/profile/profile.component.ts
@@ -47,11 +47,6 @@ import {ProfileToolbarComponent} from &quot;./profile-toolbar.component&quot;; @@ -47,11 +47,6 @@ import {ProfileToolbarComponent} from &quot;./profile-toolbar.component&quot;;
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;}