From bc5c7fb2ffdabcfc3f1744bf48e9feed92339954 Mon Sep 17 00:00:00 2001
From: flashwave <me@flash.moe>
Date: Sat, 2 Mar 2019 22:25:35 +0100
Subject: [PATCH] Flip landing page on mobile.

---
 .../less/classes/{index.less => landing.less} |  4 +-
 assets/less/main.less                         | 10 ++-
 templates/home/landing.twig                   | 78 +++++++++----------
 3 files changed, 47 insertions(+), 45 deletions(-)
 rename assets/less/classes/{index.less => landing.less} (98%)

diff --git a/assets/less/classes/index.less b/assets/less/classes/landing.less
similarity index 98%
rename from assets/less/classes/index.less
rename to assets/less/classes/landing.less
index 4e0fc2a6..034e8056 100644
--- a/assets/less/classes/index.less
+++ b/assets/less/classes/landing.less
@@ -1,9 +1,9 @@
-.index {
+.landing {
     display: flex;
     flex-direction: row-reverse;
 
     @media (max-width: @site-mobile-width) {
-        flex-direction: column-reverse;
+        flex-direction: column;
     }
 
     &__container {
diff --git a/assets/less/main.less b/assets/less/main.less
index 01d69bcc..b9b73dab 100644
--- a/assets/less/main.less
+++ b/assets/less/main.less
@@ -121,11 +121,13 @@ html {
 @import "classes/messagebox";
 
 // Specific styles
-@import "classes/footer";
-@import "classes/header";
-@import "classes/index";
-@import "classes/permissions";
 @import "classes/auth";
+@import "classes/header";
+@import "classes/footer";
+@import "classes/permissions";
+
+// Main page styling
+@import "classes/landing";
 
 // Manage
 @import "classes/manage/manage";
diff --git a/templates/home/landing.twig b/templates/home/landing.twig
index fb439204..72df66a2 100644
--- a/templates/home/landing.twig
+++ b/templates/home/landing.twig
@@ -6,63 +6,63 @@
 {% set canonical_url = '/' %}
 
 {% block content %}
-    <div class="index">
-        <div class="index__sidebar">
-            <div class="container index__container">
+    <div class="landing">
+        <div class="landing__sidebar">
+            <div class="container landing__container">
                 {{ container_title('<i class="fas fa-chart-bar fa-fw"></i> Statistics') }}
 
-                <div class="index__statistics">
+                <div class="landing__statistics">
 
-                    <div class="index__statistic">
-                        <div class="index__statistic__name">
+                    <div class="landing__statistic">
+                        <div class="landing__statistic__name">
                             <i class="fas fa-users fa-fw"></i> Users
                         </div>
-                        <div class="index__statistic__value">
+                        <div class="landing__statistic__value">
                             {{ statistics.count_users_all|number_format }}
                         </div>
                     </div>
 
-                    <div class="index__statistic">
-                        <div class="index__statistic__name">
+                    <div class="landing__statistic">
+                        <div class="landing__statistic__name">
                             <i class="fas fa-comment-dots fa-fw"></i> Comments
                         </div>
-                        <div class="index__statistic__value">
+                        <div class="landing__statistic__value">
                             {{ statistics.count_comments|number_format }}
                         </div>
                     </div>
 
-                    <div class="index__statistic">
-                        <div class="index__statistic__name">
+                    <div class="landing__statistic">
+                        <div class="landing__statistic__name">
                             <i class="fas fa-user-check fa-fw"></i> Online
                         </div>
-                        <div class="index__statistic__value">
+                        <div class="landing__statistic__value">
                             {{ statistics.count_users_online|number_format }}
                         </div>
                     </div>
 
-                    <div class="index__statistic">
-                        <div class="index__statistic__name">
+                    <div class="landing__statistic">
+                        <div class="landing__statistic__name">
                             <i class="fas fa-user-clock fa-fw"></i> Active (24 hr)
                         </div>
-                        <div class="index__statistic__value">
+                        <div class="landing__statistic__value">
                             {{ statistics.count_users_active|number_format }}
                         </div>
                     </div>
 
-                    <div class="index__statistic">
-                        <div class="index__statistic__name">
+                    <div class="landing__statistic">
+                        <div class="landing__statistic__name">
                             <i class="fas fa-list fa-fw"></i> Topics
                         </div>
-                        <div class="index__statistic__value">
+                        <div class="landing__statistic__value">
                             {{ statistics.count_forum_topics|number_format }}
                         </div>
                     </div>
 
-                    <div class="index__statistic">
-                        <div class="index__statistic__name">
+                    <div class="landing__statistic">
+                        <div class="landing__statistic__name">
                             <i class="fas fa-comments fa-fw"></i> Posts
                         </div>
-                        <div class="index__statistic__value">
+                        <div class="landing__statistic__value">
                             {{ statistics.count_forum_posts|number_format }}
                         </div>
                     </div>
@@ -71,12 +71,12 @@
             </div>
 
             {% if online_users|length > 0 %}
-                <div class="container index__container">
+                <div class="container landing__container">
                     {{ container_title('<i class="fas fa-users fa-fw"></i> Online Users') }}
 
-                    <div class="index__online">
+                    <div class="landing__online">
                         {% for user in online_users %}
-                            <a href="{{ url('user-profile', {'user': user.user_id}) }}" class="avatar index__online__user" style="{{ user.user_colour|html_colour }};--avatar-url: url('{{ url('user-avatar', {'user': user.user_id}) }}');" title="{{ user.username }}">
+                            <a href="{{ url('user-profile', {'user': user.user_id}) }}" class="avatar landing__online__user" style="{{ user.user_colour|html_colour }};--avatar-url: url('{{ url('user-avatar', {'user': user.user_id}) }}');" title="{{ user.username }}">
                                 {{ user.username }}
                             </a>
                         {% endfor %}
@@ -85,18 +85,18 @@
             {% endif %}
 
             {% if birthdays|length > 0 %}
-                <div class="container index__container">
+                <div class="container landing__container">
                     {{ container_title('<i class="fas fa-birthday-cake fa-fw"></i> Happy Birthday!') }}
 
                     {% for birthday in birthdays %}
-                        <a class="index__latest" style="{# birthday.user_colour|html_colour #}" href="{{ url('user-profile', {'user': birthday.user_id}) }}">
-                            <div class="avatar index__latest__avatar" style="--avatar-url: url('{{ url('user-avatar', {'user': birthday.user_id}) }}')"></div>
-                            <div class="index__latest__content">
-                                <div class="index__latest__username">
+                        <a class="landing__latest" style="{# birthday.user_colour|html_colour #}" href="{{ url('user-profile', {'user': birthday.user_id}) }}">
+                            <div class="avatar landing__latest__avatar" style="--avatar-url: url('{{ url('user-avatar', {'user': birthday.user_id}) }}')"></div>
+                            <div class="landing__latest__content">
+                                <div class="landing__latest__username">
                                     {{ birthday.username }}
                                 </div>
                                 {% if birthday.user_age is not null %}
-                                    <div class="index__latest__joined">
+                                    <div class="landing__latest__joined">
                                         Turned {{ birthday.user_age }} today!
                                     </div>
                                 {% endif %}
@@ -105,16 +105,16 @@
                     {% endfor %}
                 </div>
             {% elseif latest_user.user_id|default(0) > 0 %}
-                <div class="container index__container">
+                <div class="container landing__container">
                     {{ container_title('<i class="fas fa-user-plus fa-fw"></i> Newest User') }}
 
-                    <a class="index__latest" style="{{ latest_user.user_colour|html_colour }}" href="{{ url('user-profile', {'user': latest_user.user_id}) }}">
-                        <div class="avatar index__latest__avatar" style="--avatar-url: url('{{ url('user-avatar', {'user': latest_user.user_id}) }}')"></div>
-                        <div class="index__latest__content">
-                            <div class="index__latest__username">
+                    <a class="landing__latest" style="{{ latest_user.user_colour|html_colour }}" href="{{ url('user-profile', {'user': latest_user.user_id}) }}">
+                        <div class="avatar landing__latest__avatar" style="--avatar-url: url('{{ url('user-avatar', {'user': latest_user.user_id}) }}')"></div>
+                        <div class="landing__latest__content">
+                            <div class="landing__latest__username">
                                 {{ latest_user.username }}
                             </div>
-                            <div class="index__latest__joined">
+                            <div class="landing__latest__joined">
                                 Joined <time datetime="{{ latest_user.user_created|date('c') }}" title="{{ latest_user.user_created|date('r') }}">{{ latest_user.user_created|time_diff }}</time>
                             </div>
                         </div>
@@ -122,7 +122,7 @@
                 </div>
             {% endif %}
 
-            <div class="container index__container">
+            <div class="container landing__container">
                 {{ container_title('<i class="fas fa-wrench fa-fw"></i> Changelog', false, url('changelog-index')) }}
                 <div class="changelog__content">
                     {{ changelog_listing(featured_changelog, false, true) }}
@@ -130,7 +130,7 @@
             </div>
         </div>
 
-        <div class="index__main">
+        <div class="landing__main">
             {% for post in featured_news %}
                 {{ news_preview(post) }}
             {% endfor %}