Created Navbar for the editor #24
2
dist/editor/css/main.css
vendored
2
dist/editor/css/main.css
vendored
File diff suppressed because one or more lines are too long
2
dist/editor/editor.html
vendored
2
dist/editor/editor.html
vendored
@ -1 +1 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Editor</title></head><body><h1>Editor</h1><script src="js/editor.js"></script></body></html>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Editor</title><link rel="stylesheet" href="css/main.css"></head><body><nav class="sideNav"><a href="#" class="closeBtn" id="navClose">×</a><ul><li><a href="#" class="active"><span><</span>CV<span>></span></a></li><li><a href="#"><span><</span>Projects<span>></span></a></li><li><a href="#"><span><</span>Settings<span>></span></a></li></ul></nav><main class="editor" style="margin-left: 250px;"><div class="title"><span id="navOpen">☰</span><h1>Editor</h1></div><section id="curriculumVitae"></section><section id="projects"></section><section id="settings"></section></main><script src="js/editor.js"></script></body></html>
|
||||
2
dist/editor/index.html
vendored
2
dist/editor/index.html
vendored
@ -1 +1 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Editor</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script></head><body><main><div id="login" class="container shown"><h1>Login To Editor</h1><form action="" method="POST"><div class="formControl"><label for="username">Username</label> <input type="text" id="username" name="username" required></div><div class="formControl"><label for="password">Password</label> <input type="password" id="password" name="password" required> <i class="fa-solid fa-eye"></i></div><div class="error hidden" id="loginError"><button class="close" type="button">×</button><div></div></div><div class="btnContainer"><input type="submit" value="Submit" class="btn btnPrimary boxShadowIn boxShadowOut"> <a href="#" id="resetPwd">Reset Password</a></div></form></div><div id="resetPassword" class="container" style="display: none; transform: translateX(150vw)"><h1>Reset Password</h1><form action="#" method="POST"><div class="formControl"><label for="email">Email</label> <input type="email" id="email" name="email"></div><div class="error hidden" id="resetError"><button class="close" type="button">×</button><div></div></div><div class="btnContainer"><input type="submit" value="Submit" class="btn btnPrimary boxShadowIn boxShadowOut"> <a href="#" class="loginBtn btn btnPrimary boxShadowIn boxShadowOut" id="loginBtn">Login</a></div></form></div><div id="checkResetCode" class="container" style="display: none; transform: translateX(150vw)"><h1>Check Reset Code</h1><form action="#" method="POST"><div class="formControl"><label for="code">Code</label> <input type="text" id="code" name="code"></div><div class="error hidden" id="resetCodeError"><button class="close" type="button">×</button><div></div></div><div class="btnContainer"><input type="submit" value="Submit" class="btn btnPrimary boxShadowIn boxShadowOut"> <a href="#" class="loginBtn btn btnPrimary boxShadowIn boxShadowOut" id="resendEmail">Resend Email</a></div></form></div><div id="changePassword" class="container" style="display: none; transform: translateX(150vw)"><h1>Reset Password</h1><form action="" method="POST"><div class="formControl"><label for="pass">Password</label> <input type="password" name="pass" id="pass"> <i class="fa-solid fa-eye"></i></div><div class="formControl"><label for="rePass">Password</label> <input type="password" name="rePass" id="rePass"> <i class="fa-solid fa-eye"></i></div><div class="error hidden" id="changeError"><button class="close" type="button">×</button><div></div></div><div class="btnContainer"><input type="submit" value="Submit" class="btn btnPrimary boxShadowIn boxShadowOut"> <a href="#" class="loginBtn btn btnPrimary boxShadowIn boxShadowOut">Login</a></div></form></div></main><script src="js/index.js"></script></body></html>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Editor</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script></head><body><main class="login"><div id="login" class="container shown"><h1>Login To Editor</h1><form action="" method="POST"><div class="formControl"><label for="username">Username</label> <input type="text" id="username" name="username" required></div><div class="formControl"><label for="password">Password</label> <input type="password" id="password" name="password" required> <i class="fa-solid fa-eye"></i></div><div class="error hidden" id="loginError"><button class="close" type="button">×</button><div></div></div><div class="btnContainer"><input type="submit" value="Submit" class="btn btnPrimary boxShadowIn boxShadowOut"> <a href="#" id="resetPwd">Reset Password</a></div></form></div><div id="resetPassword" class="container" style="display: none; transform: translateX(150vw)"><h1>Reset Password</h1><form action="#" method="POST"><div class="formControl"><label for="email">Email</label> <input type="email" id="email" name="email"></div><div class="error hidden" id="resetError"><button class="close" type="button">×</button><div></div></div><div class="btnContainer"><input type="submit" value="Submit" class="btn btnPrimary boxShadowIn boxShadowOut"> <a href="#" class="loginBtn btn btnPrimary boxShadowIn boxShadowOut" id="loginBtn">Login</a></div></form></div><div id="checkResetCode" class="container" style="display: none; transform: translateX(150vw)"><h1>Check Reset Code</h1><form action="#" method="POST"><div class="formControl"><label for="code">Code</label> <input type="text" id="code" name="code"></div><div class="error hidden" id="resetCodeError"><button class="close" type="button">×</button><div></div></div><div class="btnContainer"><input type="submit" value="Submit" class="btn btnPrimary boxShadowIn boxShadowOut"> <a href="#" class="loginBtn btn btnPrimary boxShadowIn boxShadowOut" id="resendEmail">Resend Email</a></div></form></div><div id="changePassword" class="container" style="display: none; transform: translateX(150vw)"><h1>Reset Password</h1><form action="" method="POST"><div class="formControl"><label for="pass">Password</label> <input type="password" name="pass" id="pass"> <i class="fa-solid fa-eye"></i></div><div class="formControl"><label for="rePass">Password</label> <input type="password" name="rePass" id="rePass"> <i class="fa-solid fa-eye"></i></div><div class="error hidden" id="changeError"><button class="close" type="button">×</button><div></div></div><div class="btnContainer"><input type="submit" value="Submit" class="btn btnPrimary boxShadowIn boxShadowOut"> <a href="#" class="loginBtn btn btnPrimary boxShadowIn boxShadowOut">Login</a></div></form></div></main><script src="js/index.js"></script></body></html>
|
||||
2
dist/editor/js/editor.js
vendored
2
dist/editor/js/editor.js
vendored
@ -1 +1 @@
|
||||
document.addEventListener("DOMContentLoaded",(e=>{fetch("/api/user/isLoggedIn").then((e=>{e.ok||(window.location.href="./")}))}));
|
||||
document.addEventListener("DOMContentLoaded",(e=>{})),document.querySelector("#navOpen").addEventListener("click",(e=>{document.querySelector("nav.sideNav").style.removeProperty("width"),document.querySelector("main.editor").style.removeProperty("margin-left"),e.target.style.removeProperty("visibility")})),document.querySelector("#navClose").addEventListener("click",(e=>{document.querySelector("nav.sideNav").style.width="0",document.querySelector("main.editor").style.marginLeft="0",document.querySelector("#navOpen").style.visibility="visible"}));
|
||||
@ -8,7 +8,7 @@ html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
main {
|
||||
main.login {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -4,5 +4,12 @@
|
||||
/*local imports*/
|
||||
@import "../../css/templateStyles.css";
|
||||
@import "login.css";
|
||||
@import "nav.css";
|
||||
|
||||
/*other styles*/
|
||||
/*** Media Queries ***/
|
||||
|
||||
@media only screen and (max-width: 75em) {
|
||||
nav.sideNav .closeBtn {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
76
src/editor/css/nav.css
Normal file
76
src/editor/css/nav.css
Normal file
@ -0,0 +1,76 @@
|
||||
/*** Editor Nav styles ***/
|
||||
nav {
|
||||
font-size: var(--headingFS);
|
||||
}
|
||||
|
||||
nav.sideNav {
|
||||
height: 100%;
|
||||
width: 250px;
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: var(--primaryHover);
|
||||
overflow-x: hidden;
|
||||
-webkit-transition: 0.5s;
|
||||
-moz-transition: 0.5s;
|
||||
-ms-transition: 0.5s;
|
||||
-o-transition: 0.5s;
|
||||
transition: 0.5s;
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
nav.sideNav ul li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
nav.sideNav a {
|
||||
padding: 8px 8px 8px 0;
|
||||
text-decoration: none;
|
||||
color: #FFFFFF;
|
||||
display: block;
|
||||
-webkit-transition: 0.3s;
|
||||
-moz-transition: 0.3s;
|
||||
-ms-transition: 0.3s;
|
||||
-o-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
nav.sideNav .closeBtn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 25px;
|
||||
margin-left: 50px;
|
||||
font-size: var(--titleFS);
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav.sideNav ul li span {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
nav.sideNav ul li a:hover span, nav.sideNav ul li .active span {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
span#navOpen {
|
||||
font-size: var(--titleFS);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
main.editor {
|
||||
margin-left: 250px;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#navOpen {
|
||||
visibility: hidden;
|
||||
padding-left: 0.25em;
|
||||
align-self: flex-start;
|
||||
}
|
||||
@ -3,9 +3,23 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Editor</title>
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="sideNav">
|
||||
<a href="#" class="closeBtn" id="navClose">×</a>
|
||||
<ul>
|
||||
<li><a href="#" class="active"><span><</span>CV<span>></span></a></li>
|
||||
<li><a href="#"><span><</span>Projects<span>></span></a></li>
|
||||
<li><a href="#"><span><</span>Settings<span>></span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main class="editor" style="margin-left: 250px;">
|
||||
<div class="title">
|
||||
<span id="navOpen">☰</span>
|
||||
<h1>Editor</h1>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="js/editor.js"></script>
|
||||
</body>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<main class="login">
|
||||
<div id="login" class="container shown">
|
||||
<h1>Login To Editor</h1>
|
||||
|
||||
|
||||
@ -2,11 +2,25 @@
|
||||
document.addEventListener('DOMContentLoaded', e =>
|
||||
{
|
||||
// check if the user is logged in, if not redirect to log in
|
||||
fetch('/api/user/isLoggedIn').then(res =>
|
||||
/* fetch('/api/user/isLoggedIn').then(res =>
|
||||
{
|
||||
if (!res.ok)
|
||||
{
|
||||
window.location.href = './';
|
||||
}
|
||||
});
|
||||
});*/
|
||||
})
|
||||
|
||||
document.querySelector("#navOpen").addEventListener("click", e =>
|
||||
{
|
||||
document.querySelector("nav.sideNav").style.removeProperty("width");
|
||||
document.querySelector("main.editor").style.removeProperty("margin-left");
|
||||
e.target.style.removeProperty("visibility");
|
||||
});
|
||||
|
||||
document.querySelector("#navClose").addEventListener("click", e =>
|
||||
{
|
||||
document.querySelector("nav.sideNav").style.width = "0";
|
||||
document.querySelector("main.editor").style.marginLeft = "0";
|
||||
document.querySelector("#navOpen").style.visibility = "visible";
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user