Merge pull request #189 from TreinaDev/refactor/melhora-layout-do-perfil

Refactor/melhora layout do perfil

app/assets/stylesheets/application.bootstrap.scss

@@ -14,6 +14,10 @@ $primary: #a130fd;
 @import 'bootstrap/scss/bootstrap';
 @import 'bootstrap-icons/font/bootstrap-icons';
 @import 'actiontext.css';
+@import 'navbar.scss';
+@import 'posts.scss';
+@import 'profile.scss';
+@import 'layout.scss';
 
 body{
   min-width: 400px;
@@ -93,4 +97,4 @@ input[type="checkbox"]:checked {
               transform 1s ease-in-out,
               box-shadow 1s ease-in-out,
               background-color 1s ease-in-out;
-}
+}

app/assets/stylesheets/layout.scss

@@ -0,0 +1,28 @@
+body{
+  min-width: 400px;
+}
+
+ul{
+  list-style: none !important;
+}
+
+input[type="checkbox"]:checked {
+  background-color: #a130fd !important;
+}
+
+.field_with_errors input{
+  border: 1px solid red !important;
+}
+
+.home_logo{
+  width: 12rem;
+  margin: 0 7rem 0 7rem;
+}
+
+#searchText{
+  width: 380px !important;
+}
+
+.categories{
+  width: 35% !important;
+}

app/assets/stylesheets/navbar.scss

@@ -0,0 +1,11 @@
+.drop-menu{
+  margin-right: 2.5rem !important;
+}
+
+.dropdown-menu[data-bs-popper]{
+  left: -20px !important;
+}
+
+.dropdown-item:active {
+  background-color: #9030df !important; 
+}

app/assets/stylesheets/posts.scss

@@ -0,0 +1,8 @@
+.feed-post:hover{
+  transform: scale(1.01, 1.01);
+  transition-duration: 300ms;
+}
+
+.trix-content{
+  color: rgb(10, 10, 10);
+}

app/assets/stylesheets/profile.scss

@@ -0,0 +1,13 @@
+.follower-card:hover{
+  transform: scale(1.01, 1.01);
+  transition-duration: 300ms;
+}
+
+.profile-image{
+   min-width: 80px;
+}
+
+.img-cover{
+  object-fit: cover;
+  object-position: center;
+}

app/helpers/personal_infos_helper.rb

@@ -0,0 +1,9 @@
+module PersonalInfosHelper
+  def info_fixer(value)
+    if value.nil? || value.blank?
+      'não informado'
+    else
+      value
+    end
+  end
+end

app/views/posts/_listing.html.erb

@@ -1,6 +1,6 @@
 <% posts.each do |post| %>
-  <div class="feed-post shadow mb-4 p-3 rounded" id="post-list">
-    <%= link_to post, class: "text-decoration-none link-dark" do %>
+  <div class="feed-post shadow mb-4 p-3 rounded row" id="post-list">
+    <%= link_to post, class: "text-decoration-none link-dark col-md-10" do %>
       <div class="card-body">
         <h4 class="text-break text-primary"><%= post.title %></h4>
         <% if post.exists_image_attached? %>
@@ -22,10 +22,17 @@
       </div>
     <% end %>
     <% if current_user == post.user %>
-      <div class="text-center mt-2" id="post-<%= post.id %>">
+      <div class="text-center mt-2 col-md-2" id="post-<%= post.id %>">
         <% if request.path == profile_path(post.user.profile) %>
-          <% btn_value = post.pinned? ? t('unpin_btn') : t('pin_btn') %>
-          <%= button_to btn_value, pin_post_path(post), method: :post, class: "btn btn-outline-primary btn-sm" %>
+          <% if post.pinned? %>
+            <%= button_to pin_post_path(post), method: :post, class: "btn border border-primary btn-sm", id: 'unpin' do %>
+              <%= image_tag 'pin-angle-fill.svg' %>
+            <% end %>
+          <% else %>
+            <%= button_to pin_post_path(post), method: :post, class: "btn border border-primary btn-sm", id: 'pin' do %>
+              <%= image_tag 'pin-angle.svg' %>
+            <% end %>
+          <% end %>
         <% end %>
       </div>
     <% end %>

app/views/profiles/_personal_info.html.erb

@@ -0,0 +1,15 @@
+<ul>
+  <% if personal_info.has_key?('visibility') && user_is_owner %>
+    <li class="fs-5 mb-3">
+      <span class="fw-bold"><%= t(personal_info['visibility'] ? 'visibility.true' : 'visibility.false') %></span>
+    </li>
+  <% end %>
+  <% personal_info.each do |attribute, value| %>    
+    <% next if attribute == 'visibility' %>
+      <% new_value = (value && attribute == 'birth_date') ? l(value.to_date) : value  %>
+    <li>
+      <span class="fw-bold"><%= PersonalInfo.human_attribute_name(attribute) %></span>:
+      <%= info_fixer(new_value) %>
+    </li>
+  <% end %>
+</ul>

app/views/profiles/_profile_details.html.erb

