Download as
Browse Code »

Commit 2b1d3b55c981fed944245aa8ec48e47d60955db8

Authored by Tallys Martins
1 parent 3a8c0663
Exists in profile_page_improvements

Improvements on profiles page 

- Profile activities are now loaded on main block
- Adds css style to profile page

Signed-off-by: Tallys Martins <tallysmartins@gmail.com>
Showing 4 changed files with 229 additions and 8 deletions   Show diff stats
src/app/profile/activities/activities.html
  Diff comments   View file @2b1d3b5
1   -<timeline>
2   - <timeline-event ng-repeat="activity in ctrl.activities | orderBy: 'created_at':true">
3   - <noosfero-activity [activity]="activity"></noosfero-activity>
4   - </timeline-event>
5   -</timeline>
  1 +<div class="row">
  2 + <hr class="divider"/>
  3 + <div id="atividades">
  4 + <h4>Atividades Recentes</h4>
  5 + <timeline>
  6 + <timeline-event ng-repeat="activity in vm.activities | orderBy: 'created_at':true">
  7 + <hr class="divider"/>
  8 + <noosfero-activity [activity]="activity"></noosfero-activity>
  9 + </timeline-event>
  10 + </timeline>
  11 + <button type="button" class="btn btn-sm btn-block">Carregar mais</button>
  12 + </div>
  13 +</div>
... ...
src/app/profile/info/profile-info.html
  Diff comments   View file @2b1d3b5
1   -<div class="profile-wall">
  1 +<!-- <div class="profile-wall mainbox clearfix">
2 2  
3 3 <div class="col-lg-3 col-md-4 col-sm-4">
4 4 <div class="main-box clearfix">
... ... @@ -27,4 +27,33 @@
27 27 </uib-tabset>
28 28 </div>
29 29 </div>
  30 +</div> -->
  31 +<div class="bg-image">
  32 +
30 33 </div>
  34 +
  35 +<div class="container" id="noosfero-profile">
  36 + <div class="col-sm-2">
  37 + <noosfero-profile-image [profile]="vm.profile" class="img-avatar-main" data-pin-nopin="true"><noosfero-profile-image>
  38 + <ul class="social">
  39 + <li>Facebook</li>
  40 + <li>Twitter</li>
  41 + <li>Instagram</li>
  42 + </ul>
  43 + </div>
  44 + <div class="col-sm-10">
  45 + <h3>{{vm.profile.name}}</h3>
  46 + <p>Brasília-DF, Brasil</p>
  47 + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget fermentum mauris, non viverra felis. In varius, felis et placerat feugiat, massa magna sagittis nisl, ut scelerisque ex urna nec ipsum.</p>
  48 + <br />
  49 + <p class="pull-left">www.noosfero.gov.br/<strong>patriciaoliveira</strong></p>
  50 + <div class="pull-right info-contato">
  51 + <button type="button" class="btn btn-sm" data-toggle="collapse" data-target="#infocontato">Informações de Contato</button>
  52 + <div id="infocontato" class="collapse">
  53 + <br /><p>patricia@oliveira.com<br />
  54 + 61 9999-9999</p>
  55 + </div>
  56 + </div>
  57 + </div>
  58 +</div>
  59 +
... ...
src/app/profile/profile.component.ts
  Diff comments   View file @2b1d3b5
... ... @@ -6,6 +6,7 @@ import {CmsComponent} from &#39;../article/cms/cms.component&#39;;
6 6 import {ContentViewerComponent} from "../article/content-viewer/content-viewer.component";
7 7 import {ContentViewerActionsComponent} from "../article/content-viewer/content-viewer-actions.component";
8 8 import {ActivitiesComponent} from "./activities/activities.component";
  9 +import {ActivityComponent} from "./activities/activity/activity.component";
9 10 import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
10 11 import {NotificationService} from "../shared/services/notification.service";
11 12 import {MyProfileComponent} from "./myprofile.component";
... ... @@ -21,7 +22,7 @@ import {ProfileActionsComponent} from &quot;./profile-actions.component&quot;;
21 22 @Component({
22 23 selector: 'profile',
23 24 templateUrl: "app/profile/profile.html",
24   - directives: [ActivitiesComponent],
  25 + directives: [ActivityComponent],
25 26 providers: [
26 27 provide('profileService', { useClass: ProfileService }),
27 28 provide('notificationService', { useClass: NotificationService })
... ... @@ -33,7 +34,7 @@ import {ProfileActionsComponent} from &quot;./profile-actions.component&quot;;
33 34 url: "^/profile/:profile",
34 35 component: ProfileInfoComponent,
35 36 views: {
36   - "mainBlockContent": {
  37 + "profile-info": {
37 38 templateUrl: "app/profile/info/profile-info.html",
38 39 controller: ProfileInfoComponent,
39 40 controllerAs: "vm"
... ... @@ -42,6 +43,11 @@ import {ProfileActionsComponent} from &quot;./profile-actions.component&quot;;
42 43 templateUrl: "app/profile/navbar-actions.html",
43 44 controller: ProfileActionsComponent,
44 45 controllerAs: "vm"
  46 + },
  47 + "mainBlockContent": {
  48 + templateUrl: "app/profile/activities/activities.html",
  49 + controller: ProfileInfoComponent,
  50 + controllerAs: "vm"
45 51 }
46 52 }
47 53 },
... ...
src/app/profile/profile.scss
  Diff comments   View file @2b1d3b5
... ... @@ -10,3 +10,181 @@
10 10 text-align: center;
11 11 margin-top: 15px;
12 12 }
  13 +
  14 +@charset "UTF-8";
  15 +/* CSS Document */
  16 +
  17 +@import "font-awesome.min.css";
  18 +@import "font-awesome-ie7.min.css";
  19 +/* Space out content a bit */
  20 +body {
  21 + padding-top: 0;
  22 + padding-bottom: 0;
  23 +}
  24 +
  25 +.navbar-default {background:#333;border:none; padding:0 5rem;}
  26 +.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {background-color:transparent !important;}
  27 +.navbar-brand {line-height: 40px !important;}
  28 +
  29 +/* Everything but the jumbotron gets side spacing for mobile first views */
  30 +.header,
  31 +.footer {
  32 + padding-right: 15px;
  33 + padding-left: 15px;
  34 +}
  35 +
  36 +/* Custom page header */
  37 +.header {
  38 + border-bottom: 1px solid #e5e5e5;
  39 +}
  40 +/* Make the masthead heading the same height as the navigation */
  41 +.header h3 {
  42 + padding-bottom: 19px;
  43 + margin-top: 0;
  44 + margin-bottom: 0;
  45 + line-height: 40px;
  46 +}
  47 +
  48 +/* Custom page footer */
  49 +.footer {
  50 + padding-top: 19px;
  51 + color: #777;
  52 + border-top: 1px solid #e5e5e5;
  53 +}
  54 +
  55 +/* Profile image */
  56 +
  57 +.navbar {margin-bottom:0 !important;}
  58 +
  59 +.navbar-default.navbar-main .navbar-nav .img-avatar, .navbar-default.navbar-main .navbar-nav .img-avatar-top {
  60 + max-width: 40px;
  61 + display: inline-block;
  62 + height: auto;
  63 + padding: 1px;
  64 + line-height: 1.428571429;
  65 + background-color: #fff;
  66 + border: 1px solid #ddd;
  67 + border-radius: 50%;
  68 + -webkit-transition: all 0.2s ease-in-out;
  69 + transition: all 0.2s ease-in-out;
  70 +}
  71 +
  72 +.navbar-default.navbar-main .navbar-nav .img-avatar-top {max-width: 60px;}
  73 +
  74 +.navbar-nav>li>.dropdown-menu {
  75 + margin-top:-10px !important;
  76 + width: 300px;
  77 + padding: 1rem;}
  78 +
  79 +.dropdown-menu>li {margin:5px 0;}
  80 +
  81 +.dropdown-menu>li>a {padding:3px 10px 3px 0 !important;}
  82 + .dropdown-menu>li>a:hover {background-color:transparent !important;}
  83 +
  84 +.bg-image {background-color:#eee;height: 260px;}
  85 +
  86 +/* Customize container */
  87 +@media (min-width: 768px) {
  88 + .container {
  89 + max-width: 980px;
  90 + }
  91 +}
  92 +.container-narrow > hr {
  93 + margin: 30px 0;
  94 +}
  95 +
  96 +/* Responsive: Portrait tablets and up */
  97 +@media screen and (min-width: 768px) {
  98 + /* Remove the padding we set earlier */
  99 + .header,
  100 + .footer {
  101 + padding-right: 0;
  102 + padding-left: 0;
  103 + }
  104 + /* Space out the masthead */
  105 + .header {
  106 + margin-bottom: 30px;
  107 + }
  108 + /* Remove the bottom border on the jumbotron for visual effect */
  109 + .jumbotron {
  110 + border-bottom: 0;
  111 + }
  112 +}
  113 +
  114 +#lightbox .modal-content, #recuperarsenha .modal-content {
  115 + display: inline-block;
  116 + text-align:center;
  117 + padding:20px;
  118 +}
  119 +
  120 +#lightbox .modal-content label, #recuperarsenha .modal-content label {
  121 + text-align:left;
  122 +}
  123 +
  124 +/* style wireframe */
  125 +
  126 +a{
  127 + color: #959595 !important;
  128 +}
  129 +
  130 +.distance {
  131 + margin-bottom:2em;
  132 + margin-top:1em;
  133 +}
  134 +
  135 +.distance-top{
  136 + margin-top: 10px;
  137 +}
  138 +
  139 +.distance-left {
  140 + margin-bottom:2em;
  141 + margin-top:1em;
  142 + margin-left: 11em !important;
  143 +}
  144 +
  145 +/* NOOSFERO PROFILE */
  146 +.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;}
  149 +ul.social {list-style:none; text-align:center;padding:0; margin:0;}
  150 +#infocontato {max-width:200px;}
  151 +#infocontato .alert-info{margin:.5rem 0; padding:1rem; font-size:1rem; line-height:1.5rem;}
  152 +#noosfero-groups {margin:auto;}
  153 +
  154 +.secondary {border:1px solid #eee; padding:1rem; margin-top:2rem;}
  155 +#interesses span {background:#333; padding:4px 6px; font-size:1rem; color:#fff; cursor:pointer;}
  156 +
  157 +#atividades p, .viewall, #comunidades p, #pessoas p {font-size:1rem;}
  158 +
  159 +#comunidades img, #pessoas img {width:100%;}
  160 +
  161 +.img-avatar-edit {position:relative;}
  162 +
  163 +.img-avatar-edit:hover div.update-img {
  164 + display: block;
  165 +}
  166 +.img-avatar-edit div.update-img {
  167 + position:absolute;
  168 + display:none;
  169 +}
  170 +.img-avatar-edit div.update-img {
  171 + bottom:10px;
  172 + left:10px;
  173 + width:130px;
  174 +}
  175 +div.update-img {
  176 + background:#333;
  177 + color:#fff;
  178 + font-size:1rem;
  179 + padding:5px 2px;
  180 + opacity: 0.7;
  181 + filter: alpha(opacity=70); /* For IE8 and earlier */
  182 + text-align:center;
  183 + cursor:pointer;
  184 +}
  185 +
  186 +.edit-button {position:relative;}
  187 +#edit-toggle {position:absolute; left:240px; background:#fff; top:0px; border:1px solid #eee; padding:1rem 0; width:340px; height:auto;}
  188 +#edit-toggle input {margin-bottom:1rem;}
  189 +
  190 +
... ...