Skip to content

Commit 2262a0d

Browse files
paulatalimpaulatalim
committed
reformulando carousel publisher
1 parent ae0a72e commit 2262a0d

File tree

3 files changed

+114
-81
lines changed

3 files changed

+114
-81
lines changed

‎css/style.css‎

Lines changed: 83 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -493,16 +493,90 @@ body {
493493
background: linear-gradient(0deg, rgba(124,0,247,1) 0%, rgba(139,0,204,1) 100%);
494494
color: #fff;
495495
width: 100%;
496-
height: 110vh;
496+
height: 100vh;
497497
margin: 0;
498498
padding: 15px 10%;
499499
}
500500

501-
.publisher-title, #publisher {
502-
height: auto;
501+
.publisher-slide {
502+
display: flex;
503+
flex-direction: row;
504+
align-items: center;
505+
justify-content: space-around;
506+
flex-wrap: wrap;
507+
}
508+
509+
.publisher-area-card {
510+
border: none;
511+
height: 400px;
512+
padding: 20px;
513+
}
514+
515+
.publisher-card {
516+
background-color: #000;
517+
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.342);
518+
margin: 0;
519+
padding: 0;
520+
border: none;
521+
border-radius: 20px;
522+
height: 100%;
523+
width: 100%;
524+
}
525+
526+
.publisher-card-banner {
527+
background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,1) 100%), url(./exemplo.png);
528+
background-repeat: no-repeat;
529+
background-size: cover;
530+
background-position: center;
531+
532+
border-top-left-radius: 20px;
533+
border-top-right-radius: 20px;
534+
height: 90%;
535+
536+
color:white;
537+
display: flex;
538+
align-items:flex-end;
539+
justify-content: start;
540+
padding: 10px 20px;
541+
542+
transition: height 3s;
543+
}
544+
545+
#publisher-card-title {
546+
font-size: 16pt;
547+
}
548+
549+
.publisher-card-conteudo {
550+
background-color: #000;
551+
color: #fff;
552+
border-bottom-left-radius: 20px;
553+
border-bottom-right-radius:20px;
554+
555+
padding: 0 20px;
556+
height: 0px;
557+
overflow: hidden;
558+
transition: height 3s;
559+
}
560+
561+
.publisher-card:hover .publisher-card-banner {
562+
height: 40%;
563+
}
564+
565+
.publisher-card:hover .publisher-card-conteudo {
566+
padding: 5px 20px;
567+
height: 60%;
568+
}
569+
570+
#publisher-card-conteudo-topicos {
571+
padding-left: 20px;
503572
}
504573

505-
.publisher .carousel, .publisher .carousel .carousel-item {
574+
#publisher-carousel .carousel-control-prev,
575+
#publisher-carousel .carousel-control-next {
576+
width: 5% !important;
577+
}
578+
579+
/* .publisher .carousel, .publisher .carousel .carousel-item {
506580
height: 95vh;
507581
}
508582
@@ -562,7 +636,7 @@ body {
562636
563637
#publisher-card-conteudo-topicos {
564638
padding-left: 20px;
565-
}
639+
} */
566640

