Style/melhora resolução de fotos de perfil

Co-authored-by: Rodrigo Gyodai <[email protected]>
TreinaDev · Feb 15, 2024 · 89869dd · 89869dd
1 parent 39a08b8
commit 89869dd
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 22 deletions.
diff --git a/app/assets/stylesheets/navbar.scss b/app/assets/stylesheets/navbar.scss
@@ -21,4 +21,8 @@
 
 .badge-container{
   position: relative !important;
+}
+
+.dropdown-profile-picture{
+  width: 5rem !important;
 }
diff --git a/app/views/connections/_connection_cards.html.erb b/app/views/connections/_connection_cards.html.erb
@@ -2,7 +2,9 @@
   <div class="card-body row justify-content-center align-items-center">
     <div class="col-md-3 col-sm-3 profile-image">
       <% if connection_profile.photo.present? %>
-        <%= image_tag connection_profile.photo_attachment, width: '85rem', alt: 'Foto de perfil', class: 'profile-picture rounded rounded-circle px-2' %>
+        <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
+          <%= image_tag connection_profile.photo_attachment, width: '85rem', alt: 'Foto de perfil', class: 'img-cover profile-picture rounded rounded-circle px-2' %>
+        </div>
       <% else %>
         <%= image_tag 'default_portfoliorrr_photo.png', width: '85rem', alt: 'Foto de perfil', class: 'profile-picture rounded rounded-circle px-2' %>
       <% end %>

diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
@@ -5,9 +5,11 @@
          <div class="border bg-white rounded mb-5 d-flex align-items-center justify-content-center page-header">
           <%= link_to current_user.profile, class: 'd-flex justify-content-center w-25' do %>
             <% if current_user.profile.photo.present? && current_user.profile.valid? %>
-              <%= image_tag current_user.profile.photo, alt: t('.alt_text'), class: 'profile-picture rounded-circle my-3 w-50' %>
+              <div class="ratio ratio-1x1 rounded-circle overflow-hidden w-50 my-3">
+                <%= image_tag current_user.profile.photo, alt: t('.alt_text'), class: 'img-cover rounded-circle' %>
+              </div>
             <% else %>
-              <%= image_tag 'default_portfoliorrr_photo.png', alt: t('.alt_text'), class: 'profile-picture rounded-circle my-3 w-50' %>
+              <%= image_tag 'default_portfoliorrr_photo.png', alt: t('.alt_text'), class: 'rounded-circle my-3 w-50' %>
             <% end %>
           <% end %>
           <div>
@@ -43,9 +45,11 @@
             <div class="bg-white text-center home-cards my-0 py-0 rounded-1">
               <%= link_to profile_path(profile), class: 'row' do %>
                 <% if profile.photo.present? && profile.valid? %>
-                  <%= image_tag profile.photo, alt: t('.alt_text'), width: '70rem', class: 'profile-picture img-cover rounded-circle mx-auto mt-2 col-md-4' %>
+                  <div class="ratio ratio-1x1 rounded-circle overflow-hidden w-25">
+                    <%= image_tag profile.photo, alt: t('.alt_text'), width: '70rem', class: 'profile-picture img-cover rounded-circle mx-auto mt-2 col-md-4' %>
+                  </div>
                 <% else %>
-                  <%= image_tag 'default_portfoliorrr_photo.png', width: '70rem', alt: t('.alt_text'), class: 'profile-picture img-cover rounded-circle mx-auto mt-2 col-md-4' %>
+                  <%= image_tag 'default_portfoliorrr_photo.png', width: '70rem', alt: t('.alt_text'), class: 'rounded-circle mx-auto mt-2 col-md-4' %>
                 <% end %>
                 <div class="col-md-8 mt-4">
                   <h5><%= profile.full_name %></h5>

diff --git a/app/views/posts/_form.html.erb b/app/views/posts/_form.html.erb
@@ -9,21 +9,27 @@
     <%= f.rich_text_area :content, id: 'conteudo', class: 'form-control' %>
   </div>
 
-  <div class="form-group my-3">
-    <%= f.label :status_published, class: 'form-check-label' %>
-    <%= f.radio_button :status, 'published', class: 'me-2 form-check-input' %> <br>
-
-    <%= f.label :status_draft, class: 'form-check-label' %>
-    <%= f.radio_button :status, 'draft', class:'me-2 form-check-input' %> <br>
-
-    <%= f.label :status_archived, class: 'form-check-label' %>
-    <%= f.radio_button :status, 'archived', class:'me-2 form-check-input' %> <br>
+  <div class="form-group my-3 d-flex flex-column">
+    <div>
+      <%= f.radio_button :status, 'published', class: 'me-2 form-check-input' %>
+      <%= f.label :status_published, class: 'form-check-label' %>
+    </div>
+    <div>
+      <%= f.radio_button :status, 'draft', class:'me-2 form-check-input' %>
+      <%= f.label :status_draft, class: 'form-check-label' %>
+    </div>
+    <div>
+      <%= f.radio_button :status, 'archived', class:'me-2 form-check-input' %>
+      <%= f.label :status_archived, class: 'form-check-label' %>
+    </div>
 
-    <% if !@post.published? || request.path == new_post_path %>
-      <%= f.label :status_scheduled, class: 'form-check-label' %>
-      <%= f.radio_button :status, 'scheduled', class: 'me-2 form-check-input mb-3' %>
-      <%= f.datetime_field :published_at, class: 'form-control w-25' %>
-    <% end %>
+    <div>
+      <% if !@post.published? || request.path == new_post_path %>
+        <%= f.radio_button :status, 'scheduled', class: 'me-2 form-check-input mb-3' %>
+        <%= f.label :status_scheduled, class: 'form-check-label' %>
+        <%= f.datetime_field :published_at, class: 'form-control w-25' %>
+      <% end %>
+    </div>
   </div>
 
   <div class="form-group">

diff --git a/app/views/profiles/show.html.erb b/app/views/profiles/show.html.erb
@@ -25,7 +25,6 @@
         <%= render partial: 'posts/listing', locals: { posts: @posts.unpinned.order(created_at: :desc) } %>
       </section>
     </div>
-
   </div>
 
   <div class="col-md-5">
@@ -34,7 +33,9 @@
         <div class="w-100">
           <div class="bg-primary mb-4 rounded-top d-flex flex-column profile-header">
             <div class="profile-card-body">
-              <%= render partial: 'profile_photo', locals: { profile: @profile } %>
+              <div class="ratio ratio-1x1 rounded-circle overflow-hidden w-25 mx-auto">
+                <%= render partial: 'profile_photo', locals: { profile: @profile } %>
+              </div>
               <h2><%= @user.full_name %></h2>
               <p><%= @user.email %></p>
             </div>

diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb
@@ -43,7 +43,9 @@
         <% if user_signed_in? %>
           <button class="btn dropdown-toggle mx-5" data-bs-toggle="dropdown" aria-expanded="false">
             <% if current_user.profile.photo_attachment %>
-              <%= image_tag current_user.profile.photo_attachment, width: '55rem', alt: 'Foto de perfil', class: 'profile-picture rounded rounded-circle px-2' %>
+            <div class="dropdown-profile-picture ratio ratio-1x1 rounded-circle overflow-hidden">
+              <%= image_tag current_user.profile.photo_attachment, width: '55rem', alt: 'Foto de perfil', class: 'img-cover rounded rounded-circle' %>
+            </div>
             <% else %>
               <%= image_tag 'default_portfoliorrr_photo.png', width: '55rem', alt: 'Foto de perfil', class: 'profile-picture rounded rounded-circle px-2' %>
             <% end %>