rodude123/my-portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Created Navbar for the editor #24

Merged
rodude123 merged 1 commits from editor-navbar into master 2022-09-16 17:32:06 +01:00
Conversation 0 Commits 1 Files Changed 10 +124 -13
10 changed files with 124 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/editor/css/main.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/editor/editor.html vendored
View File

@ -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">&times;</a><ul><li><a href="#" class="active"><span>&lt;</span>CV<span>&gt;</span></a></li><li><a href="#"><span>&lt;</span>Projects<span>&gt;</span></a></li><li><a href="#"><span>&lt;</span>Settings<span>&gt;</span></a></li></ul></nav><main class="editor" style="margin-left: 250px;"><div class="title"><span id="navOpen">&#9776;</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
View File

@ -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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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
View File

@ -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"}));

2
src/editor/css/login.css
View File

@ -8,7 +8,7 @@ html, body {
height: 100%; height: 100%;
} }
main { main.login {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

9
src/editor/css/main.css
View File

@ -4,5 +4,12 @@
/*local imports*/ /*local imports*/
@import "../../css/templateStyles.css"; @import "../../css/templateStyles.css";
@import "login.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
View 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;
}

14
src/editor/editor.html
View File

@ -3,9 +3,23 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Editor</title> <title>Editor</title>
<link rel="stylesheet" href="css/main.css">
</head> </head>
<body> <body>
<nav class="sideNav">
<a href="#" class="closeBtn" id="navClose">&times;</a>
<ul>
<li><a href="#" class="active"><span>&lt;</span>CV<span>&gt;</span></a></li>
<li><a href="#"><span>&lt;</span>Projects<span>&gt;</span></a></li>
<li><a href="#"><span>&lt;</span>Settings<span>&gt;</span></a></li>
</ul>
</nav>
<main class="editor" style="margin-left: 250px;">
<div class="title">
<span id="navOpen">&#9776;</span>
<h1>Editor</h1> <h1>Editor</h1>
</div>
</main>
<script src="js/editor.js"></script> <script src="js/editor.js"></script>
</body> </body>

2
src/editor/index.html
View File

@ -8,7 +8,7 @@
<script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script>
</head> </head>
<body> <body>
<main> <main class="login">
<div id="login" class="container shown"> <div id="login" class="container shown">
<h1>Login To Editor</h1> <h1>Login To Editor</h1>

20
src/editor/js/editor.js
View File

@ -1,12 +1,26 @@
document.addEventListener('DOMContentLoaded', e => document.addEventListener('DOMContentLoaded', e =>
{ {
// check if the user is logged in, if not redirect to login // 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) if (!res.ok)
{ {
window.location.href = './'; 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";
});