Style Projekt Movie

IvanChiosa · Jan 29, 2024 · cfe685e · cfe685e
1 parent 7cfb8ce
commit cfe685e
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 17 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -19,17 +19,23 @@
     color: white;
 }
 
-@media screen and (min-width: 1025px) {
-    .movie-poster {
-        height: 300px;
-    }
-
-    .movie-detail {
-        flex-direction: row;
-        align-items: center;
-        top: 30px;
-    }
-}
+/*@media screen and (min-width: 1025px) {*/
+/*    .movie-poster {*/
+/*        height: 300px;*/
+/*    }*/
+
+/*    .movie-detail {*/
+/*        flex-direction: row;*/
+/*        align-items: center;*/
+/*        top: 30px;*/
+/*    }*/
+/*    !*.movie-poster {*!*/
+/*    !*    height: 300px;*!*/
+/*    !*    border: 1px solid gold;*!*/
+/*    !*    border-radius: 10px;*!*/
+/*    !*    overflow: hidden;*!*/
+/*    !*}*!*/
+/*}*/
 
 
 
diff --git a/frontend/src/components/addMovie/AddMovieForm.css b/frontend/src/components/addMovie/AddMovieForm.css
@@ -1,6 +1,6 @@
 .add-new-movie {
     padding-top: 10px;
-    margin-bottom: 0;
+    margin: 40px;
 }
 
 .form {

diff --git a/frontend/src/components/header/Header.css b/frontend/src/components/header/Header.css
@@ -83,8 +83,15 @@ button:hover {
     .reviews {
         margin: 20px;
         width: 100%;
+        flex-direction: column;
+        padding: 10px;
+    }
+    img {
+        width: 100%;
+        flex-direction: column;
     }
 
+
     .navbar-collapse {
         transform: translateX(-100%);
         transition: transform 0.3s ease-in-out;

diff --git a/frontend/src/components/header/Header.tsx b/frontend/src/components/header/Header.tsx
@@ -11,15 +11,15 @@ const Header: React.FC = () => {
 
     const toggleMenu = () => {
         setIsOpen(!isOpen);
+        console.log("Menu is now ", isOpen);
     };
     const handleNavLinkClick = () => {
         if (isOpen) {
             toggleMenu();
         }
     };
-
     return (
-        <Navbar className="navbar" bg="dark" variant="dark" expand="lg">
+        <Navbar className="navbar" bg="dark" variant="dark" expand="lg" expanded={isOpen}>
             <Container className="fluid">
                 <Navbar.Brand href="/" className="movie-app" style={{color: 'gold'}}>
                     <FontAwesomeIcon icon={faVideoSlash}/>Movie-app
@@ -33,7 +33,6 @@ const Header: React.FC = () => {
                         <NavLink className="nav-link" to="/add" onClick={handleNavLinkClick}>Add new Movies</NavLink>
                         <NavLink className="nav-link" to="/movie-list" onClick={handleNavLinkClick}>Movie List</NavLink>
                     </Nav>
-                    {/* Weitere Elemente */}
                 </Navbar.Collapse>
             </Container>
         </Navbar>

diff --git a/frontend/src/components/hero/Hero.css b/frontend/src/components/hero/Hero.css
@@ -13,6 +13,20 @@
     background-color: black;
 }
 
+/* Tablets und kleine Desktops */
+/*@media screen and (min-width: 768px) {*/
+/*    .movie-card-container {*/
+/*        height: 200px;*/
+/*    }*/
+/*}*/
+
+/* Große Desktops */
+/*@media screen and (min-width: 1025px) {*/
+/*    .movie-card-container {*/
+/*        height: 630px; !* der ursprünglich festgelegte Wert für große Bildschirme *!*/
+/*    }*/
+/*}*/
+
 .movie-poster {
     height: 300px;
     border: 1px solid gold;
@@ -26,8 +40,8 @@
 }
 
 .movie-card-container {
-    /*height: auto;*/
-    height: 630px;
+    /*height: 100%;*/
+    height: 818px;
     background-color: black;
 }