567641
/*** SOBRE ***/
568642
.sobre {
@@ -653,39 +727,11 @@ footer p {
653727

654728
/* PUBLISHERS */
655729
.publisher {
656-
height: 100vh !important;
730+
min-height: 960px;
657731
}
658-
659-
.plataformas-title, .publisher-title {
660-
display: flex;
661-
align-items: center;
662-
}
663-
664-
.publisher .carousel-item .float-left {
665-
margin-top: 5%;
666-
}
667-
668-
.publisher .carousel, .publisher .carousel .carousel-item {
669-
height: 55vh;
670-
}
671-
672-
.publisher-slide {
673-
height: auto;
674-
padding: 20px;
675-
}
676-
677-
.publisher-card {
678-
background-color: rgba(0, 0, 0, 0);
732+
.publisher-area-card {
679733
height: 200px;
680734
}
681-
682-
.publisher-card-banner {
683-
height: 100%;
684-
}
685-
686-
.publisher-card-conteudo {
687-
display: none;
688-
}
689735
}
690736

691737
@media screen and (max-width: 800px) {
@@ -716,11 +762,6 @@ footer p {
716762
.card {
717763
background-position-y: 75%;
718764
}
719-
720-
.plataformas .carousel-item .float-left, .publisher .carousel-item .float-left {
721-
margin-top: 25% !important;
722-
}
723-
724765
}
725766

726767
@media screen and (max-width: 576px) {
@@ -735,16 +776,7 @@ footer p {
735776
}
736777

737778
/* PUBLISHER */
738-
.publisher .carousel, .publisher .carousel .carousel-item {
739-
height: 70vh;
740-
}
741-
742-
.publisher .carousel-item .float-left {
743-
margin-top: 0%;
744-
}
745-
746-
.publisher-card {
747-
background-color: rgba(0, 0, 0, 0);
748-
height: 150px;
779+
.publisher {
780+
height: auto;
749781
}
750782
}

‎index.html‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
</head>
2525

2626
<body>
27-
<a href="./test/index.html">teste</a>
27+
<!-- <a href="./test/index.html">teste</a> -->
2828
<header class="header">
2929
<nav class="navbar navbar-expand-lg navbar-dark">
3030
<a class="navbar-brand" href="#">
@@ -187,15 +187,16 @@ <h1>Plataformas</h1>
187187
<h1>Publishers</h1>
188188
</div>
189189

190-
<div id="recipeCarousel-publisher" class="carousel slide w-100" data-ride="carousel">
191-
<!-- Codigo gerado em js -->
192-
<div class="carousel-inner w-100" role="listbox" id="publisher-carousel-cards"></div>
190+
<div id="publisher-carousel" class="carousel slide col-12" data-ride="carousel">
193191

194-
<a class="carousel-control-prev" href="#recipeCarousel-publisher" role="button" data-slide="prev">
192+
<!-- Cards gerados em js -->
193+
<div class="carousel-inner publisher-area-slide"></div>
194+
195+
<a class="carousel-control-prev" href="#publisher-carousel" role="button" data-slide="prev">
195196
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
196197
<span class="sr-only">Previous</span>
197198
</a>
198-
<a class="carousel-control-next" href="#recipeCarousel-publisher" role="button" data-slide="next">
199+
<a class="carousel-control-next" href="#publisher-carousel" role="button" data-slide="next">
199200
<span class="carousel-control-next-icon" aria-hidden="true"></span>
200201
<span class="sr-only">Next</span>
201202
</a>

‎js/sketch_homepage.js‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -353,50 +353,50 @@ function exibir_publisher () {
353353

354354
//Inclusao de novo slide no corrousel
355355
for (let i = 0; i < Math.ceil(data.results.length/4); i++){
356-
str += `<div class="carousel-item row no-gutters`
356+
str += `<div class="carousel-item`
357357

358358
if (i == 0) {
359-
str += ` active">`
360-
} else {
361-
str += `">`
359+
str += ` active`
362360
}
361+
362+
str += `"><div class="publisher-slide">`
363+
364+
363365

364366
for (let j = 0; j < 4; j++) {
365367
let jogo = data.results[index]
366368
if (index < data.results.length) {
367-
str += `<div class="col-12 col-md-6 col-lg-3 float-left">
368-
<div class="publisher-slide">
369-
<div class="publisher-card">
370-
<div class="publisher-card-banner" style="background-image: url(${jogo.image_background});">
371-
<div class="publisher-card-banner-filtro">
372-
<h2>${jogo.name}</h2>
373-
</div>
374-
</div>
369+
str += `<div class="col-12 col-sm-6 col-md-6 col-lg-3 publisher-area-card">
370+
<div class="publisher-card">
371+
<div class="publisher-card-banner" style="background-image: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,1) 100%), url(${jogo.image_background});">
372+
<h2 id="publisher-card-title">${jogo.name}</h2>
373+
</div>
374+
375+
<div class="publisher-card-conteudo">
376+
<h5>Jogos:</h5>
375377
376-
<div class="publisher-card-conteudo">
377-
<h4>Jogos:</h3>
378+
<ul id="publisher-card-conteudo-topicos">`
379+
380+
for (let k = 0; k < jogo.games.length && k < 3; k++) {
381+
str+=`<li>${jogo.games[k].name}</li>`
382+
}
378383

379-
<ul id="publisher-card-conteudo-topicos">`
380-
381-
for (let k = 0; k < jogo.games.length; k++) {
382-
str+=`<li>${jogo.games[k].name}</li>`
383-
}
384-
385-
str += `</ul>
386-
</div>
384+
str += `</ul>
387385
</div>
388386
</div>
389387
</div>`
390388
}
391389
index++;
392390
}
393391

394-
str += `</div>`
392+
str += `</div></div>`
395393
}
396394

397-
document.getElementById('publisher-carousel-cards').innerHTML = str
395+
document.querySelector('.publisher-area-slide').innerHTML = str;
396+
// document.getElementById('publisher-carousel-cards').innerHTML = str
398397
});
399398
}
399+
400400
/***************
401401
* REQUISIÇÕES *
402402
***************/

0 commit comments

Comments
 (0)