kohlerjoshua/FHGR_Frontend_Group_3_Project
1
0
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Add responsive design, not perfect but working

Browse Source
This commit is contained in:
Josh-Dev-Quest 2026-03-29 15:02:05 +02:00
parent ea14d89584
commit 28321e6259
No known key found for this signature in database
6 changed files with 229 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
blog-list.html
View File

@ -14,7 +14,9 @@
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Responsive Design -->
<link rel="stylesheet" href="css/responsive.css">
<style>
* { box-sizing: border-box; }
body {

4
blog-post.html
View File

@ -9,7 +9,9 @@
<link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Responsive Design -->
<link rel="stylesheet" href="css/responsive.css">
<style>
* { box-sizing: border-box; }
body {

193
css/responsive.css Normal file
View File

@ -0,0 +1,193 @@
/* ===== RESPONSIVE DESIGN ===== */
/* Large desktop screens (≥ 1400px) */
@media (min-width: 1400px) {
.blog-container,
.editor-container,
.post-container {
max-width: 1400px;
}
.post-card {
transition: transform 0.2s;
}
.post-card:hover {
transform: translateY(-6px);
}
}
/* Tablet landscape and small desktops (768px – 1399px) */
@media (max-width: 1399px) and (min-width: 768px) {
.sidebar {
width: 280px;
}
.blog-container,
.editor-container,
.post-container {
padding: 0 var(--size-4);
}
.posts-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--size-5);
}
}
/* Tablet portrait (≤ 768px) */
@media (max-width: 768px) {
/* General spacing */
.blog-container,
.editor-container,
.post-container {
margin: var(--size-4) auto;
padding: 0 var(--size-3);
}
.post-card,
.editor-form,
.post-form {
padding: var(--size-4);
}
.post-title {
font-size: var(--font-size-5);
}
/* Blog list – single column */
.posts-grid {
grid-template-columns: 1fr;
gap: var(--size-4);
}
.post-card-image {
height: 180px;
}
/* Header stacking */
.site-header .container {
flex-direction: column;
gap: var(--size-3);
}
.site-header .container > div {
justify-content: center;
flex-wrap: wrap;
}
.filter-tabs {
order: 2;
margin-top: var(--size-2);
}
.site-nav {
order: 1;
}
.user-menu {
order: 3;
margin-left: 0;
}
/* Journey edit page – markers stack */
.marker-card {
padding: var(--size-3);
}
.marker-header h4 {
font-size: var(--font-size-2);
}
/* Buttons – full width on mobile for better touch */
.button-group {
flex-direction: column;
}
.button-group .btn,
.button-group a.btn {
width: 100%;
justify-content: center;
}
/* Map page adjustments */
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100dvh;
width: 85%;
max-width: 300px;
transform: translateX(-100%);
transition: transform 0.3s;
box-shadow: var(--shadow-5);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
z-index: 10;
}
.sidebar:not(.collapsed) {
transform: translateX(0);
}
/* Map controls */
.map-controls {
position: absolute;
top: var(--size-4);
right: var(--size-4);
display: flex;
flex-direction: column;
gap: var(--size-2);
z-index: 400;
}
.mode-indicator {
top: var(--size-4);
left: var(--size-4);
font-size: var(--font-size-0);
padding: var(--size-1) var(--size-2);
}
/* Blog post – chapters */
.chapter {
padding-left: var(--size-3);
margin-bottom: var(--size-4);
}
.chapter-header {
flex-direction: column;
align-items: flex-start;
gap: var(--size-1);
}
.chapter-header h3 {
font-size: var(--font-size-3);
}
/* Comments */
.comment-meta {
font-size: var(--font-size-0);
flex-wrap: wrap;
}
.delete-comment {
margin-left: 0;
margin-top: var(--size-1);
display: inline-block;
}
/* Login page */
.login-container {
width: 90%;
padding: var(--size-4);
margin: var(--size-4);
}
}
/* Extra small devices (≤ 480px) */
@media (max-width: 480px) {
.post-title {
font-size: var(--font-size-4);
}
.post-meta {
font-size: var(--font-size-0);
}
.chapter-header h3 {
font-size: var(--font-size-3);
}
.marker-card .form-group label {
font-size: var(--font-size-0);
}
.btn {
padding: var(--size-2) var(--size-3);
font-size: var(--font-size-1);
}
.toast {
bottom: var(--size-2);
right: var(--size-2);
left: var(--size-2);
width: auto;
text-align: center;
}
}

5
journey-edit.html
View File

@ -14,7 +14,10 @@
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Responsive Design -->
<link rel="stylesheet" href="css/responsive.css">
<style>
* { box-sizing: border-box; }
body {

4
login.html
View File

@ -14,7 +14,9 @@
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Responsive Design -->
<link rel="stylesheet" href="css/responsive.css">
<style>
* { box-sizing: border-box; }
body {

61
map-page.html
View File

@ -30,7 +30,9 @@
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<!-- Responsive Design -->
<link rel="stylesheet" href="css/responsive.css">
<style>
/* Use Open Props design tokens */
* {
@ -71,6 +73,7 @@
flex: 1;
min-width: 0;
position: relative;
isolation: isolate;
}
#map {
@ -296,16 +299,7 @@
padding: var(--size-4);
}
/* Map controls */
.map-controls {
position: absolute;
top: var(--size-4);
right: var(--size-4);
display: flex;
flex-direction: column;
gap: var(--size-2);
z-index: 10;
}
.control-btn {
width: 40px;
height: 40px;
@ -481,27 +475,6 @@
margin: 0;
}
/* Responsive */
@media (max-width: 768px) {
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
transform: translateX(-100%);
}
.sidebar.active {
transform: translateX(0);
}
.app-container {
flex-direction: column;
}
.map-controls {
top: auto;
bottom: var(--size-4);
flex-direction: row;
}
}
.site-header {
background: var(--gray-9);
padding: var(--size-4) var(--size-6);
@ -1398,16 +1371,14 @@
window.updateJourneyPath = updateJourneyPath;
window.clearAllMarkers = clearAllMarkers;
window.setMode = setMode;
// ==================== START ====================
// This function is called after auth check
function startMap() {
initMap();
// Check for journey parameter
const urlParams = new URLSearchParams(window.location.search);
const journeyToLoad = urlParams.get('journey');
if (journeyToLoad) {
// Fetch the journey and load its markers
fetch(`${API_BASE}/journeys/${journeyToLoad}`, { credentials: 'include' })
.then(res => res.json())
.then(journey => {
@ -1422,14 +1393,28 @@
bindEventListeners();
}
window.startMap = startMap;
})();
})(); // end of IIFE
// ==================== SIDEBAR HELPER (outside IIFE) ====================
function initSidebar() {
const sidebar = document.querySelector('.sidebar');
if (!sidebar) return;
const isMobile = window.innerWidth <= 768;
if (isMobile) {
sidebar.classList.add('collapsed');
} else {
sidebar.classList.remove('collapsed');
}
}
// ==================== AUTHENTICATION CHECK ====================
document.addEventListener("DOMContentLoaded", async () => {
const authenticated = await checkAuthAndRedirect();
if (authenticated) {
updateUserMenu();
window.startMap(); // call the map initializer from the IIFE
window.addEventListener('resize', initSidebar);
initSidebar();
window.startMap();
}
});
</script>