flashii/misuzu
flashii/misuzu
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add styling to sessions page.

Browse source
This commit is contained in:
flash 2018-03-26 03:55:25 +02:00
parent d43d48c48c
commit cc75f3eedd
5 changed files with 116 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/less/mio/classes/input/button.less
View file

@ -26,4 +26,8 @@
border-color: #306;
background: #8364a1;
}
&--small {
font-size: 15px;
}
}

4
assets/less/mio/classes/settings/content.less
View file

@ -1,5 +1,7 @@
.mio__settings__content {
&--account {
&--account,
&--sessions,
&--login-history {
margin: 1px;
}

65
assets/less/mio/classes/settings/sessions.less Normal file
View file

@ -0,0 +1,65 @@
@mio-settings-sessions-mobile: 1000px;
.mio__settings__sessions {
&__country {
vertical-align: middle;
}
@media (max-width: @mio-settings-sessions-mobile) {
&__button {
width: 100%;
text-align: center;
}
}
&__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;
&:not(:last-child) {
margin-left: 5px;
margin-right: 1px;
}
&--ip,
&--created,
&--expires,
&--options {
flex-grow: 0;
flex-shrink: 0;
}
@media (max-width: @mio-settings-sessions-mobile) {
&--options {
text-align: center;
flex-grow: 1;
width: 100%;
}
}
&--user-agent {
flex-shrink: 1;
flex-grow: 1;
}
&--created,
&--expires {
min-width: 120px;
}
&__name {
font-weight: 700;
}
}
}

1
assets/less/mio/main.less
View file

@ -54,6 +54,7 @@ body {
@import "classes/settings/errors";
@import "classes/settings/account";
@import "classes/settings/avatar";
@import "classes/settings/sessions";
// Forums
@import "classes/forum/listing";

42
views/mio/settings/sessions.twig
View file

@ -1,7 +1,47 @@
{% extends '@mio/settings/master.twig' %}
{% block settings_content %}
<div class="mio__settings__sessions">
{% for session in user_sessions %}
<p>{{ session.session_id }}, {{ session.session_ip.string }}, {{ session.user_agent|default('-') }}, {{ session.session_country }}, {{ session.created_at }}, {{ session.expires_on }}</p>
<div class="mio__settings__sessions__entry" id="session-{{ session.session_id }}">
<div class="mio__settings__sessions__column mio__settings__sessions__column--ip">
<div class="mio__settings__sessions__column__name">
IP
</div>
<div class="mio__settings__sessions__column__value">
{{ session.session_ip.string }} <img class="mio__settings__sessions__country" src="https://static.flash.moe/flags/fff/{{ session.session_country|lower }}.png" alt="{{ session.session_country }}" title="{{ session.session_country|country_name }}">
</div>
</div>
<div class="mio__settings__sessions__column mio__settings__sessions__column--created" onmouseenter="this.children[1].textContent = '{{ session.created_at }}';" onmouseleave="this.children[1].textContent = '{{ session.created_at.diffForHumans }}';">
<div class="mio__settings__sessions__column__name">
Created
</div>
<div class="mio__settings__sessions__column__value">
{{ session.created_at.diffForHumans }}
</div>
</div>
<div class="mio__settings__sessions__column mio__settings__sessions__column--expires" onmouseenter="this.children[1].textContent = '{{ session.expires_on }}';" onmouseleave="this.children[1].textContent = '{{ session.expires_on.diffForHumans }}';">
<div class="mio__settings__sessions__column__name">
Expires
</div>
<div class="mio__settings__sessions__column__value">
{{ session.expires_on.diffForHumans }}
</div>
</div>
{% if session.user_agent|length > 0 %}
<div class="mio__settings__sessions__column mio__settings__sessions__column--user_agent">
<div class="mio__settings__sessions__column__name">
User Agent
</div>
<div class="mio__settings__sessions__column__value">
{{ session.user_agent }}
</div>
</div>
{% endif %}
<div class="mio__settings__sessions__column mio__settings__sessions__column--options">
<button class="mio__input__button mio__settings__sessions__button">Kill</button>
</div>
</div>
{% endfor %}
</div>
{% endblock %}