Make user profile image show full image on mobile (#19840) * Make user profile image show full image on mobile

Changes

2 changed files (+8/-13)

• templates/user/profile.tmpl
  • @@ -4,15 +4,17 @@
    <div class="ui stackable grid"> <div class="ui five wide column"> <div class="ui card"> + <div id="profile-avatar" class="content df"/> {{if eq .SignedUserName .Owner.Name}} - <a class="image tooltip" href="{{AppSubUrl}}/user/settings" id="profile-avatar" data-content="{{.i18n.Tr "user.change_avatar"}}" data-position="bottom center"> + <a class="image tooltip" href="{{AppSubUrl}}/user/settings" data-content="{{.i18n.Tr "user.change_avatar"}}" data-position="bottom center"> {{avatar .Owner 290}} </a> {{else}} - <span class="image" id="profile-avatar"> + <span class="image"> {{avatar .Owner 290}} </span> {{end}} + </div> <div class="content word-break profile-avatar-name"> {{if .Owner.FullName}}<span class="header text center">{{.Owner.FullName}}</span>{{end}} <span class="username text center">{{.Owner.Name}}</span>
• web_src/less/_user.less
  • @@ -44,27 +44,20 @@
    } } } - #profile-avatar { background: none; padding: 1rem 1rem .25rem; - + justify-content: center; img { width: 100%; height: auto; object-fit: contain; margin: 0; - } - - @media @mediaSm { - height: 250px; - overflow: hidden; - - img { - max-height: 767px; - max-width: 767px; + @media @mediaSm { + width: 30vw; } } + } @media @mediaSm {