Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix 404 missing route & Little update of css #57

Merged
merged 9 commits into from
Aug 29, 2024
Merged

Fix 404 missing route & Little update of css #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
8b6c46e
updated sidebar and page elements css
Neffi42 Aug 29, 2024
19b69cc
updated index template
Neffi42 Aug 29, 2024
e914418
updated 404 template
Neffi42 Aug 29, 2024
b6c2d7d
updated games template
Neffi42 Aug 29, 2024
3238161
updated index page
Neffi42 Aug 29, 2024
2c5533e
simplified router events functions
Neffi42 Aug 29, 2024
5a21fd3
created updateActiveRoute method
Neffi42 Aug 29, 2024
2538b4f
moved updateTitle function
Neffi42 Aug 29, 2024
5e06913
created new route for error 404
Neffi42 Aug 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion django/src/pages/templates/404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 6 additions & 6 deletions django/src/pages/templates/games.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
6 changes: 4 additions & 2 deletions django/src/pages/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
1 change: 1 addition & 0 deletions django/src/pages/urls.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,5 @@
urlpatterns = [
path('index/', views.index),
path('games/', views.games),
path('404/', views.error_404),
]
4 changes: 4 additions & 0 deletions django/src/pages/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
91 changes: 57 additions & 34 deletions nginx/src/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -58,7 +85,3 @@
background-color: black;
border: 3px solid lightskyblue;
}

.gameBtn {
margin: 5px;
}
18 changes: 9 additions & 9 deletions nginx/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
56 changes: 34 additions & 22 deletions nginx/src/js/router.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
};

Expand All @@ -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 => {
Expand All @@ -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);
Expand All @@ -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");
});
Loading