mirror of
https://github.com/Fluffy-Bean/GameExpo23.git
synced 2025-05-19 09:44:52 +00:00
Split JS files
Reorganise Accounts page Shrink filter options on mobile
This commit is contained in:
parent
f83a9b74e5
commit
26ce573726
7 changed files with 121 additions and 123 deletions
|
Before Width: | Height: | Size: 72 KiB After Width: | Height: | Size: 72 KiB |
12
TFR/server/static/js/flash.js
Normal file
12
TFR/server/static/js/flash.js
Normal file
|
|
@ -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);
|
||||||
|
}
|
||||||
|
|
@ -1,32 +1,19 @@
|
||||||
function addFlashMessage(message, type='success') {
|
function yeetSession(id) {
|
||||||
let flask = document.createElement('p');
|
let form = new FormData();
|
||||||
flask.onclick = () => flask.remove();
|
form.append('session_id', id);
|
||||||
flask.classList.add(type);
|
|
||||||
flask.innerHTML = message;
|
fetch('/api/tokens', {
|
||||||
|
method: 'POST',
|
||||||
let close = document.createElement('span');
|
body: form,
|
||||||
close.innerHTML = '<i class="ph-bold ph-x"></i>';
|
})
|
||||||
|
.then(response => response.json())
|
||||||
flask.appendChild(close);
|
.then(data => {
|
||||||
document.querySelector('.flash').appendChild(flask);
|
if (data.success) {
|
||||||
}
|
addFlashMessage(data.success, 'success');
|
||||||
|
document.querySelector(`#sess-${id}`).remove();
|
||||||
function yeetSession(id) {
|
} else {
|
||||||
let form = new FormData();
|
addFlashMessage(data.error, 'error');
|
||||||
form.append('session_id', id);
|
}
|
||||||
|
})
|
||||||
fetch('/api/tokens', {
|
.catch(error => addFlashMessage(error.error, 'error'));
|
||||||
method: 'POST',
|
}
|
||||||
body: form,
|
|
||||||
})
|
|
||||||
.then(response => response.json())
|
|
||||||
.then(data => {
|
|
||||||
if (data.success) {
|
|
||||||
addFlashMessage(data.success, 'success');
|
|
||||||
document.querySelector(`#sess-${id}`).remove();
|
|
||||||
} else {
|
|
||||||
addFlashMessage(data.error, 'error');
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(error => addFlashMessage(error.error, 'error'));
|
|
||||||
}
|
|
||||||
|
|
@ -140,6 +140,11 @@ nav, nav > form
|
||||||
.spacer
|
.spacer
|
||||||
width: 100%
|
width: 100%
|
||||||
|
|
||||||
|
@media (max-width: 700px)
|
||||||
|
nav, nav > form
|
||||||
|
&.compact
|
||||||
|
flex-direction: column
|
||||||
|
|
||||||
.flash
|
.flash
|
||||||
display: flex
|
display: flex
|
||||||
flex-direction: column
|
flex-direction: column
|
||||||
|
|
|
||||||
|
|
@ -1,30 +1,23 @@
|
||||||
{% extends "base.html" %}
|
{% 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 %}
|
{% block content %}
|
||||||
|
<div class="block">
|
||||||
|
<h2>Hello, {{ current_user.username }}!</h2>
|
||||||
|
<p>Sample text</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="block">
|
<div class="block">
|
||||||
<h2>Sessions</h2>
|
<h2>Sessions</h2>
|
||||||
<p>Devices and games that you logged into, yeet them if it wasn't you who logged in!</p>
|
<p>Devices and games that you logged into. If you're looking to logout all website users, reset your password instead.</p>
|
||||||
{% if sessions %}
|
<table>
|
||||||
<table>
|
{% for session in sessions %}
|
||||||
{% for session in sessions %}
|
<tr id="sess-{{ session.id }}">
|
||||||
<tr id="sess-{{ session.id }}">
|
<td><button onclick="yeetSession({{ session.id }})" class="button secondary"><i class="ph ph-trash"></i></button></td>
|
||||||
<td><button onclick="yeetSession({{ session.id }})" class="button secondary"><i class="ph ph-trash"></i></button></td>
|
<td>{{ session.device_type }}</td>
|
||||||
<td>{{ session.device_type }}</td>
|
<td>{{ session.created_at.strftime('%Y-%m-%d') }}</td>
|
||||||
<td>{{ session.created_at.strftime('%Y-%m-%d') }}</td>
|
<td>{{ session.last_used.strftime('%Y-%m-%d') }}</td>
|
||||||
<td>{{ session.last_used.strftime('%Y-%m-%d') }}</td>
|
</tr>
|
||||||
</tr>
|
{% endfor %}
|
||||||
{% endfor %}
|
</table>
|
||||||
</table>
|
|
||||||
{% else %}
|
|
||||||
<p>No sessions active. If you're looking to logout all website users, reset your password.</p>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="block secondary">
|
<div class="block secondary">
|
||||||
|
|
@ -32,5 +25,6 @@
|
||||||
<p>These actions are irreversible. Be careful!</p>
|
<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='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='password') }}" class="button secondary">Reset Password</a>
|
||||||
|
<a href="{{ url_for('auth.account', action='logout') }}" class="button secondary">Logout</a>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -1,68 +1,68 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>Front Rooms Highscores</title>
|
<title>Front Rooms Highscores</title>
|
||||||
|
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta name=description content="The Front Rooms official website">
|
<meta name=description content="The Front Rooms official website">
|
||||||
<meta name=author content="Project Redacted">
|
<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') }}">
|
||||||
<script src="https://unpkg.com/@phosphor-icons/web"></script>
|
{% assets "styles" %}<link rel="stylesheet" href="{{ ASSET_URL }}" type="text/css">{% endassets %}
|
||||||
{% assets "scripts" %}<script src="{{ ASSET_URL }}"></script>{% endassets %}
|
|
||||||
{% assets "styles" %}<link rel="stylesheet" href="{{ ASSET_URL }}" type="text/css">{% endassets %}
|
<script src="https://unpkg.com/@phosphor-icons/web"></script>
|
||||||
</head>
|
{% assets "scripts" %}<script src="{{ ASSET_URL }}"></script>{% endassets %}
|
||||||
<body>
|
</head>
|
||||||
<div class="search-hint">
|
<body>
|
||||||
<p>Start typing to see results...</p>
|
<div class="search-hint">
|
||||||
</div>
|
<p>Start typing to see results...</p>
|
||||||
|
</div>
|
||||||
<picture class="background">
|
|
||||||
<source srcset="{{ url_for('static', filename='images/background.webp') }}">
|
<picture class="background">
|
||||||
<img src="{{ url_for('static', filename='images/background.png') }}" alt="The Front Rooms Level select render">
|
<source srcset="{{ url_for('static', filename='images/background.webp') }}">
|
||||||
</picture>
|
<img src="{{ url_for('static', filename='images/background.png') }}" alt="The Front Rooms Level select render">
|
||||||
|
</picture>
|
||||||
<div class="app">
|
|
||||||
<!-- Get flashed lol -->
|
<div class="app">
|
||||||
<div class="flash">
|
<!-- Get flashed lol -->
|
||||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
<div class="flash">
|
||||||
{% if messages %}
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||||
{% for category, message in messages %}
|
{% if messages %}
|
||||||
<p class="{{ category }}" onclick="this.remove()"><span><i class="ph-bold ph-x"></i></span>{{ message }}</p>
|
{% for category, message in messages %}
|
||||||
{% endfor %}
|
<p class="{{ category }}" onclick="this.remove()"><span><i class="ph-bold ph-x"></i></span>{{ message }}</p>
|
||||||
{% endif %}
|
{% endfor %}
|
||||||
{% endwith %}
|
{% endif %}
|
||||||
</div>
|
{% endwith %}
|
||||||
|
</div>
|
||||||
<header>
|
|
||||||
<picture class="title">
|
<header>
|
||||||
<source srcset="{{ url_for('static', filename='images/title.webp') }}">
|
<picture class="title">
|
||||||
<img src="{{ url_for('static', filename='images/title.png') }}" alt="The Front Rooms logo">
|
<source srcset="{{ url_for('static', filename='images/title.webp') }}">
|
||||||
</picture>
|
<img src="{{ url_for('static', filename='images/title.png') }}" alt="The Front Rooms logo">
|
||||||
|
</picture>
|
||||||
<nav>
|
|
||||||
<a href="{{ url_for('views.index') }}" class="button">Scores</a>
|
<nav>
|
||||||
<a href="{{ url_for('views.about') }}" class="button">About</a>
|
<a href="{{ url_for('views.index') }}" class="button">Scores</a>
|
||||||
<a href="{{ url_for('views.about') }}" class="button">Updates</a>
|
<a href="{{ url_for('views.about') }}" class="button">About</a>
|
||||||
|
|
||||||
<span class="spacer"></span>
|
<span class="spacer"></span>
|
||||||
|
|
||||||
{% if current_user.is_authenticated %}
|
{% if current_user.is_authenticated %}
|
||||||
<a href="{{ url_for('auth.account') }}" class="button primary">{{ current_user.username }}</a>
|
<a href="{{ url_for('auth.account') }}" class="button primary">{{ current_user.username }}</a>
|
||||||
{% else %}
|
{% else %}
|
||||||
<a href="{{ url_for('auth.auth') }}" class="button primary"><i class="ph ph-user-circle"></i></a>
|
<a href="{{ url_for('auth.auth') }}" class="button primary"><i class="ph ph-user-circle"></i></a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- Secondary nav bar for page specific content -->
|
<!-- Secondary nav bar for page specific content -->
|
||||||
{% block nav %}{% endblock %}
|
{% block nav %}{% endblock %}
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>{% block content %}{% endblock %}</main>
|
<main>{% block content %}{% endblock %}</main>
|
||||||
|
|
||||||
<footer><p>By Project Redacted | <a href="https://github.com/Fluffy-Bean/GameExpo23">Server Source</a></p></footer>
|
<footer><p>By Project Redacted | <a href="https://github.com/Fluffy-Bean/GameExpo23">Server Source</a></p></footer>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
{% block nav %}
|
{% block nav %}
|
||||||
<hr>
|
<hr>
|
||||||
<nav>
|
<nav>
|
||||||
<form method="GET" action="{{ url_for('views.index') }}">
|
<form method="GET" action="{{ url_for('views.index') }}" class="compact">
|
||||||
<select name="diff" class="button">
|
<select name="diff" class="button">
|
||||||
<option value="0" {% if diff==0 %}selected{% endif %}>Level 1</option>
|
<option value="0" {% if diff==0 %}selected{% endif %}>Level 1</option>
|
||||||
<option value="1" {% if diff==1 %}selected{% endif %}>Level 2</option>
|
<option value="1" {% if diff==1 %}selected{% endif %}>Level 2</option>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue