Added: No-header layout, signup/signin link enhancements, and header design updates

This commit is contained in:
Filip Rojek 2024-12-27 15:05:55 +01:00
parent 4b8ee90d8a
commit 9c90710bf3
12 changed files with 98 additions and 14 deletions

View File

@ -25,10 +25,10 @@ class AuthController extends Controller {
if($result === true) {
$this->redirect('/dashboard');
} else {
$this->view('auth/signin', ['error' => $result]);
$this->view('auth/signin', ['error' => $result], 'noheader');
}
} else {
$this->view('auth/signin', ['title' => 'Log In']);
$this->view('auth/signin', ['title' => 'Log In'], 'noheader');
}
}
@ -54,7 +54,7 @@ class AuthController extends Controller {
$this->view('auth/signup', [
'error' => 'Please correct the errors below.',
'validationErrors' => $validator->errors() ?: [],
]);
], 'noheader');
return;
}
@ -67,13 +67,13 @@ class AuthController extends Controller {
$this->view('auth/signup', [
'error' => $result,
'validationErrors' => [],
]);
], 'noheader');
}
} else {
$this->view('auth/signup', [
'title' => 'Register',
'validationErrors' => [],
]);
], 'noheader');
}
}

View File

@ -25,4 +25,9 @@
<input type="submit" value="Sign In">
</form>
<div class="bordered">
<p>New to Habit Tracker?</p>
<a href="/auth/signup">Create an account</a>
</div>
</section>

View File

@ -37,4 +37,9 @@
<input type="submit" value="Sign Up">
</form>
<div class="bordered">
<p>Already have an account?</p>
<a href="/auth/signin">Sign in</a>
</div>
</section>

View File

@ -10,13 +10,23 @@
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/global.css">
<link rel="stylesheet" href="/css/vars.css">
<link rel="stylesheet" href="/css/header.css">
<link rel="icon" type="image/x-icon" href="/img/favicon.ico">
</head>
<body>
<header>
<a href="/auth/signin">Log In</a>
<a href="/auth/signup">Sign Up</a>
<a href="/auth/logout">Log Out</a>
<div id="hd-left">
<a href="/"><img src="/img/logo.jpg" alt="home"></a>
<a href="/"><?= $data['title'] ?></a>
</div>
<div id="hd-right">
<?php if (!isset($_SESSION['user'])): ?>
<a href="/auth/signin">Log In</a>
<a href="/auth/signup">Sign Up</a>
<?php else: ?>
<a href="/auth/logout">Log Out</a>
<?php endif; ?>
</div>
</header>
<main class="content">
<?= $content ?>

View File

@ -0,0 +1,20 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Filip Rojek | http://filiprojek.cz">
<meta name="email" content="webmaster(@)fofrweb.com">
<meta name="copyright" content="(c) filiprojek.cz">
<title>Habit Tracker | <?= $data['title'] ?></title>
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/global.css">
<link rel="stylesheet" href="/css/vars.css">
<link rel="icon" type="image/x-icon" href="/img/favicon.ico">
</head>
<body>
<main class="content">
<?= $content ?>
</main>
</body>
</html>

View File

@ -16,8 +16,8 @@ class Controller {
* @param string $viewName
* @param array $data
*/
public function view($viewName, $data = []) {
public function view($viewName, $data = [], $layout = "base") {
$view = new View();
$view->render($viewName, $data);
$view->render($viewName, $data, $layout);
}
}

View File

@ -78,7 +78,7 @@ class Router {
} else {
http_response_code(404);
$view = new View();
$view->render('errors/404');
$view->render('errors/404', [], 'noheader');
}
}
}

View File

@ -1,7 +1,6 @@
.dashboard {
display: flex;
flex-direction: column;
width: 100vw;
align-items: center;
}

View File

@ -3,7 +3,6 @@
flex-direction: column;
align-items: center;
justify-content: center;
width: 100vw;
}
body {
@ -59,3 +58,21 @@ select {
.form small.error {
width: 15rem;
}
.form .bordered {
border-radius: var(--border-radious);
border: var(--borderWidth-thin) solid var(--clr-border);
width: 17rem;
padding: 1rem;
margin-top: 1rem;
text-align: center;
}
.form .bordered a {
text-decoration: none;
color: var(--clr-link-blue);
}
.form .bordered a:hover {
text-decoration: underline;
}

26
public/css/header.css Normal file
View File

@ -0,0 +1,26 @@
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2rem;
width: 100vw;
height: 3rem;
background: var(--clr-secondary);
border-radius: var(--border-radious);
border-bottom: var(--borderWidth-thin) solid var(--clr-border);
}
#hd-left,
#hd-right {
display: flex;
align-items: center;
gap: 1rem;
}
header a img {
height: 2rem;
}
header a {
text-decoration: none;
}

View File

@ -6,7 +6,7 @@
main {
display: flex;
gap: 2rem;
flex-direction: column;
margin-top: 2rem;
margin-bottom: 2rem;
padding: 0 var(--container-size);

View File

@ -6,6 +6,8 @@
--clr-green: #238636;
--clr-danger-muted: #f851491a;
--clr-link-blue: #4493f8;
--border-radious: 5px;
--borderWidth-thin: max(1px, 0.0625rem);
--clr-border: #3d444db3;