API konfiguration begonnen.

Lyuris1995 · Dec 7, 2023 · c3a00ce · c3a00ce
2 parents 4cc8b7a + b0889c7
commit c3a00ce
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 28 deletions.
diff --git a/gamescouter_test/src/index.js b/gamescouter_test/src/index.js
@@ -1,3 +1,5 @@
+
+//Funktion für das Horizontale scrollen
 document.addEventListener('DOMContentLoaded', function () {
     const ele = document.getElementById('game-timeline');
     ele.style.cursor = 'grab';
@@ -11,7 +13,7 @@ document.addEventListener('DOMContentLoaded', function () {
         pos = {
             left: ele.scrollLeft,
             top: ele.scrollTop,
-            // Get the current mouse position
+            // aktuelle Mausposition
             x: e.clientX,
             y: e.clientY,
         };
@@ -21,10 +23,10 @@ document.addEventListener('DOMContentLoaded', function () {
     };
 
     const mouseMoveHandler = function (e) {
-        // How far the mouse has been moved
+        // Wie weit die Maus bewegt wurde
         const dx = e.clientX - pos.x;
 
-        // Scroll the element
+        // Element wird gescrollt
         ele.scrollLeft = pos.left - dx;
     };
 
@@ -36,7 +38,7 @@ document.addEventListener('DOMContentLoaded', function () {
         document.removeEventListener('mouseup', mouseUpHandler);
     };
 
-    // Attach the handler
+    // Eventhandler anbinden
     ele.addEventListener('mousedown', mouseDownHandler);
 });
 
@@ -57,6 +59,7 @@ function toggleCardContent(button) {
     }
 };
 
+//Funktion zum anzeigen der Filtermethoden (Genre, Datum, Publisher)
 function toggleFilterMethods() {
     const filterButton = document.getElementById("filter-button");
     const filterList = document.querySelector("#filter-list");
@@ -72,14 +75,17 @@ function toggleFilterMethods() {
     }
 };
 
+//Funktion zum anzeigen der Genre Filter
 function toggleGenreFilter() {
     document.getElementById("genre-filter").classList.toggle("active");
 }
 
+//Funktion zum anzeigen des Datum-Filters
 function toggleDateFilter() {
     document.getElementById("date-filter").classList.toggle("active");
 }
 
+//Funktion zum anzeigen des Publisher-Filters
 function togglePublisherFilter() {
     document.getElementById("publisher-filter").classList.toggle("active");
 }

diff --git a/gamescouter_test/src/style.less b/gamescouter_test/src/style.less
@@ -11,14 +11,15 @@ body, html {
     overflow: hidden;
     font-size: 12px;
 
+//Custom Button
     .custom-btn {
-        width: 140px;
-        height: 40px;
+        width: 120px;
+        height: 35px;
         color: @BackgroundColor;
         border-radius: 5px;
         padding: 10px 25px;
-        font-family: 'Lato', sans-serif;
-        font-weight: 500;
+        font-family: @fontFamily;
+        font-weight: 700;
         background: transparent;
         cursor: pointer;
         transition: all 0.3s ease;
@@ -29,7 +30,7 @@ body, html {
          4px 4px 5px 0px rgba(0,0,0,.1);
         outline: none;
       }
-    /* 13 */
+
     .btn-13 {
         background-color: @BrandSecondColor;
         background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
@@ -64,7 +65,9 @@ body, html {
     .btn-13:active {
         top: 2px;
     }
+// Custom Button ende
 
+//Navbar
     .navbar {
         background-color: @BackgroundColor !important;
         border-bottom: 4px solid @BrandColor;
@@ -85,7 +88,9 @@ body, html {
             }
         }
     }
+//Navbar ende
 
+//Zeitleiste zum anzeigen der Videospiele
     #game-timeline {
         box-sizing: border-box;
         position: relative;
@@ -183,8 +188,12 @@ body, html {
                 width: 140px;
             }
         }
+//Zeitleiste ende
+
+// Filter komponente
         .filter-container {
-            padding: 10px;
+            padding-top: 50px;
+            padding-left: 10px;
             height: 20px;
             width: 20px;
             display: flex;
@@ -204,18 +213,20 @@ body, html {
                 }
 
                 #filter-list {
-                    display: flex;
+                    left: 0;
                     list-style-type: none;
                     border: 2px solid @BrandColor;
-                    border-radius: 13px;
+                    border-radius: 10px;
                     opacity: 0;
-                    width: 250px;
+                    width: 320px;
                     pointer-events: none;
                     transition: 0.3s ease-in-out;
-
-                    @media screen and (min-width: 450px) {
-                        width: 450px;
-                    }
+                    display: grid;
+                    grid-template-columns: 1fr repeat(2, 2fr);
+                    grid-template-rows: repeat(5, 1fr);
+                    grid-column-gap: 5px;
+                    grid-row-gap: 5px;
+                    overflow: hidden;
 
                     &.active {
                         opacity: 1;
@@ -226,11 +237,6 @@ body, html {
                     }
 
                     li {
-                        flex-direction: row;
-                        margin-bottom: 10px;
-                        margin-left: 5px;
-                        margin: 0px;
-
                         a {
                             color: @TextColor;
                             text-decoration: none;
@@ -249,23 +255,19 @@ body, html {
                         }
 
                         .filter-option {
+                            display: flex;
                             margin: 0;
                             padding: 0;
-                            display: flex;
                             list-style-type: none;
                             opacity: 0;
                             width: 80px;
                             pointer-events: none;
                             transition: 0.3s ease-in-out;
                             white-space: break-spaces;
-                            @media screen and (min-width: 450px) {
-                                width: 150px;
-                            }
 
                             &.active {
                                 opacity: 1;
                                 pointer-events: all;
-                                /* margin-bottom: 10px; */
                             }
 
                             a {
@@ -283,6 +285,7 @@ body, html {
                                 border-radius: 5px;
                                 box-shadow: 2px 2px 2px @BrandColor;
                                 margin: 5px;
+                                width: 80px;
                             }
                         }
                     }
@@ -294,4 +297,4 @@ body, html {
             }
     }
 }
-
+//Filter ende