Commit 5070aa0d34fa9f3fdfe4f8319416f53274358720

Authored by Michel Felipe
1 parent b8cf9be2

First communities block sass adjusts. Needs more adjusts

src/app/layout/blocks/communities/communities-block.html
1 1 <div class="communities-block">
2 2 <a ng-repeat="profile in ctrl.profiles" ui-sref="main.profile.home({profile: profile.identifier})" class="profile">
3   - <noosfero-profile-image [profile]="profile"></noosfero-profile-image>
  3 + <noosfero-profile-image [profile]="profile" [showDetails]="true"></noosfero-profile-image>
4 4 </a>
5 5 </div>
... ...
src/app/layout/blocks/communities/communities-block.scss
1 1 .communities-block {
2 2 .profile {
3   - margin: 10px;
  3 + // margin: 10px;
  4 +
  5 + #profile-image-container {
  6 + float: left;
  7 + text-align: center;
  8 +
  9 + .profile-image-wrap {
  10 + float: left;
  11 + margin-left: 10px;
  12 + width: 130px;
  13 + height: 130px;
  14 + }
  15 + }
  16 +
4 17 img, i.profile-image {
5   - width: 60px;
  18 + width: 80px;
  19 + height: 80px;
  20 + overflow: hidden;
  21 + border-radius: 50%;
  22 + background-clip: padding-box;
6 23 }
7 24 img {
8 25 display: inline-block;
... ... @@ -12,5 +29,21 @@
12 29 text-align: center;
13 30 font-size: 4.5em;
14 31 }
  32 + .details {
  33 +
  34 + margin-top: -25px;
  35 +
  36 + > .profile-name {
  37 + font-size: 11pt;
  38 + font-weight: 600;
  39 + a {
  40 + list-style: none;
  41 + color: #212121;
  42 + &:hover {
  43 + color: $primary-color;
  44 + }
  45 + }
  46 + }
  47 + }
15 48 }
16 49 }
... ...
src/app/profile/image/image.component.ts
... ... @@ -37,6 +37,9 @@ export class ProfileImageComponent {
37 37  
38 38 @Input() editClass: string;
39 39  
  40 + @Input()
  41 + showDetails: boolean = false;
  42 +
40 43 picFile: any;
41 44 croppedDataUrl: any;
42 45 modalInstance: any;
... ...
src/app/profile/image/image.html
... ... @@ -5,6 +5,11 @@
5 5 <div ng-if="ctrl.editable" class="upload-camera-container">
6 6 <i id="camera" class="fa fa-camera upload-camera" aria-hidden="true"></i>
7 7 </div>
  8 + <div class="details">
  9 + <div class="profile-name">
  10 + <a href="#">{{ ctrl.profile.name }}</a>
  11 + </div>
  12 + </div>
8 13 <div ng-if="ctrl.editable" id="select-photo-container" name="select-photo-container" class="select-photo-container container" ng-class="ctrl.editClass">
9 14 <a id="upload-container" class="upload-container" href="#" rel="dialog" role="button">
10 15 <!-- The upload button hidden behind the camera -->
... ...