From 1ef81f23904577fffda388bb38f9dc0ed1e4261d Mon Sep 17 00:00:00 2001 From: AlexMacBook Date: Thu, 31 Oct 2024 10:31:51 +0100 Subject: [PATCH] mobil pixel 7 --- src/App.tsx | 15 +- src/components/Navbar.tsx | 63 +++++++ src/styles/_global.scss | 2 +- src/styles/components/_card.scss | 248 +++++++++++++------------- src/styles/components/_infoPopup.scss | 101 ++++++----- src/styles/components/_navbar.scss | 102 ++++++++++- 6 files changed, 344 insertions(+), 187 deletions(-) create mode 100644 src/components/Navbar.tsx diff --git a/src/App.tsx b/src/App.tsx index 0bf69dd..2ed3f6c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,6 +12,8 @@ import MusicButton from './components/MusicButton'; import BackgroundMusic from './components/BackgroundMusic'; import EndAnimation from './components/EndAnimation'; import { useState, useEffect } from 'react'; +import Navbar from './components/Navbar'; + import './styles/main.scss'; @@ -74,15 +76,10 @@ function App() { return (
- + setIsPlaying(!isPlaying)} + /> {/* Füge die BackgroundMusic-Komponente hinzu */} diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx new file mode 100644 index 0000000..eaae857 --- /dev/null +++ b/src/components/Navbar.tsx @@ -0,0 +1,63 @@ +import React, { useState, useEffect } from 'react'; +import LanguageSwitcher from './LanguageSwitcher'; +import InfoPopup from './InfoPopup'; +import MusicButton from './MusicButton'; + +interface NavbarProps { + isPlaying: boolean; + toggleMusic: () => void; +} + +const Navbar: React.FC = ({ isPlaying, toggleMusic }) => { + const [isExpanded, setIsExpanded] = useState(false); + const [isMobile, setIsMobile] = useState(false); + + useEffect(() => { + const checkWidth = () => { + setIsMobile(window.innerWidth <= 991); + }; + + checkWidth(); + window.addEventListener('resize', checkWidth); + return () => window.removeEventListener('resize', checkWidth); + }, []); + + const toggleNavbar = () => { + setIsExpanded(!isExpanded); + document.body.style.overflow = !isExpanded ? 'hidden' : ''; + }; + + return ( + <> + +
isExpanded && toggleNavbar()} + aria-hidden="true" + /> + + ); +}; + +export default Navbar; \ No newline at end of file diff --git a/src/styles/_global.scss b/src/styles/_global.scss index 5ee38e8..aa95944 100644 --- a/src/styles/_global.scss +++ b/src/styles/_global.scss @@ -1,7 +1,7 @@ // Allgemeines Styling .App { text-align: center; - padding: 20px; + padding: 0px; background-color: $primary-color; color: $text-color; min-height: 100vh; diff --git a/src/styles/components/_card.scss b/src/styles/components/_card.scss index 655d8d0..3d6c31b 100644 --- a/src/styles/components/_card.scss +++ b/src/styles/components/_card.scss @@ -1,12 +1,11 @@ -// Karten Styling .battlefield { display: flex; justify-content: center; align-items: flex-start; gap: 40px; padding-top: 60px; - overflow: hidden; // Verhindert das Ausdehnen des Containers durch die Kartenanimation - position: relative; // Stellt sicher, dass der Container der Bezugspunkt für die Animationen bleibt + overflow: hidden; + position: relative; } .card-container { @@ -196,117 +195,6 @@ body:not(.computer-turn) .player-card .property-value:focus { } } -@media (max-width: 1100px) { - .card-description { - font-size: 0.9em; // Kleinere Schriftgröße für die Kartenbeschreibung - } - - .card-front img { - width: 100%; // Verkleinert das Bild auf der Vorderseite - margin: 0 auto; // Zentriert das Bild auf der Vorderseite - } -} - -@media (max-width: 950px) { - .card-properties-list li { - line-height: 0.5; - font-size: 0.9em; - margin: 5px 0; // Verringerter Abstand zwischen den Listenelementen für kleinere Bildschirme - } - .card-header { - font-size: 0.75em; - } -} - -@media (max-width: 900px) { - .card-description { - font-size: 0.7em; // Kleinere Schriftgröße für die Kartenbeschreibung - } - .card-properties-list li { - font-size: 0.7em; - } - .card-header { - font-size: 0.65em; - } - - // Deaktiviere Klick- und Fokus-Effekte für Bildschirme mit einer Breite von maximal 900px - .property-label, - .property-value { - pointer-events: none; // Deaktiviert alle Mausereignisse - } -} - -@media (max-width: 850px) { - .card-description { - font-size: 0.7em; // Kleinere Schriftgröße für die Kartenbeschreibung - } - .card-properties-list li { - font-size: 0.7em; - } - .card-header { - font-size: 0.65em; - } -} - -@media (max-width: 750px) { - .card-description { - font-size: 0.6em; // Kleinere Schriftgröße für die Kartenbeschreibung - } - .card-properties-list li { - font-size: 0.6em; - } - .card-header { - font-size: 0.65em; - } - .card-front { - padding: 8px; - border: 0.4em solid #444444; - } -} -@media (max-width: 700px) { - .card-description { - font-size: 0.55em; // Kleinere Schriftgröße für die Kartenbeschreibung - } - .card-properties-list li { - font-size: 0.55em; - } - .card-header { - font-size: 0.65em; - } - .rating-scale { - height: 8px; - } -} -@media (max-width: 650px) { - .card-description { - font-size: 0.45em; // Kleinere Schriftgröße für die Kartenbeschreibung - } - .card-properties-list li { - font-size: 0.45em; - } - .card-header { - font-size: 0.55em; - } - .rating-scale { - height: 6px; - } -} -@media (max-width: 600px) { - .card-description { - font-size: 0.35em; // Kleinere Schriftgröße für die Kartenbeschreibung - } - .card-properties-list li { - font-size: 0.35em; - } - .rating-scale { - height: 5px; - } - .card-front { - padding: 4px; - border: 0.4em solid #444444; - } -} - // Bestehende Styles beibehalten und neue Styles hinzufügen .description-button { @@ -378,32 +266,140 @@ body:not(.computer-turn) .player-card .property-value:focus { } } -@media (max-width: 900px) { - .description-popup { - width: 95%; +@media (max-width: 1200px) { + .card-container { + max-width: 500px; + } + + .card-description { + font-size: 0.95em; + } + + .card-properties-list li { + margin: 8px 0; + } + + .card-header { + font-size: 0.9em; + } +} + +// Medium (Tablet): 768px - 991px +@media (max-width: 991px) { + .battlefield { + padding-top: 0px; + } + .card-container { + max-width: 450px; + font-size: 0.7em; + } + .card-spieler, .card-computer{ + width: 60%; + } + + .card-description { + font-size: 0.85em; + } + + .card-properties-list li { + font-size: 0.85em; + margin: 6px 0; + } + + .card-header { + font-size: 0.8em; + } +ƒ + .rating-scale { + height: 8px; + } + + .card-front { padding: 15px; - - h3 { - font-size: 1.1em; - } + border: 0.6em solid $secondary-color; + } +} + +// Small (Tablet Portrait): 576px - 767px +@media (max-width: 767px) { + .card-container { + max-width: 400px; + } + + .card-description { + font-size: 0.75em; + } + + .card-properties-list li { + font-size: 0.75em; + margin: 5px 0; + } + + .card-header { + font-size: 0.7em; + } + + .rating-scale { + height: 6px; + } + + .card-front { + padding: 12px; + border: 0.5em solid $secondary-color; + } + + // Deaktiviere Hover-Effekte für Touch-Geräte + .property-label, + .property-value { + pointer-events: none; } } -@media (max-width: 600px) { +// Extra Small (Mobile Landscape): < 576px +@media (max-width: 575px) { + .card-container { + max-width: 350px; + } + + .card-description { + font-size: 0.65em; + } + + .card-properties-list li { + font-size: 0.65em; + margin: 4px 0; + } + + .card-header { + font-size: 0.6em; + } + + .rating-scale { + height: 5px; + } + + .card-front { + padding: 8px; + border: 0.4em solid $secondary-color; + } + + // Optimierungen für sehr kleine Bildschirme .description-button { - font-size: 0.9em; - padding: 8px 15px; + font-size: 0.8em; + padding: 6px 12px; } .description-popup { + width: 95%; padding: 10px; h3 { - font-size: 1em; + font-size: 0.9em; + margin-bottom: 10px; } p { - font-size: 0.9em; + font-size: 0.8em; } } } \ No newline at end of file diff --git a/src/styles/components/_infoPopup.scss b/src/styles/components/_infoPopup.scss index 63820ce..461d065 100644 --- a/src/styles/components/_infoPopup.scss +++ b/src/styles/components/_infoPopup.scss @@ -1,3 +1,5 @@ +// src/styles/components/_infoPopup.scss + /* Popup-Overlay */ .popup-overlay { position: fixed; @@ -7,75 +9,82 @@ bottom: 0; display: flex; justify-content: center; - align-items: start; /* Ändert die vertikale Ausrichtung, damit das Popup oben beginnt */ - padding-top: 10vh; /* Fügt oben einen Abstand ein, für bessere Sichtbarkeit */ - background-color: rgba(0, 0, 0, 0.8); /* Halbtransparentes Schwarz */ + align-items: start; + padding-top: 5vh; // Reduzierter oberer Abstand + background-color: rgba(0, 0, 0, 0.8); z-index: 101; } /* Popup-Content */ .popup-content { background-color: $primary-color; - padding: 20px; + padding: 30px; border-radius: 5px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - width: 80%; /* Setzt die Breite auf 80% des Viewports */ - max-width: 600px; /* Setzt eine maximale Breite */ - max-height: 80vh; /* Maximale Höhe des Popups, um sicherzustellen, dass es scrollbar ist */ - overflow-y: auto; /* Ermöglicht das Scrollen nach unten, falls der Inhalt die maximale Höhe überschreitet */ + width: 90%; // Erhöhte Breite + max-width: 1200px; // Erhöhte maximale Breite + max-height: 90vh; + overflow-y: auto; color: $text-color; + + @media (max-width: 991px) { + width: 95%; + padding: 20px; + } } /* About Me */ .about-me { color: $text-color; margin-top: 20px; -} - -.about-me h2 { - font-size: 2em; -} - -.about-me a { - color: $text-color; - text-decoration: none; - - &:hover { - text-decoration: underline; + + h2 { + font-size: 2em; + margin-bottom: 1em; + } + + p { + font-size: 1.1em; + line-height: 1.6; + margin-bottom: 1.5em; } -} -.about-me img, -.about-me svg { - vertical-align: middle; + a { + color: $text-color; + text-decoration: none; + display: inline-flex; + align-items: center; + gap: 10px; + padding: 5px 10px; + border-radius: 5px; + transition: background-color 0.3s; + + &:hover { + background-color: rgba(255, 255, 255, 0.1); + } + } } /* Schließen-Button */ .schliesen-button { margin-top: 2em; - margin-bottom: 2em; + margin-bottom: 1em; display: flex; justify-content: center; -} -.schliesen-button .button { - background-color: $primary-dark-color; - color: $text-color; - border: none; - padding: 10px 20px; - border-radius: 5px; - cursor: pointer; - transition: background-color 0.3s; - - &:hover { - background-color: $primary-light-color; - color: $secondary-color; + .button { + background-color: $primary-dark-color; + color: $text-color; + border: none; + padding: 12px 30px; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; + font-size: 1.1em; + + &:hover { + background-color: $primary-light-color; + color: $secondary-color; + } } -} - - - - - - - +} \ No newline at end of file diff --git a/src/styles/components/_navbar.scss b/src/styles/components/_navbar.scss index 20130af..b7a29e4 100644 --- a/src/styles/components/_navbar.scss +++ b/src/styles/components/_navbar.scss @@ -1,4 +1,18 @@ -// src/styles/components/navbar.scss +// Blur Overlay +.navbar-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(5px); + -webkit-backdrop-filter: blur(5px); + z-index: 999; + opacity: 0; + transition: opacity 0.3s ease; +} .navbar { position: fixed; @@ -9,17 +23,19 @@ padding: 10px 20px; background-color: transparent; z-index: 1000; + transition: all 0.3s ease; .navbar-left { display: flex; - gap: 10px; /* Abstand zwischen den Buttons */ + gap: 10px; + margin-top: 0px; } .navbar-right { display: flex; - gap: 10px; /* Abstand zwischen den Buttons */ + gap: 10px; position: absolute; - right: 100px; /* Abstand vom rechten Rand des Bildschirms */ + right: 100px; } .navbar-button { @@ -30,11 +46,87 @@ border-radius: 5px; cursor: pointer; transition: background-color 0.3s; - z-index: 100; /* Stelle sicher, dass der Button über anderen Elementen liegt */ + z-index: 100; &:hover { background-color: $primary-dark-color; color: $text-color; } } + + // Toggle Button für Mobile + .navbar-toggle { + display: none; + background: none; + border: none; + color: $text-color; + font-size: 1.5rem; + cursor: pointer; + padding: 5px; + margin: 0; + position: fixed; + left: 50%; + transform: translateX(-50%); + top: 50px; // Neue Position + z-index: 1001; + } +} + +// Mobile Styles (< 992px) +@media (max-width: 991px) { + .navbar { + &.mobile { + width: 60px; + height: 100vh; + flex-direction: column; + background-color: transparent; + padding: 20px 10px; + align-items: center; + left: 50%; + transform: translateX(-50%); + + .navbar-toggle { + display: block; + } + + .navbar-left, + .navbar-right { + flex-direction: column; + align-items: center; + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; + margin-top: 100px; // Abstand nach dem Burger-Menü + } + + // Neuanordnung der Buttons + .navbar-right { + position: static; + margin-top: 10px; // Geringerer Abstand zwischen den Button-Gruppen + } + + &.expanded { + width: 80%; + background-color: transparent; // Transparenter Hintergrund + + .navbar-left, + .navbar-right { + opacity: 1; + visibility: visible; + } + + & + .navbar-overlay { + display: block; + opacity: 1; + } + + // Verbesserte Button-Anordnung im expandierten Zustand + .navbar-button { + width: 80%; // Breitere Buttons für bessere Klickbarkeit + text-align: center; + margin: 5px 0; + } + } + } + } } \ No newline at end of file