A makeover for account logs as well.

assets/less/classes/settings/account-log.less

@@ -0,0 +1,74 @@
+.settings__account-log {
+    border: 1px solid var(--accent-colour);
+    border-radius: 2px;
+    overflow: hidden;
+    margin: 4px;
+
+    &__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/account-logs.less

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

assets/less/classes/settings/log.less

@@ -1,51 +0,0 @@
-.settings__log {
-    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,
-        &--date {
-            flex-shrink: 0;
-
-            &:not(:last-child) {
-                flex-grow: 0;
-            }
-        }
-
-        &--action {
-            flex-shrink: 1;
-            flex-grow: 1;
-        }
-
-        &--ip {
-            min-width: 200px;
-        }
-
-        &--date {
-            min-width: 120px;
-        }
-
-        &__name {
-            font-weight: 700;
-        }
-    }
-}

assets/less/main.less

@@ -129,7 +129,8 @@ body {
 @import "classes/settings/disabled";
 @import "classes/settings/pagination";
 @import "classes/settings/account";
-@import "classes/settings/log";
+@import "classes/settings/account-log";
+@import "classes/settings/account-logs";
 @import "classes/settings/login-attempt";
 @import "classes/settings/login-attempts";
 @import "classes/settings/session";

templates/user/macros.twig

@@ -51,7 +51,7 @@
     <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>
+                <div class="flag flag--{{ session.session_country|lower }} settings__session__flag" title="{{ session.session_country|country_name }}">{{ session.session_country }}</div>
 
                 <div class="settings__session__description">
                     {{ browser.browser }} on {{ browser.platform }}
@@ -129,7 +129,7 @@
     <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="flag flag--{{ attempt.attempt_country|lower }} settings__login-attempt__flag" title="{{ attempt.attempt_country|country_name }}">{{ attempt.attempt_country }}</div>
 
                 <div class="settings__login-attempt__description">
                     {{ browser.browser }} on {{ browser.platform }}
@@ -176,3 +176,41 @@
         </div>
     </div>
 {% endmacro %}
+
+{% macro user_account_log(data, strings) %}
+    <div class="settings__account-log" id="account-log-{{ data.log_id }}">
+        <div class="settings__account-log__container">
+            <div class="settings__account-log__important">
+                <div class="flag flag--{{ data.log_country|lower }} settings__login-attempt__flag" title="{{ data.log_country|country_name }}">{{ data.log_country }}</div>
+
+                <div class="settings__login-attempt__description">
+                    {% if data.log_action in strings|keys %}
+                        {{ strings[data.log_action]|log_format(data.log_params) }}
+                    {% else %}
+                        {{ data.log_action }}({{ data.log_params }})
+                    {% endif %}
+                </div>
+            </div>
+
+            <div class="settings__account-log__details">
+                <div class="settings__account-log__detail">
+                    <div class="settings__account-log__detail__title">
+                        IP Address
+                    </div>
+                    <div class="settings__account-log__detail__value">
+                        {{ data.log_ip }}
+                    </div>
+                </div>
+
+                <div class="settings__account-log__detail" title="{{ data.log_created|date('r') }}">
+                    <div class="settings__account-log__detail__title">
+                        Date
+                    </div>
+                    <time class="settings__account-log__detail__value" datetime="{{ data.log_created|date('c') }}">
+                        {{ data.log_created|time_diff }}
+                    </time>
+                </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, user_login_attempt %}
+{% from 'user/macros.twig' import user_session, user_login_attempt, user_account_log %}
 {% from '_layout/input.twig' import input_hidden, input_csrf, input_text %}
 
 {% set title = 'Settings' %}
@@ -234,48 +234,18 @@
             <p>This is a log of all "important" actions that have been done using your account for your review. If you notice anything strange, please alert the staff.</p>
         </div>
 
-        <div class="settings__log">
+        <div class="settings__account-logs">
-            {{ alpagination }}
+            <div class="settings__account-logs__pagination">
+                {{ alpagination }}
+            </div>
 
             {% for log in logs.list %}
-                <div class="settings__log__entry" id="log-{{ log.log_id }}">
+                {{ user_account_log(log, logs.strings) }}
-                    <div class="settings__log__column settings__login-history__column--ip">
-                        <div class="settings__log__column__name">
-                            IP
-                        </div>
-                        <div class="settings__log__column__value">
-                            {{ log.log_ip }}
-                            {% if log.log_country|default('XX') != 'XX' %}
-                                <div class="flag flag--{{ log.log_country|lower }} settings__log__country" title="{{ log.log_country|country_name }}"></div>
-                            {% endif %}
-                        </div>
-                    </div>
-
-                    <div class="settings__log__column settings__log__column--date" title="{{ log.log_created|date('r') }}">
-                        <div class="settings__log__column__name">
-                            Date
-                        </div>
-                        <time class="settings__log__column__value" datetime="{{ log.log_created|date('c') }}">
-                            {{ log.log_created|time_diff }}
-                        </time>
-                    </div>
-
-                    <div class="settings__log__column settings__log__column--action">
-                        <div class="settings__log__column__name">
-                            Action
-                        </div>
-                        <div class="settings__log__column__value">
-                            {% if log.log_action in logs.strings|keys %}
-                                {{ logs.strings[log.log_action]|log_format(log.log_params) }}
-                            {% else %}
-                                {{ log.log_action }}({{ log.log_params }})
-                            {% endif %}
-                        </div>
-                    </div>
-                </div>
             {% endfor %}
 
-            {{ alpagination }}
+            <div class="settings__account-logs__pagination">
+                {{ alpagination }}
+            </div>
         </div>
     </div>
 {% endblock %}