Restyled the accounts section accordingly with the new profile.

assets/less/mio/classes/profile.less

@@ -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;
-            }
-        }
-    }
-}

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;
+        }
+    }
+}

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;
+        }
+    }
+}

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";

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');

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;
+}

src/comments.php

@@ -55,16 +55,15 @@ function comments_parse_for_display(string $text): string
             return $matches[0];
         }
 
-        return '<a href="/profile.php?u='
+        return sprintf(
-            . $info['user_id']
+            '<a href="/profile.php?u=%d" class="comment__mention", style="%s">@%s</a>',
-            . '" class="comment__mention" style="'
+            $info['user_id'],
-            . html_colour($info['user_colour'], [
+            html_colour($info['user_colour'], [
                 'color' => '%s',
                 'text-shadow' => '0 0 5px %s',
-            ])
+            ]),
-            . '">@'
+            $info['username']
-            .  $info['username']
+        );
-            . '</a>';
     }, $text);
 }
 

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 %}
     <div class="profile" id="profile">
         <div class="profile__header">
@@ -178,36 +121,44 @@
             </div>
         </div>
 
-
+        <div class="profile__container__placeholder">
-            <div class="profile__info">
+            <div class="profile__container__placeholder__content">
-                {% if current_user is defined %}
+                The profile pages are still under much construction, more things will eventually populate the area where this container current exists.
-                {% 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>
-                                    <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 %}