Wrapping the mid content of profile-info page

Paulo Tada
1 parent a06484da
Showing 3 changed files with 46 additions and 30 deletions Show diff stats
src/app/profile/info/profile-info.html
src/app/profile/profile.html
src/app/profile/profile.scss
@@ -34,26 +34,26 @@
 </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>
-    </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>
-        <div class="pull-right info-contato">
-          <button ng-click="vm.toggleInformation()" class="btn btn-sm">Informações de Contato</button>
-          <div clas="profile-contact" ng-show="vm.showInformation">
-              <p class="email">patricia@oliveira.com</p>
-              <p class="phone">61 9999-9999</p>
-          </div>
-        </div>
+  <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>
+  </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>
+    <div class="pull-right info-contato">
+      <button ng-click="vm.toggleInformation()" class="btn btn-sm">Informações de Contato</button>
+      <div clas="profile-contact" ng-show="vm.showInformation">
+        <p class="email">patricia@oliveira.com</p>
+        <p class="phone">61 9999-9999</p>
+      </div>
     </div>
+  </div>
 </div>
@@ -5,10 +5,13 @@
                   [profile]="vm.profile">
   </custom-content>
   <div class="row" ui-view="profile-info"></div>
-  <noosfero-boxes ng-if="vm.boxes"
-                  [layout]="vm.profile.layout_template"
-                  [boxes]="vm.boxes"
-                  [owner]="vm.profile" class="row">
-  </noosfero-boxes>
+
+  <div class="wrapper-container">
+    <noosfero-boxes ng-if="vm.boxes"
+                    [layout]="vm.profile.layout_template"
+                    [boxes]="vm.boxes"
+                    [owner]="vm.profile" class="row">
+    </noosfero-boxes>
+  </div>
   <custom-content class="profile-footer" [label]="'profile.custom_footer.label'" [attribute]="'custom_footer'" [profile]="vm.profile"></custom-content>
 </div>
+
 .profile-container {
   @extend .container-fluid;
   margin-top:     -$wrapper-padding-top;
@@ -9,6 +10,11 @@
   }
 }
+.wrapper-container {
+  margin: auto;
+  max-width: 980px;
+}
+
 #profile-left {
   text-align: center;
   margin-top: 15px;
@@ -146,6 +152,12 @@ a{
 /* NOOSFERO PROFILE */
 .bg-image {}
+@mixin profile-img {
+  text-align: center;
+  margin: 10px;
+  border: 1px solid #eee;
+}
+
 #noosfero-profile {
   background:#fff;
   margin: -200px auto auto;
@@ -155,9 +167,11 @@ a{
   border:1px solid #eee;
   padding:20px 0;
   font-size: 14px;
-  img, i {
-    text-align: center;
-    margin:10px; border:1px solid #eee;
+  img {
+    @include profile-img;
+  }
+  i {
+    @include profile-img;
   }
   .col-sm-2 {
     text-align: center;
@@ -171,7 +185,6 @@ a{
   }
   .profile-contact {
     padding-top: 10px;
-  
     p {
       margin: 0px;
     }