kommentare hinzugefügt.

Lyuris1995 · Nov 11, 2023 · bb147db · bb147db
1 parent 6646657
commit bb147db
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 16 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,11 +38,11 @@ document.addEventListener('DOMContentLoaded', function () {
         document.removeEventListener('mouseup', mouseUpHandler);
     };
 
-    // Attach the handler
+    // Eventhandler anbinden
     ele.addEventListener('mousedown', mouseDownHandler);
 });
 
-
+//Funktion zum anzeigen des Kartencontents (für Videospielinformationen)
 function toggleCardContent(button) {
 
     const card = button.closest(".card");
@@ -58,6 +60,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");
@@ -73,14 +76,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;
@@ -86,6 +89,7 @@ body, html {
         }
     }
 
+//Zeitleiste zum anzeigen der Videospiele
     #game-timeline {
         box-sizing: border-box;
         position: relative;
@@ -183,6 +187,8 @@ body, html {
                 width: 140px;
             }
         }
+
+// Filter komponente
         .filter-container {
             padding: 10px;
             height: 20px;
@@ -287,12 +293,11 @@ body, html {
                         }
                     }
                 }
-
-                @media screen and (max-height: 700px) {
-                    margin-top: 50px;
-                    padding: 0px;
-                }
             }
     }
 }
 
+/* @media screen and (max-height: 700px) {
+    margin-top: 50px;
+    padding: 0px;
+} */