Merge pull request 'Created Navbar for the editor' (#24) from editor-navbar into master

Reviewed-on: #24
2022-09-16 17:32:06 +01:00 · 2022-09-16 17:32:06 +01:00 · c22e7f41b1
commit c22e7f41b1
parent 4428d5b6aa cb1b77c6dc
10 changed files with 124 additions and 13 deletions
--- a/dist/editor/css/main.css
+++ b/dist/editor/css/main.css
--- a/dist/editor/editor.html
+++ b/dist/editor/editor.html
@ -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>
--- a/dist/editor/index.html
+++ b/dist/editor/index.html
@ -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>
--- a/dist/editor/js/editor.js
+++ b/dist/editor/js/editor.js
@ -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"}));
--- a/src/editor/css/login.css
+++ b/src/editor/css/login.css
@ -8,7 +8,7 @@ html, body {
    height: 100%;
 }

-main {
+main.login {
    height: 100%;
    display: flex;
    flex-direction: column;
--- a/src/editor/css/main.css
+++ b/src/editor/css/main.css
@ -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;
+    }
+}
--- a/src/editor/css/nav.css
+++ b/src/editor/css/nav.css
@ -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;
+}
--- a/src/editor/editor.html
+++ b/src/editor/editor.html
@ -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">&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>
+    </main>
    
    <script src="js/editor.js"></script>
 </body>
--- a/src/editor/index.html
+++ b/src/editor/index.html
@ -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>
        
--- a/src/editor/js/editor.js
+++ b/src/editor/js/editor.js
@ -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";
+});