Add basic styling

This commit is contained in:
Citlali del Rey 2022-11-11 12:18:35 -08:00
parent eb60e6dcc6
commit 7b4b5810bc
Signed by: nullobsi
GPG Key ID: 933A1F44222C2634
5 changed files with 160 additions and 2 deletions

View File

@ -54,6 +54,7 @@ sub startup($self) {
# Normal route to controller
$r->get('/login')->to('Login#login');
$r->get('/my/logout')->to('Login#logout');
$r->post('/auth')->to('Login#auth');
$r->get('/my')->to('Interface#landing');
$r->get('/my/tokens')->to('Interface#token_list');

View File

@ -49,6 +49,7 @@ sub token_list($c) {
if (!defined $uid) {
return $c->redirect_to("/login");
}
$c->stash(uid => $c->session->{uid});
return $c->users->list_tokens($uid)->then(sub ($tokens) {
$c->stash(tokens => $tokens);
@ -62,6 +63,7 @@ sub gen_token_post($c) {
if (!defined $uid) {
return $c->redirect_to("/login");
}
$c->stash(uid => $c->session->{uid});
my $v = $c->validation;
return $c->render('interface/generateToken') unless $v->has_data;
@ -83,6 +85,7 @@ sub gen_token_get($c) {
if (!defined $uid) {
return $c->redirect_to("/login");
}
$c->stash(uid => $c->session->{uid});
return $c->render('interface/generateToken');
}
@ -93,6 +96,7 @@ sub del_token($c) {
if (!defined $uid) {
return $c->redirect_to("/login");
}
$c->stash(uid => $c->session->{uid});
return $c->users->del_token($uid, $c->param('id'))->then(sub {
$c->flash(msg => 'Token deleted.');
@ -303,4 +307,5 @@ sub import_post ($c) {
});
});
}
1;

View File

@ -45,4 +45,9 @@ sub login($c) {
return $c->render();
}
sub logout($c) {
delete $c->session->{uid};
return $c->redirect_to('/login');
}
1;

117
public/css/main.css Normal file
View File

@ -0,0 +1,117 @@
/* Main content */
body {
font-family: monospace;
margin: 0;
background: #080e08;
color: #f6f6f6;
display: flex;
flex-direction: column;
min-height: 100vh;
}
h1, h2 {
color: #4af626;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 10px;
width: 100%;
box-sizing: border-box;
}
/* Header */
header {
background: #3a7920;
color: #f6f6f6;
min-height: 50px;
display: flex;
box-sizing: border-box;
}
#header-content {
max-width: 800px;
margin: auto;
width: 100%;
align-content: center;
flex-direction: row;
display: flex;
padding: 10px;
}
#header-content h1 {
color: #f6f6f6;
margin: auto auto auto 1rem;
}
/* Header nav */
nav {
margin: auto 0 auto auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
nav a {
display: block;
padding: 10px;
}
/* Footer */
footer {
padding: 10px;
max-width: 800px;
width: 100%;
background: #3a7920;
color: #f6f6f6;
margin: auto auto 0;
box-sizing: border-box;
}
/* Misc styling */
a:link {
color: #2cacb0;
}
a:visited {
color: #b4778f;
}
footer a:link, footer a:visited, header a:link, header a:visited {
text-decoration: none;
font-weight: bold;
color: white;
}
footer a:hover, header a:hover {
text-decoration: underline;
}
/* Form */
label.field-with-error {
color: red;
}
/* Light mode */
@media (prefers-color-scheme: light) {
body {
background: #fcfffc;
color: #211c1b;
}
h1, h2 {
color: #4c982a;
}
a:link {
color: #1f7b7e;
}
a:visited {
color: #7c5263;
}
}

View File

@ -1,5 +1,35 @@
<!DOCTYPE html>
<html>
<head><title><%= title %></title></head>
<body><%= content %></body>
<head>
<meta charset="UTF-8">
<title><%= title %></title>
<link rel="stylesheet" href="/css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<div id="header-content">
<h1>IPFS Upload</h1>
<nav>
% if (!defined stash('uid')) {
<a href="/login">Login</a>
% } else {
<a href="/my">My Pins</a>
<a href="/">Upload</a>
% }
</nav>
</div>
</header>
<main>
<%= content %>
</main>
<footer>
<span class="copyleft">&copy;</span> Licensed under AGPL: <a href="https://git.unix.dog/nullobsi/ipfs-upload">Source Code</a>
<br>
% if (defined stash('uid')) {
<a href="/my/logout">Log out</a>
% }
</footer>
</body>
</html>