Download as
Browse Code »

Commit 4bffee9e6da9e27f06c1dc40b4bc64a1e3832824

Authored by Paulo Tada
1 parent 17a77b73

Clean up css and adding translate

Showing 4 changed files with 74 additions and 218 deletions   Show diff stats
src/app/profile/info/profile-info.html
  Diff comments   View file @4bffee9
... ... @@ -8,6 +8,7 @@
8 8 <div id="profile-left" class="main-box-body clearfix">
9 9 <noosfero-profile-image [profile]="vm.profile" class="img-responsive center-block"></noosfero-profile-image>
10 10 <span class="label" ng-class="{'label-danger': vm.profile.type == 'Community', 'label-info': vm.profile.type == 'Person'}">{{vm.profile | translateProfile}}</span>
  11 +
11 12 <div class="profile-since">
12 13 {{"profile.member_since" | translate}}: {{vm.profile.created_at | amDateFormat:'MMMM YYYY'}}
13 14 </div>
... ... @@ -29,30 +30,35 @@
29 30 </div>
30 31 </div> -->
31 32  
32   -<div class="bg-image" style="background-color: grey";>
33   -
34   -</div>
  33 +<div class="bg-image"></div>
35 34  
36 35 <div class="container" id="noosfero-profile">
37 36 <div class="col-sm-2">
38   - <noosfero-profile-image [profile]="vm.profile" class="img-avatar-main" data-pin-nopin="true"></noosfero-profile-image>
39   - <ul class="social">
40   - <li>Facebook</li>
41   - <li>Twitter</li>
42   - <li>Instagram</li>
43   - </ul>
  37 + <noosfero-profile-image [profile]="vm.profile" class="img-responsive center-block" data-pin-nopin="true"></noosfero-profile-image>
  38 + <div class="social-links">
  39 + <ul>
  40 + <li>Facebook</li>
  41 + <li>Linkdin</li>
  42 + </ul>
  43 + </div>
44 44 </div>
45 45 <div class="col-sm-10">
46   - <h3>{{vm.profile.name}}</h3>
47   - <p>Brasília-DF, Brasil</p>
48   - <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>
49   - <br />
50   - <p class="pull-left">www.noosfero.gov.br/<strong>patriciaoliveira</strong></p>
  46 + <h3>{{ vm.profile.name }}</h3>
  47 + <div ng-switch="description">
  48 + <p ng-if="vm.profile.additional_data['description']">
  49 + {{ 'profile.person.description' | translate }}: {{ vm.profile.additional_data['description'] }}
  50 + </p>
  51 + <p class="pull-left">www.noosfero.gov.br/<strong>{{ vm.profile.identifier }}</strong></p>
51 52 <div class="pull-right info-contato">
52   - <button ng-click="vm.toggleInformation()" class="btn btn-sm">Informações de Contato</button>
  53 + <button ng-click="vm.toggleInformation()" class="btn btn-sm">{{ 'profile.person.contact_info' | translate }}</button>
53 54 <div clas="profile-contact" ng-show="vm.showInformation">
54   - <p class="email">patricia@oliveira.com</p>
55   - <p class="phone">61 9999-9999</p>
  55 + <p class="email" ng-if="vm.profile.additional_data['contact_email']">Email: {{ vm.profile.additional_data['contact_email'] }}</p>
  56 + <p class="phone" ng-if="vm.profile.additional_data['contact_phone']">
  57 + {{ 'profile.person.contact_phone' | translate }}: {{ vm.profile.additional_data['contact_phone'] }}
  58 + </p>
  59 + <p class="phone" ng-if="(!vm.profile.additional_data['contact_phone'] && !vm.profile.additional_data['contact_email'])">
  60 + {{ 'profile.person.no_contact_info' | translate }}
  61 + </p>
56 62 </div>
57 63 </div>
58 64 </div>
... ...
src/app/profile/profile.scss
  Diff comments   View file @4bffee9
1 1  
  2 +@mixin padding-sides {
  3 + padding-right: 15px;
  4 + padding-left: 15px;
  5 +}
  6 +
  7 +@mixin profile-img {
  8 + text-align: center;
  9 + margin: 10px;
  10 + border: 1px solid #eee;
  11 +}
  12 +
  13 +@media (min-width: 768px) {
  14 + .container {max-width: 980px;}
  15 +}
  16 +
