Split JS files

Reorganise Accounts page
Shrink filter options on mobile

TFR/server/static/js/flash.js

@@ -0,0 +1,12 @@
+function addFlashMessage(message, type='success') {
+    let flask = document.createElement('p');
+    flask.onclick = () => flask.remove();
+    flask.classList.add(type);
+    flask.innerHTML = message;
+
+    let close = document.createElement('span');
+    close.innerHTML = '<i class="ph-bold ph-x"></i>';
+
+    flask.appendChild(close);
+    document.querySelector('.flash').appendChild(flask);
+}

TFR/server/static/js/sessions.js

@@ -1,16 +1,3 @@
-function addFlashMessage(message, type='success') {
-    let flask = document.createElement('p');
-    flask.onclick = () => flask.remove();
-    flask.classList.add(type);
-    flask.innerHTML = message;
-
-    let close = document.createElement('span');
-    close.innerHTML = '<i class="ph-bold ph-x"></i>';
-
-    flask.appendChild(close);
-    document.querySelector('.flash').appendChild(flask);
-}
-
 function yeetSession(id) {
     let form = new FormData();
     form.append('session_id', id);

TFR/server/static/sass/style.sass

@@ -140,6 +140,11 @@ nav, nav > form
 	.spacer
 		width: 100%
 
+@media (max-width: 700px)
+	nav, nav > form
+		&.compact
+			flex-direction: column
+
 .flash
 	display: flex
 	flex-direction: column

TFR/server/templates/account.html

@@ -1,30 +1,23 @@
 {% extends "base.html" %}
-{% block nav %}
-    <hr>
-    <nav>
-        <a href="{{ url_for('auth.account', action='logout') }}" class="button">Your Profile</a>
-        <span class="spacer"></span>
-        <a href="{{ url_for('auth.account', action='logout') }}" class="button secondary">Logout</a>
-    </nav>
-{% endblock %}
 {% block content %}
+    <div class="block">
+        <h2>Hello, {{ current_user.username }}!</h2>
+        <p>Sample text</p>
+    </div>
+
     <div class="block">
         <h2>Sessions</h2>
-        <p>Devices and games that you logged into, yeet them if it wasn't you who logged in!</p>
-        {% if sessions %}
-            <table>
-                {% for session in sessions %}
-                    <tr id="sess-{{ session.id }}">
-                        <td><button onclick="yeetSession({{ session.id }})" class="button secondary"><i class="ph ph-trash"></i></button></td>
-                        <td>{{ session.device_type }}</td>
-                        <td>{{ session.created_at.strftime('%Y-%m-%d') }}</td>
-                        <td>{{ session.last_used.strftime('%Y-%m-%d') }}</td>
-                    </tr>
-                {% endfor %}
-            </table>
-        {% else %}
-            <p>No sessions active. If you're looking to logout all website users, reset your password.</p>
-        {% endif %}
+        <p>Devices and games that you logged into. If you're looking to logout all website users, reset your password instead.</p>
+        <table>
+            {% for session in sessions %}
+                <tr id="sess-{{ session.id }}">
+                    <td><button onclick="yeetSession({{ session.id }})" class="button secondary"><i class="ph ph-trash"></i></button></td>
+                    <td>{{ session.device_type }}</td>
+                    <td>{{ session.created_at.strftime('%Y-%m-%d') }}</td>
+                    <td>{{ session.last_used.strftime('%Y-%m-%d') }}</td>
+                </tr>
+            {% endfor %}
+        </table>
     </div>
 
     <div class="block secondary">
@@ -32,5 +25,6 @@
         <p>These actions are irreversible. Be careful!</p>
         <a href="{{ url_for('auth.account', action='delete') }}" class="button secondary">Delete Account</a>
         <a href="{{ url_for('auth.account', action='password') }}" class="button secondary">Reset Password</a>
+        <a href="{{ url_for('auth.account', action='logout') }}" class="button secondary">Logout</a>
     </div>
 {% endblock %}

TFR/server/templates/base.html

@@ -8,11 +8,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name=description content="The Front Rooms official website">
     <meta name=author content="Project Redacted">
-    <meta name="favicon" content="{{ url_for('static', filename='images/icon.png') }}">
+
+    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='images/icon.png') }}">
+    {% assets "styles" %}<link rel="stylesheet" href="{{ ASSET_URL }}" type="text/css">{% endassets %}
 
     <script src="https://unpkg.com/@phosphor-icons/web"></script>
     {% assets "scripts" %}<script src="{{ ASSET_URL }}"></script>{% endassets %}
-    {% assets "styles" %}<link rel="stylesheet" href="{{ ASSET_URL }}" type="text/css">{% endassets %}
 </head>
 <body>
     <div class="search-hint">
@@ -45,7 +46,6 @@
             <nav>
                 <a href="{{ url_for('views.index') }}" class="button">Scores</a>
                 <a href="{{ url_for('views.about') }}" class="button">About</a>
-                <a href="{{ url_for('views.about') }}" class="button">Updates</a>
 
                 <span class="spacer"></span>
 

TFR/server/templates/scores.html

@@ -2,7 +2,7 @@
 {% block nav %}
     <hr>
     <nav>
-        <form method="GET" action="{{ url_for('views.index') }}">
+        <form method="GET" action="{{ url_for('views.index') }}" class="compact">
             <select name="diff" class="button">
                 <option value="0" {% if diff==0 %}selected{% endif %}>Level 1</option>
                 <option value="1" {% if diff==1 %}selected{% endif %}>Level 2</option>