Clean up css and adding translate

Paulo Tada · Tallys Martins
1 parent aa8cceef
Showing 4 changed files with 74 additions and 218 deletions Show diff stats
src/app/profile/info/profile-info.html
src/app/profile/profile.scss
src/languages/en.json
src/languages/pt.json
@@ -8,6 +8,7 @@
       <div id="profile-left" class="main-box-body clearfix">
         <noosfero-profile-image [profile]="vm.profile" class="img-responsive center-block"></noosfero-profile-image>
         <span class="label" ng-class="{'label-danger': vm.profile.type == 'Community', 'label-info': vm.profile.type == 'Person'}">{{vm.profile | translateProfile}}</span>
+
         <div class="profile-since">
           {{"profile.member_since" | translate}}: {{vm.profile.created_at | amDateFormat:'MMMM YYYY'}}
         </div>
@@ -29,30 +30,35 @@
   </div>
 </div> -->
-<div class="bg-image" style="background-color: grey";>
-
-</div>
+<div class="bg-image"></div>
 <div class="container" id="noosfero-profile">
   <div class="col-sm-2">
-    <noosfero-profile-image [profile]="vm.profile" class="img-avatar-main" data-pin-nopin="true"></noosfero-profile-image>
-    <ul class="social">
-      <li>Facebook</li>
-      <li>Twitter</li>
-      <li>Instagram</li>
-    </ul>
+    <noosfero-profile-image [profile]="vm.profile" class="img-responsive center-block" data-pin-nopin="true"></noosfero-profile-image>
+    <div class="social-links">
+      <ul>
+        <li>Facebook</li>
+        <li>Linkdin</li>
+      </ul>
+    </div>
   </div>
   <div class="col-sm-10">
-    <h3>{{vm.profile.name}}</h3>
-    <p>Brasília-DF, Brasil</p>
-    <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>
-    <br />
-    <p class="pull-left">www.noosfero.gov.br/<strong>patriciaoliveira</strong></p>
+    <h3>{{ vm.profile.name }}</h3>
+    <div ng-switch="description">
+    <p ng-if="vm.profile.additional_data['description']">
+      {{ 'profile.person.description' | translate }}: {{ vm.profile.additional_data['description'] }}
+    </p>
+    <p class="pull-left">www.noosfero.gov.br/<strong>{{ vm.profile.identifier }}</strong></p>
     <div class="pull-right info-contato">
-      <button ng-click="vm.toggleInformation()" class="btn btn-sm">Informações de Contato</button>
+      <button ng-click="vm.toggleInformation()" class="btn btn-sm">{{ 'profile.person.contact_info' | translate }}</button>
       <div clas="profile-contact" ng-show="vm.showInformation">
-        <p class="email">patricia@oliveira.com</p>
-        <p class="phone">61 9999-9999</p>
+        <p class="email" ng-if="vm.profile.additional_data['contact_email']">Email: {{ vm.profile.additional_data['contact_email'] }}</p>
+        <p class="phone" ng-if="vm.profile.additional_data['contact_phone']">
+          {{ 'profile.person.contact_phone' | translate }}: {{ vm.profile.additional_data['contact_phone'] }}
+        </p>
+        <p class="phone" ng-if="(!vm.profile.additional_data['contact_phone'] && !vm.profile.additional_data['contact_email'])">
+          {{ 'profile.person.no_contact_info' | translate }}
+        </p>
       </div>
     </div>
   </div>
