Skip to content

Commit e28d3e0

Browse files
jorgemartiinezjorgemartiinez
committed
ya se puede visualizar las peliculas populares, en cines, y al clicar en ella te lleva a su página para ver más detalles. Ahora hay que mirar alguna forma de abstraer la lógica para poder compartirla en las dos vistas, la de películas y la de series, ya que la api es muy similar
1 parent 45a28d4 commit e28d3e0

27 files changed

+785
-117
lines changed

‎package-lock.json

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"core-js": "^2.6.5",
1313
"vue": "^2.6.10",
1414
"vue-card-stack": "^1.2.2",
15+
"vue-infinite-scroll": "^2.0.2",
1516
"vue-router": "^3.0.3",
1617
"vuex": "^3.0.1"
1718
},

‎src/App.vue

+29
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,11 @@ export default {
1919

2020
<style lang="scss">
2121
// * RESET CSS
22+
23+
#app {
24+
animation: fadeIn 1s ease-in-out;
25+
}
26+
2227
*,
2328
*::before,
2429
*::after {
@@ -57,6 +62,11 @@ a:visited {
5762
color: inherit;
5863
}
5964
65+
router-link {
66+
color: inherit;
67+
text-decoration: none;
68+
}
69+
6070
// * TYPOGRAPHY
6171
.title {
6272
font-size: 4rem;
@@ -80,4 +90,23 @@ a:visited {
8090
max-width: 120rem;
8191
margin: 0 auto;
8292
}
93+
94+
// * ANIMATIONS
95+
96+
@keyframes fadeIn {
97+
from {
98+
opacity: 0;
99+
}
100+
to {
101+
opacity: 1;
102+
}
103+
}
104+
105+
.fadeInFast {
106+
animation: fadeIn 0.5s ease-in;
107+
}
108+
109+
.fadeInSlow {
110+
animation: fadeIn 1.5s ease;
111+
}
83112
</style>

‎src/assets/no-image.svg

+47
Loading

‎src/components/grid/CardGrid.vue

+19-66
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,35 @@
11
<template>
2-
<div class="card-grid">
3-
<article class="card" v-for="item of items.results" :key="item.id">
4-
<div class="card__img-wrapper">
5-
<img
6-
class="card__img"
7-
:src="`https://image.tmdb.org/t/p/original/${item.poster_path}`"
8-
/>
9-
<div class="card__rating">
10-
<span>{{ item.vote_average }}</span>
11-
</div>
12-
</div>
13-
<div class="card__info">
14-
<h2 class="title-sub">{{ item.title }}</h2>
15-
<p class="paragraph-sub">{{ item.release_date }}</p>
16-
</div>
17-
</article>
2+
<div>
3+
<div class="card-grid">
4+
<CardGridItem :item="item" v-for="item of items" :key="item.id" />
5+
</div>
6+
<div
7+
v-infinite-scroll="loadMore"
8+
infinite-scroll-disabled="busy"
9+
infinite-scroll-distance="10"
10+
>
11+
<img src="@/assets/icons/loading.svg" v-if="busy" />
12+
</div>
1813
</div>
1914
</template>
2015

2116
<script>
17+
import CardGridItem from '@/components/grid/CardGridItem.vue';
2218
export default {
23-
props: { items: Object }
19+
components: { CardGridItem },
20+
props: { items: Array, busy: Boolean },
21+
methods: {
22+
loadMore() {
23+
this.$emit('loadNext');
24+
}
25+
}
2426
};
2527
</script>
2628

2729
<style lang="scss" scoped>
28-
$border-radius: 1.5rem;
29-
3030
.card-grid {
3131
display: grid;
3232
grid-template-columns: auto auto auto auto;
3333
grid-gap: 3rem 2rem;
34-
35-
.card {
36-
display: flex;
37-
flex-direction: column;
38-
align-items: center;
39-
justify-content: space-between;
40-
height: 100%;
41-
width: 100%;
42-
background-color: #fff;
43-
box-shadow: 0.5rem 0.5rem 0.5rem rgba(rgb(0, 0, 0), 20);
44-
border-radius: $border-radius;
45-
backface-visibility: hidden;
46-
transition: transform 0.5s ease-in-out;
47-
cursor: pointer;
48-
49-
&__img-wrapper {
50-
width: 100%;
51-
height: 85%;
52-
position: relative;
53-
}
54-
55-
&__img {
56-
width: inherit;
57-
height: 100%;
58-
border-top-right-radius: $border-radius;
59-
border-top-left-radius: $border-radius;
60-
}
61-
62-
&__info {
63-
height: 15%;
64-
padding: 0.5rem;
65-
}
66-
67-
&__rating {
68-
position: absolute;
69-
bottom: -2%;
70-
left: 2%;
71-
border-radius: 50%;
72-
padding: 0.5rem 1.2rem;
73-
border: 3px solid $color-primary;
74-
background-color: #000;
75-
}
76-
77-
&:hover {
78-
transform: scale(1.05);
79-
}
80-
}
8134
}
8235
</style>

‎src/components/grid/CardGridItem.vue

+73-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,79 @@
11
<template>
2-
<div></div>
2+
<div>
3+
<article class="card fadeInSlow" @click="goToRoute(item.id)">
4+
<div class="card__img-wrapper">
5+
<img class="card__img" :src="checkImg(item.poster_path)" />
6+
<CardRating :rating="item.vote_average" />
7+
</div>
8+
<div class="card__info">
9+
<h2 class="title-sub">{{ item.title | cutBySize(20) }}</h2>
10+
<p class="paragraph-sub">{{ item.release_date }}</p>
11+
</div>
12+
</article>
13+
</div>
314
</template>
415

516
<script>
6-
export default {};
17+
import CardRating from '@/components/ui/CardRating.vue';
18+
import { cutBySize } from '@/utils/filters.js';
19+
import { imgMixin } from '@/mixins';
20+
21+
export default {
22+
props: {
23+
item: Object
24+
},
25+
mixins: [imgMixin],
26+
components: {
27+
CardRating
28+
},
29+
filters: {
30+
cutBySize
31+
},
32+
methods: {
33+
goToRoute(id) {
34+
this.$router.push(`/movies/${id}`);
35+
}
36+
}
37+
};
738
</script>
839

9-
<style lang="sass" scoped></style>
40+
<style lang="scss" scoped>
41+
$border-radius: 1.5rem;
42+
43+
.card {
44+
display: flex;
45+
flex-direction: column;
46+
align-items: center;
47+
justify-content: space-between;
48+
height: 100%;
49+
width: 100%;
50+
background-color: #fff;
51+
box-shadow: 0.5rem 0.5rem 0.5rem rgba(rgb(0, 0, 0), 20);
52+
border-radius: $border-radius;
53+
backface-visibility: hidden;
54+
transition: transform 0.5s ease-in-out;
55+
cursor: pointer;
56+
57+
&__img-wrapper {
58+
width: 100%;
59+
height: 85%;
60+
position: relative;
61+
}
62+
63+
&__img {
64+
width: inherit;
65+
height: 100%;
66+
border-top-right-radius: $border-radius;
67+
border-top-left-radius: $border-radius;
68+
}
69+
70+
&__info {
71+
height: 15%;
72+
padding: 0.5rem;
73+
}
74+
75+
&:hover {
76+
transform: scale(1.05);
77+
}
78+
}
79+
</style>

‎src/components/layout/TheNavBar.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</div>
66
<ul class="nav__links">
77
<li class="nav__item" v-for="(item, index) of menu" :key="index">
8-
<router-link to="" class="nav__link">
8+
<router-link :to="item.path" class="nav__link">
99
<img
1010
class="nav__icon"
1111
:src="require(`@/assets/icons/${item.icon}`)"

‎src/components/single_page/ItemActors.vue

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<template>
2+
<div class="spacing">
3+
<h2 class="title">Reparto</h2>
4+
<div class="cast">
5+
<div class="cast__card" v-for="(actor, index) of cast" :key="index">
6+
<img class="cast__img" :src="checkImg(actor.profile_path)" alt="" />
7+
<h2 class="title-sub">{{ actor.name | cutBySize(15) }}</h2>
8+
</div>
9+
</div>
10+
</div>
11+
</template>
12+
13+
<script>
14+
import { imgMixin } from '@/mixins';
15+
import { cutBySize } from '@/utils/filters.js';
16+
17+
export default {
18+
mixins: [imgMixin],
19+
props: {
20+
cast: Array
21+
},
22+
filters: {
23+
cutBySize
24+
}
25+
};
26+
</script>
27+
28+
<style lang="scss" scoped>
29+
.spacing {
30+
margin-top: 5rem;
31+
}
32+
33+
.cast {
34+
display: flex;
35+
flex-wrap: nowrap;
36+
overflow-x: auto;
37+
justify-content: flex-start;
38+
-webkit-overflow-scrolling: touch;
39+
-ms-overflow-style: -ms-autohiding-scrollbar;
40+
height: 50rem;
41+
padding-bottom: 4rem;
42+
43+
&__card {
44+
flex: 0 0 20%;
45+
display: flex;
46+
flex-direction: column;
47+
align-items: center;
48+
height: 100%;
49+
background-color: #fff;
50+
box-shadow: 0.5rem 0.5rem 0.5rem rgba(rgb(0, 0, 0), 20);
51+
border-radius: 1rem;
52+
&:not(:last-child) {
53+
margin-right: 2rem;
54+
}
55+
}
56+
57+
&__img {
58+
width: 100%;
59+
flex-shrink: 0;
60+
height: 80%;
61+
margin-bottom: 2rem;
62+
border-top-right-radius: 1rem;
63+
border-top-left-radius: 1rem;
64+
}
65+
66+
.title-sub {
67+
margin-top: 0rem !important;
68+
color: #000 !important;
69+
}
70+
}
71+
</style>

0 commit comments

Comments
 (0)