[ongoing] UI refactoring of public profile

app/assets/stylesheets/app.layout.scss

@@ -491,4 +491,48 @@ body.container{
       border: 1px solid $border-color;
     }
   }
+}
+
+.profile-top {
+  background-size: cover !important;
+
+  .profile-top-head {
+    margin: 0 15px 0 15px;
+    padding: 30px 0 30px 0;
+    border-bottom: 1px solid $border-color;
+  }
+
+  .profile-top-corpus {
+    padding-top: 15px;
+    margin: 0 !important;
+    height: 190px;
+    overflow-y: visible;
+
+    .avatar img {
+      border: 9px solid #fff;
+      background-color: #fff;
+      box-shadow: 1px 2px 2px 0 #1f1f1f;
+      margin-top: 10px;
+    }
+
+    .profile-top-social {
+      border-left: 1px solid $border-color;
+      height: 100%;
+      top: -15px;
+
+      .social-links {
+        span {
+          border: 1px solid #fff;
+          width: 30px;
+          height: 30px;
+          border-radius: 50%;
+          display: inline-block;
+          text-align: center;
+          background-color: #fff;
+
+          i { vertical-align: middle; }
+        }
+      }
+    }
+  }
 }

app/assets/stylesheets/app.utilities.scss

@@ -82,6 +82,7 @@ p, .widget p {
 .font-bold{font-weight: 700;}
 .font-ebold{font-weight: 900;}
 
+.text-xl{font-size: $font-size-xl;}
 .text-lg{font-size: $font-size-lg;}
 .text-md{font-size: $font-size-md;}
 .text-sm{font-size: $font-size-sm;}
@@ -257,12 +258,19 @@ p, .widget p {
 .thumb-38 { width: 38px !important; height: 38px; }
 .thumb-50 { width: 50px !important; height: 50px; }
 .thumb-128 { width: 128px !important; height: 128px; }
+.thumb-140 { width: 140px !important; height: 140px; }
 .thumb-128-wrapper {
   img {
     width: 128px !important; height: 128px;
     @extend .img-circle;
   }
 }
+.thumb-140-wrapper {
+  img {
+    width: 140px !important; height: 140px;
+    @extend .img-circle;
+  }
+}
 
 .thumb-lg{width: 128px;display: inline-block}
 .thumb-md{width: 64px;display: inline-block}
@@ -292,10 +300,7 @@ p, .widget p {
   width: auto;
   vertical-align: sub;
 }
-.contrast-250 {
-  -webkit-filter: contrast(250%);
-  filter: contrast(250%);
-}
+.contrast-250 { -webkit-filter: contrast(250%); filter: contrast(250%); }
 .clear{display:block;overflow: hidden;}
 
 .scroll-x, .scroll-y{overflow:hidden;-webkit-overflow-scrolling:touch;}

app/assets/stylesheets/bootstrap_and_overrides.scss

@@ -95,6 +95,7 @@ $font-size-medium:        ceil(($font-size-base * 0.875)) !default; // ~14px
 $font-size-small:         ceil(($font-size-base * 0.75)) !default; // ~12px
 
 //add sleede
+$font-size-xl:            rem-calc(32);
 $font-size-lg:            rem-calc(20);
 $font-size-md:            rem-calc(18);
 $font-size-sm:            rem-calc(14);

app/assets/templates/shared/publicProfile.html.erb

@@ -1,4 +1,34 @@
 <div class="row no-gutter wrapper">
+
+  <div class="col-lg-12">
+    <section class="profile-top text-white widget panel b-a m">
+      <div class="profile-top-head">
+          <div class="text-xl font-ebold upper">{{user.name}}</div>
+          <small class="font-bold">{{user.username}}</small> • <small class="upper">{{user.is_allow_contact ? 'Profil public' : 'Profil public'}}</small>
+      </div>
+      <div class="row profile-top-corpus">
+        <div class="thumb-lg avatar thumb-140-wrapper img col-md-2">
+          <fab-user-avatar ng-model="user.profile.user_avatar" avatar-class="thumb-140"></fab-user-avatar>
+        </div>
+        <div class="m-l-lg col-md-8 text-italic">
+          <span class="font-bold" translate>{{ 'interests' }}</span>
+          <div class="m-b">{{user.profile.interest}}</div>
+          <span class="font-bold" translate>{{ 'CAD_softwares_mastered' }}</span>
+          <div>{{user.profile.software_mastered}}</div>
+        </div>
+        <div class="col-md-2 profile-top-social">
+          <div class="upper text-sm m-t-xl m-b">Mes liens :</div>
+          <div class="social-links">
+            <span><i class="fa fa-facebook"></i></span>
+            <span><i class="fa fa-twitter"></i></span>
+            <span><i class="fa fa-google-plus"></i></span>
+            <span><i class="fa fa-plus"></i></span>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+
   <div class="col-sm-12 col-md-12 col-lg-6">
 
 
@@ -6,49 +36,17 @@
     <div class="wrapper">
       <section class="widget panel no-border bg-black-light text-white lt">
         <div class="panel-body">
-          <div class="row m-t-xl">
-            <div class="col-xs-3 text-right padder-v">
-              <!-- <a href="#" class="btn btn-primary btn-icon btn-rounded m-t-xl"><i class="fa fa-flag"></i></a> -->
-            </div>
-            <div class="col-xs-6 text-center">
-              <div class="inline">
-                <div class="easypiechart easyPieChart" data-percent="75" data-line-width="6" data-bar-color="#fff" data-track-color="#2796de" data-scale-color="false" data-size="140" data-line-cap="butt" data-animate="1000" style="width: 140px; height: 140px; line-height: 140px;">
-                  <div class="thumb-lg avatar thumb-128-wrapper img">
-                    <fab-user-avatar ng-model="user.profile.user_avatar" avatar-class="thumb-140"></fab-user-avatar>
-                  </div>
-                  <canvas width="140" height="140"></canvas></div>
-                <div class="h4 m-t m-b-xs font-bold text-lt text-white">{{user.name}}</div>
-                <small class="text-muted m-b">{{user.username}}</small>
-              </div>
-            </div>
-            <div class="col-xs-3 padder-v">
-              <!--               <a href="#" class="btn btn-primary btn-icon btn-rounded m-t-xl" data-toggle="class:btn-danger">
-                              <i class="i i-phone text"></i>
-                              <i class="i i-phone2 text-active"></i>
-                            </a> -->
-            </div>
-          </div>
           <div class="wrapper m-t-xl m-b">
             <div class="row m-b">
-              <div class="col-xs-6 text-right">
+              <div class="col-xs-5 text-right">
                 <small translate>{{ 'last_activity_' }}</small>
                 <div class="text-lt font-bold" ng-if="user.last_sign_in_at">{{ '_on_' | translate }} {{user.last_sign_in_at | amDateFormat: 'LL'}}</div>
               </div>
-              <div class="col-xs-6">
+              <div class="col-xs-offset-1 col-xs-6">
                 <small translate>{{ 'email_address' }}</small>
                 <div class="text-lt font-bold break-word">{{user.email}}</div>
               </div>
             </div>
-            <div class="row">
-              <div class="col-xs-6 text-right">
-                <small translate>{{ 'CAD_softwares_mastered' }}</small>
-                <div class="text-lt font-bold">{{user.profile.software_mastered}}</div>
-              </div>
-              <div class="col-xs-6">
-                <small translate>{{ 'interests' }}</small>
-                <div class="text-lt font-bold">{{user.profile.interest}}</div>
-              </div>
-            </div>
           </div>
         </div>
       </section>

app/models/stylesheet.rb

@@ -73,7 +73,9 @@ class Stylesheet < ActiveRecord::Base
      .pricing-panel .content .wrap { border-color: #{Stylesheet.secondary}; }
      .pricing-panel .cta-button .btn:hover, .pricing-panel .cta-button .custom-invoice .modal-body .elements li:hover, .custom-invoice .modal-body .elements .pricing-panel .cta-button li:hover { background-color: #{Stylesheet.secondary} !important; }
      a.label:hover, .form-control.form-control-ui-select .select2-choices a.select2-search-choice:hover, a.label:focus, .form-control.form-control-ui-select .select2-choices a.select2-search-choice:focus { color: #{Stylesheet.primary}; }
-     .about-picture { background: linear-gradient( rgba(255,255,255,0.12), rgba(255,255,255,0.13) ), linear-gradient( #{Stylesheet.primary_with_alpha(0.78)}, #{Stylesheet.primary_with_alpha(0.82)} ), url('/about-fablab.jpg') no-repeat; }"
-
+     .about-picture { background: linear-gradient( rgba(255,255,255,0.12), rgba(255,255,255,0.13) ), linear-gradient( #{Stylesheet.primary_with_alpha(0.78)}, #{Stylesheet.primary_with_alpha(0.82)} ), url('/about-fablab.jpg') no-repeat; }
+     .profile-top { background: linear-gradient( rgba(255,255,255,0.12), rgba(255,255,255,0.13) ), linear-gradient(#{Stylesheet.primary_with_alpha(0.78)}, #{Stylesheet.primary_with_alpha(0.82)} ), url('/about-fablab.jpg') no-repeat; }
+     .profile-top-corpus { border-bottom: 45px solid #{Stylesheet.primary_with_alpha(0.5)}; }
+     .profile-top-social .social-links span { color: #{Stylesheet.primary} }"
   end
 end