Fix problem with mickey mouse (no profile picture) on small screens.

BeWelcome · Oct 31, 2023 · 50eff34 · 50eff34
1 parent f4f4725
commit 50eff34
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 22 deletions.
diff --git a/build/members/templates/member.teasercontent.php b/build/members/templates/member.teasercontent.php
@@ -38,19 +38,21 @@
         $picture_url = 'members/avatar/' . $member->Username;
         ?>
         <div class="text-center text-md-left">
+            <div class="d-md-none u-w-full u-relative u-pb-[100%] u-max-w-[320px] u-m-auto">
+                <div class="u-absolute u-left-0 u-top-0 u-w-full u-h-full">
             <?php if ($this->useLightbox) { ?>
-                <a class="d-md-none js-profile-picture" href="<?= $picture_url . '/original' ?>" data-toggle="lightbox"
-                   data-always-show-close="true" data-type="image"
-                   data-title="<?= $words->getbuffered('profile.picture.title'); ?>">
-                    <img class="profileimg d-md-none js-profile-picture" src="<?= $picture_url . '/320' ?>"
-                         alt="<?= $words->get('profile.picture.title'); ?>">
-                </a>
+                        <a href="<?= $picture_url ?>/original" title="<?= $words->get('profile.picture.title'); ?>" class="js-profile-picture" data-toggle="lightbox" data-type="image">
+                            <img class="u-rounded-full u-w-full u-h-full u-object-cover js-profile-picture"
+                                 src="<?= $picture_url ?>/320" alt="<?= $words->get('profile.picture.title'); ?>"/>
+                        </a>
             <?php } else { ?>
-                <a href="members/<?= $member->Username; ?>">
-                    <img class="profileimg d-md-none js-profile-picture" src="<?= $picture_url . '/320' ?>"
-                         alt="<?= $words->getbuffered('profile.picture.title'), $member->Username; ?>">
-                </a>
+                        <a href="members/<?= $member->Username; ?>" title="<?= $words->get('profile.picture.title'); ?>">
+                            <img class="u-rounded-full u-w-full u-h-full u-object-cover js-profile-picture"
+                                 src="<?= $picture_url ?>/320" alt="<?= $words->get('profile.picture.title'); ?>">
+                        </a>
             <?php } ?>
+                </div>
+            </div>
 
             <?php if ($member->name() != '') {
                 echo "<h3>" . $member->name() . "</h3>";

diff --git a/src/Controller/AvatarController.php b/src/Controller/AvatarController.php
@@ -81,7 +81,8 @@ public function uploadAvatar(Request $request): Response
      *     requirements={"size" : "\d+|original" },
      *     defaults={"size": "48"})
      */
-    public function showAvatar(Member $member, string $size): BinaryFileResponse {
+    public function showAvatar(Member $member, string $size): BinaryFileResponse
+    {
         if (!$this->isGranted('IS_AUTHENTICATED_REMEMBERED')) {
             return $this->emptyAvatar($size);
         }
@@ -177,12 +178,12 @@ private function getAvatarImageFilename(Member $member, string $size): string
         return $filename;
     }
 
-    private function avatarImageExists(Member $member, $size): bool
+    private function avatarImageExists(Member $member, string $size): bool
     {
         return file_exists($this->getAvatarImageFilename($member, $size));
     }
 
-    private function createAvatarImage(Member $member, int $sizeOfAvatar)
+    private function createAvatarImage(Member $member, string $sizeOfAvatar)
     {
         // creates a thumbnail for the current image (if we have an original that is)
         $original = self::AVATAR_PATH . $member->getId() . '_original';
@@ -212,21 +213,21 @@ private function createAvatarImage(Member $member, int $sizeOfAvatar)
         $img->save($filename, 100, 'jpg');
     }
 
-    private function createEmptyAvatarImage($sizeOfAvatar): string
+    private function createEmptyAvatarImage(string $sizeOfAvatar): string
     {
         // creates a thumbnail of the empty avatar
         $original = self::EMPTY_AVATAR_PATH . 'empty_avatar_original.png';
 
         $imageManager = new ImageManager();
         $img = $imageManager->make($original);
-        if (is_int($sizeOfAvatar)) {
+        if ('original' === $sizeOfAvatar) {
+            $filename = $original;
+        } else {
             $filename = self::AVATAR_PATH . 'empty_avatar_' . $sizeOfAvatar . '_' . $sizeOfAvatar;
             $img->resize($sizeOfAvatar, $sizeOfAvatar, function ($constraint) {
                 $constraint->aspectRatio();
             });
             $img->save($filename);
-        } else {
-            $filename = $original;
         }
 
         return $filename;

diff --git a/templates/profile/header.html.twig b/templates/profile/header.html.twig
@@ -24,20 +24,23 @@
 </div>
 <div class="row align-items-center">
     <div class="col-12 col-sm-6">
-        <div class="text-center text-md-left">
-            {% if use_lightbox is defined %}
-                <a class="d-md-none js-profile-picture" href="{{ url('avatar', { username: member.Username, size: 'original'}) }}" data-toggle="lightbox"
+        <div class="d-md-none u-w-full u-relative u-pb-[100%] u-m-auto u-max-w-[320px]">
+            <div class="u-absolute u-left-0 u-top-0 u-w-full u-h-full">
+                {% if use_lightbox is defined %}
+                <a class="js-profile-picture" href="{{ url('avatar', { username: member.Username, size: 'original'}) }}" data-toggle="lightbox"
                    data-always-show-close="true" data-type="image"
                    data-title="{{ 'profile.picture.title'| trans }}">
-                    <img class="profileimg d-md-none js-profile-picture" src="{{ url('avatar', { username: member.Username, size: 320}) }}"
+                    <img class="u-rounded-8 u-w-full u-h-full u-object-cover js-profile-picture" src="{{ url('avatar', { username: member.Username, size: 320}) }}"
                          alt="{{ 'profile.picture.title'| trans }}">
                 </a>
             {% else %}
                 <a href="{{ url('members_profile', {username: member.username}) }}">
-                    <img class="profileimg d-md-none js-profile-picture" src="{{ url('avatar', { username: member.Username, size: 320}) }}"
+                    <img class="u-rounded-8 u-w-full u-h-full u-object-cover js-profile-picture" src="{{ url('avatar', { username: member.Username, size: 320}) }}"
                          alt="{{ 'profile.picture.title'| trans }}">
                 </a>
             {% endif %}
+            </div>
+        </div>
 
             {% if member.Name != ''%}<h3>{{ member.Name }}</h3>{% endif %}
             {% set city = member.city %}