Added styling to about editor.

assets/less/mio/classes/profile/container.less

@@ -1,30 +0,0 @@
-.profile__container {
-    display: flex;
-
-    &__main {
-        flex: 1 1 auto;
-        word-wrap: break-word;
-        overflow: hidden;
-    }
-
-    &__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/classes/profile/profile.less

@@ -1,3 +1,20 @@
 .profile {
     margin-top: 10px;
+
+    &__container {
+        display: flex;
+
+        &__main {
+            flex: 1 1 auto;
+            word-wrap: break-word;
+            overflow: hidden;
+        }
+
+        &__side {
+            flex: 0 0 auto;
+            width: 100%;
+            max-width: 300px;
+            margin-right: 2px;
+        }
+    }
 }

assets/less/mio/classes/settings/about.less

@@ -0,0 +1,19 @@
+.settings__about {
+    display: flex;
+    flex-direction: column;
+    padding: 2px;
+
+    &__text {
+        min-height: 400px;
+
+        // prevents resizing horizontally
+        max-width: 100%;
+        min-width: 100%;
+    }
+
+    &__options {
+        margin-top: 2px;
+        display: flex;
+        justify-content: space-between;
+    }
+}

assets/less/mio/classes/warning.less

@@ -0,0 +1,16 @@
+.warning {
+    --start-colour: yellow;
+    --end-colour: black;
+
+    background-image: repeating-linear-gradient(-45deg, var(--start-colour), var(--start-colour) 10px, var(--end-colour) 10px, var(--end-colour) 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

@@ -75,11 +75,11 @@ body {
 @import "classes/header";
 @import "classes/index";
 @import "classes/permissions";
+@import "classes/warning";
 
 // Profile
 @import "classes/profile/profile";
 @import "classes/profile/header";
-@import "classes/profile/container";
 @import "classes/profile/accounts";
 @import "classes/profile/about";
 
@@ -97,6 +97,7 @@ body {
 @import "classes/settings/log";
 @import "classes/settings/login-history";
 @import "classes/settings/sessions";
+@import "classes/settings/about";
 
 // News
 @import "classes/news/container";

public/settings.php

@@ -386,42 +386,29 @@ tpl_vars([
 switch ($settingsMode) {
     case 'account': // TODO: FIX THIS GARBAGE HOLY HELL
         $profileFields = user_profile_fields_get();
-        $getUserFields = Database::prepare('
-            SELECT ' . pdo_prepare_array($profileFields, true, '`user_%s`') . '
-            FROM `msz_users`
-            WHERE `user_id` = :user_id
-        ');
-        $getUserFields->bindValue('user_id', $app->getUserId());
-        $userFields = $getUserFields->execute() ? $getUserFields->fetch() : [];
 
-        $getMail = Database::prepare('
+        $getAccountInfo = Database::prepare(sprintf(
-            SELECT `email`
+            '
+                SELECT %s, `email`, `user_about_content`, `user_about_parser`
                 FROM `msz_users`
                 WHERE `user_id` = :user_id
-        ');
+            ',
-        $getMail->bindValue('user_id', $app->getUserId());
+            pdo_prepare_array($profileFields, true, '`user_%s`')
-        $currentEmail = $getMail->execute() ? $getMail->fetchColumn() : 'Failed to fetch e-mail address.';
+        ));
+        $getAccountInfo->bindValue('user_id', $app->getUserId());
+        $accountInfo = $getAccountInfo->execute() ? $getAccountInfo->fetch(PDO::FETCH_ASSOC) : [];
+
         $userHasAvatar = is_file(build_path($app->getStoragePath(), 'avatars/original', $avatarFileName));
         $userHasBackground = is_file(build_path($app->getStoragePath(), 'backgrounds/original', $avatarFileName));
 
-        $getAboutInfo = Database::prepare('
-            SELECT `user_about_content`, `user_about_parser`
-            FROM `msz_users`
-            WHERE `user_id` = :user_id
-        ');
-        $getAboutInfo->bindValue('user_id', $app->getUserId());
-        $aboutInfo = $getAboutInfo->execute() ? $getAboutInfo->fetch(PDO::FETCH_ASSOC) : [];
-
         tpl_vars([
             'avatar' => $avatarProps,
             'background' => $backgroundProps,
             'user_has_avatar' => $userHasAvatar,
             'user_has_background' => $userHasBackground,
             'settings_profile_fields' => $profileFields,
-            'settings_profile_values' => $userFields,
             'settings_disable_account_options' => $disableAccountOptions,
-            'settings_email' => $currentEmail,
+            'account_info' => $accountInfo,
-            'about_info' => $aboutInfo,
         ]);
         break;
 

src/Parsers/parse.php

@@ -11,11 +11,22 @@ define('MSZ_PARSERS', [
     MSZ_PARSER_MARKDOWN,
 ]);
 
+define('MSZ_PARSERS_NAMES', [
+    MSZ_PARSER_PLAIN => 'Plain text',
+    MSZ_PARSER_BBCODE => 'BB Code',
+    MSZ_PARSER_MARKDOWN => 'Markdown',
+]);
+
 function parser_is_valid(int $parser): bool
 {
     return in_array($parser, MSZ_PARSERS, true);
 }
 
+function parser_name(int $parser): string
+{
+    return parser_is_valid($parser) ? MSZ_PARSERS_NAMES[$parser] : '';
+}
+
 function parse_text(string $text, int $parser): string
 {
     if (!parser_is_valid($parser)) {

templates/settings/account.twig

@@ -21,7 +21,7 @@
                                 {{ props.name }}
                             </div>
                             <div class="settings__account__input__value">
-                                <input type="{{ props.type|default('text') }}" name="profile[{{ name }}]" value="{{ settings_profile_values['user_' ~ name] }}" class="input__text settings__account__input__value__text">
+                                <input type="{{ props.type|default('text') }}" name="profile[{{ name }}]" value="{{ account_info['user_' ~ name] }}" class="input__text settings__account__input__value__text">
                             </div>
                         </label>
                         {% endfor %}
@@ -50,7 +50,7 @@
                                         Current e-mail address
                                     </div>
                                     <div class="settings__account__input__value">
-                                        <input type="text" class="input__text input__text--readonly settings__account__input__value__text" readonly value="{{ settings_email }}">
+                                        <input type="text" class="input__text input__text--readonly settings__account__input__value__text" readonly value="{{ account_info.email }}">
                                     </div>
                                 </label>
 
@@ -265,24 +265,34 @@
     {% if settings_perms.edit_about %}
         <div class="container">
             <div class="container__title">
-                About you
+                About
             </div>
 
-            <form method="post" action="" enctype="multipart/form-data">
+            <form method="post" action="" enctype="multipart/form-data" class="settings__about">
                 <input type="hidden" name="csrf" value="{{ csrf_token() }}">
 
-                <textarea name="about[text]">{{ about_info.user_about_content }}</textarea>
+                <textarea name="about[text]" class="input__textarea settings__about__text" id="about-textarea">{{ account_info.user_about_content }}</textarea>
 
-                <select name="about[parser]">
+                <div class="settings__about__options">
-                    {# todo: foreach #}
+                    <select name="about[parser]" class="input__select">
-                    <option value="0">Plain text</option>
+                        {% for parser, name in constant('MSZ_PARSERS_NAMES') %}
-                    <option value="1">BB Code</option>
+                            <option value="{{ parser }}"{% if parser == account_info.user_about_parser %} selected{% endif %}>{{ name }}</option>
-                    <option value="2">Markdown</option>
+                        {% endfor %}
                     </select>
 
+                    <div>
+                        <span id="about-character-count"></span>
                         <button class="input__button">Update</button>
                         <button class="input__button" type="reset">Reset</button>
+                    </div>
+                </div>
             </form>
         </div>
+
+        <script>
+            /*document.getElementById('about-textarea').addEventListener('change', function (ev) {
+                document.getElementById('about-character-count').textContent = ' / ' . ;
+            });*/
+        </script>
     {% endif %}
 {% endblock %}

templates/user/profile.twig

@@ -132,8 +132,8 @@
             </div>
         </div>
 
-        <div class="profile__container__placeholder">
+        <div class="warning">
-            <div class="profile__container__placeholder__content">
+            <div class="warning__content">
                 The profile pages are still under much construction, more things will eventually populate the area where this container current exists.
             </div>
         </div>