@@ -0,0 +1,125 @@
+<div>
+  <% user_is_owner = profile.user == current_user %>
+  <br>
+  <div class="border py-1 px-2 rounded mb-3">
+    <div class="d-flex gap-1">
+      <%= image_tag 'about-icon', width: '23rem', class: 'mb-2'  %>
+      <h3><%= Profile.human_attribute_name(:cover_letter) %></h3>
+    </div>
+    <h5><%= profile.cover_letter %></h5><br>
+  </div>
+
+  <% if profile.personal_info[:visibility] || user_is_owner %>
+    <div class="border py-1 px-2 rounded mb-3">
+      <div class="d-flex gap-1">
+        <%= image_tag 'person-fill', width: '28rem', class: 'mb-2' %>
+        <h3><%= PersonalInfo.model_name.human %></h3>  
+      </div>
+      <%= render 'personal_info', personal_info: personal_info, user_is_owner: user_is_owner %>
+      <%= link_to 'Editar Informações Pessoais', edit_user_profile_path, class:'btn btn-secondary mx-4 mb-3' if user_is_owner %>
+    </div>
+  <% end %>
+
+  <div class="border py-1 px-2 rounded mb-3">
+    <% if profile.professional_infos.visibles_list.any? || user_is_owner %>
+      <div class="d-flex gap-1">
+        <%= image_tag 'briefcase-solid', width: '24rem', class: 'mb-2 mx-1' %>
+        <h3><%= ProfessionalInfo.model_name.human %></h3>
+      </div>
+    <% end %>
+
+    <p>
+      <%= link_to 'Adicionar Experiência Profissional', new_user_profile_professional_info_path, class:'btn btn-primary' if user_is_owner %>
+    </p>
+    <% professional_infos.each do |professional_info| %>
+      <% if professional_info.visibility || user_is_owner %>
+        <h4>
+          <%= ProfessionalInfo.human_attribute_name(:company) %>: <%= professional_info.company %>
+        </h4>
+        <ul>
+          <% if user_is_owner %>
+            <li class="fs-5 mb-3">
+              <span class="fw-bold"><%= t(professional_info['visibility'] ? 'visibility.true' : 'visibility.false') %></span>
+            </li>
+          <% end %>
+          <li>
+            <span class="fw-bold"><%= ProfessionalInfo.human_attribute_name(:current_job) %></span>: <%= t(professional_info.current_job) %>
+          </li>
+          <li>
+            <span class="fw-bold"><%= ProfessionalInfo.human_attribute_name(:position) %></span>: <%= professional_info.position %>
+          </li>
+          <li>
+            <span class="fw-bold"><%= ProfessionalInfo.human_attribute_name(:description) %></span>: <%= professional_info.description %>
+          </li>
+          <li>
+            <span class="fw-bold"><%= ProfessionalInfo.human_attribute_name(:start_date) %></span>: <%= l professional_info.start_date if professional_info.start_date%>
+          </li>
+          <li>
+            <span class="fw-bold"><%= ProfessionalInfo.human_attribute_name(:end_date) %></span>: <%= l professional_info.end_date if professional_info.end_date %>
+          </li>
+        </ul>
+      <% end %>
+      <p>
+        <%= link_to 'Editar Experiência Profissional', edit_professional_info_path(professional_info), class:'btn btn-secondary' if user_is_owner %>
+      </p>
+    <% end %>
+  </div>
+
+  <div class="border py-1 px-2 rounded mb-3">
+    <% if profile.education_infos.visibles_list.any? || user_is_owner %>
+      <div class="d-flex gap-2">
+        <%= image_tag 'user-graduate-solid', width: '24rem', class: 'mb-2 mx-1' %>
+        <h3><%= EducationInfo.model_name.human %></h3>
+      </div>
+    <% end %>
+    <p>
+      <%= link_to 'Adicionar Formação Acadêmica', new_user_profile_education_info_path, class:'btn btn-primary' if user_is_owner %>
+    </p>
+      <% profile.education_infos.each do |education_info| %>
+        <% if education_info.visibility || user_is_owner %>
+          <h4>  
+            <%= EducationInfo.human_attribute_name(:institution) %>: <%= education_info.institution %>
+          </h4>
+          <ul>
+            <% if user_is_owner %>
+              <li class="fs-5 mb-3">
+                <span class="fw-bold"><%= t(education_info['visibility'] ? 'visibility.true' : 'visibility.false') %></span>
+              </li>
+            <% end %>
+            <li>
+              <span class="fw-bold"><%= EducationInfo.human_attribute_name(:course) %></span>: <%= education_info.course %>
+            </li>
+            <li>
+              <span class="fw-bold"><%= EducationInfo.human_attribute_name(:start_date) %></span>: <%= l education_info.start_date if education_info.start_date%>
+            </li>
+            <li>
+              <span class="fw-bold"><%= EducationInfo.human_attribute_name(:end_date) %></span>: <%= l education_info.end_date if education_info.end_date %>
+            </li>
+          </ul>
+        <% end %>
+        <p>
+          <%= link_to 'Editar Formação Acadêmica', edit_education_info_path(education_info), class:'btn btn-secondary' if user_is_owner %>
+        </p>
+      <% end %>
+  </div>
+</div>
+<div id='profile-job-categories' class="border py-1 px-2 rounded mb-3">
+  <% if profile.profile_job_categories.any? || user_is_owner %> 
+    <div class="d-flex gap-1">
+      <%= image_tag 'person-working', width: '28rem', class: 'mb-2 mx-1' %>
+      <h3><%= t('content.section_title') %></h3>
+    </div>
+  <% end %> 
+
+  <%= link_to t('links.new_profile_job_category_path'), new_profile_job_category_path, class:'btn btn-primary' if user_is_owner %>
+  <div class='mt-2'>
+    <% profile.profile_job_categories.each do |profile_job_category| %>
+      <p><strong><%= profile_job_category.job_category.name %></strong></p>
+      <% if profile_job_category.description.present? %>
+        <p><%= profile_job_category.description %></p>
+      <% else %>
+        <p><%= t('content.profile_job_category_without_description') %></p>
+      <% end %>
+    <% end %>
+  </div>
+</div>

