Commit 5070aa0d34fa9f3fdfe4f8319416f53274358720
1 parent
b8cf9be2
Exists in
profile-blocks-sass
First communities block sass adjusts. Needs more adjusts
Showing
4 changed files
with
44 additions
and
3 deletions
Show diff stats
src/app/layout/blocks/communities/communities-block.html
| 1 | <div class="communities-block"> | 1 | <div class="communities-block"> |
| 2 | <a ng-repeat="profile in ctrl.profiles" ui-sref="main.profile.home({profile: profile.identifier})" class="profile"> | 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 | </a> | 4 | </a> |
| 5 | </div> | 5 | </div> |
src/app/layout/blocks/communities/communities-block.scss
| 1 | .communities-block { | 1 | .communities-block { |
| 2 | .profile { | 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 | img, i.profile-image { | 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 | img { | 24 | img { |
| 8 | display: inline-block; | 25 | display: inline-block; |
| @@ -12,5 +29,21 @@ | @@ -12,5 +29,21 @@ | ||
| 12 | text-align: center; | 29 | text-align: center; |
| 13 | font-size: 4.5em; | 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,6 +37,9 @@ export class ProfileImageComponent { | ||
| 37 | 37 | ||
| 38 | @Input() editClass: string; | 38 | @Input() editClass: string; |
| 39 | 39 | ||
| 40 | + @Input() | ||
| 41 | + showDetails: boolean = false; | ||
| 42 | + | ||
| 40 | picFile: any; | 43 | picFile: any; |
| 41 | croppedDataUrl: any; | 44 | croppedDataUrl: any; |
| 42 | modalInstance: any; | 45 | modalInstance: any; |
src/app/profile/image/image.html
| @@ -5,6 +5,11 @@ | @@ -5,6 +5,11 @@ | ||
| 5 | <div ng-if="ctrl.editable" class="upload-camera-container"> | 5 | <div ng-if="ctrl.editable" class="upload-camera-container"> |
| 6 | <i id="camera" class="fa fa-camera upload-camera" aria-hidden="true"></i> | 6 | <i id="camera" class="fa fa-camera upload-camera" aria-hidden="true"></i> |
| 7 | </div> | 7 | </div> |
| 8 | + <div class="details"> | ||
| 9 | + <div class="profile-name"> | ||
| 10 | + <a href="#">{{ ctrl.profile.name }}</a> | ||
| 11 | + </div> | ||
| 12 | + </div> | ||
| 8 | <div ng-if="ctrl.editable" id="select-photo-container" name="select-photo-container" class="select-photo-container container" ng-class="ctrl.editClass"> | 13 | <div ng-if="ctrl.editable" id="select-photo-container" name="select-photo-container" class="select-photo-container container" ng-class="ctrl.editClass"> |
| 9 | <a id="upload-container" class="upload-container" href="#" rel="dialog" role="button"> | 14 | <a id="upload-container" class="upload-container" href="#" rel="dialog" role="button"> |
| 10 | <!-- The upload button hidden behind the camera --> | 15 | <!-- The upload button hidden behind the camera --> |