Add styling to login history as well as a descriptions to sessions page.

assets/less/mio/classes/container.less

@@ -10,7 +10,7 @@
         font-size: 1.17em;
         font-weight: 700;
         padding: 3px;
-        font-family: Verdana, Arial, Helvetica, sans-serif;
+        font-family: @mio-font-heading;
     }
 
     &__content {

assets/less/mio/classes/settings/account.less

@@ -37,7 +37,7 @@
         font-size: 1.1em;
         font-weight: 700;
         padding: 3px;
-        font-family: Verdana, Arial, Helvetica, sans-serif;
+        font-family: @mio-font-heading;
     }
 
     &__input {

assets/less/mio/classes/settings/description.less

@@ -0,0 +1,6 @@
+.mio__settings__description {
+    font-size: .9em;
+    padding: 1px 4px;
+    border-bottom: 1px solid #9475b2;
+    margin-bottom: 1px;
+}

assets/less/mio/classes/settings/login-history.less

@@ -0,0 +1,61 @@
+.mio__settings__login-history {
+    &__country {
+        vertical-align: middle;
+    }
+
+    &__entry {
+        display: flex;
+        border: 1px solid #9475b2;
+        justify-content: space-between;
+        padding: 1px;
+        flex-wrap: wrap;
+
+        &:not(:last-child) {
+            margin-bottom: 1px;
+        }
+    }
+
+    &__column {
+        flex-grow: 1;
+        margin-left: 5px;
+        margin-right: 1px;
+
+        &--ip,
+        &--created,
+        &--success {
+            flex-shrink: 0;
+
+            &:not(:last-child) {
+                flex-grow: 0;
+            }
+        }
+
+        &--user-agent {
+            flex-shrink: 1;
+            flex-grow: 1;
+        }
+
+        &--ip {
+            min-width: 200px;
+        }
+
+        &--created,
+        &--success {
+            min-width: 120px;
+        }
+
+        &__name {
+            font-weight: 700;
+        }
+
+        &__value {
+            &--successful {
+                color: #0a0;
+            }
+
+            &--failed {
+                color: #c00;
+            }
+        }
+    }
+}

assets/less/mio/main.less

@@ -1,3 +1,6 @@
+@mio-font-heading: Verdana, 'Dejavu Sans', Arial, Helvetica, sans-serif;
+@mio-font-regular: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
+
 * {
     margin: 0;
     padding: 0;
@@ -16,7 +19,7 @@ body {
     background-image: linear-gradient(180deg, #c2affe, transparent);
     background-repeat: repeat-x;
     background-size: 100% 150px;
-    font: 12px/20px Tahoma, Verdana, Arial, Helvetica, sans-serif;
+    font: 12px/20px @mio-font-regular;
     color: #000;
 
     &__wrapper {
@@ -51,9 +54,11 @@ body {
 
 // Settings
 @import "classes/settings/content";
+@import "classes/settings/description";
 @import "classes/settings/errors";
 @import "classes/settings/account";
 @import "classes/settings/avatar";
+@import "classes/settings/login-history";
 @import "classes/settings/sessions";
 
 // Forums

views/mio/settings/login-history.twig

@@ -1,7 +1,51 @@
 {% extends '@mio/settings/master.twig' %}
 
 {% block settings_content %}
-    {% for login_attempt in user_login_attempts %}
+    <div class="mio__settings__description">
-        <p>{{ login_attempt.attempt_id }}, {{ login_attempt.was_successful }}, {{ login_attempt.attempt_ip.string }}, {{ login_attempt.user_agent }}, {{ login_attempt.attempt_country }}, {{ login_attempt.created_at }}</p>
+        <p>These are all the login attempts to your account. If any attempt that you don't recognise is marked as successful your account may be compromised, ask a staff member for advice in this case.</p>
+    </div>
+
+    <div class="mio__settings__login-history">
+        {% for attempt in user_login_attempts %}
+            <div class="mio__settings__login-history__entry" id="attempt-{{ attempt.attempt_id }}">
+                <div class="mio__settings__login-history__column mio__settings__login-history__column--ip">
+                    <div class="mio__settings__login-history__column__name">
+                        IP
+                    </div>
+                    <div class="mio__settings__login-history__column__value">
+                        {{ attempt.attempt_ip.string }}
+                        {% if attempt.attempt_country != 'XX' %}
+                            <img class="mio__settings__login-history__country" src="https://static.flash.moe/flags/fff/{{ attempt.attempt_country|lower }}.png" alt="{{ attempt.attempt_country }}" title="{{ attempt.attempt_country|country_name }}">
+                        {% endif %}
+                    </div>
+                </div>
+                <div class="mio__settings__login-history__column mio__settings__login-history__column--success">
+                    <div class="mio__settings__login-history__column__name">
+                        Was Successful?
+                    </div>
+                    <div class="mio__settings__login-history__column__value mio__settings__login-history__column__value--{{ attempt.was_successful ? 'successful' : 'failed' }}">
+                        {{ attempt.was_successful ? 'Yes' : 'No' }}
+                    </div>
+                </div>
+                <div class="mio__settings__login-history__column mio__settings__login-history__column--created" onmouseenter="this.children[1].textContent = '{{ attempt.created_at }}';" onmouseleave="this.children[1].textContent = '{{ attempt.created_at.diffForHumans }}';">
+                    <div class="mio__settings__login-history__column__name">
+                        Attempted
+                    </div>
+                    <div class="mio__settings__login-history__column__value">
+                        {{ attempt.created_at.diffForHumans }}
+                    </div>
+                </div>
+                {% if attempt.user_agent|length > 0 %}
+                    <div class="mio__settings__login-history__column mio__settings__login-history__column--user_agent">
+                        <div class="mio__settings__login-history__column__name">
+                            User Agent
+                        </div>
+                        <div class="mio__settings__login-history__column__value">
+                            {{ attempt.user_agent }}
+                        </div>
+                    </div>
+                {% endif %}
+            </div>
         {% endfor %}
+    </div>
 {% endblock %}

views/mio/settings/sessions.twig

@@ -1,6 +1,10 @@
 {% extends '@mio/settings/master.twig' %}
 
 {% block settings_content %}
+    <div class="mio__settings__description">
+        <p>These are the active logins to your account, clicking the Kill button will force a logout on that session. Your current login is highlighted with a darker purple so you don't accidentally force yourself to logout.</p>
+    </div>
+
     <div class="mio__settings__sessions">
         {% for session in user_sessions %}
             <div class="mio__settings__sessions__entry{% if session.session_id == settings_session.session_id %} mio__settings__sessions__entry--current{% endif %}" id="session-{{ session.session_id }}">