From af222dfbd82c70bc1cb5cadfe1fc507dee545642 Mon Sep 17 00:00:00 2001 From: flashwave Date: Mon, 17 Sep 2018 20:39:46 +0200 Subject: [PATCH] Restyled the accounts section accordingly with the new profile. --- assets/less/mio/classes/profile.less | 117 ----------------- assets/less/mio/classes/profile/accounts.less | 45 +++++++ .../less/mio/classes/profile/container.less | 28 +++++ assets/less/mio/main.less | 3 +- public/profile.php | 1 + src/Users/profile.php | 62 ++++++++- src/comments.php | 15 ++- templates/user/profile.twig | 119 ++++++------------ 8 files changed, 179 insertions(+), 211 deletions(-) delete mode 100644 assets/less/mio/classes/profile.less create mode 100644 assets/less/mio/classes/profile/accounts.less create mode 100644 assets/less/mio/classes/profile/container.less diff --git a/assets/less/mio/classes/profile.less b/assets/less/mio/classes/profile.less deleted file mode 100644 index 82ec6f85..00000000 --- a/assets/less/mio/classes/profile.less +++ /dev/null @@ -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; - } - } - } -} diff --git a/assets/less/mio/classes/profile/accounts.less b/assets/less/mio/classes/profile/accounts.less new file mode 100644 index 00000000..bdda6446 --- /dev/null +++ b/assets/less/mio/classes/profile/accounts.less @@ -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; + } + } +} diff --git a/assets/less/mio/classes/profile/container.less b/assets/less/mio/classes/profile/container.less new file mode 100644 index 00000000..0adeab84 --- /dev/null +++ b/assets/less/mio/classes/profile/container.less @@ -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; + } + } +} diff --git a/assets/less/mio/main.less b/assets/less/mio/main.less index 8a7a0504..8fd577bf 100644 --- a/assets/less/mio/main.less +++ b/assets/less/mio/main.less @@ -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"; diff --git a/public/profile.php b/public/profile.php index 18f3e95e..e6b60cb8 100644 --- a/public/profile.php +++ b/public/profile.php @@ -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'); diff --git a/src/Users/profile.php b/src/Users/profile.php index eed57459..7215950c 100644 --- a/src/Users/profile.php +++ b/src/Users/profile.php @@ -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; +} diff --git a/src/comments.php b/src/comments.php index c0c8fab5..58c43c66 100644 --- a/src/comments.php +++ b/src/comments.php @@ -55,16 +55,15 @@ function comments_parse_for_display(string $text): string return $matches[0]; } - return '@%s', + $info['user_id'], + html_colour($info['user_colour'], [ 'color' => '%s', 'text-shadow' => '0 0 5px %s', - ]) - . '">@' - . $info['username'] - . ''; + ]), + $info['username'] + ); }, $text); } diff --git a/templates/user/profile.twig b/templates/user/profile.twig index 45effd0c..37263a8f 100644 --- a/templates/user/profile.twig +++ b/templates/user/profile.twig @@ -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 %}
@@ -178,36 +121,44 @@
+
+
+ The profile pages are still under much construction, more things will eventually populate the area where this container current exists. +
+
-
- {% if current_user is defined %} - {% spaceless %} -
-
- {% autoescape false %} - {% for name, data in profile_fields %} - {% if (data.display is defined ? data.display : true) and data.value|length > 0 %} -
-
- {{ data.title }} -
-
- {% 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') }} - {% else %} - {{ profile_field_value }} - {% endif %} -
-
- {% endif %} - {% endfor %} - {% endautoescape %} +
+
+ {% if current_user is not defined %} +
+
+ You must log in to view full profiles! +
+
+ {% elseif profile_fields|default([])|length > 0 %} +
+ {% for name, data in profile_fields %} +
+
+ {{ data.name }} +
+
+ {% 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__accounts__link')|raw }} + {% else %} + {{ profile_field_value }} + {% endif %} +
+
+ {% endfor %}
-
- {% endspaceless %} {% endif %}
+ +
+
+
{% endblock %}