about section stuff

assets/less/mio/classes/container.less

@@ -4,6 +4,15 @@
     margin: 2px 0;
     box-shadow: 0 1px 2px var(--accent-colour);
 
+    &--new {
+        color: #fff;
+        border: initial;
+        background-color: #111;
+        text-shadow: 0 1px 4px #111;
+        box-shadow: 0 1px 2px #111;
+        margin: 0; // new style containers should not depend on existing margins
+    }
+
     &--hidden { // __title should always be the first element of a container
         :not(:first-child) {
             display: none;
@@ -40,7 +49,22 @@
         }
     }
 
+    &--new &__title {
+        background-image: linear-gradient(0deg, transparent, var(--accent-colour));
+        color: #fff;
+        font-weight: 400;
+        font-size: 1.5em;
+        line-height: 1.5em;
+        padding: 8px 10px;
+        font-family: inherit;
+    }
+
     &__content { // only use this for text going forward, just throw your child container in directly after __title
         margin: 2px 5px;
     }
+
+    &--new &__content {
+        margin: 0;
+        padding: 2px 5px;
+    }
 }

assets/less/mio/classes/profile/about.less

@@ -0,0 +1,7 @@
+.profile__about {
+
+    &__content {
+        max-height: 300px;
+        overflow: auto;
+    }
+}

assets/less/mio/classes/profile/accounts.less

@@ -2,10 +2,6 @@
     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;

assets/less/mio/main.less

@@ -20,7 +20,7 @@
     --text-colour-header: @default-header-text-colour;
     --background-colour: @default-background-colour;
     --background-colour-translucent: fade(@default-background-colour, 90%);
-    --gradient-start: @default-gradient-start;
+    --gradient-start: @default-gradient-start; // deprecate this in favour of --accent-colour at some point
 }
 
 * {
@@ -81,6 +81,7 @@ body {
 @import "classes/profile/header";
 @import "classes/profile/container";
 @import "classes/profile/accounts";
+@import "classes/profile/about";
 
 // Changelog
 @import "classes/changelog";

database/2018_09_19_170411_add_profile_about_section.php

@@ -0,0 +1,22 @@
+<?php
+namespace Misuzu\DatabaseMigrations\AddProfileAboutSection;
+
+use PDO;
+
+function migrate_up(PDO $conn): void
+{
+    $conn->exec("
+        ALTER TABLE `msz_users`
+            ADD COLUMN `user_about_content` TEXT NULL DEFAULT NULL AFTER `display_role`,
+            ADD COLUMN `user_about_parser` TINYINT(4) NOT NULL DEFAULT '0' AFTER `user_about_content`;
+    ");
+}
+
+function migrate_down(PDO $conn): void
+{
+    $conn->exec('
+        ALTER TABLE `msz_users`
+            DROP COLUMN `user_about_content`,
+            DROP COLUMN `user_about_parser`;
+    ');
+}

templates/user/profile.twig

@@ -147,28 +147,51 @@
                         </div>
                     </div>
                 {% elseif profile_fields|default([])|length > 0 %}
-                    <div class="profile__accounts">
+                    <div class="container container--new">
-                        {% for name, data in profile_fields %}
+                        <div class="container__title">
-                            <div class="profile__accounts__item">
+                            Elsewhere
-                                <div class="profile__accounts__title">
+                        </div>
-                                    {{ data.name }}
+                        <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__accounts__link')|raw }}
+                                        {% else %}
+                                            {{ profile_field_value }}
+                                        {% endif %}
+                                    </div>
                                 </div>
-                                <div class="profile__accounts__value"
+                            {% endfor %}
-                                    {% if data.tooltip is defined %}title="{{ data.tooltip|format(data.value)|raw }}"{% endif %}>
+                        </div>
-                                    {% 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 %}
-                                </div>
-                            </div>
-                        {% endfor %}
                     </div>
                 {% endif %}
             </div>
 
             <div class="profile__container__main">
+
+                {% if profile.user_about_content|length > 0 %}
+                    <div class="container container--new profile__about" id="about">
+                        <div class="container__title profile__about__title">
+                            About {{ profile.username }}
+                        </div>
+                        <div class="container__content profile__about__content">
+                            {% if profile.user_about_parser == 2 %}
+                                {{ profile.user_about_content|escape|parse_text('md')|raw }}
+                            {% elseif profile.user_about_parser == 1 %}
+                                {{ profile.user_about_content|escape|parse_text('bb')|raw }}
+                            {% else %}
+                                {{ profile.user_about_content|escape }}
+                            {% endif %}
+                        </div>
+                    </div>
+                {% endif %}
+
             </div>
         </div>
     </div>