From 4b398067569338c613bf60c7a423653a254ac368 Mon Sep 17 00:00:00 2001 From: flashwave Date: Thu, 4 Aug 2016 17:34:25 +0200 Subject: [PATCH] design stuff --- app/Controllers/UserController.php | 2 +- resources/assets/less/aitemu/bem/banner.less | 11 ++ resources/assets/less/aitemu/bem/profile.less | 21 +-- resources/assets/less/aitemu/bem/status.less | 140 +++++++++++++++ resources/assets/less/aitemu/colours.less | 4 + resources/assets/less/aitemu/master.less | 1 + resources/assets/less/aitemu/variables.less | 8 + resources/views/aitemu/master.twig | 10 +- resources/views/aitemu/user/profile.twig | 161 ++++++++++++++++++ resources/views/yuuno/status/index.twig | 88 +++++++++- resources/views/yuuno/user/profile.twig | 68 ++++---- 11 files changed, 455 insertions(+), 59 deletions(-) create mode 100644 resources/assets/less/aitemu/bem/status.less create mode 100644 resources/views/aitemu/user/profile.twig 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 @@
home forum - chat + settings logout
{% if user.isActive %} @@ -63,10 +63,10 @@
flash.moe 2013-{{ ''|date('Y') }}
- Terms of Service - Rules - Contact - Status + Terms of Service + Rules + Contact + Status
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 %} +
+
+
+
{# + #}{% for id, data in hierarchies %}{# + #}{% if data.display %} +
+
+
{{ data.text }}
+
+ {% endif %}{# + #}{% endfor %}{# + #}
+
{# + #}{% for id, data in fields %}{# + #}{% if data.value != null %} + + {% endif %}{# + #}{% endfor %}{# + #}
+
+
+
+ welcome to my userpage +
+
+ listing of groups +
+
+ listing of friends +
+
+ listing of achievements +
+
+ profile comments +
+
+ 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 #} -
I can write in here too!
+ {% endblock %} {% block content %} -
- all services are operational and i haven't designed this yet +
+
+
+
+
main site
+
+
+
+
test site
+
+
+
+
api
+
+
+
+
chat server
+
+
+
+
chat client
+
+
+
+
irc gateway
+
+
+
+
tekkit
+
+
+
graph goes here
+
+
+
+
Aug 4, 2016
+
+
+
+
9:01 UTC
+
Resolved
+
+
+ That fixed it for some reason. +
+
+
+
+
8:45 UTC
+
Monitoring
+
+
+ Dropkicking the server out of the window. +
+
+
+
+
8:30 UTC
+
Investigating
+
+
+ Having connectivity issues with the server. +
+
+
+
+
+
Aug 3, 2016
+
+
+
+ No incidents occurred. +
+
+
+
{% endblock %} diff --git a/resources/views/yuuno/user/profile.twig b/resources/views/yuuno/user/profile.twig index c6d4a09..90eac9c 100644 --- a/resources/views/yuuno/user/profile.twig +++ b/resources/views/yuuno/user/profile.twig @@ -8,6 +8,8 @@ {% set youtubeIsChannelId = profile.youtube|slice(0, 2) == 'UC' and profile.youtube|length == 24 %} +{% set canViewSecret = user.permission(constant('Sakura\\Perms\\Manage::USE_MANAGE'), constant('Sakura\\Perms::MANAGE')) %} + {% set fields = { "website": { "title": "Website", @@ -55,6 +57,19 @@ "value": profile.lastfm, "link": "http://last.fm/user/%s", }, + "email": { + "title": "E-mail address", + "value": canViewSecret ? profile.email : null, + "link": "mailto:%s" + }, + "registerip": { + "title": "Register IP", + "value": canViewSecret ? profile.registerIp : null, + }, + "lastip": { + "title": "Last IP", + "value": canViewSecret ? profile.lastIp : null, + }, } %} {% block js %} @@ -209,45 +224,28 @@
- {% if profile.profileFields or user.permission(constant('Sakura\\Perms\\Manage::USE_MANAGE'), constant('Sakura\\Perms::MANAGE')) %} - {% if user.isActive %} - - {% for id, data in fields %} - {% if data.value != null %} - - - - - {% endif %} - {% endfor %} - {% if user.permission(constant('Sakura\\Perms\\Manage::USE_MANAGE'), constant('Sakura\\Perms::MANAGE')) %} + {% if user.isActive %} +
- {{ data.title }} - - {% if data.link %} - {{ (data.disp ? data.disp : '%s')|format(data.value) }} - {% else %} - {{ (data.disp ? data.disp : '%s')|format(data.value) }} - {% endif %} -
+ {% for id, data in fields %} + {% if data.value != null %} - - - - - - - - - - + + {% endif %} -
E-mail address{{ profile.email }}
Register IP{{ profile.registerIp }}
Last IP{{ profile.lastIp }} + {{ data.title }} + + {% if data.link %} + {{ (data.disp ? data.disp : '%s')|format(data.value) }} + {% else %} + {{ (data.disp ? data.disp : '%s')|format(data.value) }} + {% endif %} +
- {% else %} - Log in to view the full profile! - {% endif %} + {% endfor %} + + {% else %} + Log in to view the full profile! {% endif %} -
Account Standing {% if profile.permission(constant('Sakura\\Perms\\Site::DEACTIVATED')) %}

Deactivated