fix: dynamic pos ellips

RezenkovD · Aug 11, 2023 · 11eba1c · 11eba1c
1 parent 3a4a7ae
commit 11eba1c
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 42 deletions.
diff --git a/games/templates/games/games.html b/games/templates/games/games.html
@@ -62,7 +62,7 @@
 {% endblock %}
 {% block script %}
 <script>
-  function getFilteredGames (gameMode) {
+    function getFilteredGames (gameMode) {
     fetch(`{% url 'api/games:filter_games' %}?game_mode=${gameMode}`, {
       method: "GET",
       headers: {
@@ -102,33 +102,45 @@
               `;
           gamePanel.insertAdjacentHTML('beforeend', gameCardHTML);
         }
+
+        positionEllipse();
       });
-  }
-  const divs = document.querySelectorAll('.filter div');
+    }
+    const divs = document.querySelectorAll('.filter div');
 
-  document.getElementById("both").addEventListener("click", function () {
+    document.getElementById("both").addEventListener("click", function () {
+        divs.forEach(div => div.classList.remove("all-games"));
+        divs.forEach(div => div.classList.add("fil-games"));
+        this.classList.remove("fil-games")
+        this.classList.add("all-games")
+        getFilteredGames ("both");
+    });
+    document.getElementById("multiplayer").addEventListener("click", function () {
+        divs.forEach(div => div.classList.remove("all-games"));
+        divs.forEach(div => div.classList.add("fil-games"));
+        this.classList.remove("fil-games")
+        this.classList.add("all-games")
+        getFilteredGames ("multiplayer");
+    });
+    document.getElementById("single").addEventListener("click", function () {
+        divs.forEach(div => div.classList.remove("all-games"));
+        divs.forEach(div => div.classList.add("fil-games"));
+        this.classList.remove("fil-games")
+        this.classList.add("all-games")
+        getFilteredGames ("single");
+    });
+    const div = document.getElementById("both")
+    div.classList.add("all-games")
     getFilteredGames ("both");
-    divs.forEach(div => div.classList.remove("all-games"));
-    divs.forEach(div => div.classList.add("fil-games"));
-    this.classList.remove("fil-games")
-    this.classList.add("all-games")
-  });
-  document.getElementById("multiplayer").addEventListener("click", function () {
-    getFilteredGames ("multiplayer");
-    divs.forEach(div => div.classList.remove("all-games"));
-    divs.forEach(div => div.classList.add("fil-games"));
-    this.classList.remove("fil-games")
-    this.classList.add("all-games")
-  });
-  document.getElementById("single").addEventListener("click", function () {
-    getFilteredGames ("single");
-    divs.forEach(div => div.classList.remove("all-games"));
-    divs.forEach(div => div.classList.add("fil-games"));
-    this.classList.remove("fil-games")
-    this.classList.add("all-games")
-  });
-  const div = document.getElementById("both")
-  div.classList.add("all-games")
-  getFilteredGames ("both");
+
+    function positionEllipse() {
+    var ellipse = document.querySelector('.ellipse-4');
+        ellipse.style.top = 0 + 'px';
+        var pageHeight = document.querySelector(".not-head").clientHeight;
+        console.log(pageHeight)
+        var newTop = pageHeight - 840;
+
+        ellipse.style.top = newTop + 'px';
+    }
 </script>
 {% endblock %}
diff --git a/games/templates/style/games.css b/games/templates/style/games.css
@@ -630,26 +630,12 @@
     }
 
     .ellipse-1 {
-        background: #ef7d1e;
-        border-radius: 50%;
-        width: 165px;
-        height: 165px;
-        position: absolute;
-        filter: blur(125px);
-        top: 1300px;
-        left: 0px;
+       display: none;
     }
 
 
     .ellipse-2 {
-        background: #ef7d1e;
-        border-radius: 50%;
-        width: 165px;
-        height: 165px;
-        position: absolute;
-        filter: blur(125px);
-        top: 600px;
-        left: 300px;
+        display: none;
     }