Merge pull request #57 from TheSecretOrganization/updateCss

Fix 404 missing route & Little update of css
TheSecretOrganization · Aug 29, 2024 · 955f816 · 955f816
2 parents 91d8c98 + 5e06913
commit 955f816
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 74 deletions.
diff --git a/django/src/pages/templates/404.html b/django/src/pages/templates/404.html
@@ -1 +1,5 @@
-<p>Page not found</p>
+<div class="h-100 d-flex align-items-center justify-content-center">
+    <div>
+        <p>Page not found</p>
+    </div>
+</div>
diff --git a/django/src/pages/templates/games.html b/django/src/pages/templates/games.html
@@ -1,11 +1,11 @@
-<div id="gameSelection">
-    <button id="pongBtn" class="btn btn-secondary gameBtn">Pong</button>
-    <button id="game2Btn" class="btn btn-secondary gameBtn">Tic-Tac-Toe</button>
+<div id="gameSelection" class="d-flex justify-content-center">
+    <button id="pongBtn" class="btn btn-secondary">Pong</button>
+    <button id="game2Btn" class="btn btn-secondary">Tic-Tac-Toe</button>
 </div>
 <div id="game">
-    <button id="backBtn" class="btn btn-dark gameBtn">Back</button>
-    <div class="container-fluid center-content">
+    <button id="backBtn" class="btn btn-dark">Back</button>
+    <div class="center-content">
         <canvas id="gameCanvas" width="800" height="600"></canvas>
     </div>
 </div>
-<div id="gameAgain" class="container-fluid center-content"></div>
+<div id="gameAgain" class="center-content"></div>
diff --git a/django/src/pages/templates/index.html b/django/src/pages/templates/index.html
@@ -1,3 +1,5 @@
-<div class="container-fluid center-content">
-    <p>This is Index</p>
+<div class="h-100 d-flex align-items-center justify-content-center">
+    <div>
+        <p>This is Index</p>
+    </div>
 </div>
diff --git a/django/src/pages/urls.py b/django/src/pages/urls.py
@@ -4,4 +4,5 @@
 urlpatterns = [
 	path('index/', views.index),
 	path('games/', views.games),
+    path('404/', views.error_404),
 ]
diff --git a/django/src/pages/views.py b/django/src/pages/views.py
@@ -24,3 +24,7 @@ def index(request):
 @require_GET
 def games(request):
 	return create_response(request, 'games.html')
+
+@require_GET
+def error_404(request):
+	return create_response(request, '404.html')
diff --git a/nginx/src/css/styles.css b/nginx/src/css/styles.css
@@ -1,52 +1,79 @@
-#wrapper {
-    width: 100%;
+/* General */
+html {
+    box-sizing: border-box;
+    font-size: 100%;
     height: 100%;
-    display: flex;
-    align-items: stretch;
+    scroll-behavior: smooth;
 }
 
-#sidebar-wrapper {
-    height: 100vh;
-    min-width: 250px;
-    max-width: 250px;
-    transition: all 0.3s ease;
-    text-align: center;
+*, *::before, *::after {
+    box-sizing: inherit;
 }
 
-.sidebar-heading {
-    padding: 1rem;
-    font-size: 1.5rem;
-    text-align: center;
+body {
+    min-height: 100%;
+    line-height: 1.5;
+    margin: 0;
+    padding: 0;
+    font-family: 'Arial', sans-serif;
+    background-color: #f5f5f5;
+    color: #333;
 }
 
 .list-group-item {
-    padding: 1rem 1.5rem;
+    padding: 10px;
+    cursor: pointer;
     text-align: center;
 }
 
-#wrapper.toggled #sidebar-wrapper {
-    margin-left: -250px;
+.list-group-item.active {
+    background-color: #007bff;
+    color: white;
 }
 
-#menu-toggle {
-    margin: 5px;
+/* Page Content */
+#page-container-wrapper {
+    position: relative;
 }
 
-#page-content-wrapper {
-    width: 100%;
-    padding: 15px;
+/* Sidebar Toggle */
+#sidebar-toggle {
+    position: fixed;
+    top: 1rem;
+    left: 1rem;
+    font-size: 20px;
+    z-index: 1050;
+    transition: all 0.3s ease;
 }
 
-.container-fluid.center-content {
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+#sidebar-toggle.toggled {
+    margin-left: 250px;
 }
 
