mirror of
https://github.com/Fluffy-Bean/GameExpo23.git
synced 2025-05-14 14:22:16 +00:00
Consistent styling on login screen
Adjustment of the way sessions are displayed Removing useless styling
This commit is contained in:
parent
26ce573726
commit
22b5fa13fb
7 changed files with 101 additions and 135 deletions
|
|
@ -1,5 +1,5 @@
|
|||
function showHint() {
|
||||
let search = document.querySelector('.search > input');
|
||||
let search = document.querySelector('#search');
|
||||
let searchPos = search.getBoundingClientRect();
|
||||
let hint = document.querySelector('.search-hint');
|
||||
|
||||
|
|
@ -18,7 +18,7 @@ function hideHint() {
|
|||
|
||||
|
||||
function updateHint() {
|
||||
let search = document.querySelector('.search > input');
|
||||
let search = document.querySelector('#search');
|
||||
let searchPos = search.getBoundingClientRect();
|
||||
let hint = document.querySelector('.search-hint');
|
||||
|
||||
|
|
@ -29,7 +29,7 @@ function updateHint() {
|
|||
|
||||
|
||||
function getSearch() {
|
||||
let search = document.querySelector('.search > input').value;
|
||||
let search = document.querySelector('#search').value;
|
||||
let hint = document.querySelector('.search-hint');
|
||||
|
||||
if (search.length === 0) {
|
||||
|
|
@ -54,7 +54,7 @@ function getSearch() {
|
|||
el.innerHTML = user;
|
||||
el.onmousedown = function (event) {
|
||||
event.preventDefault();
|
||||
search = document.querySelector('.search > input');
|
||||
search = document.querySelector('#search');
|
||||
search.value = user.toString();
|
||||
search.blur();
|
||||
}
|
||||
|
|
@ -69,7 +69,7 @@ function getSearch() {
|
|||
|
||||
window.onload = () => {
|
||||
let typingTimer;
|
||||
let search = document.querySelector('.search > input');
|
||||
let search = document.querySelector('#search');
|
||||
|
||||
if (search === null) {
|
||||
return;
|
||||
|
|
|
|||
30
TFR/server/static/sass/block.sass
Normal file
30
TFR/server/static/sass/block.sass
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
.block
|
||||
margin-bottom: 1rem
|
||||
padding: 1rem
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
background-color: rgba($black, 0.5)
|
||||
border-radius: 2px
|
||||
border: 1px solid RGBA(var(--white),0.05)
|
||||
|
||||
> h2
|
||||
margin: 0 0 0.2rem 0
|
||||
font-size: 1.3em
|
||||
color: RGB($white)
|
||||
|
||||
> p
|
||||
margin: 0 0 1rem 0
|
||||
font-size: 1em
|
||||
|
||||
&.secondary
|
||||
border: 1px solid RGB($secondary)
|
||||
|
||||
> h2
|
||||
color: RGB($secondary)
|
||||
|
||||
form
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 0.5rem
|
||||
|
|
@ -4,7 +4,6 @@
|
|||
|
||||
display: flex
|
||||
align-items: center
|
||||
gap: 0.5rem
|
||||
|
||||
text-decoration: none
|
||||
white-space: nowrap
|
||||
|
|
@ -39,7 +38,7 @@
|
|||
font-size: 1.25em
|
||||
display: block
|
||||
|
||||
.search
|
||||
.text-input
|
||||
margin: auto 0
|
||||
width: 100%
|
||||
|
||||
|
|
@ -49,6 +48,7 @@
|
|||
|
||||
> label
|
||||
padding: 0.5rem 0.7rem
|
||||
min-width: 6rem
|
||||
|
||||
text-decoration: none
|
||||
white-space: nowrap
|
||||
|
|
@ -59,13 +59,9 @@
|
|||
border-radius: 2px 0 0 2px
|
||||
|
||||
> input
|
||||
margin: 0
|
||||
padding: 0.5rem 0.7rem
|
||||
|
||||
width: 100%
|
||||
|
||||
text-decoration: none
|
||||
white-space: nowrap
|
||||
font-size: 0.9em
|
||||
|
||||
background-color: RGBA($white, 0.02)
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ $bronze: var(--bronze)
|
|||
--bronze: 193, 145, 69
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700&display=swap')
|
||||
@import "block"
|
||||
@import "button"
|
||||
@import "hint"
|
||||
|
||||
|
|
@ -57,15 +58,16 @@ body
|
|||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
background-color: rgba($black, 0.4)
|
||||
background-color: rgba($black, 0.5)
|
||||
backdrop-filter: blur(5px)
|
||||
z-index: 2
|
||||
|
||||
.table
|
||||
width: 100%
|
||||
height: auto
|
||||
background-color: rgba($black, 0.7)
|
||||
background-color: rgba($black, 0.5)
|
||||
border-radius: 2px
|
||||
border: 1px solid RGBA(var(--white),0.05)
|
||||
overflow: hidden
|
||||
|
||||
> table
|
||||
|
|
@ -248,108 +250,13 @@ main
|
|||
max-height: 15rem
|
||||
border-radius: 2px
|
||||
|
||||
.block
|
||||
margin-bottom: 1rem
|
||||
padding: 1rem
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
background-color: rgba($black, 0.7)
|
||||
border-radius: 2px
|
||||
|
||||
> h2
|
||||
margin: 0 0 0.2rem 0
|
||||
font-size: 1.3em
|
||||
color: RGB($white)
|
||||
|
||||
> p
|
||||
margin: 0 0 1rem 0
|
||||
font-size: 1em
|
||||
|
||||
> table
|
||||
width: 100%
|
||||
border-collapse: collapse
|
||||
> tbody > tr > td
|
||||
padding: 0 0.5rem 0.5rem 0
|
||||
|
||||
text-align: left
|
||||
font-size: 0.9em
|
||||
|
||||
color: RGB($white)
|
||||
|
||||
transition: filter 0.2s ease-in-out
|
||||
|
||||
&:last-child
|
||||
width: 100%
|
||||
|
||||
&.hidden
|
||||
filter: blur(5px)
|
||||
|
||||
&.secondary
|
||||
border: 1px solid RGB($secondary)
|
||||
|
||||
> h2
|
||||
color: RGB($secondary)
|
||||
|
||||
form
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
> input
|
||||
margin: 0 0 1rem 0
|
||||
padding: 0.7rem 1rem
|
||||
|
||||
border: 1px solid RGB($white)
|
||||
border-radius: 2px
|
||||
|
||||
background-color: RGB($black)
|
||||
color: RGB($white)
|
||||
|
||||
&:focus
|
||||
outline: none
|
||||
border-color: RGB($primary)
|
||||
|
||||
&.error
|
||||
border-color: RGB($secondary)
|
||||
|
||||
> button
|
||||
margin: 0
|
||||
padding: 0.75rem 1rem
|
||||
|
||||
font-weight: bolder
|
||||
|
||||
border: transparent
|
||||
border-radius: 2px
|
||||
|
||||
background-color: RGB($primary)
|
||||
color: RGB($black)
|
||||
|
||||
&:focus-visible, &:hover
|
||||
outline: none
|
||||
background-color: RGBA($primary, 0.3)
|
||||
color: RGB($primary)
|
||||
|
||||
&.disabled
|
||||
pointer-events: none
|
||||
opacity: 0.5
|
||||
|
||||
&.secondary
|
||||
background-color: RGB($secondary)
|
||||
color: RGB($black)
|
||||
|
||||
&:focus-visible, &:hover
|
||||
background-color: RGBA($secondary, 0.3)
|
||||
color: RGB($secondary)
|
||||
|
||||
footer
|
||||
padding: 0.5rem 1rem
|
||||
width: 100%
|
||||
display: flex
|
||||
flex-direction: row
|
||||
background-image: linear-gradient(to top, RGB(var(--black)), transparent)
|
||||
|
||||
> p
|
||||
p
|
||||
margin: 0
|
||||
width: 100%
|
||||
text-align: center
|
||||
|
|
@ -357,9 +264,9 @@ footer
|
|||
white-space: nowrap
|
||||
color: RGB($white)
|
||||
|
||||
> a
|
||||
color: RGB($secondary)
|
||||
text-decoration: none
|
||||
a
|
||||
color: RGB($secondary)
|
||||
text-decoration: none
|
||||
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
|
|
@ -8,23 +8,40 @@
|
|||
<div class="block">
|
||||
<h2>Sessions</h2>
|
||||
<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>
|
||||
<div class="table">
|
||||
<table>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Device</th>
|
||||
<th>Created</th>
|
||||
<th>Last Used</th>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
{% if sessions %}
|
||||
{% 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 %}
|
||||
{% else %}
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block secondary">
|
||||
<h2>Danger Zone</h2>
|
||||
<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>
|
||||
<p>Be careful!</p>
|
||||
<a href="{{ url_for('auth.account', action='delete') }}" class="button secondary" style="margin-bottom: 0.5rem">Delete Account</a>
|
||||
<a href="{{ url_for('auth.account', action='password') }}" class="button secondary" style="margin-bottom: 0.5rem">Reset Password</a>
|
||||
<a href="{{ url_for('auth.account', action='logout') }}" class="button secondary">Logout</a>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -4,9 +4,17 @@
|
|||
<h2>Login</h2>
|
||||
<p>Welcome back!</p>
|
||||
<form action="{{ url_for('auth.login') }}" method="POST">
|
||||
<input type="text" name="username" placeholder="Username" required>
|
||||
<input type="password" name="password" placeholder="Password" required>
|
||||
<button type="submit">Login</button>
|
||||
<span class="text-input">
|
||||
<label for="login-username">Username</label>
|
||||
<input type="text" name="username" placeholder="Jerry" id="login-username" required>
|
||||
</span>
|
||||
|
||||
<span class="text-input">
|
||||
<label for="login-password">Password</label>
|
||||
<input type="password" name="password" placeholder="password123" id="login-password" required>
|
||||
</span>
|
||||
|
||||
<button type="submit" class="button primary">Login</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
|
@ -14,9 +22,17 @@
|
|||
<h2>Register</h2>
|
||||
<p>Don't have an account? Register here!</p>
|
||||
<form action="{{ url_for('auth.register') }}" method="POST">
|
||||
<input type="text" name="username" placeholder="Username" required>
|
||||
<input type="password" name="password" placeholder="Password" required>
|
||||
<button type="submit">Register</button>
|
||||
<span class="text-input">
|
||||
<label for="register-username">Username</label>
|
||||
<input type="text" name="username" placeholder="Jerry" id="register-username" required>
|
||||
</span>
|
||||
|
||||
<span class="text-input">
|
||||
<label for="register-password">Password</label>
|
||||
<input type="password" name="password" placeholder="password123" id="register-password" required>
|
||||
</span>
|
||||
|
||||
<button type="submit" class="button primary">Register</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -18,9 +18,9 @@
|
|||
<option value="1.1" {% if ver=="1.1" %}selected{% endif %}>1.1</option>
|
||||
</select>
|
||||
|
||||
<span class="search">
|
||||
<label for="user">Username</label>
|
||||
<input type="text" name="user" {% if user %}value="{{ user }}"{% endif %} autocomplete="off"/>
|
||||
<span class="text-input">
|
||||
<label for="search">Username</label>
|
||||
<input type="text" name="user" id="search" {% if user %}value="{{ user }}"{% endif %} autocomplete="off"/>
|
||||
</span>
|
||||
|
||||
<button class="button"><i class="ph ph-magnifying-glass"></i></button>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue