Restyle changelog log page.

assets/less/classes/changelog.less

@@ -141,32 +141,20 @@
     }
 
     &__change {
-        margin: 1px;
+        display: flex;
+        margin-bottom: 2px;
+
+        @media (max-width: @site-mobile-width) {
+            flex-direction: column;
+        }
 
         &__line {
             border: 1px solid var(--accent-colour);
+            background-color: var(--accent-colour);
             display: flex;
             align-items: stretch;
             flex: 1 0 auto;
-        }
+            margin-bottom: 2px;
-
-        &__row,
-        &__column {
-            display: flex;
-        }
-
-        &__column {
-            flex-direction: column;
-
-            &--user-info {
-                justify-content: space-between;
-                flex: 0 0 auto;
-            }
-
-            &--change-info {
-                flex: 1 1 auto;
-                overflow: hidden;
-            }
         }
 
         &__action {
@@ -187,84 +175,156 @@
 
         &__log {
             padding: 4px 12px;
-            font-size: 1.4em;
+            font-size: 1.5em;
             align-self: center;
             flex: 1 1 auto;
             overflow: hidden;
+            width: 100%;
+            height: 100%;
 
             &__text {
                 word-wrap: break-word;
             }
         }
 
-        &__date {
+        &__info {
-            border: 1px solid var(--accent-colour);
+
+            &__content {
+                width: 200px;
+                text-align: center;
+                display: flex;
+                flex-direction: column;
+                padding: 15px;
+                flex: 0 0 auto;
+                margin-right: 4px;
+
+                @media (max-width: @site-mobile-width) {
+                    flex-direction: row;
+                    align-items: center;
+                    width: 100%;
+                    flex-wrap: wrap;
+                }
+            }
+
+            &__background {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                mask-image: linear-gradient(270deg, transparent 10%, var(--background-colour) 100%);
+                -webkit-mask-image: linear-gradient(270deg, transparent 10%, var(--background-colour) 100%);
+                background: var(--background-pattern);
+                background-color: var(--accent-colour);
+                background-blend-mode: multiply;
+
+                @media (max-width: @site-mobile-width) {
+                    mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
+                    -webkit-mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
+                }
+            }
+
+            @media (max-width: @site-mobile-width) {
+                flex-direction: row;
+                margin: 0;
+                padding: 5px;
+            }
+        }
+
+        &__user {
+            display: flex;
+            text-align: left;
+            align-items: center;
+            margin-bottom: 10px;
+
+            &__details {
+                display: flex;
+                flex-direction: column;
+            }
+
+            @media (max-width: @site-mobile-width) {
+                margin-bottom: 0;
+                margin-right: 10px;
+            }
+        }
+
+        &__avatar {
+            width: 60px;
+            height: 60px;
+            margin-right: 10px;
+
+            @media (max-width: @site-mobile-width) {
+                width: 50px;
+                height: 50px;
+            }
+        }
+
+        &__username {
+            color: inherit;
+            font-size: 1.4em;
+            line-height: 1.5em;
+            text-decoration: none;
+
+            &[href]:hover {
+                text-decoration: underline;
+            }
+        }
+
+        &__userrole {
+            font-size: .9em;
+            line-height: 1.5em;
             color: inherit;
             text-decoration: none;
-            margin-right: 1px;
+
-            text-align: center;
+            &[href]:hover {
-            padding: 2px;
+                text-decoration: underline;
+            }
+
+            @media (max-width: @site-mobile-width) {
+                display: none;
+            }
+        }
+
+        &__date {
+            color: inherit;
+            text-decoration: none;
+            font-size: 1.1em;
+            line-height: 1.5em;
 
             &:hover {
                 text-decoration: underline;
             }
         }
 
-        &__user {
-            border: 1px solid var(--accent-colour);
-            padding: 2px;
-            display: flex;
-            align-items: center;
-            text-decoration: none;
-            color: inherit;
-            margin: 1px;
-            margin-left: 0;
-
-            &__info {
-                margin: 2px 5px;
-            }
-
-            &__title {
-                width: 120px;
-                word-wrap: break-word;
-            }
-
-            &__avatar {
-                width: 60px;
-                height: 60px;
-                margin-right: 1px;
-                align-self: flex-start;
-            }
-
-            &__name {
-                color: var(--user-colour);
-                font-size: 1.5em;
-                line-height: 1.2em;
-            }
-        }
-
         &__text {
-            margin: 1px 0;
+            line-height: 1.2em;
-            padding: 1px 3px;
-            border-top: 1px solid var(--accent-colour);
-            font-size: 1.2em;
-            line-height: 1.5em;
             flex: 1 1 auto;
             word-wrap: break-word;
+            overflow: hidden;
+            margin: 2px;
         }
 
         &__tags {
             list-style: none;
             display: flex;
             flex-wrap: wrap;
+            margin-top: 10px;
+            justify-content: center;
+
+            @media (max-width: @site-mobile-width) {
+                margin-top: 0;
+                margin-left: 10px;
+            }
         }
 
         &__tag {
             border: 1px solid var(--accent-colour);
-            margin-right: 1px;
+            background-color: var(--accent-colour);
+            margin: 1px;
             border-radius: 2px;
 
             &__link {
+                background-color: var(--background-colour-translucent);
                 display: block;
                 width: 100%;
                 height: 100%;

assets/less/classes/forum/post.less

@@ -46,7 +46,6 @@
     }
 
     &__info {
-        background-image: linear-gradient(90deg, var(--user-colour), transparent);
 
         &__content {
             min-width: 150px;
@@ -70,11 +69,14 @@
             background: var(--background-pattern);
             background-color: var(--accent-colour);
             background-blend-mode: multiply;
-        }
-
 
             @media (max-width: @site-mobile-width) {
-            background-image: linear-gradient(180deg, var(--user-colour), transparent);
+                mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
+                -webkit-mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
+            }
+        }
+
+        @media (max-width: @site-mobile-width) {
             flex-direction: row;
             margin: 0;
             padding: 5px;

assets/less/classes/input/upload.less

@@ -19,7 +19,7 @@
         border-radius: 2px;
         box-shadow: inset 0 0 4px #111;
         transition: border-color .2s;
-        overflow: none;
+        overflow: hidden;
         word-wrap: break-word;
     }
 

assets/less/classes/settings/role.less

@@ -3,7 +3,7 @@
     background-color: var(--accent-colour);
     border-radius: 2px;
     margin: 2px;
-    overflow: none;
+    overflow: hidden;
     width: 200px;
 
     &__collection {

public/changelog.php

@@ -22,7 +22,7 @@ if ($changelogChange > 0) {
         SELECT
             c.`change_id`, c.`change_created`, c.`change_log`, c.`change_text`,
             a.`action_name`, a.`action_colour`, a.`action_class`,
-            u.`user_id`, u.`username`,
+            u.`user_id`, u.`username`, u.`display_role` as `user_role`,
             DATE(`change_created`) as `change_date`,
             COALESCE(u.`user_title`, r.`role_title`) as `user_title`,
             COALESCE(u.`user_colour`, r.`role_colour`) as `user_colour`
@@ -39,7 +39,8 @@ if ($changelogChange > 0) {
     $change = $getChange->execute() ? $getChange->fetch(PDO::FETCH_ASSOC) : [];
 
     if (!$change) {
-        http_response_code(404);
+        echo render_error(404);
+        return;
     } else {
         $getTags = db_prepare('
             SELECT

templates/changelog/change.twig

@@ -2,26 +2,14 @@
 {% from 'macros.twig' import container_title %}
 {% from '_layout/comments.twig' import comments_section %}
 
-{% set is_valid = change|length > 0 %}
+{% set title = 'Changelog » Change #' ~ change.change_id %}
-{% set title = 'Changelog » ' ~ (is_valid ? 'Change #' ~ change.change_id : 'Unknown Change') %}
-
-{% if is_valid %}
 {% set canonical_url = '/changelog.php?c=' ~ change.change_id %}
 {% set manage_link = '/manage/changelog.php?v=change&c=' ~ change.change_id %}
 {% set description = change.change_log %}
-{% endif %}
 
 {% block content %}
-    <div class="container">
+    <div class="container changelog__change__line" style="{{ change.action_colour|html_colour('--accent-colour') }}">
-        {{ container_title(title) }}
+        <div class="changelog__change__action {{ change.action_class is defined and change.action_class is not null ? ' changelog__change__action--' ~ change.action_class : '' }} changelog__change__action--{{ change.action_colour|colour_contrast }}">
-
-        <div class="changelog__content">
-            {% if is_valid %}
-                <div class="changelog__change" id="#c{{ change.change_id }}">
-                    <div class="changelog__change__line"
-                        style="{{ change.action_colour|html_colour('--accent-colour') }}">
-                        <div class="changelog__change__action {{ change.action_class is defined and change.action_class is not null ? ' changelog__change__action--' ~ change.action_class : '' }} changelog__change__action--{{ change.action_colour|colour_contrast }}"
-                            style="{{ change.action_colour|html_colour('--accent-colour') }}">
             {{ change.action_name }}
         </div>
 
@@ -32,59 +20,52 @@
         </div>
     </div>
 
-                    <div class="changelog__change__row">
+    <div class="container changelog__change" style="{% if change.user_colour is not null %}{{ change.user_colour|html_colour('--accent-colour') }}{% endif %}">
-                        <div class="changelog__change__column changelog__change__column--user-info">
+        <div class="changelog__change__info">
-                            <a class="changelog__change__user" href="/profile.php?u={{ change.user_id }}">
+            <div class="changelog__change__info__background"></div>
-                                <div class="avatar changelog__change__user__avatar"
+            <div class="changelog__change__info__content">
-                                    style="background-image:url('/profile.php?u={{ change.user_id }}&amp;m=avatar')">
+                {% if change.user_id is not null %}
-                                </div>
+                    <div class="changelog__change__user">
-
+                        <a class="avatar changelog__change__avatar"
-                                <div class="changelog__change__user__info">
+                            style="background-image:url('/profile.php?u={{ change.user_id }}&amp;m=avatar');"
-                                    <div class="changelog__change__user__name" style="{{ change.user_colour|html_colour }}">
+                            href="/profile.php?u={{ change.user_id }}">
-                                        {{ change.username }}
-                                    </div>
-
-                                    <div class="changelog__change__user__title">
-                                        {{ change.user_title }}
-                                    </div>
-                                </div>
                         </a>
 
-                            <a  class="changelog__change__date"
+                        <div class="changelog__change__user__details">
-                                href="/changelog.php?d={{ change.change_date }}">
+                            <a class="changelog__change__username" href="/profile.php?u={{ change.user_id }}">{{ change.username }}</a>
-                                <time datetime="{{ change.change_created|date('c') }}"
+                            <a class="changelog__change__userrole" href="/members.php?r={{ change.user_role }}">{{ change.user_title }}</a>
-                                     title="{{ change.change_created|date('r') }}">
+                        </div>
+                    </div>
+                {% endif %}
+
+                <a class="changelog__change__date" href="/changelog.php?d={{ change.change_date }}">
+                    Created
+                    <time datetime="{{ change.change_created|date('c') }}" title="{{ change.change_created|date('r') }}">
                         {{ change.change_created|time_diff }}
                     </time>
                 </a>
-                        </div>
-
-                        <div class="changelog__change__column changelog__change__column--change-info">
-                            <div class="changelog__change__text markdown">
-                                {% if change.change_text|length >= 1 %}
-                                    {{ change.change_text|parse_text(constant('MSZ_PARSER_MARKDOWN'))|raw }}
-                                {% else %}
-                                    <p>This change has no additional notes.</p>
-                                {% endif %}
-                            </div>
 
+                {% if tags|length > 0 %}
                     <ul class="changelog__change__tags">
                         {% for tag in tags %}
-                                    <li class="changelog__change__tag"
+                            <li class="changelog__change__tag" title="{{ tag.tag_description }}">
-                                        title="{{ tag.tag_description }}">
                                 <a href="/changelog.php?t={{ tag.tag_id }}" class="changelog__change__tag__link">
                                     {{ tag.tag_name }}
                                 </a>
                             </li>
                         {% endfor %}
                     </ul>
+                {% endif %}
             </div>
         </div>
-                </div>
+
+        <div class="changelog__change__text markdown">
+            <h1>{{ title }}</h1>
+
+            {% if change.change_text|length >= 1 %}
+                {{ change.change_text|parse_text(constant('MSZ_PARSER_MARKDOWN'))|raw }}
             {% else %}
-                <div class="changelog__none">
+                <p>This change has no additional notes.</p>
-                    The requested change could not be found.
-                </div>
             {% endif %}
         </div>
     </div>