diff --git a/app/Controllers/UserController.php b/app/Controllers/UserController.php
index b151066..9cc43da 100644
--- a/app/Controllers/UserController.php
+++ b/app/Controllers/UserController.php
@@ -60,7 +60,7 @@ class UserController extends Controller
Template::vars(compact('profile'));
// Print page contents
- return Template::render('user/profile');
+ return Template::render((isset($_GET['new']) ? '@aitemu/' : '') . 'user/profile');
}
/**
diff --git a/resources/assets/less/aitemu/bem/banner.less b/resources/assets/less/aitemu/bem/banner.less
index 8e15505..c301b01 100644
--- a/resources/assets/less/aitemu/bem/banner.less
+++ b/resources/assets/less/aitemu/bem/banner.less
@@ -3,6 +3,8 @@
margin-top: @general-spacing;
background: no-repeat center center / cover @grey-2;
box-shadow: 0 @global-shadow-distance @global-shadow-size fade(@grey-1, @global-shadow-opacity);
+ display: flex;
+ flex-flow: column-reverse;
&--large {
height: 250px;
@@ -11,4 +13,13 @@
&--insane {
height: 400px;
}
+
+ &__bottom {
+ height: 60px;
+ background: fade(@grey-0, 80%);
+ display: inline-flex;
+ flex-flow: row;
+ align-items: center;
+ line-height: 1;
+ }
}
diff --git a/resources/assets/less/aitemu/bem/profile.less b/resources/assets/less/aitemu/bem/profile.less
index 225979e..47f1cac 100644
--- a/resources/assets/less/aitemu/bem/profile.less
+++ b/resources/assets/less/aitemu/bem/profile.less
@@ -1,20 +1,9 @@
.profile {
text-shadow: 0 @text-shadow-distance @text-shadow-size fade(@grey-0, @text-shadow-opacity);
- &__banner {
- display: flex;
- flex-flow: column-reverse;
- }
-
&__header {
- height: 60px;
- background: fade(@grey-0, 80%);
padding-left: @avatar-big + (@general-spacing * 4);
padding-right: @general-spacing * 2;
- display: inline-flex;
- flex-flow: row;
- align-items: center;
- line-height: 1;
}
&__names {
@@ -24,17 +13,17 @@
}
&__username {
- font-size: 2em;
+ font-size: @font-size--profile-username;
}
&__title {
- font-size: .9em;
+ font-size: @font-size--profile-title;
}
&__dates {
font-weight: 300;
text-align: right;
- font-size: .7em;
+ font-size: @font-size--profile-dates;
line-height: 1.3em;
}
@@ -57,6 +46,10 @@
&__platform {
text-align: left;
margin: @general-spacing auto 0;
+
+ &:empty {
+ display: none;
+ }
}
&__avatar {
diff --git a/resources/assets/less/aitemu/bem/status.less b/resources/assets/less/aitemu/bem/status.less
new file mode 100644
index 0000000..c808a50
--- /dev/null
+++ b/resources/assets/less/aitemu/bem/status.less
@@ -0,0 +1,140 @@
+.status {
+ &__overall {
+ font-size: @font-size--status-overall;
+ font-weight: 100;
+ flex-grow: 1;
+ flex-shrink: 0;
+ text-align: left;
+ margin-left: @general-spacing * 4;
+
+ &-icon {
+ font-family: FontAwesome;
+ }
+
+ &-text {
+ font-style: italic;
+ }
+
+ &--good {
+ .status__overall-icon:before {
+ content: "\f05d";
+ }
+ }
+ }
+
+ &__last-update {
+ align-self: flex-end;
+ margin: @general-spacing * 2;
+ font-size: @font-size--status-last-update;
+ }
+
+ &__response {
+ display: flex;
+ }
+
+ &__services {
+ display: flex;
+ flex-flow: column;
+ border-right: 1px solid @grey-1;
+ }
+
+ &__service {
+ display: inline-flex;
+ padding: @general-spacing;
+ align-items: center;
+ line-height: 1;
+
+ &-icon {
+ width: 40px;
+ height: 20px;
+ border-radius: 4px;
+ transform: skewX(-10deg);
+ background: #333;
+ margin-left: @general-spacing / 2;
+ box-shadow: 0 @global-shadow-distance @global-shadow-size fade(@grey-1, @global-shadow-opacity);
+ }
+
+ &-name {
+ font-size: 24px;
+ text-align: right;
+ flex-grow: 1;
+ padding-left: @general-spacing * 10;
+ }
+
+ &--selected {
+ background: @grey-1;
+ }
+
+ &--good {
+ .status__service-icon {
+ background: @green;
+ }
+ }
+
+ &--bad {
+ .status__service-icon {
+ background: @red;
+ }
+ }
+ }
+
+ &__incident {
+ display: flex;
+
+ &:not(:last-child) {
+ border-bottom: 1px solid @grey-1;
+ margin-bottom: @general-spacing;
+ padding-bottom: @general-spacing;
+ }
+
+ &-date {
+ border-right: 1px solid @grey-1;
+ margin-right: @general-spacing;
+ padding: @general-spacing;
+ padding-left: 0;
+ font-size: @font-size--status-incident-date;
+ font-style: italic;
+ font-weight: 300;
+ min-width: 150px;
+ }
+ }
+
+ &__update {
+ display: flex;
+
+ &:not(:last-child) {
+ margin-bottom: @general-spacing;
+ }
+
+ &-meta {
+ text-align: left;
+ font-style: italic;
+ border-right: 1px solid @grey-1;
+ padding: @general-spacing;
+ margin-right: @general-spacing;
+ min-width: 150px;
+ }
+
+ &-text {
+ padding: @general-spacing;
+ }
+
+ &--good {
+ .status__update-meta {
+ border-color: @green;
+ }
+ }
+
+ &--busy {
+ .status__update-meta {
+ border-color: @orange;
+ }
+ }
+
+ &--bad {
+ .status__update-meta {
+ border-color: @red;
+ }
+ }
+ }
+}
diff --git a/resources/assets/less/aitemu/colours.less b/resources/assets/less/aitemu/colours.less
index 3e22e8e..cd05f69 100644
--- a/resources/assets/less/aitemu/colours.less
+++ b/resources/assets/less/aitemu/colours.less
@@ -2,6 +2,10 @@
@red: #b01116;
+@green: #007c36;
+
+@orange: #cf7618;
+
@grey-0: #000;
@grey-1: #111;
@grey-2: #222;
diff --git a/resources/assets/less/aitemu/master.less b/resources/assets/less/aitemu/master.less
index dee433f..1fc2f66 100644
--- a/resources/assets/less/aitemu/master.less
+++ b/resources/assets/less/aitemu/master.less
@@ -9,6 +9,7 @@
@import "bem/landing";
@import "bem/platform";
@import "bem/profile";
+@import "bem/status";
@import "colours";
@import "variables";
diff --git a/resources/assets/less/aitemu/variables.less b/resources/assets/less/aitemu/variables.less
index 80770bb..1d25647 100644
--- a/resources/assets/less/aitemu/variables.less
+++ b/resources/assets/less/aitemu/variables.less
@@ -20,3 +20,11 @@
@header-font-size: 1.5em;
@header-height: 50px;
+
+@font-size--status-overall: 36px;
+@font-size--status-last-update: 12px;
+@font-size--status-incident-date: 24px;
+
+@font-size--profile-username: 24px;
+@font-size--profile-title: 14px;
+@font-size--profile-dates: 12px;
diff --git a/resources/views/aitemu/master.twig b/resources/views/aitemu/master.twig
index fec031a..366ae1a 100644
--- a/resources/views/aitemu/master.twig
+++ b/resources/views/aitemu/master.twig
@@ -30,7 +30,7 @@
{% if user.isActive %}
@@ -63,10 +63,10 @@
diff --git a/resources/views/aitemu/user/profile.twig b/resources/views/aitemu/user/profile.twig
new file mode 100644
index 0000000..9fbf395
--- /dev/null
+++ b/resources/views/aitemu/user/profile.twig
@@ -0,0 +1,161 @@
+{% extends '@aitemu/master.twig' %}
+
+{% set title = 'profile / ' ~ profile.username %}
+{% set banner_large = true %}
+{% set banner = profile.header ? route('user.header', profile.id) : null %}
+{% set wrapper_classes = "profile" %}
+{% set banner_classes = "profile__banner" %}
+
+{% set hierarchies = {
+ 'founder': {
+ 'display': profile.id == 2,
+ 'icon': 'fa-cog',
+ 'text': 'Founder',
+ },
+ 'staff': {
+ 'display': false,
+ 'icon': 'fa-gavel',
+ 'text': 'Staff',
+ },
+ 'developer': {
+ 'display': false,
+ 'icon': 'fa-code',
+ 'text': 'Developer',
+ },
+ 'contributor': {
+ 'display': false,
+ 'icon': 'fa-heart',
+ 'text': 'Contributor',
+ },
+ 'premium': {
+ 'display': false,
+ 'icon': 'fa-heart',
+ 'text': 'Contributor',
+ },
+ 'banned': {
+ 'display': false,
+ 'icon': 'fa-trash',
+ 'text': 'Banned',
+ },
+} %}
+
+{% set youtubeIsChannelId = profile.youtube|slice(0, 2) == 'UC' and profile.youtube|length == 24 %}
+
+{% set fields = {
+ "website": {
+ "title": "Website",
+ "icon": "fa-globe",
+ "value": profile.website,
+ "link": "%s",
+ },
+ "twitter": {
+ "title": "Twitter",
+ "icon": "fa-twitter",
+ "value": profile.twitter,
+ "link": "https://twitter.com/%s",
+ "disp": "@%s",
+ },
+ "github": {
+ "title": "GitHub",
+ "icon": "fa-github",
+ "value": profile.github,
+ "link": "https://github.com/%s",
+ },
+ "skype": {
+ "title": "Skype",
+ "icon": "fa-skype",
+ "value": profile.skype,
+ "link": "skype:%s?userinfo",
+ },
+ "discord": {
+ "title": "Discord",
+ "icon": "fa-gamepad",
+ "value": profile.discord,
+ },
+ "youtube": {
+ "title": "YouTube",
+ "icon": "fa-youtube-play",
+ "value": profile.youtube,
+ "link": "https://youtube.com/" ~ (youtubeIsChannelId ? 'channel/' : '') ~ "%s",
+ "disp": youtubeIsChannelId ? profile.username ~ "'s channel" : "%s",
+ },
+ "steam": {
+ "title": "Steam",
+ "icon": "fa-steam",
+ "value": profile.steam,
+ "link": "https://steamcommunity.com/id/%s",
+ },
+ "osu": {
+ "title": "osu!",
+ "icon": "fa-dot-circle-o",
+ "value": profile.osu,
+ "link": "https://osu.ppy.sh/u/%s",
+ },
+ "lastfm": {
+ "title": "Last.fm",
+ "icon": "fa-lastfm",
+ "value": profile.lastfm,
+ "link": "http://last.fm/user/%s",
+ },
+} %}
+
+{% block banner_content %}
+
+{% endblock %}
+
+{% block content %}
+
+
+
+
+ welcome to my userpage
+
+
+ listing of groups
+
+
+ listing of friends
+
+
+ listing of achievements
+
+
+
+ listing of forum posts and created topics
+
+
+
+{% endblock %}
diff --git a/resources/views/yuuno/status/index.twig b/resources/views/yuuno/status/index.twig
index d8d6887..7a86681 100644
--- a/resources/views/yuuno/status/index.twig
+++ b/resources/views/yuuno/status/index.twig
@@ -5,12 +5,92 @@
{% set banner_large = true %}
{% block banner_content %}
- {# ignore this, it's temporary #}
-
+
+
+ all services are go!
+
+
+ this is a static design preview
+
+
{% endblock %}
{% block content %}
-