mirror of
https://github.com/Fluffy-Bean/GameExpo23.git
synced 2025-05-19 01:44:51 +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') {
|
||||
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);
|
||||
|
||||
fetch('/api/tokens', {
|
||||
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'));
|
||||
}
|
||||
function yeetSession(id) {
|
||||
let form = new FormData();
|
||||
form.append('session_id', id);
|
||||
|
||||
fetch('/api/tokens', {
|
||||
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
|
||||
width: 100%
|
||||
|
||||
@media (max-width: 700px)
|
||||
nav, nav > form
|
||||
&.compact
|
||||
flex-direction: column
|
||||
|
||||
.flash
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -1,68 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Front Rooms Highscores</title>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<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') }}">
|
||||
|
||||
<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">
|
||||
<p>Start typing to see results...</p>
|
||||
</div>
|
||||
|
||||
<picture class="background">
|
||||
<source srcset="{{ url_for('static', filename='images/background.webp') }}">
|
||||
<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="flash">
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
{% for category, message in messages %}
|
||||
<p class="{{ category }}" onclick="this.remove()"><span><i class="ph-bold ph-x"></i></span>{{ message }}</p>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
</div>
|
||||
|
||||
<header>
|
||||
<picture class="title">
|
||||
<source srcset="{{ url_for('static', filename='images/title.webp') }}">
|
||||
<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>
|
||||
<a href="{{ url_for('views.about') }}" class="button">About</a>
|
||||
<a href="{{ url_for('views.about') }}" class="button">Updates</a>
|
||||
|
||||
<span class="spacer"></span>
|
||||
|
||||
{% if current_user.is_authenticated %}
|
||||
<a href="{{ url_for('auth.account') }}" class="button primary">{{ current_user.username }}</a>
|
||||
{% else %}
|
||||
<a href="{{ url_for('auth.auth') }}" class="button primary"><i class="ph ph-user-circle"></i></a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
<!-- Secondary nav bar for page specific content -->
|
||||
{% block nav %}{% endblock %}
|
||||
</header>
|
||||
|
||||
<main>{% block content %}{% endblock %}</main>
|
||||
|
||||
<footer><p>By Project Redacted | <a href="https://github.com/Fluffy-Bean/GameExpo23">Server Source</a></p></footer>
|
||||
</div>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Front Rooms Highscores</title>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<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">
|
||||
|
||||
<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 %}
|
||||
</head>
|
||||
<body>
|
||||
<div class="search-hint">
|
||||
<p>Start typing to see results...</p>
|
||||
</div>
|
||||
|
||||
<picture class="background">
|
||||
<source srcset="{{ url_for('static', filename='images/background.webp') }}">
|
||||
<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="flash">
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
{% for category, message in messages %}
|
||||
<p class="{{ category }}" onclick="this.remove()"><span><i class="ph-bold ph-x"></i></span>{{ message }}</p>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
</div>
|
||||
|
||||
<header>
|
||||
<picture class="title">
|
||||
<source srcset="{{ url_for('static', filename='images/title.webp') }}">
|
||||
<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>
|
||||
<a href="{{ url_for('views.about') }}" class="button">About</a>
|
||||
|
||||
<span class="spacer"></span>
|
||||
|
||||
{% if current_user.is_authenticated %}
|
||||
<a href="{{ url_for('auth.account') }}" class="button primary">{{ current_user.username }}</a>
|
||||
{% else %}
|
||||
<a href="{{ url_for('auth.auth') }}" class="button primary"><i class="ph ph-user-circle"></i></a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
<!-- Secondary nav bar for page specific content -->
|
||||
{% block nav %}{% endblock %}
|
||||
</header>
|
||||
|
||||
<main>{% block content %}{% endblock %}</main>
|
||||
|
||||
<footer><p>By Project Redacted | <a href="https://github.com/Fluffy-Bean/GameExpo23">Server Source</a></p></footer>
|
||||
</div>
|
||||
</body>
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue