Restyled the accounts section accordingly with the new profile.
This commit is contained in:
parent
4648520533
commit
af222dfbd8
8 changed files with 179 additions and 211 deletions
|
|
@ -1,117 +0,0 @@
|
|||
.profile {
|
||||
&__avatar {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__account-link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
flex-direction: column;
|
||||
background-color: var(--accent-colour);
|
||||
width: 100%;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
&__section {
|
||||
margin-right: 2px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
margin: 0 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&__block {
|
||||
border: 1px solid var(--accent-colour);
|
||||
padding: 2px 4px;
|
||||
margin-bottom: 2px;
|
||||
background-color: rgba(251, 238, 255, .9);
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
background-color: var(--background-colour);
|
||||
}
|
||||
|
||||
&--links:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
|
||||
&--link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__column {
|
||||
min-width: 80px;
|
||||
max-width: 200px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
min-width: auto;
|
||||
flex-grow: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&--heading {
|
||||
font-weight: bold;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
&--numeric {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&--user-title {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&--icons {
|
||||
text-align: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&--country {
|
||||
font-size: .8em;
|
||||
line-height: 1.4em;
|
||||
width: 110px;
|
||||
text-align: center;
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
45
assets/less/mio/classes/profile/accounts.less
Normal file
45
assets/less/mio/classes/profile/accounts.less
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
.profile__accounts {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2px 5px;
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 4px #111;
|
||||
box-shadow: 0 1px 4px #111;
|
||||
background-color: #111;
|
||||
|
||||
&__item {
|
||||
padding-bottom: 5px;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid #222;
|
||||
}
|
||||
}
|
||||
|
||||
&__notice {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.5em;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: .9em;
|
||||
line-height: 1.8em;
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.2em;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: inherit;
|
||||
text-decoration: underline dotted;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
28
assets/less/mio/classes/profile/container.less
Normal file
28
assets/less/mio/classes/profile/container.less
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
.profile__container {
|
||||
display: flex;
|
||||
|
||||
&__main {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&__side {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
&__placeholder {
|
||||
background-image: repeating-linear-gradient(-45deg, yellow, yellow 10px, black 10px, black 20px);
|
||||
box-shadow: 0 1px 4px #111;
|
||||
margin: 2px 0;
|
||||
padding: 2px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
|
||||
&__content {
|
||||
background-color: rgba(17, 17, 17, .9);
|
||||
padding: 2px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -72,13 +72,14 @@ body {
|
|||
// Specific styles
|
||||
@import "classes/footer";
|
||||
@import "classes/header";
|
||||
@import "classes/profile";
|
||||
@import "classes/index";
|
||||
@import "classes/permissions";
|
||||
|
||||
// Profile
|
||||
@import "classes/profile/profile";
|
||||
@import "classes/profile/header";
|
||||
@import "classes/profile/container";
|
||||
@import "classes/profile/accounts";
|
||||
|
||||
// Changelog
|
||||
@import "classes/changelog";
|
||||
|
|
|
|||
|
|
@ -96,6 +96,7 @@ switch ($mode) {
|
|||
|
||||
tpl_vars([
|
||||
'profile' => $profile,
|
||||
'profile_fields' => $app->hasActiveSession() ? user_profile_fields_display($profile) : [],
|
||||
'has_background' => is_file(build_path($app->getStoragePath(), 'backgrounds/original', "{$profile['user_id']}.msz")),
|
||||
]);
|
||||
echo tpl_render('user.profile');
|
||||
|
|
|
|||
|
|
@ -16,39 +16,57 @@ define('MSZ_USER_PROFILE_FIELDS', [
|
|||
'twitter' => [
|
||||
'name' => 'Twitter',
|
||||
'regex' => '#^(?:https?://(?:www\.)?twitter.com/(?:\#!\/)?)?@?([A-Za-z0-9_]{1,20})/?$#u',
|
||||
'link' => 'https://twitter.com/%s',
|
||||
'format' => '@%s',
|
||||
],
|
||||
'osu' => [
|
||||
'name' => 'osu!',
|
||||
'regex' => '#^(?:https?://osu.ppy.sh/u(?:sers)?/)?([a-zA-Z0-9-\[\]_ ]{1,20})/?$#u',
|
||||
'link' => 'https://osu.ppy.sh/users/%s',
|
||||
],
|
||||
'website' => [
|
||||
'name' => 'Website',
|
||||
'type' => 'url',
|
||||
'regex' => '#^((?:https?)://.{1,240})$#u',
|
||||
'link' => '%s',
|
||||
'tooltip' => '%s',
|
||||
],
|
||||
'youtube' => [
|
||||
'name' => 'Youtube',
|
||||
'regex' => '#^(?:https?://(?:www.)?youtube.com/(?:(?:user|c|channel)/)?)?(UC[a-zA-Z0-9-_]{1,22}|[a-zA-Z0-9-_%]{1,100})/?$#u',
|
||||
'link' => [
|
||||
'_' => 'https://youtube.com/%s',
|
||||
'UC[a-zA-Z0-9-_]{1,22}' => 'https://youtube.com/channel/%s',
|
||||
],
|
||||
'format' => [
|
||||
'_' => '%s',
|
||||
'UC[a-zA-Z0-9-_]{1,22}' => 'Go to Channel',
|
||||
],
|
||||
],
|
||||
'steam' => [
|
||||
'name' => 'Steam',
|
||||
'regex' => '#^(?:https?://(?:www.)?steamcommunity.com/(?:id|profiles)/)?([a-zA-Z0-9_-]{2,100})/?$#u',
|
||||
'link' => 'https://steamcommunity.com/id/%s',
|
||||
],
|
||||
'twitchtv' => [
|
||||
'name' => 'Twitch.tv',
|
||||
'regex' => '#^(?:https?://(?:www.)?twitch.tv/)?([0-9A-Za-z_]{3,25})/?$#u',
|
||||
'link' => 'https://twitch.tv/%s',
|
||||
],
|
||||
'lastfm' => [
|
||||
'name' => 'Last.fm',
|
||||
'regex' => '#^(?:https?://(?:www.)?last.fm/user/)?([a-zA-Z]{1}[a-zA-Z0-9_-]{1,14})/?$#u',
|
||||
'link' => 'https://www.last.fm/user/%s',
|
||||
],
|
||||
'github' => [
|
||||
'name' => 'Github',
|
||||
'regex' => '#^(?:https?://(?:www.)?github.com/?)?([a-zA-Z0-9](?:[a-zA-Z0-9]|-(?=[a-zA-Z0-9])){0,38})/?$#u',
|
||||
'link' => 'https://github.com/%s',
|
||||
],
|
||||
'skype' => [
|
||||
'name' => 'Skype',
|
||||
'regex' => '#^((?:live:)?[a-zA-Z][\w\.,\-_@]{1,100})$#u',
|
||||
'link' => 'skype:%s?userinfo',
|
||||
],
|
||||
'discord' => [
|
||||
'name' => 'Discord',
|
||||
|
|
@ -66,6 +84,11 @@ function user_profile_field_get_display_name(string $name): string
|
|||
return MSZ_USER_PROFILE_FIELDS[$name]['name'] ?? '';
|
||||
}
|
||||
|
||||
function user_profile_field_get_database_name(string $name): string
|
||||
{
|
||||
return sprintf(MSZ_USER_PROFILE_FIELD_FORMAT, $name);
|
||||
}
|
||||
|
||||
function user_profile_fields_get(): array
|
||||
{
|
||||
return MSZ_USER_PROFILE_FIELDS;
|
||||
|
|
@ -121,7 +144,7 @@ function user_profile_fields_set(int $userId, array $fields): array
|
|||
continue;
|
||||
}
|
||||
|
||||
$values[sprintf(MSZ_USER_PROFILE_FIELD_FORMAT, $name)] = $value;
|
||||
$values[user_profile_field_get_database_name($name)] = $value;
|
||||
}
|
||||
|
||||
if (count($values) > 0) {
|
||||
|
|
@ -139,3 +162,40 @@ function user_profile_fields_set(int $userId, array $fields): array
|
|||
|
||||
return $errors;
|
||||
}
|
||||
|
||||
function user_profile_fields_display(array $user): array
|
||||
{
|
||||
$output = [];
|
||||
|
||||
foreach (MSZ_USER_PROFILE_FIELDS as $name => $field) {
|
||||
$dbn = user_profile_field_get_database_name($name);
|
||||
|
||||
if (!array_key_exists($dbn, $user) || empty($user[$dbn])) {
|
||||
continue;
|
||||
}
|
||||
|
||||
$output[$name] = $field;
|
||||
$output[$name]['value'] = htmlentities($user[$dbn]);
|
||||
|
||||
foreach (['link', 'format'] as $multipath) {
|
||||
if (empty($output[$name][$multipath]) || !is_array($output[$name][$multipath])) {
|
||||
continue;
|
||||
}
|
||||
|
||||
foreach (array_reverse($output[$name][$multipath], true) as $regex => $string) {
|
||||
if ($regex === '_' || !preg_match("#{$regex}#", $user[$dbn])) {
|
||||
continue;
|
||||
}
|
||||
|
||||
$output[$name][$multipath] = $string;
|
||||
break;
|
||||
}
|
||||
|
||||
if (is_array($output[$name][$multipath])) {
|
||||
$output[$name][$multipath] = $output[$name][$multipath]['_'];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return $output;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,16 +55,15 @@ function comments_parse_for_display(string $text): string
|
|||
return $matches[0];
|
||||
}
|
||||
|
||||
return '<a href="/profile.php?u='
|
||||
. $info['user_id']
|
||||
. '" class="comment__mention" style="'
|
||||
. html_colour($info['user_colour'], [
|
||||
return sprintf(
|
||||
'<a href="/profile.php?u=%d" class="comment__mention", style="%s">@%s</a>',
|
||||
$info['user_id'],
|
||||
html_colour($info['user_colour'], [
|
||||
'color' => '%s',
|
||||
'text-shadow' => '0 0 5px %s',
|
||||
])
|
||||
. '">@'
|
||||
. $info['username']
|
||||
. '</a>';
|
||||
]),
|
||||
$info['username']
|
||||
);
|
||||
}, $text);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,67 +6,10 @@
|
|||
{% set title = 'Profile of ' ~ profile.username %}
|
||||
{% set manage_link = '/manage/users.php?v=view&u=' ~ profile.user_id %}
|
||||
|
||||
{% set youtube_is_channel_id = profile.user_youtube|slice(0, 2) == 'UC' and profile.user_youtube|length == 24 %}
|
||||
|
||||
{% if has_background %}
|
||||
{% set site_background_url = '/profile.php?m=background&u=' ~ profile.user_id %}
|
||||
{% endif %}
|
||||
|
||||
{% set profile_fields = {
|
||||
'twitter': {
|
||||
'title': 'Twitter',
|
||||
'value': profile.user_twitter|escape,
|
||||
'link': 'https://twitter.com/%s',
|
||||
'format': '@%s',
|
||||
},
|
||||
'osu': {
|
||||
'title': 'osu!',
|
||||
'value': profile.user_osu|escape,
|
||||
'link': 'https://osu.ppy.sh/users/%s',
|
||||
},
|
||||
'website': {
|
||||
'title': 'Website',
|
||||
'value': profile.user_website|escape,
|
||||
'link': '%s',
|
||||
'tooltip': '%s',
|
||||
},
|
||||
'youtube': {
|
||||
'title': 'Youtube',
|
||||
'value': profile.user_youtube|escape,
|
||||
'link': 'https://youtube.com/' ~ (youtube_is_channel_id ? 'channel/' : '') ~ '%s',
|
||||
'format': youtube_is_channel_id ? 'Channel' : '%s',
|
||||
},
|
||||
'steam': {
|
||||
'title': 'Steam',
|
||||
'value': profile.user_steam|escape,
|
||||
'link': 'https://steamcommunity.com/id/%s',
|
||||
},
|
||||
'twitchtv': {
|
||||
'title': 'Twitch.tv',
|
||||
'value': profile.user_twitchtv|escape,
|
||||
'link': 'https://twitch.tv/%s',
|
||||
},
|
||||
'lastfm': {
|
||||
'title': 'Last.fm',
|
||||
'value': profile.user_lastfm|escape,
|
||||
'link': 'http://last.fm/user/%s',
|
||||
},
|
||||
'github': {
|
||||
'title': 'Github',
|
||||
'value': profile.user_github|escape,
|
||||
'link': 'https://github.com/%s',
|
||||
},
|
||||
'skype': {
|
||||
'title': 'Skype',
|
||||
'value': profile.user_skype|escape,
|
||||
'link': 'skype:%s?userinfo',
|
||||
},
|
||||
'discord': {
|
||||
'title': 'Discord',
|
||||
'value': profile.user_discord|escape,
|
||||
},
|
||||
} %}
|
||||
|
||||
{% block content %}
|
||||
<div class="profile" id="profile">
|
||||
<div class="profile__header">
|
||||
|
|
@ -178,36 +121,44 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="profile__info">
|
||||
{% if current_user is defined %}
|
||||
{% spaceless %}
|
||||
<div class="profile__info__section">
|
||||
<div class="profile__info__block profile__info__block--links">
|
||||
{% autoescape false %}
|
||||
{% for name, data in profile_fields %}
|
||||
{% if (data.display is defined ? data.display : true) and data.value|length > 0 %}
|
||||
<div class="profile__info__row profile__info__row--field-{{ name }}">
|
||||
<div class="profile__info__column profile__info__column--heading">
|
||||
{{ data.title }}
|
||||
<div class="profile__container__placeholder">
|
||||
<div class="profile__container__placeholder__content">
|
||||
The profile pages are still under much construction, more things will eventually populate the area where this container current exists.
|
||||
</div>
|
||||
<div class="profile__info__column"
|
||||
</div>
|
||||
|
||||
<div class="profile__container">
|
||||
<div class="profile__container__side">
|
||||
{% if current_user is not defined %}
|
||||
<div class="profile__accounts">
|
||||
<div class="profile__accounts__notice">
|
||||
You must <a href="/auth.php?m=login" class="profile__accounts__link">log in</a> to view full profiles!
|
||||
</div>
|
||||
</div>
|
||||
{% elseif profile_fields|default([])|length > 0 %}
|
||||
<div class="profile__accounts">
|
||||
{% for name, data in profile_fields %}
|
||||
<div class="profile__accounts__item">
|
||||
<div class="profile__accounts__title">
|
||||
{{ data.name }}
|
||||
</div>
|
||||
<div class="profile__accounts__value"
|
||||
{% if data.tooltip is defined %}title="{{ data.tooltip|format(data.value)|raw }}"{% endif %}>
|
||||
{% set profile_field_value = (data.format is defined ? data.format : '%s')|format(data.value) %}
|
||||
{% if data.link is defined %}
|
||||
{{ data.link|format(data.value)|html_link(profile_field_value, 'profile__account-link') }}
|
||||
{{ data.link|format(data.value)|html_link(profile_field_value, 'profile__accounts__link')|raw }}
|
||||
{% else %}
|
||||
{{ profile_field_value }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endautoescape %}
|
||||
</div>
|
||||
</div>
|
||||
{% endspaceless %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="profile__container__main">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue