Merge pull request #62 from BinaryStudioAcademy/feature/fix-avatar-style

Fix avatar style in profile settings

Author: aLLeXUs

frontend/src/components/common/TweetPreview.vue

@@ -7,7 +7,7 @@
                     class="image is-64x64 is-square"
                     :to="{ name: 'user-page', params: { id: tweet.author.id } }"
                 >
-                    <img class="is-rounded" :src="tweet.author.avatar" alt="Author avatar">
+                    <img class="is-rounded fit" :src="tweet.author.avatar" alt="Author avatar">
                 </router-link>
 
                 <router-link v-else :to="{ name: 'user-page', params: { id: tweet.author.id } }">

frontend/src/components/view/profile/EditProfileForm.vue

@@ -3,8 +3,8 @@
         <div class="tile is-ancestor">
             <div class="tile is-parent">
                 <div class="tile is-child avatar">
-                    <div class="image is-square">
-                        <img v-if="user.avatar" class="image-avatar is-rounded" :src="user.avatar">
+                    <div class="image">
+                        <img v-if="user.avatar" class="image-avatar is-rounded fit" :src="user.avatar">
                         <DefaultAvatar v-else class="default-avatar" :user="user" />
                         <div class="actions">
                             <b-upload

frontend/src/components/view/tweet/Comment.vue

@@ -6,7 +6,7 @@
                 class="image is-48x48 is-square"
                 :to="{ name: 'user-page', params: { id: comment.author.id } }"
             >
-                <img class="is-rounded" :src="comment.author.avatar">
+                <img class="is-rounded fit" :src="comment.author.avatar">
             </router-link>
 
             <router-link v-else :to="{ name: 'user-page', params: { id: comment.author.id } }">

frontend/src/components/view/tweet/NewCommentForm.vue

@@ -2,7 +2,7 @@
     <article class="media">
         <figure class="media-left">
             <p class="image is-48x48 is-square" v-if="user.avatar">
-                <img class="is-rounded" :src="user.avatar">
+                <img class="is-rounded fit" :src="user.avatar">
             </p>
             <DefaultAvatar v-else class="image is-48x48" :user="user" />
         </figure>

frontend/src/components/view/tweet/TweetContainer.vue

@@ -8,7 +8,7 @@
                     :to="{ name: 'user-page', params: { id: tweet.author.id } }"
                 >
                     <img
-                        class="is-rounded"
+                        class="is-rounded fit"
                         :src="tweet.author.avatar"
                         alt="Author avatar"
                     >

frontend/src/styles/common.scss

@@ -49,3 +49,10 @@ html, body {
 .auto-cursor {
     cursor: auto;
 }
+
+.image img.fit {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: 50% 50%;
+}