app/views/profiles/_profile_photo.html.erb

@@ -1,5 +1,5 @@
 <% if profile.photo.present? && profile.valid? %>
-  <%= image_tag profile.photo, alt: t('.alt_text'), class: 'img-cover' %>
+  <%= image_tag profile.photo, alt: t('.alt_text'), width: '130rem', class: 'img-cover rounded-circle mx-auto mt-2' %>
 <% else %>
-  <%= image_tag 'default_portfoliorrr_photo.png', alt: t('.alt_text'), class: 'img-cover' %>
+  <%= image_tag 'default_portfoliorrr_photo.png', width: '130rem', alt: t('.alt_text'), class: 'img-cover rounded-circle mx-auto mt-2' %>
 <% end %>

app/views/profiles/show.html.erb

@@ -1,5 +1,5 @@
-<div class="d-flex">
-  <div class="container d-flex flex-column w-50">
+<div class="row">
+  <div class="container col-md-7">
   <% if @profile.active? %>
     <% if @posts.pinned.any? %>
       <div id="fixed">
@@ -23,25 +23,30 @@
 
   </div>
 
-  <div class="container w-50 d-flex flex-column px-5 align-items-end">
+  <div class="col-md-5">
     <aside class="px-5">
-      <section class="text-center d-flex flex-column align-items-center">
-        <div class="ratio ratio-1x1 rounded-circle overflow-hidden w-50">
-          <%= render partial: 'profile_photo', locals: { profile: @profile } %>
-        </div>
-
-        <%= link_to t('.change_photo'), edit_profile_path(@profile), class: 'badge bg-secondary' if current_user == @profile.user %>
-        <h4><%= @user.full_name %></h4>
-        <div class="d-flex gap-4">
-          <div class="d-flex flex-column" id="followers-count">
-            <%= link_to profile_connections_path(@profile), class: "text-decoration-none fs-5" do %>
-              <p><%= @profile.followers_count %> <%= t(Connection.human_attribute_name(:follower_id, count: @profile.followers_count ))%></p>
-            <% end %>
+      <section class="text-center d-flex flex-column align-items-center border rounded">
+        <div class="w-100">
+          <div class="bg-primary profile-header mb-4 w-100 rounded-top d-flex flex-column">
+            <%= render partial: 'profile_photo', locals: { profile: @profile } %>
+            <%= link_to t('profiles.edit.change_photo'), edit_profile_path(@profile), class: 'badge bg-secondary mt-3' if current_user == @profile.user %>
           </div>
-          <div class="text-center d-flex flex-column" id="following-count">
-            <%= link_to profile_following_path(@profile), class: "text-decoration-none fs-5" do %>
-              <p><%= @profile.followed_count %> <%= t(Connection.human_attribute_name(:followed_profile_id))%> </p>
-            <% end %>
+          <h4><%= @user.full_name %></h4>
+          <p><%= @user.email %></p>
+          <div class="d-flex gap-4 justify-content-center">
+            <div class="d-flex flex-column" id="followers-count">
+              <%= link_to profile_connections_path(@profile), class: "text-decoration-none fs-5" do %>
+                <p><%= @profile.followers_count %> <%= t(Connection.human_attribute_name(:follower_id, count: @profile.followers_count ))%></p>
+              <% end %>
+            </div>
+            <div class="text-center d-flex flex-column" id="following-count">
+              <%= link_to profile_following_path(@profile), class: "text-decoration-none fs-5" do %>
+                <p><%= @profile.followed_count %> <%= t(Connection.human_attribute_name(:followed_profile_id))%> </p>
+              <% end %>
+            </div>
+            <div class="fs-5">
+              <p><%= @profile.user.posts.count %> <%= Post.model_name.human(count: @profile.user.posts.count) %> </p>
+            </div>
           </div>
         </div>
         <br>
@@ -64,7 +69,7 @@
 
       </section>
       <section>
-        <%= render 'profile/profile', profile: @profile, professional_infos: @professional_infos, personal_info: @personal_info %>
+        <%= render 'profile_details', profile: @profile, professional_infos: @professional_infos, personal_info: @personal_info %>
       </section>
     </aside>
   <% else %>