Skip to content

Commit 21351da

Browse files
paulatalimpaulatalim
committed
melhora no carregamento da pagina
1 parent bfa8b54 commit 21351da

File tree

3 files changed

+108
-72
lines changed

3 files changed

+108
-72
lines changed

‎css/style.css‎

Lines changed: 39 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -51,18 +51,13 @@ body {
5151
align-items: center;
5252
}
5353

54-
.jogos .subsessao-carregamento {
55-
display: none;
56-
}
57-
5854
.load {
5955
width: 80px;
6056
height: 80px;
6157

6258
border: 10px solid transparent;
6359
border-radius: 50%;
64-
border-left: 10px solid rgb(223,0,255);
65-
60+
6661
animation-name: loading;
6762
animation-duration: 1.5s;
6863
animation-timing-function: linear;
@@ -79,6 +74,19 @@ body {
7974
}
8075
}
8176

77+
.destaque-load, .jogo-load {
78+
border-left: 10px solid rgb(223,0,255);
79+
}
80+
81+
#plataforma-carregamento, #publisher-carregamento {
82+
width: 100%;
83+
height: 100%;
84+
}
85+
86+
.plataforma-load, .publisher-load {
87+
border-left: 10px solid #212121;
88+
}
89+
8290
/*** DESTAQUES ***/
8391
.destaque {
8492
margin: 0;
@@ -150,16 +158,17 @@ body {
150158
padding: 15px;
151159
}
152160

153-
.jogos-titulo {
154-
display: flex;
155-
justify-content: center;
156-
align-items: center;
157-
}
158-
159161
.jogos {
160162
min-height: 100vh;
161163
padding: 30px;
162164
gap:15px;
165+
display: none;
166+
}
167+
168+
.jogos-titulo {
169+
display: flex;
170+
justify-content: center;
171+
align-items: center;
163172
}
164173

165174
.jogos-pesquisar {
@@ -305,6 +314,14 @@ body {
305314
display: none;
306315
}
307316

317+
.destaque-carousel {
318+
display: none;
319+
}
320+
321+
#pesquisa_cards {
322+
display: none;
323+
}
324+
308325
.cards {
309326
display: flex;
310327
flex-direction: row;
@@ -422,6 +439,7 @@ body {
422439
.ondas {
423440
padding: 0;
424441
margin: 0;
442+
display: none;
425443
}
426444

427445
/*** PLATAFORMAS ***/
@@ -432,6 +450,10 @@ body {
432450
height: 100vh;
433451
margin: 0;
434452
padding: 15px 10%;
453+
454+
display: none;
455+
flex-direction: column;
456+
justify-content: space-around;
435457
}
436458

437459
.plataformas-title {
@@ -444,7 +466,7 @@ body {
444466
}
445467

446468
#plataforma-carousel {
447-
display: flex;
469+
display: none;
448470
align-items: center;
449471
}
450472

@@ -622,6 +644,8 @@ body {
622644
height: 100vh;
623645
margin: 0;
624646
padding: 15px 10%;
647+
648+
display: none;
625649
}
626650

627651
.publisher-title {
@@ -634,7 +658,7 @@ body {
634658
}
635659

636660
#publisher-carousel {
637-
display: flex;
661+
display: none;
638662
align-items: center;
639663
}
640664

@@ -719,6 +743,7 @@ body {
719743
/*** SOBRE ***/
720744
.sobre {
721745
padding-top: 10%;
746+
display: none;
722747
}
723748

724749
.editorial-item {

‎index.html‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -53,25 +53,25 @@
5353
<section class="row destaque" id="destaques">
5454
<!-- Carregamento -->
5555
<div class="subsessao-carregamento destaque-carregamento">
56-
<div class="load"></div>
56+
<div class="load destaque-load"></div>
5757
</div>
5858

5959

60-
<div id="carouselIndicators" class="carousel slide" data-ride="carousel">
60+
<div id="destaque-carousel-indicators" class="destaque-carousel carousel slide" data-ride="carousel">
6161
<ol class="carousel-indicators">
62-
<li data-target="#carouselIndicators" data-slide-to="0" class="active"></li>
63-
<li data-target="#carouselIndicators" data-slide-to="1"></li>
64-
<li data-target="#carouselIndicators" data-slide-to="2"></li>
62+
<li data-target="#destaque-carousel-indicators" data-slide-to="0" class="active"></li>
63+
<li data-target="#destaque-carousel-indicators" data-slide-to="1"></li>
64+
<li data-target="#destaque-carousel-indicators" data-slide-to="2"></li>
6565
</ol>
6666

6767
<!-- Slides gerados em js -->
6868
<div class="carousel-inner" id="destaque-slide"></div>
6969

70-
<a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev">
70+
<a class="carousel-control-prev" href="#destaque-carousel-indicators" role="button" data-slide="prev">
7171
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
7272
<span class="sr-only">Previous</span>
7373
</a>
74-
<a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next">
74+
<a class="carousel-control-next" href="#destaque-carousel-indicators" role="button" data-slide="next">
7575
<span class="carousel-control-next-icon" aria-hidden="true"></span>
7676
<span class="sr-only">Next</span>
7777
</a>
@@ -127,15 +127,15 @@ <h1>Jogos</h1>
127127
aria-label="Search"
128128
id="campo_buscar"
129129
oninput="barra_de_busca()">
130-
<button id="jogos-btn-limpar-pesquisa" onclick="limpar_barra_pesquisa()"><i class="fa-solid fa-xmark"></i></button>
130+
<button id="jogos-btn-limpar-pesquisa" onclick="limpar_pesquisa()"><i class="fa-solid fa-xmark"></i></button>
131131
<button id="jogos-btn-pesquisar" onclick="requisicao_games_jogo_pesquisa(0)"><i id="jogos-pesquisar-lupa-icone" class="fa-solid fa-magnifying-glass"></i></button>
132132
</div>
133133

134134
<!-- Carregamento -->
135-
<div class="subsessao-carregamento jogos-carregamento">
136-
<div class="load"></div>
135+
<div class="subsessao-carregamento" id="jogos-carregamento">
136+
<div class="load jogo-load"></div>
137137
</div>
138-
138+
139139
<!-- cards -->
140140
<div class="cards col-12" id="pesquisa_cards"></div>
141141

@@ -157,14 +157,19 @@ <h2>Nenhum jogo encontrado</h2>
157157
</section>
158158

159159
<!-- Ondas -->
160-
<img class="row col-12 ondas" src="./img/waves.svg" alt="Ondas">
160+
<img class="row col-12 ondas" id="div-ondas" src="./img/waves.svg" alt="Ondas">
161161

162162
<!-- Plataformas -->
163163
<section class="row plataformas" id="plataformas">
164164
<div class="col-12 plataformas-title">
165165
<h1>Plataformas</h1>
166166
</div>
167167

168+
<!-- Carregamento -->
169+
<div class="subsessao-carregamento" id="plataforma-carregamento">
170+
<div class="load plataforma-load"></div>
171+
</div>
172+
168173
<div id="plataforma-carousel" class="carousel slide col-12" data-ride="carousel">
169174
<!-- Cards gerados em js -->
170175
<div class="carousel-inner plataforma-area-slide"></div>
@@ -186,6 +191,11 @@ <h1>Plataformas</h1>
186191
<h1>Publishers</h1>
187192
</div>
188193

194+
<!-- Carregamento -->
195+
<div class="subsessao-carregamento" id="publisher-carregamento">
196+
<div class="load publisher-load"></div>
197+
</div>
198+
189199
<div id="publisher-carousel" class="carousel slide col-12" data-ride="carousel">
190200

191201
<!-- Cards gerados em js -->

‎js/sketch_homepage.js‎

Lines changed: 47 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -4,49 +4,40 @@
44
function exibir_games_destaques(data) {
55
let str = '';
66

7-
document.querySelector('.jogos').style.display = "none";
8-
document.querySelector('.plataformas').style.display = "none";
9-
document.querySelector('.publisher').style.display = "none";
10-
117
//Inclusao de novo slide no corrousel
128
for (let i = 0; i < 3; i++){
139
let jogo = data.results[i]
1410
let lancamento = jogo.released.split("-");
1511

12+
str+='<div class="carousel-item';
13+
1614
if (i == 0) {
17-
str += `<div class="carousel-item active">`
18-
} else {
19-
str += `<div class="carousel-item">`
15+
str += ' active';
2016
}
2117

22-
str += ` <div class="slide-destaque" style="background-image: url(${jogo.background_image});">
23-
<div class="destaque-filtro-image">
24-
<div class="col-lg-5 col-9 destaque-conteudo">
25-
<h1>${jogo.name}</h1>
26-
<p id="destaque-conteudo-detalhamento">
27-
<strong>Lançamento:</strong> ${lancamento[2]}/${lancamento[1]}/${lancamento[0]}<br>
28-
<strong>Plataformas:</strong> ${jogo.platforms[0].platform.name}`
18+
str += `"><div class="slide-destaque" style="background-image: url(${jogo.background_image});">
19+
<div class="destaque-filtro-image">
20+
<div class="col-lg-5 col-9 destaque-conteudo">
21+
<h1>${jogo.name}</h1>
22+
<p id="destaque-conteudo-detalhamento">
23+
<strong>Lançamento:</strong> ${lancamento[2]}/${lancamento[1]}/${lancamento[0]}<br>
24+
<strong>Plataformas:</strong> ${jogo.platforms[0].platform.name}`
2925

30-
//Coloca as plataformas
31-
for (let j = 1; j < jogo.platforms.length; j++) {
32-
str += `, ${jogo.platforms[j].platform.name}`
33-
}
26+
//Coloca as plataformas
27+
for (let j = 1; j < jogo.platforms.length; j++) {
28+
str += `, ${jogo.platforms[j].platform.name}`
29+
}
3430

35-
str += `<br><strong>Avaliação:</strong> ${jogo.rating}
36-
</p>
37-
</div>
38-
</div>
39-
</div>
40-
</div>`
31+
str += `<br><strong>Avaliação:</strong> ${jogo.rating}</p></div></div></div></div>`
4132
}
42-
document.querySelector('.destaque-carregamento').style.display = "none"
43-
// document.querySelector('.jogos-carregamento').style.display = "flex"
44-
// document.querySelector('.jogos').style.display = "flex";
45-
// document.querySelector('.plataformas').style.display = "flex";
46-
// document.querySelector('.publisher').style.display = "flex";
4733

48-
document.getElementById('destaque-slide').innerHTML = str
34+
document.getElementById('destaque-slide').innerHTML = str;
35+
requisicao_games_jogos('');
4936

37+
document.querySelector('.destaque-carregamento').style.display = "none";
38+
document.querySelector('.destaque-carousel').style.display = 'block';
39+
document.querySelector('.jogos').style.display = "flex";
40+
5041
return data;
5142
}
5243

@@ -158,8 +149,11 @@ function exibir_games_jogos(data, filtroBusca) {
158149
document.getElementById('pesquisa_cards').innerHTML = str
159150
}
160151

161-
document.querySelector('.jogos-carregamento').style.display = "none";
152+
document.getElementById('jogos-carregamento').style.display = "none";
162153
document.getElementById('pesquisa_cards').style.display = "flex";
154+
requisicao_plataformas();
155+
document.getElementById('div-ondas').style.display = "block";
156+
document.querySelector('.plataformas').style.display = "flex";
163157

164158
return data;
165159
}
@@ -317,12 +311,10 @@ function exibir_plataformas (data) {
317311
str += `<div class="carousel-item`
318312

319313
if (i == 0) {
320-
str += ` active">`
321-
} else {
322-
str += `">`
314+
str += ` active`
323315
}
324316

325-
str += '<div class="plataforma-slide">'
317+
str += '"><div class="plataforma-slide">'
326318

327319
for (let j = 0; j < 4; j++) {
328320
let jogo = data.results[index]
@@ -367,7 +359,13 @@ function exibir_plataformas (data) {
367359
str += `</div></div>`
368360
}
369361

370-
document.querySelector('.plataforma-area-slide').innerHTML = str
362+
document.querySelector('.plataforma-area-slide').innerHTML = str;
363+
document.getElementById('plataforma-carregamento').style.display = 'none';
364+
document.getElementById('plataformas').style.display = 'block'
365+
document.getElementById('plataforma-carousel').style.display = 'flex';
366+
requisicao_publisher();
367+
document.querySelector('.publisher').style.display = 'flex';
368+
371369
return data;
372370
}
373371

@@ -424,6 +422,12 @@ function exibir_publisher (data) {
424422
}
425423

426424
document.querySelector('.publisher-area-slide').innerHTML = str;
425+
426+
document.getElementById('publisher').style.display = 'block';
427+
document.getElementById('publisher-carregamento').style.display = 'none'
428+
document.getElementById('publisher-carousel').style.display = 'flex'
429+
document.querySelector('.sobre').style.display = 'flex';
430+
427431
return data;
428432
}
429433

@@ -520,18 +524,15 @@ function requisicao_games_jogo_detalhes (id, url_num, complemento) {
520524
.then(data => exibir_detalhes_games_jogo(data, id))
521525
}
522526

523-
onload = () => {
524-
requisicao_games_destaques();
527+
function limpar_pesquisa () {
528+
document.getElementById('jogos-btn-limpar-pesquisa').style.display = "none";
529+
document.getElementById('campo_buscar').value = '';
525530
requisicao_games_jogos('');
526-
requisicao_plataformas();
527-
requisicao_publisher();
531+
console.log('1')
532+
}
528533

529-
function limpar_pesquisa () {
530-
document.getElementById('jogos-btn-limpar-pesquisa').style.display = "none";
531-
document.getElementById('campo_buscar').value = '';
532-
requisicao_games_jogos('');
533-
}
534-
document.getElementById('jogos-btn-limpar-pesquisa').onclick = limpar_pesquisa();
534+
onload = () => {
535+
requisicao_games_destaques();
535536

536537
document.getElementById('campo_buscar').onfocus = () => {
537538
document.getElementById('jogos-btn-limpar-pesquisa').style.display = "inline";

0 commit comments

Comments
 (0)