2021-01-06 08:21:37 +00:00
|
|
|
@use crate::{images::{banner_srcset, icon_srcset, largest_banner, largest_icon, ImageType}, profiles::Profile};
|
|
|
|
|
|
|
|
@(profile: &Profile)
|
|
|
|
|
|
|
|
<div class="profile-view">
|
|
|
|
<div class="profile-view--banner">
|
|
|
|
@if let Some(banner) = profile.banner_key() {
|
|
|
|
<picture>
|
|
|
|
<source
|
|
|
|
type="image/webp"
|
|
|
|
srcset="@banner_srcset(banner, ImageType::Webp)"
|
|
|
|
/>
|
2021-01-06 19:50:44 +00:00
|
|
|
<source
|
|
|
|
type="image/jpeg"
|
|
|
|
srcset="@banner_srcset(banner, ImageType::Jpeg)"
|
|
|
|
/>
|
2021-01-06 08:21:37 +00:00
|
|
|
<img
|
|
|
|
href="@largest_banner(banner, ImageType::Jpeg)"
|
|
|
|
title="@profile.name()'s banner"
|
|
|
|
alt="@profile.name()'s banner"
|
|
|
|
/>
|
|
|
|
</picture>
|
|
|
|
} else {
|
|
|
|
<div class="profile-view--banner--placeholder"></div>
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
<div class="profile-view--content">
|
|
|
|
<div class="profile-view--content--top">
|
|
|
|
<div class="profile-view--icon">
|
|
|
|
@if let Some(icon) = profile.icon_key() {
|
|
|
|
<picture>
|
|
|
|
<source
|
|
|
|
type="image/webp"
|
|
|
|
srcset="@icon_srcset(icon, ImageType::Webp)"
|
|
|
|
/>
|
2021-01-06 19:50:44 +00:00
|
|
|
<source
|
|
|
|
type="image/png"
|
|
|
|
srcset="@icon_srcset(icon, ImageType::Png)"
|
|
|
|
/>
|
2021-01-06 08:21:37 +00:00
|
|
|
<img
|
2021-01-06 19:50:44 +00:00
|
|
|
href="@largest_icon(icon, ImageType::Png)"
|
2021-01-06 08:21:37 +00:00
|
|
|
title="@profile.name()'s icon"
|
|
|
|
alt="@profile.name()'s icon"
|
|
|
|
/>
|
|
|
|
</picture>
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
<div class="profile-view--meta">
|
2021-01-06 19:50:44 +00:00
|
|
|
<div class="profile-view--meta--display">
|
|
|
|
@if let Some(name) = profile.display_name() {
|
|
|
|
@name
|
|
|
|
} else {
|
|
|
|
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
<div class="profile-view--meta--handle">@@@profile.full_handle()</div>
|
2021-01-06 08:21:37 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@if let Some(description) = profile.description() {
|
|
|
|
<div class="profile-view--description">@description</div>
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
</div>
|