Skip to content
GitLab
Menu
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Framasoft
PeerTube
PeerTube
Commits
4428ad54
Verified
Commit
4428ad54
authored
May 02, 2022
by
Chocobozzz
Browse files
Fix avatar responsive
parent
252e16e1
Changes
7
Hide whitespace changes
Inline
Side-by-side
client/src/app/+accounts/accounts.component.html
View file @
4428ad54
...
...
@@ -2,7 +2,7 @@
<div
class=
"account-info"
>
<div
class=
"account-avatar-row"
>
<my-actor-avatar
class=
"main-avatar"
[account]=
"account"
size=
"120"
></my-actor-avatar>
<my-actor-avatar
class=
"main-avatar"
[account]=
"account"
></my-actor-avatar>
<div>
<div
class=
"section-label"
i18n
>
ACCOUNT
</div>
...
...
client/src/app/+video-channels/video-channels.component.html
View file @
4428ad54
...
...
@@ -23,7 +23,7 @@
<div
class=
"section-label"
i18n
>
OWNER ACCOUNT
</div>
<div
class=
"avatar-row"
>
<my-actor-avatar
class=
"account-avatar"
[account]=
"ownerAccount"
[internalHref]=
"getAccountUrl()"
size=
"48"
></my-actor-avatar>
<my-actor-avatar
class=
"account-avatar"
[account]=
"ownerAccount"
[internalHref]=
"getAccountUrl()"
></my-actor-avatar>
<div
class=
"actor-info"
>
<h4>
...
...
@@ -51,7 +51,7 @@
</ng-template>
<div
class=
"channel-avatar-row"
>
<my-actor-avatar
class=
"main-avatar"
[channel]=
"videoChannel"
size=
"120"
></my-actor-avatar>
<my-actor-avatar
class=
"main-avatar"
[channel]=
"videoChannel"
></my-actor-avatar>
<div>
<div
class=
"section-label"
i18n
>
VIDEO CHANNEL
</div>
...
...
client/src/app/+video-channels/video-channels.component.scss
View file @
4428ad54
...
...
@@ -124,6 +124,10 @@
font-size
:
var
(
--
myGreyOwnerFontSize
);
color
:
pvar
(
--
greyForegroundColor
);
}
.account-avatar
{
@include
actor-avatar-size
(
48px
);
}
}
.owner-description
{
...
...
client/src/app/shared/shared-actor-image/actor-avatar.component.ts
View file @
4428ad54
...
...
@@ -23,7 +23,7 @@ export class ActorAvatarComponent {
@
Input
()
previewImage
:
string
@
Input
()
size
:
ActorAvatarSize
=
'
32
'
@
Input
()
size
:
ActorAvatarSize
// Use an external link
@
Input
()
href
:
string
...
...
@@ -50,13 +50,13 @@ export class ActorAvatarComponent {
}
get
defaultAvatarUrl
()
{
if
(
this
.
account
)
return
Account
.
GET_DEFAULT_AVATAR_URL
(
+
this
.
size
)
if
(
this
.
channel
)
return
VideoChannel
.
GET_DEFAULT_AVATAR_URL
(
+
this
.
size
)
if
(
this
.
account
)
return
Account
.
GET_DEFAULT_AVATAR_URL
(
this
.
getSizeNumber
()
)
if
(
this
.
channel
)
return
VideoChannel
.
GET_DEFAULT_AVATAR_URL
(
this
.
getSizeNumber
()
)
}
get
avatarUrl
()
{
if
(
this
.
account
)
return
Account
.
GET_ACTOR_AVATAR_URL
(
this
.
account
,
+
this
.
size
)
if
(
this
.
channel
)
return
VideoChannel
.
GET_ACTOR_AVATAR_URL
(
this
.
channel
,
+
this
.
size
)
if
(
this
.
account
)
return
Account
.
GET_ACTOR_AVATAR_URL
(
this
.
account
,
this
.
getSizeNumber
()
)
if
(
this
.
channel
)
return
VideoChannel
.
GET_ACTOR_AVATAR_URL
(
this
.
channel
,
this
.
getSizeNumber
()
)
return
''
}
...
...
@@ -88,6 +88,12 @@ export class ActorAvatarComponent {
return
!!
this
.
account
||
!!
this
.
channel
}
private
getSizeNumber
()
{
if
(
this
.
size
)
return
+
this
.
size
return
undefined
}
private
getColorTheme
()
{
const
initialLowercase
=
this
.
initial
.
toLowerCase
()
...
...
client/src/app/shared/shared-main/account/account.model.ts
View file @
4428ad54
...
...
@@ -17,12 +17,12 @@ export class Account extends Actor implements ServerAccount {
userId
?:
number
static
GET_ACTOR_AVATAR_URL
(
actor
:
{
avatars
:
{
width
:
number
,
url
?:
string
,
path
:
string
}[]
},
size
:
number
)
{
static
GET_ACTOR_AVATAR_URL
(
actor
:
{
avatars
:
{
width
:
number
,
url
?:
string
,
path
:
string
}[]
},
size
?
:
number
)
{
return
Actor
.
GET_ACTOR_AVATAR_URL
(
actor
,
size
)
}
static
GET_DEFAULT_AVATAR_URL
(
size
:
number
)
{
if
(
size
<=
48
)
{
static
GET_DEFAULT_AVATAR_URL
(
size
?
:
number
)
{
if
(
size
&&
size
<=
48
)
{
return
`
${
window
.
location
.
origin
}
/client/assets/images/default-avatar-account-48x48.png`
}
...
...
client/src/app/shared/shared-main/account/actor.model.ts
View file @
4428ad54
...
...
@@ -20,8 +20,12 @@ export abstract class Actor implements ServerActor {
isLocal
:
boolean
static
GET_ACTOR_AVATAR_URL
(
actor
:
{
avatars
:
{
width
:
number
,
url
?:
string
,
path
:
string
}[]
},
size
:
number
)
{
const
avatar
=
actor
.
avatars
.
sort
((
a
,
b
)
=>
a
.
width
-
b
.
width
).
find
(
a
=>
a
.
width
>=
size
)
static
GET_ACTOR_AVATAR_URL
(
actor
:
{
avatars
:
{
width
:
number
,
url
?:
string
,
path
:
string
}[]
},
size
?:
number
)
{
const
avatars
=
actor
.
avatars
.
sort
((
a
,
b
)
=>
a
.
width
-
b
.
width
)
const
avatar
=
size
?
avatars
.
find
(
a
=>
a
.
width
>=
size
)
:
avatars
[
0
]
if
(
!
avatar
)
return
''
if
(
avatar
.
url
)
return
avatar
.
url
...
...
client/src/sass/include/_account-channel-page.scss
View file @
4428ad54
...
...
@@ -70,6 +70,10 @@
color
:
pvar
(
--
mainColor
);
}
.main-avatar
{
@include
actor-avatar-size
(
120px
);
}
@media
screen
and
(
max-width
:
$mobile-view
)
{
margin-bottom
:
15px
;
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment