Make user profile image show full image on mobile (#19840)
* Make user profile image show full image on mobile
This commit is contained in:
parent
52c2e82813
commit
4f1fb0f697
2 changed files with 8 additions and 13 deletions
|
@ -4,15 +4,17 @@
|
||||||
<div class="ui stackable grid">
|
<div class="ui stackable grid">
|
||||||
<div class="ui five wide column">
|
<div class="ui five wide column">
|
||||||
<div class="ui card">
|
<div class="ui card">
|
||||||
|
<div id="profile-avatar" class="content df"/>
|
||||||
{{if eq .SignedUserName .Owner.Name}}
|
{{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}}
|
{{avatar .Owner 290}}
|
||||||
</a>
|
</a>
|
||||||
{{else}}
|
{{else}}
|
||||||
<span class="image" id="profile-avatar">
|
<span class="image">
|
||||||
{{avatar .Owner 290}}
|
{{avatar .Owner 290}}
|
||||||
</span>
|
</span>
|
||||||
{{end}}
|
{{end}}
|
||||||
|
</div>
|
||||||
<div class="content word-break profile-avatar-name">
|
<div class="content word-break profile-avatar-name">
|
||||||
{{if .Owner.FullName}}<span class="header text center">{{.Owner.FullName}}</span>{{end}}
|
{{if .Owner.FullName}}<span class="header text center">{{.Owner.FullName}}</span>{{end}}
|
||||||
<span class="username text center">{{.Owner.Name}}</span>
|
<span class="username text center">{{.Owner.Name}}</span>
|
||||||
|
|
|
@ -44,27 +44,20 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#profile-avatar {
|
#profile-avatar {
|
||||||
background: none;
|
background: none;
|
||||||
padding: 1rem 1rem .25rem;
|
padding: 1rem 1rem .25rem;
|
||||||
|
justify-content: center;
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
@media @mediaSm {
|
||||||
|
width: 30vw;
|
||||||
@media @mediaSm {
|
|
||||||
height: 250px;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-height: 767px;
|
|
||||||
max-width: 767px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media @mediaSm {
|
@media @mediaSm {
|
||||||
|
|
Reference in a new issue