Merge branch 'main' of https://github.com/wifv/rawg

wifv · Nov 13, 2023 · 4cfce93 · 4cfce93
2 parents aebed7b + cd62a29
commit 4cfce93
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 46 deletions.
diff --git a/a.js b/a.js
diff --git a/css/media.css b/css/media.css
@@ -1,4 +1,23 @@
+@media (max-width: 2100px) {
+ .container-2 {
+ margin: 30px 20px 30px 20px;
+ }
+}
+@media (max-width: 1240px) {
+ #category {
+ font-size: 60px !important;
+ transform: translateY(12px);
+ }
+}
 @media (max-width: 1009px) {
+ .active {
+ padding-bottom: 5px;
+ border-bottom: 2px solid #000000;
+ }
+ #category {
+ font-size: 40px !important;
+ transform: translateY(15px);
+ }
  .sidebar {
  padding: 20px;
  right: 5px;
@@ -47,9 +66,7 @@
  .block-container {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }
-}
-@media (max-width: 2100px) {
- .container-2 {
- margin: 30px 20px 30px 20px;
+ #category {
+ font-size: 30px !important;
  }
 }
diff --git a/css/style.css b/css/style.css
@@ -3,7 +3,7 @@
  padding: 0;
  box-sizing: border-box;
  font-family: Arial;
- transition: all 0.4s, color 0s, background-color 0s;
+ transition: all 0.4s, color 0s, background-color 0s !important;
 }
 
 
