melhora da tela de destaques

paulatalim · paulatalim · commit 62ab41dfff3e · 2023-01-22T14:48:09.000-03:00
diff --git a/css/style_detalhes.css b/css/style_detalhes.css
@@ -118,13 +118,14 @@ main {
 
 .jogo-nao-encontrado {
     width: 100%;
-    height: 100%;
+    height: 80vh;
 
-    display: flex;
+    display: none;
     flex-direction: column;
     gap: 30px;
     align-items: center;
     justify-content: center;
+    color: #fff;
 }
 
 .jogo-nao-encontrado a {
diff --git a/detalhes.html b/detalhes.html
@@ -34,7 +34,13 @@
 
     <main class="container">
         <div class="card" id="card"></div>
+
+        <div class="jogo-nao-encontrado">
+            <h1>Jogo não encontrado</h1>
+            <a href="./index.html">Voltar para Homepage</a>
+        </div>
     </main>
+
     <footer>
         <p>
             Copyright 2020 - Disciplina de Desenvolvolvimento de Interfaces Web - <strong>ICEI PUC Minas</strong>
diff --git a/js/sketch_homepage.js b/js/sketch_homepage.js
@@ -65,11 +65,8 @@ function exibir_card_game_jogo (jogo, id, complemento) {
                                     str += `<p>Lançamento: <span id="jogo-card-info-jogo">${data[2]}/${data[1]}/${data[0]}</span></p>`
                                 }
 
-                        str += `<div><a id="jogo-maisDetalhe" href="./detalhes.html?id=${jogo.id}&num=${id}&adicional=${complemento}">Mais Detalhes...</a></div>
-                        </div>
-                    </div>
-                </div>
-            </div>`
+    str += `<div><a id="jogo-maisDetalhe" href="./detalhes.html?id=${jogo.id}&num=${id}&adicional=${complemento}">Mais Detalhes...</a></div>
+            </div></div></div></div>`
 
     return str
 }
@@ -289,13 +286,11 @@ function exibir_detalhes_games_jogo (data, id) {
                 </div>
                 <div class="cartaz" style="background-image: url(${jogo.background_image});"><div class="filtro"></div></div>`
                             
-        document.querySelector('#card').innerHTML = str   
+        document.querySelector('#card').innerHTML = str;
     }
     else {
-        document.querySelector('#card').innerHTML = `<div class="jogo-nao-encontrado">
-                                                        <h1>Jogo não encontrado</h1>
-                                                        <a href="./index.html">Voltar para Homepage</a>
-                                                    </div>`
+        document.querySelector('#card').style.display = 'none';
+        document.querySelector('.jogo-nao-encontrado').style.display = 'flex';
     }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -65,11 +65,8 @@ function exibir_card_game_jogo (jogo, id, complemento) {`
`65`	`65`	str += `<p>Lançamento: <span id="jogo-card-info-jogo">${data[2]}/${data[1]}/${data[0]}</span></p>`
`66`	`66`	`}`
`67`	`67`
`68`		- str += `<div><a id="jogo-maisDetalhe" href="./detalhes.html?id=${jogo.id}&num=${id}&adicional=${complemento}">Mais Detalhes...</a></div>
`69`		`- </div>`
`70`		`- </div>`
`71`		`- </div>`
`72`		- </div>`
	`68`	+ str += `<div><a id="jogo-maisDetalhe" href="./detalhes.html?id=${jogo.id}&num=${id}&adicional=${complemento}">Mais Detalhes...</a></div>
	`69`	+ </div></div></div></div>`
`73`	`70`
`74`	`71`	`return str`
`75`	`72`	`}`
`@@ -289,13 +286,11 @@ function exibir_detalhes_games_jogo (data, id) {`
`289`	`286`	`</div>`
`290`	`287`	<div class="cartaz" style="background-image: url(${jogo.background_image});"><div class="filtro"></div></div>`
`291`	`288`
`292`		`- document.querySelector('#card').innerHTML = str`
	`289`	`+ document.querySelector('#card').innerHTML = str;`
`293`	`290`	`}`
`294`	`291`	`else {`
`295`		- document.querySelector('#card').innerHTML = `<div class="jogo-nao-encontrado">
`296`		`- <h1>Jogo não encontrado</h1>`
`297`		`- <a href="./index.html">Voltar para Homepage</a>`
`298`		- </div>`
	`292`	`+ document.querySelector('#card').style.display = 'none';`
	`293`	`+ document.querySelector('.jogo-nao-encontrado').style.display = 'flex';`
`299`	`294`	`}`
`300`	`295`	`}`
`301`	`296`