Merge pull request #40 from NickColley/profile-improvements

Profile improvements
This commit is contained in:
Nick Colley 2023-02-01 12:07:12 +00:00 committed by GitHub
commit 55459eceed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 105 additions and 66 deletions

View File

@ -311,6 +311,7 @@ export default {
fields: 'Felder',
accountHasMoved: '{account} ist umgezogen:',
profilePageForAccount: 'Profilseite für {account}',
verified: 'Verified',
// About page
about: 'Über',
aboutApp: 'Über Semaphore',

View File

@ -323,6 +323,7 @@ export default {
fields: 'Fields',
accountHasMoved: '{account} has moved:',
profilePageForAccount: 'Profile page for {account}',
verified: 'Verified',
// About page
about: 'About',
aboutApp: 'About Semaphore',

View File

@ -324,6 +324,7 @@ export default {
fields: 'Campos',
accountHasMoved: '{account} se ha trasladado:',
profilePageForAccount: 'Página de perfil para {account}',
verified: 'Verified',
// About page
about: 'Acerca de',
aboutApp: 'Acerca de Semaphore',

View File

@ -313,6 +313,7 @@ export default {
fields: 'Champs',
accountHasMoved: '{account} a déménagé',
profilePageForAccount: 'Page de profil pour {account}',
verified: 'Verified',
// About page
about: 'Infos',
aboutApp: 'Infos sur Semaphore',

View File

@ -323,6 +323,7 @@ export default {
fields: 'Поля',
accountHasMoved: '{account} переехал:',
profilePageForAccount: 'Страница профиля для {account}',
verified: 'Verified',
// About page
about: 'О нас',
aboutApp: 'О Semaphore',

View File

@ -5,6 +5,11 @@
<div class={className}
style="background-image: url({headerImage});"
ref:accountProfile>
{#if !headerImageIsMissing}
<div class="account-profile-banner">
<img class="account-profile-banner-image" src={headerImage} alt=""/>
</div>
{/if}
<div class="account-profile-grid-wrapper">
<div class="account-profile-grid">
<AccountProfileHeader {account} {relationship} {verifyCredentials} />
@ -21,7 +26,6 @@
position: relative;
background-size: cover;
background-position: center;
padding-top: 175px;
}
.account-profile.moved {
@ -29,7 +33,6 @@
}
.account-profile.header-image-is-missing {
padding-top: 0;
background-color: #ccc;
}
@ -41,7 +44,7 @@
"meta meta meta meta meta"
"details details details details details";
grid-template-columns: min-content auto 1fr 1fr min-content;
grid-column-gap: 10px;
grid-column-gap: 15px;
grid-row-gap: 5px;
padding: 20px;
justify-content: center;
@ -50,8 +53,8 @@
@supports (-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%)) {
:global(.account-profile-grid-wrapper) {
-webkit-backdrop-filter: blur(7px) saturate(110%);
backdrop-filter: blur(7px) saturate(110%);
-webkit-backdrop-filter: blur(20px) saturate(110%);
backdrop-filter: blur(20px) saturate(110%);
background-color: var(--account-profile-bg-backdrop-filter);
}
}
@ -106,6 +109,17 @@
grid-row-gap: 0;
}
}
.account-profile-banner {
aspect-ratio: 3/1;
background-color: var(--body-bg);
}
.account-profile-banner-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
<script>
import AccountProfileHeader from './AccountProfileHeader.html'

View File

@ -1,36 +1,36 @@
<h2 class="sr-only">{intl.statisticsAndMoreOptions}</h2>
<div class="account-profile-details">
<div class="account-profile-details-item">
<span class="account-profile-details-item-title">
{intl.statuses}
</span>
<span class="account-profile-details-item-datum">
{numStatusesDisplay}
</span>
<span class="account-profile-details-item-title">
{intl.statuses}
</span>
</div>
<a class="account-profile-details-item"
href='/accounts/{account.id}/follows'
aria-label={followingLabel}
rel="prefetch"
>
<span class="account-profile-details-item-title">
{intl.follows}
</span>
<span class="account-profile-details-item-datum">
{numFollowingDisplay}
</span>
<span class="account-profile-details-item-title">
{intl.follows}
</span>
</a>
<a class="account-profile-details-item"
href='/accounts/{account.id}/followers'
aria-label={followersLabel}
rel="prefetch"
>
<span class="account-profile-details-item-title">
{intl.followers}
</span>
<span class="account-profile-details-item-datum">
{numFollowersDisplay}
</span>
<span class="account-profile-details-item-title">
{intl.followers}
</span>
</a>
<!-- TODO: re-enable this when we support profile editing -->
{#if account && verifyCredentials && account.id !== verifyCredentials.id}
@ -61,25 +61,23 @@
font-size: 1.1em;
}
.account-profile-details-item:hover {
.account-profile-details-item[href]:hover {
text-decoration: none;
background: var(--button-bg-hover);
cursor: pointer;
}
.account-profile-details-item:active {
.account-profile-details-item[href]:active {
background: var(--button-bg-active);
}
.account-profile-details-item-title {
text-transform: uppercase;
color: var(--deemphasized-text-color);
margin-right: 5px;
}
.account-profile-details-item-datum {
color: var(--body-text-color);
margin-left: 5px;
margin-right: 5px;
font-weight: 600;
}

View File

@ -6,17 +6,9 @@
- If a follow is requested, then the button is pressed but shows as "follow requested" with
a different icon.
-->
<IconButton
className="account-profile-follow-icon-button"
{label}
{pressedLabel}
{href}
{pressable}
{pressed}
big={!$isVeryTinyMobileSize}
on:click="onFollowButtonClick(event)"
ref:icon
/>
<button class="account-profile-follow-button" on:click="onFollowButtonClick(event)">
{pressed ? pressedLabel : label}
</button>
</div>
<style>
.account-profile-follow {
@ -33,6 +25,12 @@
justify-self: flex-end;
}
}
.account-profile-follow-button {
padding: 0.6em;
font-size: 1.1em;
min-width: 10ch;
}
</style>
<script>
import IconButton from '../IconButton.html'
@ -99,17 +97,6 @@
pressedLabel: ({ requested }) => {
return formatIntl('intl.unfollowLabel', { requested })
},
href: ({ blocking, following, followRequested }) => {
if (blocking) {
return '#fa-unlock'
} else if (following) {
return '#fa-user-times'
} else if (followRequested) {
return '#fa-hourglass'
} else {
return '#fa-user-plus'
}
},
shown: ({ verifyCredentials, relationship }) => (
verifyCredentials && relationship && verifyCredentials.id !== relationship.id
),

View File

@ -7,20 +7,15 @@
</button>
</div>
<div class="account-profile-name">
<ExternalLink
className="account-profile-name-link focus-fix"
href={account.url}
showIcon="true"
normalIconColor="true"
ariaLabel={externalLinkLabel}>
<AccountDisplayName {account} />
</ExternalLink>
</div>
{#if label}
<Label {label} className="account-profile-label" />
{/if}
<div class="account-profile-username">
<ExternalLink className="focus-fix" href={account.url}>
{'@' + account.acct}
</ExternalLink>
</div>
<div class="account-profile-followed-by">
{#if relationship && relationship.blocking}
@ -46,10 +41,10 @@
white-space: nowrap;
}
.account-profile-followed-by-span {
background: rgba(30, 30, 30, 0.2);
border-radius: 4px;
padding: 3px 5px;
white-space: nowrap;
padding: 3px 6px;
border: 1px solid;
border-radius: 4px;
}
.account-profile-avatar {
grid-area: avatar;

View File

@ -17,9 +17,16 @@
>
{@html field.value}
</div>
<div class="account-profile-meta-cell account-profile-meta-verified">
<div class="account-profile-meta-cell">
{#if field.verified}
<SvgIcon className="account-profile-meta-verified-svg" href="#fa-check" />
<span class="account-profile-meta-verified">
<SvgIcon
ariaLabel="verified"
className="account-profile-meta-verified-svg"
href="#fa-check"
/>
{intl.verified}
</span>
{/if}
</div>
{/each}
@ -40,7 +47,8 @@
height: 1px;
width: 100%;
grid-column: 1 / 4;
background: var(--main-border);
background: currentColor;
opacity: 0.2;
justify-self: center;
}
@ -52,15 +60,8 @@
font-size: 1.1em;
}
:global(.account-profile-meta-verified-svg) {
width: 24px;
height: 24px;
fill: var(--svg-fill);
}
.account-profile-meta-name {
padding: 10px 20px 10px 0;
text-transform: uppercase;
color: var(--deemphasized-text-color);
position: relative;
max-width: 300px;
@ -72,7 +73,8 @@
right: 0;
top: 15%;
height: 70%;
border-right: 1px solid var(--main-border);
border-right: 1px solid;
opacity: 0.2;
}
.account-profile-meta-value {
@ -98,6 +100,31 @@
padding: 5px 10px 5px 10px;
}
}
.account-profile-meta-verified {
display: inline-flex;
align-items: center;
vertical-align: middle;
white-space: nowrap;
gap: 0.2em;
margin-left: 0.5em;
padding: 2px 0;
padding-left: 4px;
padding-right: 5px;
font-size: 0.9em;
color: var(--verified-text-color);
background: var(--verified-bg-color);
border: 1px solid var(--verified-border-color, currentColor);
border-radius: 4px;
}
:global(.account-profile-meta-verified-svg) {
display: inline-block;
width: .9em;
height: .9em;
fill: currentColor;
opacity: 0.95;
}
</style>
<script>
import SvgIcon from '../SvgIcon.html'

View File

@ -6,7 +6,7 @@ body {
margin: 0;
font-family: system-ui, -apple-system, SemaphoreRegular, sans-serif;
font-size: 14px;
line-height: 1.4;
line-height: 1.5;
color: var(--body-text-color);
background: var(--body-bg);
-webkit-tap-highlight-color: transparent; // fix for blue background on spoiler tap on Chrome for Android

View File

@ -77,7 +77,7 @@
--mask-opaque-bg: #{rgba($toast-bg, 0.8)};
--loading-bg: #{#ededed};
--account-profile-bg-backdrop-filter: #{rgba($main-bg-color, 0.7)};
--account-profile-bg-backdrop-filter: #{rgba($main-bg-color, 0.85)};
--account-profile-bg: #{rgba($main-bg-color, 0.9)};
--deemphasized-text-color: #{$deemphasized-color};
@ -134,6 +134,9 @@
--focus-bg: #{rgba(0, 0, 0, 0.1)};
--verified-text-color: #00703C;
--verified-bg-color: #E1EFE8;
accent-color: #{$main-theme-color};
color-scheme: light;
}

View File

@ -1,6 +1,12 @@
:root {
$deemphasized-color: lighten($main-bg-color, 54%);
--button-bg: #{lighten($main-bg-color, 6%)};
--button-text: #{$main-text-color};
--button-border: #{lighten($border-color, 6%)};
--button-bg-active: #{lighten($main-bg-color, 0%)};
--button-bg-hover: #{lighten($main-bg-color, 3%)};
--input-placeholder-color: #{$deemphasized-color};
--action-button-deemphasized-fill-color: #{$deemphasized-color};
@ -55,5 +61,9 @@
--focus-bg: #{rgba(255, 255, 255, 0.1)};
--verified-text-color: #1CA665;
--verified-bg-color: #172B29;
--verified-border-color: #104c34;
color-scheme: dark;
}