Some front page improvements, more to come!

assets/less/mio/classes/index.less

@@ -0,0 +1,28 @@
+.index {
+    display: flex;
+    flex-direction: row-reverse;
+
+    &__sidebar {
+        width: 300px;
+        margin-left: 2px;
+    }
+
+    &__main {
+        flex: 1 1 auto;
+    }
+
+    &__stats {
+        &__emphasis {
+            font-weight: 700;
+        }
+
+        &__link {
+            color: inherit;
+            text-decoration: none;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+}

assets/less/mio/main.less

@@ -58,6 +58,8 @@ body {
 @import "classes/footer";
 @import "classes/header";
 @import "classes/profile";
+@import "classes/index";
+@import "classes/changelog";
 
 // Settings
 @import "classes/settings/content";
@@ -89,6 +91,3 @@ body {
 // Member listing
 @import "classes/members/user";
 @import "classes/members/users";
-
-// Changelog
-@import "classes/changelog";

public/index.php

@@ -5,6 +5,7 @@ require_once __DIR__ . '/../misuzu.php';
 
 $config = $app->getConfig();
 $tpl = $app->getTemplating();
+$db = Database::connection();
 
 if ($config->get('Site', 'embed_linked_data', 'bool', false)) {
     $tpl->vars([
@@ -16,8 +17,7 @@ if ($config->get('Site', 'embed_linked_data', 'bool', false)) {
     ]);
 }
 
-$featuredNews = Database::connection()
+$featuredNews = $db->query('
-    ->query('
     SELECT
         p.`post_id`, p.`post_title`, p.`post_text`, p.`created_at`,
         u.`user_id`, u.`username`,
@@ -30,10 +30,47 @@ $featuredNews = Database::connection()
     WHERE p.`is_featured` = true
     ORDER BY p.`created_at` DESC
     LIMIT 3
-    ')->fetchAll();
+')->fetchAll(PDO::FETCH_ASSOC);
+
+$usersCount = (int)$db->query('
+    SELECT COUNT(`user_id`)
+    FROM `msz_users`
+')->fetchColumn();
+
+$lastUser = $db->query('
+    SELECT
+        u.`user_id`, u.`username`, u.`created_at`,
+        COALESCE(r.`role_colour`, CAST(0x40000000 AS UNSIGNED)) as `user_colour`
+    FROM `msz_users` as u
+    LEFT JOIN `msz_roles` as r
+    ON r.`role_id` = u.`display_role`
+    ORDER BY u.`created_at` DESC
+    LIMIT 1
+')->fetch(PDO::FETCH_ASSOC);
+
+$featuredChangelog = $db->query('
+    SELECT
+        c.`change_id`, c.`change_log`,
+        a.`action_name`, a.`action_colour`, a.`action_class`,
+        DATE(`change_created`) as `change_date`,
+        !ISNULL(c.`change_text`) as `change_has_text`
+    FROM `msz_changelog_changes` as c
+    LEFT JOIN `msz_changelog_actions` as a
+    ON a.`action_id` = c.`action_id`
+    WHERE DATE(c.`change_created`) >= (
+         SELECT DATE(`change_created`)
+         FROM `msz_changelog_changes`
+         ORDER BY `change_created` DESC
+         LIMIT 2, 1
+    )
+    ORDER BY c.`change_created` DESC
+')->fetchAll(PDO::FETCH_ASSOC);
 
 //var_dump(Database::connection()->query('SHOW SESSION STATUS LIKE "Questions"')->fetch()['Value']);
 
-echo $tpl->render('home.landing', [
+echo $tpl->render('home.index', [
+    'users_count' => $usersCount,
+    'last_user' => $lastUser,
+    'featured_changelog' => $featuredChangelog,
     'featured_news' => $featuredNews,
 ]);

views/mio/changelog/macros.twig

@@ -9,7 +9,7 @@
             {% if not hide_dates and last_date != change.change_date %}
                 {% set last_date = change.change_date %}
 
-                <a class="changelog__date" href="?d={{ last_date }}">
+                <a class="changelog__date" href="/changelog.php?d={{ last_date }}">
                     {{ last_date }}
                 </a>
             {% endif %}
@@ -30,13 +30,14 @@
 
     <div class="changelog" id="cl{{ change.change_id }}">
         <a class="changelog__action{{ change.action_class is defined and change.action_class is not null ? ' changelog__action--' ~ change.action_class : '' }} changelog__action--{{ change.action_colour|colour_get_css_contrast }}"
-            href="?c={{ change.change_id }}"
+            href="/changelog.php?c={{ change.change_id }}"
             {% if change.action_colour is defined %}style="{{ change.action_colour|html_colour({'background-color':'%s'}) }}"{% endif %}>
             <div class="changelog__action__text">
                 {{ change.action_name|default('Unknown') }}
             </div>
         </a>
 
+        {% if change.user_id is defined %}
             <a  class="changelog__user"
                 href="/profile.php?u={{ change.user_id }}"
                 style="{{ change.user_colour|html_colour }}">
@@ -44,9 +45,10 @@
                     {{ change.username }}
                 </div>
             </a>
+        {% endif %}
 
         <a class="changelog__log{% if has_text %} changelog__log--link{% endif %}"
-            {% if has_text %}href="?c={{ change.change_id }}"{% endif %}>
+            {% if has_text %}href="/changelog.php?c={{ change.change_id }}"{% endif %}>
             {{ change.change_log }}
         </a>
     </div>

views/mio/home/index.twig

@@ -0,0 +1,68 @@
+{% extends '@mio/home/master.twig' %}
+{% from '@mio/macros.twig' import navigation %}
+{% from '@mio/news/macros.twig' import news_preview %}
+{% from '@mio/changelog/macros.twig' import changelog_listing %}
+
+{% set canonical_url = '/' %}
+
+{% block content %}
+    <div class="index">
+        <div class="index__sidebar">
+            <div class="container">
+                <div class="container__title">Statistics</div>
+                <div class="container__content">
+                    We have <span class="index__stats__emphasis">{{ users_count|number_format }}</span> users and
+                    the last person to join was <a href="/profile.php?u={{ last_user.user_id }}" class="index__stats__emphasis index__stats__link" style="{{ last_user.user_colour|html_colour }}">{{ last_user.username }}</a>,
+                    <time datetime="{{ last_user.created_at|date('c') }}" datetime="{{ last_user.created_at|date('r') }}">{{ last_user.created_at|time_diff }}</time>!
+                </div>
+            </div>
+
+            <div class="container">
+                <a class="container__title container__title--link" href="/changelog.php">Changelog</a>
+                <div class="container__content changelog__content">
+                    {{ changelog_listing(featured_changelog) }}
+                </div>
+            </div>
+        </div>
+
+        <div class="index__main">
+            {% if app.hasActiveSession %}
+                <div class="container">
+                    <div class="container__title">Welcome</div>
+                    <div class="container__content">
+                        <p>You have 0 new messages because the PM system doesn't exist yet, have a nice day.</p>
+                    </div>
+                </div>
+            {% endif %}
+
+            <div class="container news__container">
+                <a class="container__title container__title--link" href="/news.php">Featured News</a>
+                <div class="container__content news__container__content">
+                    <div class="news__preview__listing">
+                        {% for post in featured_news %}
+                            {{ news_preview(post) }}
+                        {% endfor %}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {{ navigation(mio_navigation, '/') }}
+
+    {% if embed_linked_data is defined and embed_linked_data %}
+        <script type="application/ld+json">
+        {
+            "@context": "http://schema.org",
+            "@type": "Organization",
+            "name": "{{ embed_name }}",
+            "url": "{{ embed_url }}",
+            "logo": "{{ embed_logo }}",
+            "sameAs": [
+                "{{ embed_same_as|join('", "')|raw }}"
+            ]
+        }
+        </script>
+    {% endif %}
+{% endblock %}
+

views/mio/home/landing.twig

@@ -1,45 +0,0 @@
-{% extends '@mio/home/master.twig' %}
-{% from '@mio/macros.twig' import navigation %}
-{% from '@mio/news/macros.twig' import news_preview %}
-
-{% set canonical_url = '/' %}
-
-{% block content %}
-    {% if app.hasActiveSession %}
-        <div class="container">
-            <div class="container__title">Welcome</div>
-            <div class="container__content">
-                <p>You have 0 new messages because the PM system doesn't exist yet, have a nice day.</p>
-            </div>
-        </div>
-    {% endif %}
-
-    <div class="container news__container">
-        <a class="container__title container__title--link" href="/news.php">Featured News</a>
-        <div class="container__content news__container__content">
-            <div class="news__preview__listing">
-                {% for post in featured_news %}
-                    {{ news_preview(post) }}
-                {% endfor %}
-            </div>
-        </div>
-    </div>
-
-    {{ navigation(mio_navigation, '/') }}
-
-    {% if embed_linked_data is defined and embed_linked_data %}
-        <script type="application/ld+json">
-        {
-            "@context": "http://schema.org",
-            "@type": "Organization",
-            "name": "{{ embed_name }}",
-            "url": "{{ embed_url }}",
-            "logo": "{{ embed_logo }}",
-            "sameAs": [
-                "{{ embed_same_as|join('", "')|raw }}"
-            ]
-        }
-        </script>
-    {% endif %}
-{% endblock %}
-

views/mio/news/macros.twig

@@ -1,17 +1,20 @@
 {% macro news_preview(post) %}
     <div class="container news__preview">
-        <a href="/news.php?p={{ post.post_id }}" class="container__title container__title--link news__preview__title">
+        <a href="/news.php?p={{ post.post_id }}" class="container__title container__title--link">
             {{ post.post_title }}
         </a>
+
         <div class="container__content news__preview__content">
             <div class="news__preview__text">
                 {{ post.post_text|first_paragraph|raw }}
                 <p><b><i><a href="/news.php?p={{ post.post_id }}">View full post</a></i></b></p>
             </div>
+
             <div class="news__preview__info">
                 <time class="news__preview__date" datetime="{{ post.created_at|date('c') }}" title="{{ post.created_at|date('r') }}">
                     {{ post.created_at|time_diff }}
                 </time>
+
                 <a class="news__preview__user" href="/profile.php?u={{ post.user_id }}">
                     <div class="news__preview__user__name" style="{{ post.user_colour|html_colour }}">
                         {{ post.username }}