feat: add review section
This commit is contained in:
zyachel
parent
2df4e936b3
commit
30dac07ba3
4 changed files with 113 additions and 16 deletions
|
|
@ -109,6 +109,20 @@ const getMovie = async (title, quality = null) => {
|
|||
'[data-testid="storyline-certificate"] li'
|
||||
).text();
|
||||
|
||||
// reviews
|
||||
const reviewSummary = $(
|
||||
'section[data-testid="UserReviews"] span[data-testid="review-summary"]'
|
||||
).text();
|
||||
const reviewRating = $(
|
||||
'section[data-testid="UserReviews"] div[data-testid="review-featured-header"]'
|
||||
)
|
||||
.children()
|
||||
.last()
|
||||
.text();
|
||||
const reviewComment = $(
|
||||
'section[data-testid="UserReviews"] div[data-testid="review-overflow"]'
|
||||
).text();
|
||||
|
||||
// details
|
||||
const releaseDate = $(
|
||||
'section[data-testid="Details"] li[data-testid="title-details-releasedate"] li'
|
||||
|
|
@ -223,6 +237,11 @@ const getMovie = async (title, quality = null) => {
|
|||
},
|
||||
reviews: {
|
||||
reviewScores,
|
||||
review: {
|
||||
reviewComment,
|
||||
reviewSummary,
|
||||
reviewRating,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -84,6 +84,26 @@ block content
|
|||
span.movie__heading-sub Parental Guidance:
|
||||
span= movie.storyline.parentalGuidance || '\u2013'
|
||||
|
||||
.movie__review
|
||||
h2.movie__heading-main Reviews
|
||||
-if (movie.reviews.review.reviewRating)
|
||||
.movie__review-box.review__box
|
||||
h3.review__summary.movie__heading-sub= movie.reviews.review.reviewSummary
|
||||
p.review__rating
|
||||
svg.basic__rating-icon.basic__icon: use(href='/img/misc/sprite.svg#icon-rating')
|
||||
span.movie__heading-sub= movie.reviews.review.reviewRating
|
||||
p.review__comment= movie.reviews.review.reviewComment
|
||||
-else
|
||||
p.review__na no reviews
|
||||
|
||||
.movie__review-scores.review__scores
|
||||
each reviewScore in movie.reviews.reviewScores
|
||||
p.review__score
|
||||
span.movie__heading-sub= reviewScore[0]
|
||||
|
|
||||
span= reviewScore[1]
|
||||
|
||||
a.movie__link(href='./reviews') All reviews
|
||||
|
||||
.movie__details
|
||||
h2.movie__heading-main Details
|
||||
|
|
|
|||
|
|
@ -1,6 +1,25 @@
|
|||
// importing as scss vars
|
||||
@use 'abstracts' as *;
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// PLACEHOLDERS
|
||||
////////////////////////////////////////////////////////////////
|
||||
%list-items:not(:last-of-type)::after {
|
||||
margin-right: 0.6rem;
|
||||
display: inline-block;
|
||||
content: ',';
|
||||
}
|
||||
|
||||
%bullet-items:not(:last-of-type)::after {
|
||||
display: inline-block;
|
||||
content: '\00b7';
|
||||
margin: 0 5px;
|
||||
font-weight: 900;
|
||||
font-family: var(--ff-alt-alpha);
|
||||
// font-size: var(--fs-200);
|
||||
color: var(--clr-card-text-alt-alpha);
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// HEADINGS
|
||||
////////////////////////////////////////////////////////////////
|
||||
|
|
@ -556,11 +575,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
%list-items:not(:last-of-type)::after {
|
||||
margin-right: 0.6rem;
|
||||
display: inline-block;
|
||||
content: ',';
|
||||
}
|
||||
&__title {
|
||||
font-family: var(--ff-alt-alpha);
|
||||
color: var(--clr-card-heading);
|
||||
|
|
@ -605,15 +619,7 @@
|
|||
// font-size: var(--fs-180);
|
||||
// line-height: 1;
|
||||
|
||||
&:not(:last-of-type)::after {
|
||||
display: inline-block;
|
||||
content: '\00b7';
|
||||
margin: 0 5px;
|
||||
font-weight: 900;
|
||||
font-family: var(--ff-alt-alpha);
|
||||
font-size: var(--fs-200);
|
||||
color: var(--clr-card-text-alt-alpha);
|
||||
}
|
||||
@extend %bullet-items;
|
||||
}
|
||||
|
||||
&__stats {
|
||||
|
|
@ -802,3 +808,44 @@
|
|||
display: grid;
|
||||
gap: var(--spacer-050);
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// review
|
||||
////////////////////////////////////////////////////////////////
|
||||
.review {
|
||||
&__scores {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacer-050) var(--spacer-300);
|
||||
padding-block: var(--spacer-100);
|
||||
}
|
||||
|
||||
&__score {
|
||||
}
|
||||
|
||||
&__box {
|
||||
display: grid;
|
||||
grid-template-columns: auto min-content;
|
||||
gap: var(--spacer-100);
|
||||
|
||||
@include bp(bp-725) {
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__summary {
|
||||
}
|
||||
|
||||
&__rating {
|
||||
display: flex;
|
||||
gap: var(--spacer-050);
|
||||
|
||||
> * {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__comment {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -516,7 +516,8 @@
|
|||
&__boxoffice,
|
||||
&__details,
|
||||
&__technical,
|
||||
&__media {
|
||||
&__media,
|
||||
&__review {
|
||||
// background: var(--clr-card-bg);
|
||||
// border-radius: var(--border-radius);
|
||||
padding: var(--spacer-200);
|
||||
|
|
@ -573,7 +574,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
&__media {
|
||||
&__review {
|
||||
align-self: center;
|
||||
grid-column: 1 / span 4;
|
||||
grid-row: -3 / -1;
|
||||
|
|
@ -583,6 +584,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
&__media {
|
||||
align-self: center;
|
||||
grid-column: 1 / -1;
|
||||
// grid-row: -3 / -1;
|
||||
// @include bp(bp-1100) {
|
||||
// grid-column: 1 / -1;
|
||||
// grid-row: unset;
|
||||
// }
|
||||
}
|
||||
|
||||
&__media-image-secondary-box {
|
||||
max-height: 30rem;
|
||||
flex: 1 0 30rem;
|
||||
|
|
|
|||
Loading…
Reference in a new issue