MiauRizius/CoasterDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added responsive design

Browse Source
This commit is contained in:
Maurice L.
2025-05-08 16:25:35 +02:00
parent b587d5d338
commit 4b970dec7a
6 changed files with 42 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Footer.vue
View File

@@ -15,7 +15,7 @@ export default {
</script>
<template>
<footer class="p-4 bg-white sm:p-6 dark:bg-gray-800 h-60">
<footer class="p-4 bg-white sm:p-6 dark:bg-gray-800 min-h-[15rem]">
<div class="mx-auto max-w-screen-xl">
<div class="md:flex md:justify-between">
<div class="mb-6 md:mb-0">

5
src/components/Navbar.vue
View File

@@ -19,11 +19,6 @@ export default {
</a>
<div class="flex items-center lg:order-2">
<p href="/authorize" class="text-gray-800 dark:text-white font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2"><Discord></Discord></p>
<button data-collapse-toggle="mobile-menu-2" type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
<div class="hidden justify-between items-center w-full lg:flex lg:w-auto lg:order-1" id="mobile-menu-2">
<ul class="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">

20
src/components/app/AppHeader.vue
View File

@@ -1,13 +1,12 @@
<script lang="ts">
export default {
components: {
},
mounted() {
methods: {
toggleSidebar() {
console.log('Toggle sidebar event emitted');
document.getElementById('drawer-navigation')?.classList.toggle('hidden');
}
}
}
</script>
<template>
@@ -15,6 +14,15 @@ export default {
<nav class="bg-white border-b border-gray-200 px-4 py-2.5 dark:bg-gray-800 dark:border-gray-700 fixed left-0 right-0 top-0 z-50">
<div class="flex flex-wrap justify-between items-center">
<div class="flex justify-start items-center">
<button
@click="toggleSidebar"
class="p-2 mr-2 text-gray-600 rounded-lg cursor-pointer md:hidden hover:text-gray-900 hover:bg-gray-100 focus:bg-gray-100 dark:focus:bg-gray-700 focus:ring-2 focus:ring-gray-100 dark:focus:ring-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
>
<svg aria-hidden="true" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
</svg>
<span class="sr-only">Toggle sidebar</span>
</button>
<a href="/" class="flex items-center justify-between mr-4">
<img
src="https://raw.githubusercontent.com/MaukiNet/.github/main/assets/4542221e59746b200f7d3d2c96cf9210.png"

2
src/components/app/AppSidebar.vue
View File

@@ -76,7 +76,7 @@ export default {
<template>
<aside
class="fixed top-0 left-0 z-40 w-64 h-screen pt-14 transition-transform -translate-x-full bg-white border-r border-gray-200 md:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
class="hidden fixed top-0 left-0 z-40 w-64 h-screen pt-14 transition-transform duration-200 ease-in-out bg-white border-r border-gray-200 md:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
aria-label="Sidenav"
id="drawer-navigation"
>

8
src/views/Home.vue
View File

@@ -36,13 +36,14 @@ export default {
<template>
<title>Home - CoasterDB</title>
<Navbar />
<main class="content">
<div class="flex flex-col min-h-screen">
<Navbar />
<main class="flex-grow content">
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
<div class="max-w-screen-lg text-gray-500 sm:text-lg dark:text-gray-400">
<h2 class="mb-4 text-4xl tracking-tight font-bold text-gray-900 dark:text-white">Entdecke CoasterDB!</h2>
<p class="mb-4 font-light">Finde interessante Fakten und on-board Videos von deutschen Achterbahnen.</p>
<p class="mb-4 font-light">Finde interessante Fakten und on-ride Videos von deutschen Achterbahnen.</p>
<p class="mb-4 font-medium">In dieser Web-Anwendung findest du viele Fakten, technische Daten und anderes Material zu verschiedene Achterbahnen und Parks in Deutschland.</p>
<a href="/app" class="inline-flex items-center font-medium text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-700">
Öffne die Web-App
@@ -73,4 +74,5 @@ export default {
</section>
</main>
<Footer />
</div>
</template>

61
src/views/app/App.vue
View File

@@ -1,59 +1,40 @@
<script lang="ts">
import Header from '../../components/app/AppHeader.vue'
import Sidebar from '../../components/app/AppSidebar.vue'
import Documentation from "../../views/app/Documentation.vue"
import Help from "../../views/app/Help.vue"
export default {
components: {
Header,
Sidebar,
Documentation,
Help
Sidebar
},
mounted() {
var current_page = "";
setInterval(() => {
const docs = document.getElementById("docs-container");
const help = document.getElementById("docs-container");
if (current_page == window.location.href.replace("https://", "").split("/")[4]) return;
current_page = window.location.href.replace("https://", "").split("/")[4];
switch (window.location.href.replace("https://", "").split("/")[4]) {
case "docs":
if (docs?.classList.contains('hidden')) docs?.classList.remove('hidden'); else help?.classList.add('hidden');
break;
case "help":
if (help?.classList.contains('hidden')) help?.classList.remove('hidden'); else docs?.classList.add('hidden');
break;
default:
break;
}
}, 1000);
}
data() {
return {
sidebarOpen: false
}
},
methods: {
toggleSidebar() {
this.sidebarOpen = !this.sidebarOpen;
const sidebar = document.getElementById('drawer-navigation');
if (sidebar) {
sidebar.classList.toggle('-translate-x-full', !this.sidebarOpen);
}
}
}
}
</script>
<template>
<title>App - CoasterDB</title>
<!-- Fester Header -->
<Header />
<!-- Flex-Layout für Sidebar + Hauptinhalt -->
<Header @toggle-sidebar="toggleSidebar" />
<div class="flex pt-[63px] h-screen overflow-hidden">
<!-- Sidebar -->
<Sidebar />
<!-- Hauptinhalt -->
<main class="flex-1 overflow-y-auto p-10 bg-gray-900 text-white">
<Sidebar :class="{'translate-x-0': sidebarOpen, '-translate-x-full': !sidebarOpen}" />
<main class="flex-1 overflow-y-auto p-4 md:p-10 bg-gray-900 text-white">
<div style="margin-top: 63px;"></div>
<section class="max-w-4xl mx-auto bg-gray-800 p-8 rounded-lg shadow-lg">
<section class="max-w-4xl mx-auto bg-gray-800 p-6 md:p-8 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold mb-4">Willkommen auf CoasterDB!</h2>
<p class="mb-6 text-lg">
Um mit CoasterDB zu arbeiten, kannst du in der Sidebar unter <strong>Kategorien -> Parks/Attraktionen</strong> wählen, um Informationen zu verschiedenen Freizeitparks und deren Attraktionen zu erhalten.