+@mixin padding-sides {
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+@mixin profile-img {
+  text-align: center;
+  margin: 10px;
+  border: 1px solid #eee;
+}
+
+@media (min-width: 768px) {
+  .container {max-width: 980px;}
+}
+
 .profile-container {
   @extend .container-fluid;
   margin-top:     -$wrapper-padding-top;
   margin-left:    -$wrapper-padding-left;
   margin-bottom:  -$wrapper-padding-bottom;
   margin-right:   -$wrapper-padding-right;
-  @media (max-width: 978px) {
-    padding: 0 2%;
-  }
+  @media (max-width: 978px) {padding: 0 2%;}
 }
 .wrapper-container {
@@ -15,147 +28,28 @@
   max-width: 980px;
 }
-#profile-left {
-  text-align: center;
-  margin-top: 15px;
-}
-
-@charset "UTF-8";
-/* CSS Document */
-
-/* Space out content a bit */
-body {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.navbar-default {background:#333;border:none; padding:0 5rem;}
-.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {background-color:transparent !important;}
-.navbar-brand {line-height: 40px !important;}
-
-/* Everything but the jumbotron gets side spacing for mobile first views */
-.header,
-.footer {
-  padding-right: 15px;
-  padding-left: 15px;
-}
-
-/* Custom page header */
-.header {
-  border-bottom: 1px solid #e5e5e5;
-}
-/* Make the masthead heading the same height as the navigation */
-.header h3 {
-  padding-bottom: 19px;
-  margin-top: 0;
-  margin-bottom: 0;
-  line-height: 40px;
-}
-
-/* Custom page footer */
-.footer {
-  padding-top: 19px;
-  color: #777;
-  border-top: 1px solid #e5e5e5;
-}
-
-/* Profile image */
-
-.navbar {margin-bottom:0 !important;}
-
-.navbar-default.navbar-main .navbar-nav .img-avatar, .navbar-default.navbar-main .navbar-nav .img-avatar-top {
-    max-width: 40px;
-    display: inline-block;
-    height: auto;
-    padding: 1px;
-    line-height: 1.428571429;
-    background-color: #fff;
-    border: 1px solid #ddd;
-    border-radius: 50%;
-    -webkit-transition: all 0.2s ease-in-out;
-    transition: all 0.2s ease-in-out;
-}
-
-.navbar-default.navbar-main .navbar-nav .img-avatar-top {max-width: 60px;}
-
-.navbar-nav>li>.dropdown-menu {
-	margin-top:-10px !important;
-	width: 300px;
-    padding: 1rem;}
-
-.dropdown-menu>li {margin:5px 0;}
-
-.dropdown-menu>li>a {padding:3px 10px 3px 0 !important;}
-	.dropdown-menu>li>a:hover {background-color:transparent !important;}
-
-.bg-image {background-color:#eee;height: 260px;}
-
-/* Customize container */
-@media (min-width: 768px) {
-  .container {
-    max-width: 980px;
-  }
-}
-.container-narrow > hr {
-  margin: 30px 0;
-}
-
-/* Responsive: Portrait tablets and up */
-@media screen and (min-width: 768px) {
-  /* Remove the padding we set earlier */
-  .header,
-  .footer {
-    padding-right: 0;
-    padding-left: 0;
-  }
-  /* Space out the masthead */
-  .header {
-    margin-bottom: 30px;
-  }
-  /* Remove the bottom border on the jumbotron for visual effect */
-  .jumbotron {
-    border-bottom: 0;
+.dropdown-menu {
+  >li {
+    margin:5px 0;
+    >a {
+      padding:3px 10px 3px 0 !important;
+      &:hover {background-color:transparent !important;}
+    }
   }
 }
-#lightbox .modal-content, #recuperarsenha .modal-content {
-    display: inline-block;
-	text-align:center;
-	padding:20px;
-}
-
-#lightbox .modal-content label, #recuperarsenha .modal-content label {
-	text-align:left;
-}
-
-/* style wireframe */
-
-a{
-  color: #959595 !important;
-}
-
-.distance {
-  margin-bottom:2em;
-  margin-top:1em;
-}
-
-.distance-top{
-  margin-top: 10px;
-}
-
-.distance-left {
-  margin-bottom:2em;
-  margin-top:1em;
-  margin-left: 11em !important;
+.bg-image {
+  background-color:#eee;
+  height: 260px;
 }
-/* NOOSFERO PROFILE */
-.bg-image {}
-
-@mixin profile-img {
-  text-align: center;
-  margin: 10px;
-  border: 1px solid #eee;
+.social-links {
+  ul {
+    list-style:none;
+    text-align:center;
+    padding:0;
+    margin:0;
+  }
 }
 #noosfero-profile {
@@ -167,73 +61,21 @@ a{
   border:1px solid #eee;
   padding:20px 0;
   font-size: 14px;
-  img {
-    @include profile-img;
-  }
-  i {
-    @include profile-img;
-  }
-  .col-sm-2 {
-    text-align: center;
-  }
-  h3 {
-    margin-top: 16px;
-  }
+
+  img,
+  i {@include profile-img;}
+
+  .col-sm-2 {text-align: center;}
+
+  h3 {margin-top: 16px;}
+
   .btn {
     font-size: 12px;
     padding: 5px 10px;
   }
+
   .profile-contact {
     padding-top: 10px;
-    p {
-      margin: 0px;
-    }
+    p {margin: 0px;}
   }
 }
-
-ul.social {list-style:none; text-align:center;padding:0; margin:0;}
-#infocontato {max-width:200px;}
-#infocontato .alert-info{margin:.5rem 0;
-  padding:1rem;
-  font-size:1rem;
-  line-height:1.5rem;
-}
-#noosfero-groups {margin:auto;}
-
-.secondary {border:1px solid #eee; padding:1rem; margin-top:2rem;}
-#interesses span {background:#333; padding:4px 6px; font-size:1rem; color:#fff; cursor:pointer;}
-
-#atividades p, .viewall, #comunidades p, #pessoas p {font-size:1rem;}
-
-#comunidades img, #pessoas img {width:100%;}
-
-.img-avatar-edit {position:relative;}
-
-.img-avatar-edit:hover div.update-img {
-    display: block;
-}
-.img-avatar-edit div.update-img {
-    position:absolute;
-    display:none;
-}
-.img-avatar-edit div.update-img {
-    bottom:10px;
-	left:10px;
-	width:130px;
-}
-div.update-img {
-	background:#333;
-	color:#fff;
-	font-size:1rem;
-	padding:5px 2px;
-	opacity: 0.7;
-    filter: alpha(opacity=70); /* For IE8 and earlier */
-	text-align:center;
-	cursor:pointer;
-}
-
-.edit-button {position:relative;}
-#edit-toggle {position:absolute; left:240px; background:#fff; top:0px; border:1px solid #eee; padding:1rem 0; width:340px; height:auto;}
-#edit-toggle input {margin-bottom:1rem;}
-
-
@@ -23,6 +23,10 @@
   "profile.others_info": "Others",
   "profile.community.title": "Community",
   "profile.person.title": "Person",
+  "profile.person.description": "Description",
+  "profile.person.contact_info": "Contact Informations",
+  "profile.person.contact_phone": "Phone",
+  "profile.person.no_contact_info": "No contact informations",
   "activities.title": "Activities",
   "activities.create_article.description": "has published on",
   "activities.scrap.description": "wrote in its timeline",
@@ -23,6 +23,10 @@
   "profile.others_info": "Outras informações",
   "profile.community.title": "Comunidade",
   "profile.person.title": "Pessoa",
+  "profile.person.description": "Descrição",
+  "profile.person.contact_info": "Informações de Contato",
+  "profile.person.contact_phone": "Telefone",
+  "profile.person.no_contact_info": "Sem informações de contato",
   "activities.title": "Atividades",
   "activities.create_article.description": "publicou em",
   "activities.scrap.description": "escreveu em sua linha do tempo",
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	.profile-container {	17	.profile-container {
3	@extend .container-fluid;	18	@extend .container-fluid;
4	margin-top: -$wrapper-padding-top;	19	margin-top: -$wrapper-padding-top;
5	margin-left: -$wrapper-padding-left;	20	margin-left: -$wrapper-padding-left;
6	margin-bottom: -$wrapper-padding-bottom;	21	margin-bottom: -$wrapper-padding-bottom;
7	margin-right: -$wrapper-padding-right;	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	.wrapper-container {	26	.wrapper-container {
	@@ -15,147 +28,28 @@		@@ -15,147 +28,28 @@
15	max-width: 980px;	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	#noosfero-profile {	55	#noosfero-profile {
	@@ -167,73 +61,21 @@ a{		@@ -167,73 +61,21 @@ a{
167	border:1px solid #eee;	61	border:1px solid #eee;
168	padding:20px 0;	62	padding:20px 0;
169	font-size: 14px;	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	.btn {	72	.btn {
183	font-size: 12px;	73	font-size: 12px;
184	padding: 5px 10px;	74	padding: 5px 10px;
185	}	75	}
		76	+
186	.profile-contact {	77	.profile-contact {
187	padding-top: 10px;	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	-