-#gameSelection {
-    display: block;
-    margin-block: 5px;
+/* Sidebar */
+#sidebar-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 250px;
+    border-radius: 0 5px 5px 0;
+    transition: all 0.3s ease;
+    z-index: 1000;
+    text-align: center;
+}
+
+#sidebar-wrapper.toggled {
+    margin-left: -250px;
+}
+
+#sidebar-wrapper .sidebar-heading {
+    padding: 1rem;
+    font-size: 1.5rem;
+}
+
+#sidebar-wrapper .list-group-item {
+    padding: 1rem 1.5rem;
 }
 
 #game {
@@ -58,7 +85,3 @@
     background-color: black;
     border: 3px solid lightskyblue;
 }
-
-.gameBtn {
-    margin: 5px;
-}
diff --git a/nginx/src/index.html b/nginx/src/index.html
@@ -12,18 +12,18 @@
 </head>
 
 <body>
-	<div id="wrapper" class="d-flex">
-		<div id="sidebar-wrapper" class="bg-light border-right">
+	<div id="wrapper">
+		<div id="sidebar-wrapper" class="bg-light border toggled">
 			<div class="sidebar-heading">ft_transcendence</div>
-			<div class="list-group list-group-flush">
-				<a href="/" class="list-group-item list-group-item-action bg-light" data-route>Home</a>
-				<a href="/games" class="list-group-item list-group-item-action bg-light" data-route>Games</a>
-			</div>
+			<ul id="sidebar-list" class="list-group list-group-flush">
+				<li class="list-group-item list-group-item-action" data-route="/">Home</li>
+				<li class="list-group-item list-group-item-action" data-route="/games">Games</li>
+			</ul>
 		</div>
 
-		<div id="page-content-wrapper">
-			<button id="menu-toggle" class="btn btn-primary">Menu</button>
-			<div id="page">
+		<div id="page-container-wrapper">
+			<button id="sidebar-toggle" class="btn btn-primary">☰</button>
+			<div id="page-container">
 			</div>
 		</div>
 	</div>

diff --git a/nginx/src/js/router.js b/nginx/src/js/router.js
@@ -1,6 +1,6 @@
-function route(event) {
-    event.preventDefault();
-    window.history.pushState({}, "", event.target.href);
+function route(e) {
+    e.preventDefault();
+    window.history.pushState({}, "", e.target.getAttribute('data-route'));
     handleLocation();
 };
 
@@ -19,7 +19,7 @@ async function fetchPage(pageName) {
 };
 
 function loadScripts() {
-    const container = document.getElementById("page");
+    const container = document.getElementById("page-container");
     const scripts = container.querySelectorAll('script');
 
     scripts.forEach(script => {
@@ -34,6 +34,26 @@ function loadScripts() {
     });
 };
 
+function updateTitle(pageName) {
+    const titles = {
+        "index": "Home",
+        "games": "Games",
+        "404": "Page Not Found"
+    };
+    const title = titles[pageName] || "Page Not Found";
+    document.title = title;
+};
+
+function updateActiveRoute(path) {
+    document.querySelectorAll('#sidebar-list .list-group-item').forEach(item => {
+        item.classList.remove('active');
+    });
+    const activeRoute = document.querySelector(`[data-route="${path}"]`);
+    if (activeRoute) {
+        activeRoute.classList.add('active');
+    }
+}
+
 async function handleLocation() {
     let path = window.location.pathname;
     let pageName = path === '/' ? 'index' : path.substring(1);
@@ -42,34 +62,26 @@ async function handleLocation() {
         html = await fetchPage('404');
     }
 
-    document.getElementById("page").innerHTML = html;
+    document.getElementById("page-container").innerHTML = html;
     loadScripts();
     updateTitle(pageName);
-};
-
-function updateTitle(pageName) {
-    const titles = {
-        "index": "Home",
-        "games": "Games",
-        "404": "Page Not Found"
-    };
-    const title = titles[pageName] || "Page Not Found";
-    document.title = title;
+    updateActiveRoute(path);
 };
 
 document.addEventListener("DOMContentLoaded", () => {
     window.onpopstate = handleLocation;
     window.route = route;
     handleLocation();
+});
 
-    document.addEventListener("click", (event) => {
-        if (event.target.matches("a[data-route]")) {
-            route(event);
-        }
-    });
+document.addEventListener("click", (e) => {
+    if (e?.target?.hasAttribute('data-route')) {
+        route(e);
+    }
 });
 
-document.getElementById("menu-toggle").addEventListener("click", function (e) {
+document.getElementById("sidebar-toggle").addEventListener("click", function (e) {
     e.preventDefault();
-    document.getElementById("wrapper").classList.toggle("toggled");
+    document.getElementById("sidebar-wrapper").classList.toggle("toggled");
+    this.classList.toggle("toggled");
 });