@@ -37,6 +37,7 @@ body {
  transform: translateX(-6px);
  z-index: 3;
  border-radius: 20px;
+ margin-right: 10px;
 }
 
 .sidebar * {
@@ -107,6 +108,7 @@ body {
  padding: 5px;
  display: grid;
  gap: 20px;
+ transform: translateY(70px);
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
 }
 
@@ -200,8 +202,8 @@ body {
 
 .select-1 .select-2 {
  visibility: hidden;
- width: 170px;
- height: 200px;
+ width: auto;
+ height: auto;
  padding: 20px 20px;
  border-radius: 5px;
  background-color: white;
@@ -210,9 +212,11 @@ body {
  justify-content: space-between;
  flex-direction: column;
  position: absolute;
+ gap: 10px;
  right: 0;
  top: 15px;
  z-index: 2;
+ font-size: 15px;
 }
 
 .select-1:hover .select-2 {
@@ -248,26 +252,44 @@ body {
 /* // */
 
 #months {
- display: flex;
  padding: 5px;
  gap: 20px;
  margin-bottom: 20px;
+ transform: translateY(70px);
  display: none;
 }
 
 .plus {
  display: flex;
- gap: 10px;
+ align-items: center;
+ gap: 5px;
  background-color: #FFFFFF12;
  max-width: fit-content;
  padding: 3px 5px 3px 5px;
  border-radius: 5px;
+ transition: all 0.2s;
+ cursor: pointer;
+}
+
+.plus:hover {
+ background-color: white;
+ color: black;
+}
+
+.plus-direct-child {
+ font-size: 22px;
 }
 
 .bottom > p {
  font-weight: bolder;
  font-size: 20px;
  margin-bottom: 10px;
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.bottom > p:hover {
+ color: #6f6f6f;
 }
 
 .search-wrapper {
@@ -473,19 +495,29 @@ body {
 }
 
 .show-more-button {
- /* width: 100%; */
  display: flex;
+ justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: #FFFFFF12;
  border-radius: 5px;
  margin: 5px 0 10px 0;
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.show-more-button:hover {
+ color: #FAD860;
+}
+
+.show-more-button img {
+ max-width: 18px;
 }
 
 .display-options-wrapper {
  position: absolute;
  right: 5px;
- top: -50px;
+ top: -10px;
  display: flex;
  justify-content: flex-end;
  gap: 5px;
@@ -501,4 +533,8 @@ body {
 
 .active-option {
  background-color: #6f6f6f;
+}
+
+#category {
+ transform: translateY(-7px);
 }
diff --git a/images/i.webp b/images/i.webp
diff --git a/images/right.svg b/images/right.svg
diff --git a/index.html b/index.html
@@ -39,7 +39,7 @@
  <li class="dropdown_list_item">
  <span class="additional_layer"></span
  ><img
- src="images/i.webp"
+ src="./images/menu.svg"
  class="list_item_image"
  alt="game_image"
  />
@@ -48,7 +48,7 @@
  <li class="dropdown_list_item">
  <span class="additional_layer"></span
  ><img
- src="images/i.webp"
+ src="./images/menu.svg"
  class="list_item_image"
  alt="game_image"
  />
@@ -58,6 +58,20 @@
  </div>
  </div>
 
+ <div class="select-1">
+ ...
+ <ul class="select-2">
+ <li>Settings</li>
+ <li>How does RAWG feel?</li>
+ <li>Leaderboard</li>
+ <li>Discord</li>
+ <li>@rawgtheworld</li>
+ <li>@rawgthepictures</li>
+ <li>Get an API key</li>
+ <li>Sitemap</li>
+ </ul>
+ </div>
+
  <img src="./images/menu.svg" alt="menu" class="menu" id="menu">
  </div>
 
@@ -80,22 +94,23 @@ <h1>New Releases</h1>
  <h1>Top</h1>
  <ul class="top">
  <li id="best-of-year" class="non-active">Best of the year</li>
- <li id="best-of-last-year" class="non-active">Popular in 2023</li>
+ <li id="best-of-last-year" class="non-active">Popular in 2022</li>
  <li id="top-250" class="non-active">All time top 250</li>
  </ul>
  </div>
  </section>
 
- <main class="main">
+ <main class="main" id="main-container">
+ <div id="m"></div>
  <span class="loader"></span>
 
- <div class="display-options-wrapper">
+ <div class="display-options-wrapper" id="display-options-wrapper">
  <img class="display-options active-option" id="grid" src="./images/apps.svg" alt="scroll thing">
  <img class="display-options" id="flex" src="./images/apps-sort.svg" alt="grid">
  </div>
 
  <ul id="months">
- <li class="month active" value="00" id="jan">Jan</li>
+ <li class="month non-active active" value="00" id="jan">Jan</li>
  <li class="month non-active" value="01">Feb</li>
  <li class="month non-active" value="02">Mar</li>
  <li class="month non-active" value="03">Apr</li>
@@ -115,8 +130,8 @@ <h1>Top</h1>
  </main>
  </div>
 
- <script src="./js/script.js"></script>
- <script src="./js/active.js"></script>
- <script src="./js/media.js"></script>
+ <script src="./js/script.js" async></script>
+ <script src="./js/active.js" async></script>
+ <script src="./js/media.js" async></script>
  </body>
 </html>
diff --git a/js/media.js b/js/media.js
@@ -24,4 +24,4 @@ flexOption.addEventListener("click", () => {
 gridOption.addEventListener("click", () => {
  document.getElementById("blocks-container").style.display = "grid";
  document.getElementById("blocks-container").style.maxWidth = "none";
-})
+})
diff --git a/js/script.js b/js/script.js
@@ -4,14 +4,17 @@ const exampleBlock = `
  <div class="bottom">
  <p></p>
  <div class="plus">
- <h5>+</h5>
+ <h5 class="plus-direct-child">+</h5>
  <h5>no data</h5>
  </div>
  </div>
  <div class="active-block">
  <h4></h4>
  <h4></h4>
- <div class="show-more-button">Show more like this</div>
+ <div class="show-more-button">
+ Show more like this
+ <img src="./images/right.svg">
+ </div>
  </div>
 </div>`;
 const key = "73d26e50a7cf40d7a5ce139d275e2bfc";
@@ -92,6 +95,7 @@ top250Element.addEventListener("click", () => {
 });
 
 calendarElement.addEventListener("click", () => {
+ clickedCategory = "Release calendar";
  monthsElement.style.display = "flex";
  monthly("00")
 });
@@ -331,7 +335,6 @@ function handleMonths(month) {
 
  s.setMonth(month);
  s.setDate(1);
- clickedCategory = `Best of the year`;
  s = s.toISOString().split("T")[0];
  return s;
 }
@@ -351,14 +354,13 @@ for(let i = 0; i < 12; i++) {
  })
 }
 
+const m = document.getElementById('m');
 
 function repeatingLoop(data) {
- console.log(data)
+ console.log(data);
+ m.innerHTML = `<h2 id="category" style="display: inline; position: absolute; top: -30px; left: 4px; font-size: 80px">${clickedCategory}</h2>`;
+ blocksContainer.innerHTML = "";
  loader[1].style.display = "none";
- blocksContainer.innerHTML = `
- <h2 style="display: inline; position: absolute; top: -30px;">${clickedCategory}</h2>
- `;
- let count = 1;
  for (let i = 0; i < data.results.length; i++) {
  blocksContainer.innerHTML = blocksContainer.innerHTML + exampleBlock;
  blocks[i].firstElementChild.src = data.results[i].background_image;
@@ -375,8 +377,8 @@ function repeatingLoop(data) {
  let a = document.getElementsByClassName("block");
  for (let i = 0; i < a.length; i++) {
  a[i].addEventListener("mouseenter", () => {
- a[i].style.zIndex = 4;
- a[i].lastElementChild.style.zIndex = 4;
+ a[i].style.zIndex = 5;
+ a[i].lastElementChild.style.zIndex = 5;
  a[i].style.borderBottomLeftRadius = 0;
  a[i].style.borderBottoьRightRadius = 0;
  a[i].lastElementChild.style.display = "flex";
@@ -392,21 +394,6 @@ function repeatingLoop(data) {
  });
  }
 }
-`
-<div class="block game-card">
- <img src="" alt="no image or bad connection">
- <div class="bottom">
- <p></p>
- <div class="plus">
- <h4>+</h4>
- <h4>lol ne mogu</h4>
- </div>
- </div>
- <div class="active-block">
- <h4></h4>
- <h4></h4>
- </div>
-</div>`;
 
 /** takes
  * @param {number} days amount of days