2 17 .profile-container {
3 18 @extend .container-fluid;
4 19 margin-top: -$wrapper-padding-top;
5 20 margin-left: -$wrapper-padding-left;
6 21 margin-bottom: -$wrapper-padding-bottom;
7 22 margin-right: -$wrapper-padding-right;
8   - @media (max-width: 978px) {
9   - padding: 0 2%;
10   - }
  23 + @media (max-width: 978px) {padding: 0 2%;}
11 24 }
12 25  
13 26 .wrapper-container {
... ... @@ -15,147 +28,28 @@
15 28 max-width: 980px;
16 29 }
17 30  
18   -#profile-left {
19   - text-align: center;
20   - margin-top: 15px;
21   -}
22   -
23   -@charset "UTF-8";
24   -/* CSS Document */
25   -
26   -/* Space out content a bit */
27   -body {
28   - padding-top: 0;
29   - padding-bottom: 0;
30   -}
31   -
32   -.navbar-default {background:#333;border:none; padding:0 5rem;}
33   -.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {background-color:transparent !important;}
34   -.navbar-brand {line-height: 40px !important;}
35   -
36   -/* Everything but the jumbotron gets side spacing for mobile first views */
37   -.header,
38   -.footer {
39   - padding-right: 15px;
40   - padding-left: 15px;
41   -}
42   -
43   -/* Custom page header */
44   -.header {
45   - border-bottom: 1px solid #e5e5e5;
46   -}
47   -/* Make the masthead heading the same height as the navigation */
48   -.header h3 {
49   - padding-bottom: 19px;
50   - margin-top: 0;
51   - margin-bottom: 0;
52   - line-height: 40px;
53   -}
54   -
55   -/* Custom page footer */
56   -.footer {
57   - padding-top: 19px;
58   - color: #777;
59   - border-top: 1px solid #e5e5e5;
60   -}
61   -
62   -/* Profile image */
63   -
64   -.navbar {margin-bottom:0 !important;}
65   -
66   -.navbar-default.navbar-main .navbar-nav .img-avatar, .navbar-default.navbar-main .navbar-nav .img-avatar-top {
67   - max-width: 40px;
68   - display: inline-block;
69   - height: auto;
70   - padding: 1px;
71   - line-height: 1.428571429;
72   - background-color: #fff;
73   - border: 1px solid #ddd;
74   - border-radius: 50%;
75   - -webkit-transition: all 0.2s ease-in-out;
76   - transition: all 0.2s ease-in-out;
77   -}
78   -
79   -.navbar-default.navbar-main .navbar-nav .img-avatar-top {max-width: 60px;}
80   -
81   -.navbar-nav>li>.dropdown-menu {
82   - margin-top:-10px !important;
83   - width: 300px;
84   - padding: 1rem;}
85   -
86   -.dropdown-menu>li {margin:5px 0;}
87   -
88   -.dropdown-menu>li>a {padding:3px 10px 3px 0 !important;}
89   - .dropdown-menu>li>a:hover {background-color:transparent !important;}
90   -
91   -.bg-image {background-color:#eee;height: 260px;}
92   -
93   -/* Customize container */
94   -@media (min-width: 768px) {
95   - .container {
96   - max-width: 980px;
97   - }
98   -}
99   -.container-narrow > hr {
100   - margin: 30px 0;
101   -}
102   -
103   -/* Responsive: Portrait tablets and up */
104   -@media screen and (min-width: 768px) {
105   - /* Remove the padding we set earlier */
106   - .header,
107   - .footer {
108   - padding-right: 0;
109   - padding-left: 0;
110   - }
111   - /* Space out the masthead */
112   - .header {
113   - margin-bottom: 30px;
114   - }
115   - /* Remove the bottom border on the jumbotron for visual effect */
116   - .jumbotron {
117   - border-bottom: 0;
  31 +.dropdown-menu {
  32 + >li {
  33 + margin:5px 0;
  34 + >a {
  35 + padding:3px 10px 3px 0 !important;
  36 + &:hover {background-color:transparent !important;}
  37 + }
118 38 }
119 39 }
120 40  
121   -#lightbox .modal-content, #recuperarsenha .modal-content {
122   - display: inline-block;
123   - text-align:center;
124   - padding:20px;
125   -}
126   -
127   -#lightbox .modal-content label, #recuperarsenha .modal-content label {
128   - text-align:left;
129   -}
130   -
131   -/* style wireframe */
132   -
133   -a{
134   - color: #959595 !important;
135   -}
136   -
137   -.distance {
138   - margin-bottom:2em;
139   - margin-top:1em;
140   -}
141   -
142   -.distance-top{
143   - margin-top: 10px;
144   -}
145   -
146   -.distance-left {
147   - margin-bottom:2em;
148   - margin-top:1em;
149   - margin-left: 11em !important;
  41 +.bg-image {
  42 + background-color:#eee;
  43 + height: 260px;
150 44 }
151 45  
152   -/* NOOSFERO PROFILE */
153   -.bg-image {}
154   -
155   -@mixin profile-img {
156   - text-align: center;
157   - margin: 10px;
158   - border: 1px solid #eee;
  46 +.social-links {
  47 + ul {
  48 + list-style:none;
  49 + text-align:center;
  50 + padding:0;
  51 + margin:0;
  52 + }
159 53 }
160 54  
161 55 #noosfero-profile {
... ... @@ -167,73 +61,21 @@ a{
167 61 border:1px solid #eee;
168 62 padding:20px 0;
169 63 font-size: 14px;
170   - img {
171   - @include profile-img;
172   - }
173   - i {
174   - @include profile-img;
175   - }
176   - .col-sm-2 {
177   - text-align: center;
178   - }
179   - h3 {
180   - margin-top: 16px;
181   - }
  64 +
  65 + img,
  66 + i {@include profile-img;}
  67 +
  68 + .col-sm-2 {text-align: center;}
  69 +
  70 + h3 {margin-top: 16px;}
  71 +
182 72 .btn {
183 73 font-size: 12px;
184 74 padding: 5px 10px;
185 75 }
  76 +
186 77 .profile-contact {
187 78 padding-top: 10px;
188   - p {
189   - margin: 0px;
190   - }
  79 + p {margin: 0px;}
191 80 }
192 81 }
193   -
194   -ul.social {list-style:none; text-align:center;padding:0; margin:0;}
195   -#infocontato {max-width:200px;}
196   -#infocontato .alert-info{margin:.5rem 0;
197   - padding:1rem;
198   - font-size:1rem;
199   - line-height:1.5rem;
200   -}
201   -#noosfero-groups {margin:auto;}
202   -
203   -.secondary {border:1px solid #eee; padding:1rem; margin-top:2rem;}
204   -#interesses span {background:#333; padding:4px 6px; font-size:1rem; color:#fff; cursor:pointer;}
205   -
206   -#atividades p, .viewall, #comunidades p, #pessoas p {font-size:1rem;}
207   -
208   -#comunidades img, #pessoas img {width:100%;}
209   -
210   -.img-avatar-edit {position:relative;}
211   -
212   -.img-avatar-edit:hover div.update-img {
213   - display: block;
214   -}
215   -.img-avatar-edit div.update-img {
216   - position:absolute;
217   - display:none;
218   -}
219   -.img-avatar-edit div.update-img {
220   - bottom:10px;
221   - left:10px;
222   - width:130px;
223   -}
224   -div.update-img {
225   - background:#333;
226   - color:#fff;
227   - font-size:1rem;
228   - padding:5px 2px;
229   - opacity: 0.7;
230   - filter: alpha(opacity=70); /* For IE8 and earlier */
231   - text-align:center;
232   - cursor:pointer;
233   -}
234   -
235   -.edit-button {position:relative;}
236   -#edit-toggle {position:absolute; left:240px; background:#fff; top:0px; border:1px solid #eee; padding:1rem 0; width:340px; height:auto;}
237   -#edit-toggle input {margin-bottom:1rem;}
238   -
239   -
... ...
src/languages/en.json
  Diff comments   View file @4bffee9
... ... @@ -17,6 +17,10 @@
17 17 "profile.others_info": "Others",
18 18 "profile.community.title": "Community",
19 19 "profile.person.title": "Person",
  20 + "profile.person.description": "Description",
  21 + "profile.person.contact_info": "Contact Informations",
  22 + "profile.person.contact_phone": "Phone",
  23 + "profile.person.no_contact_info": "No contact informations",
20 24 "activities.title": "Activities",
21 25 "activities.create_article.description": "has published on",
22 26 "activities.add_member_in_community.description": "has joined the community",
... ...
src/languages/pt.json
  Diff comments   View file @4bffee9
... ... @@ -17,6 +17,10 @@
17 17 "profile.others_info": "Outras informações",
18 18 "profile.community.title": "Comunidade",
19 19 "profile.person.title": "Pessoa",
  20 + "profile.person.description": "Descrição",
  21 + "profile.person.contact_info": "Informações de Contato",
  22 + "profile.person.contact_phone": "Telefone",
  23 + "profile.person.no_contact_info": "Sem informações de contato",
20 24 "activities.title": "Atividades",
21 25 "activities.create_article.description": "publicou em",
22 26 "activities.add_member_in_community.description": "entrou na comunidade",
... ...