Restyled login attempts.

assets/less/classes/settings/login-attempt.less

@@ -0,0 +1,83 @@
+.settings__login-attempt {
+    border: 1px solid var(--accent-colour);
+    border-radius: 2px;
+    overflow: hidden;
+    margin: 4px;
+
+    &--failed {
+        --accent-colour: #a00;
+        background-color: var(--accent-colour);
+    }
+
+    &--failed &__container {
+        background-color: fade(#111, 80%);
+    }
+
+    &__container {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    &__important {
+        display: flex;
+        align-items: center;
+        font-size: 1.4em;
+        z-index: 2;
+    }
+
+    &__flag {
+        flex: 0 0 auto;
+        margin: 10px;
+        margin-right: 0;
+    }
+
+    &__description {
+        flex: 1 1 auto;
+        margin: 10px;
+    }
+
+    &__actions {
+        flex: 0 0 auto;
+        display: flex;
+    }
+
+    &__action {
+        border: 0;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        text-shadow: inherit;
+        padding: 10px;
+        cursor: pointer;
+        transition: color .2s;
+
+        &:hover {
+            color: var(--accent-colour);
+        }
+    }
+
+    &__details {
+        z-index: 1;
+        margin: 10px;
+        margin-top: -5px;
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    &__detail {
+        display: inline-block;
+        margin-right: 2px;
+        min-width: 120px;
+
+        &__title {
+            border-bottom: 1px solid var(--accent-colour);
+            font-weight: 700;
+            padding: 1px 5px;
+        }
+
+        &__value {
+            padding: 1px 5px;
+        }
+    }
+}

assets/less/classes/settings/login-attempts.less

@@ -0,0 +1,6 @@
+.settings__login-attempts {
+
+    &__pagination {
+        margin: 4px;
+    }
+}

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

@@ -1,63 +0,0 @@
-.settings__login-history {
-    margin: 1px;
-
-    &__country {
-        vertical-align: middle;
-    }
-
-    &__entry {
-        display: flex;
-        border: 1px solid var(--accent-colour);
-        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/classes/settings/session.less

@@ -1,15 +1,23 @@
 .settings__session {
-    margin: 4px;
     border: 1px solid var(--accent-colour);
     border-radius: 2px;
     overflow: hidden;
+    margin: 4px;
 
     &--current {
-        // todo: make this not bad
-        background-image: linear-gradient(0deg, #111c, #111c);
         background-color: var(--accent-colour);
     }
 
+    &--current &__container {
+        background-color: fade(#111, 80%);
+    }
+
+    &__container {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+
     &__important {
         display: flex;
         align-items: center;

assets/less/main.less

@@ -130,7 +130,8 @@ body {
 @import "classes/settings/pagination";
 @import "classes/settings/account";
 @import "classes/settings/log";
-@import "classes/settings/login-history";
+@import "classes/settings/login-attempt";
+@import "classes/settings/login-attempts";
 @import "classes/settings/session";
 @import "classes/settings/sessions";
 @import "classes/settings/role";

templates/user/macros.twig

@@ -49,6 +49,7 @@
     {% set browser = get_browser(session.session_user_agent) %}
 
     <div class="settings__session{% if is_current_session %} settings__session--current{% endif %}" id="session-{{ session.session_id }}">
+        <div class="settings__session__container">
             <div class="settings__session__important">
                 <div class="flag flag--{{ session.session_country|lower }} settings__session__flag"></div>
 
@@ -119,4 +120,59 @@
                 </div>
             </div>
         </div>
+    </div>
+{% endmacro %}
+
+{% macro user_login_attempt(attempt) %}
+    {% set browser = get_browser(attempt.attempt_user_agent) %}
+
+    <div class="settings__login-attempt{% if not attempt.attempt_success %} settings__login-attempt--failed{% endif %}" id="login-attempt-{{ attempt.attempt_id }}">
+        <div class="settings__login-attempt__container">
+            <div class="settings__login-attempt__important">
+                <div class="flag flag--{{ attempt.attempt_country|lower }} settings__login-attempt__flag"></div>
+
+                <div class="settings__login-attempt__description">
+                    {{ browser.browser }} on {{ browser.platform }}
+                </div>
+            </div>
+
+            <div class="settings__login-attempt__details">
+                <div class="settings__login-attempt__detail">
+                    <div class="settings__login-attempt__detail__title">
+                        IP Address
+                    </div>
+                    <div class="settings__login-attempt__detail__value">
+                        {{ attempt.attempt_ip }}
+                    </div>
+                </div>
+
+                <div class="settings__login-attempt__detail">
+                    <div class="settings__login-attempt__detail__title">
+                        Succeeded
+                    </div>
+                    <div class="settings__login-attempt__detail__value">
+                        {{ attempt.attempt_success ? 'Yes' : 'No' }}
+                    </div>
+                </div>
+
+                <div class="settings__login-attempt__detail" title="{{ attempt.attempt_created|date('r') }}">
+                    <div class="settings__login-attempt__detail__title">
+                        Attempted
+                    </div>
+                    <time class="settings__login-attempt__detail__value" datetime="{{ attempt.attempt_created|date('c') }}">
+                        {{ attempt.attempt_created|time_diff }}
+                    </time>
+                </div>
+
+                <div class="settings__login-attempt__detail">
+                    <div class="settings__login-attempt__detail__title">
+                        User Agent
+                    </div>
+                    <div class="settings__login-attempt__detail__value">
+                        {{ attempt.attempt_user_agent|length > 0 ? attempt.attempt_user_agent : 'None' }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 {% endmacro %}

templates/user/settings.twig

@@ -1,6 +1,6 @@
 {% extends 'user/master.twig' %}
 {% from 'macros.twig' import container_title, pagination %}
-{% from 'user/macros.twig' import user_session %}
+{% from 'user/macros.twig' import user_session, user_login_attempt %}
 {% from '_layout/input.twig' import input_hidden, input_csrf, input_text %}
 
 {% set title = 'Settings' %}
@@ -198,57 +198,20 @@
             <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="settings__login-history">
+        <div class="settings__login-attempts">
+            <div class="settings__login-attempts__pagination">
                 {{ lhpagination }}
+            </div>
 
             {% for attempt in logins.list %}
-                <div class="settings__login-history__entry" id="attempt-{{ attempt.attempt_id }}">
+                {{ user_login_attempt(attempt) }}
-                    <div class="settings__login-history__column settings__login-history__column--ip">
-                        <div class="settings__login-history__column__name">
-                            IP
-                        </div>
-                        <div class="settings__login-history__column__value">
-                            {{ attempt.attempt_ip }}
-                            {% if attempt.attempt_country != 'XX' %}
-                                <div class="flag flag--{{ attempt.attempt_country|lower }} settings__login-history__country" title="{{ attempt.attempt_country|country_name }}"></div>
-                            {% endif %}
-                        </div>
-                    </div>
-
-                    <div class="settings__login-history__column settings__login-history__column--success">
-                        <div class="settings__login-history__column__name">
-                            Was Successful?
-                        </div>
-                        <div class="settings__login-history__column__value settings__login-history__column__value--{{ attempt.attempt_success ? 'successful' : 'failed' }}">
-                            {{ attempt.attempt_success ? 'Yes' : 'No' }}
-                        </div>
-                    </div>
-
-                    <div class="settings__login-history__column settings__login-history__column--created" title="{{ attempt.attempt_created|date('r') }}">
-                        <div class="settings__login-history__column__name">
-                            Attempted
-                        </div>
-                        <time class="settings__login-history__column__value" datetime="{{ attempt.attempt_created|date('c') }}">
-                            {{ attempt.attempt_created|time_diff }}
-                        </time>
-                    </div>
-
-                    {% if attempt.attempt_user_agent|length > 0 %}
-                        <div class="settings__login-history__column settings__login-history__column--user_agent">
-                            <div class="settings__login-history__column__name">
-                                User Agent
-                            </div>
-                            <div class="settings__login-history__column__value">
-                                {{ attempt.attempt_user_agent }}
-                            </div>
-                        </div>
-                    {% endif %}
-                </div>
             {% endfor %}
 
+            <div class="settings__login-attempts__pagination">
                 {{ lhpagination }}
             </div>
         </div>
+    </div>
 
     <div class="container settings__container" id="log">
         {{ container_title('<i class="fas fa-file-alt fa-fw"></i> Account Log', '', true) }}