flashii/misuzu
flashii/misuzu
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Flip landing page on mobile.

Browse source
This commit is contained in:
flash 2019-03-02 22:25:35 +01:00
parent 41bce46c7d
commit bc5c7fb2ff
3 changed files with 47 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/less/classes/index.less → assets/less/classes/landing.less
View file

@ -1,9 +1,9 @@
.index { .landing {
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
@media (max-width: @site-mobile-width) { @media (max-width: @site-mobile-width) {
flex-direction: column-reverse; flex-direction: column;
} }
&__container { &__container {

10
assets/less/main.less
View file

@ -121,11 +121,13 @@ html {
@import "classes/messagebox"; @import "classes/messagebox";
// Specific styles // Specific styles
@import "classes/footer";
@import "classes/header";
@import "classes/index";
@import "classes/permissions";
@import "classes/auth"; @import "classes/auth";
@import "classes/header";
@import "classes/footer";
@import "classes/permissions";
// Main page styling
@import "classes/landing";
// Manage // Manage
@import "classes/manage/manage"; @import "classes/manage/manage";

78
templates/home/landing.twig
View file

@ -6,63 +6,63 @@
{% set canonical_url = '/' %} {% set canonical_url = '/' %}
{% block content %} {% block content %}
<div class="index"> <div class="landing">
<div class="index__sidebar"> <div class="landing__sidebar">
<div class="container index__container"> <div class="container landing__container">
{{ container_title('<i class="fas fa-chart-bar fa-fw"></i> Statistics') }} {{ 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="landing__statistic">
<div class="index__statistic__name"> <div class="landing__statistic__name">
<i class="fas fa-users fa-fw"></i> Users <i class="fas fa-users fa-fw"></i> Users
</div> </div>
<div class="index__statistic__value"> <div class="landing__statistic__value">
{{ statistics.count_users_all|number_format }} {{ statistics.count_users_all|number_format }}
</div> </div>
</div> </div>
<div class="index__statistic"> <div class="landing__statistic">
<div class="index__statistic__name"> <div class="landing__statistic__name">
<i class="fas fa-comment-dots fa-fw"></i> Comments <i class="fas fa-comment-dots fa-fw"></i> Comments
</div> </div>
<div class="index__statistic__value"> <div class="landing__statistic__value">
{{ statistics.count_comments|number_format }} {{ statistics.count_comments|number_format }}
</div> </div>
</div> </div>
<div class="index__statistic"> <div class="landing__statistic">
<div class="index__statistic__name"> <div class="landing__statistic__name">
<i class="fas fa-user-check fa-fw"></i> Online <i class="fas fa-user-check fa-fw"></i> Online
</div> </div>
<div class="index__statistic__value"> <div class="landing__statistic__value">
{{ statistics.count_users_online|number_format }} {{ statistics.count_users_online|number_format }}
</div> </div>
</div> </div>
<div class="index__statistic"> <div class="landing__statistic">
<div class="index__statistic__name"> <div class="landing__statistic__name">
<i class="fas fa-user-clock fa-fw"></i> Active (24 hr) <i class="fas fa-user-clock fa-fw"></i> Active (24 hr)
</div> </div>
<div class="index__statistic__value"> <div class="landing__statistic__value">
{{ statistics.count_users_active|number_format }} {{ statistics.count_users_active|number_format }}
</div> </div>
</div> </div>
<div class="index__statistic"> <div class="landing__statistic">
<div class="index__statistic__name"> <div class="landing__statistic__name">
<i class="fas fa-list fa-fw"></i> Topics <i class="fas fa-list fa-fw"></i> Topics
</div> </div>
<div class="index__statistic__value"> <div class="landing__statistic__value">
{{ statistics.count_forum_topics|number_format }} {{ statistics.count_forum_topics|number_format }}
</div> </div>
</div> </div>
<div class="index__statistic"> <div class="landing__statistic">
<div class="index__statistic__name"> <div class="landing__statistic__name">
<i class="fas fa-comments fa-fw"></i> Posts <i class="fas fa-comments fa-fw"></i> Posts
</div> </div>
<div class="index__statistic__value"> <div class="landing__statistic__value">
{{ statistics.count_forum_posts|number_format }} {{ statistics.count_forum_posts|number_format }}
</div> </div>
</div> </div>
@ -71,12 +71,12 @@
</div> </div>
{% if online_users|length > 0 %} {% 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') }} {{ 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 %} {% 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 }} {{ user.username }}
</a> </a>
{% endfor %} {% endfor %}
@ -85,18 +85,18 @@
{% endif %} {% endif %}
{% if birthdays|length > 0 %} {% 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!') }} {{ container_title('<i class="fas fa-birthday-cake fa-fw"></i> Happy Birthday!') }}
{% for birthday in birthdays %} {% for birthday in birthdays %}
<a class="index__latest" style="{# birthday.user_colour|html_colour #}" href="{{ url('user-profile', {'user': birthday.user_id}) }}"> <a class="landing__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="avatar landing__latest__avatar" style="--avatar-url: url('{{ url('user-avatar', {'user': birthday.user_id}) }}')"></div>
<div class="index__latest__content"> <div class="landing__latest__content">
<div class="index__latest__username"> <div class="landing__latest__username">
{{ birthday.username }} {{ birthday.username }}
</div> </div>
{% if birthday.user_age is not null %} {% if birthday.user_age is not null %}
<div class="index__latest__joined"> <div class="landing__latest__joined">
Turned {{ birthday.user_age }} today! Turned {{ birthday.user_age }} today!
</div> </div>
{% endif %} {% endif %}
@ -105,16 +105,16 @@
{% endfor %} {% endfor %}
</div> </div>
{% elseif latest_user.user_id|default(0) > 0 %} {% 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') }} {{ 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}) }}"> <a class="landing__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="avatar landing__latest__avatar" style="--avatar-url: url('{{ url('user-avatar', {'user': latest_user.user_id}) }}')"></div>
<div class="index__latest__content"> <div class="landing__latest__content">
<div class="index__latest__username"> <div class="landing__latest__username">
{{ latest_user.username }} {{ latest_user.username }}
</div> </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> 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>
</div> </div>
@ -122,7 +122,7 @@
</div> </div>
{% endif %} {% 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')) }} {{ container_title('<i class="fas fa-wrench fa-fw"></i> Changelog', false, url('changelog-index')) }}
<div class="changelog__content"> <div class="changelog__content">
{{ changelog_listing(featured_changelog, false, true) }} {{ changelog_listing(featured_changelog, false, true) }}
@ -130,7 +130,7 @@
</div> </div>
</div> </div>
<div class="index__main"> <div class="landing__main">
{% for post in featured_news %} {% for post in featured_news %}
{{ news_preview(post) }} {{ news_preview(post) }}
{% endfor %} {% endfor %}