ngn/libremdb
1
0
Fork 0
Code Issues 1 Pull Requests 9 Actions Packages Activity

refactor: make components more modular

Browse Source 
would help in implementing name route

also did some stylistic changes
This commit is contained in:
zyachel
2023-04-15 20:56:15 +05:30
parent 8ce02d0236
commit 18ca98fd4a
43 changed files with 757 additions and 796 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/styles/modules/components/title/basic.module.scss
View File

@ -1,97 +1,5 @@
@use '../../../abstracts' as helper;
.container {
margin-inline: auto;
background: var(--clr-bg-accent);
box-shadow: var(--clr-shadow);
border-radius: 5px;
overflow: hidden; // for background image
display: grid;
grid-template-columns: minmax(25rem, 30rem) 1fr;
@include helper.bp('bp-900') {
grid-template-columns: none;
grid-template-rows: 30rem min-content;
}
@include helper.bp('bp-700') {
grid-template-rows: 25rem min-content;
}
}
.imageContainer {
display: flex; // for bringing out image__NA out of blur
position: relative;
height: auto;
width: auto;
overflow: hidden;
background-size: cover;
background-position: top;
place-items: center;
@include helper.bp('bp-900') {
padding: var(--spacer-2);
isolation: isolate;
// for adding layer of color on top of background image
&::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to top,
var(--clr-bg-accent) 10%,
transparent
);
backdrop-filter: blur(8px);
}
}
}
.image {
object-fit: cover;
object-position: center;
@include helper.bp('bp-900') {
z-index: 1;
object-fit: contain;
outline: 3px solid var(--clr-fill);
outline-offset: 5px;
max-height: 100%;
margin: auto;
// overrriding nex/future/image defaults
height: initial !important;
width: initial !important;
position: relative !important;
}
&__NA {
z-index: 1;
fill: var(--clr-fill-muted);
}
}
.info {
padding: var(--spacer-2) var(--spacer-4);
display: flex;
flex-direction: column;
gap: var(--spacer-2);
@include helper.bp('bp-900') {
text-align: center;
align-items: center;
}
@include helper.bp('bp-450') {
gap: var(--spacer-1);
}
}
.title {
line-height: 1;
}

50
src/styles/modules/components/title/cast.module.scss
View File

@ -24,53 +24,3 @@
--min-height: 30rem;
}
}
.member {
height: 100%;
display: grid;
grid-template-rows: minmax(auto, 70%) min-content auto;
justify-items: center;
text-align: center;
font-size: var(--fs-5);
overflow: hidden;
border-radius: 5px;
box-shadow: var(--clr-shadow);
background-color: var(--clr-bg-accent);
&__imgContainer {
justify-self: stretch;
position: relative;
// for icon when image is unavailable
display: grid;
place-items: center;
}
&__img {
height: 100%;
object-fit: cover;
}
&__imgNA {
fill: var(--clr-fill-muted);
height: 40%;
}
&__textContainer {
display: grid;
gap: var(--spacer-0);
padding: var(--spacer-0);
// place-content: center;
text-align: center;
justify-items: center;
align-content: start;
}
&__name {
@include helper.prettify-link(var(--clr-link));
}
&__role {
font-size: 0.9em;
}
}

101
src/styles/modules/components/title/media.module.scss
View File

@ -1,101 +0,0 @@
@use '../../../abstracts' as helper;
// grid is better than flexbox, as in flexbox, you specifically have to specify height.
.media {
--min-height: 30rem;
--max-width: 50rem;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: var(--doc-whitespace); // declared in title.module.scss
@include helper.bp('bp-1200') {
grid-auto-flow: row;
grid-auto-columns: initial;
}
@include helper.bp('bp-700') {
--min-height: 20rem;
--max-width: 30rem;
}
@include helper.bp('bp-450') {
// --min-height: 15rem;
--max-width: 95%;
}
}
// section
.images,
.videos {
display: grid;
grid-template-rows: min-content;
gap: var(--comp-whitespace); // declared in title.module.scss
&__container {
overflow-x: auto;
display: grid;
grid-auto-flow: column;
gap: var(--spacer-2);
padding: 0 var(--spacer-2) var(--spacer-3) var(--spacer-2);
grid-auto-columns: var(--max-width);
min-height: var(--min-height);
}
}
%cardify {
overflow: hidden;
border-radius: 5px;
box-shadow: var(--clr-shadow);
}
// child of .videos
.trailer {
@extend %cardify;
&__video {
object-fit: cover;
height: 100%;
width: 100%;
}
}
// since it is wrapped in a tag
.video {
text-decoration: none;
}
.video,
.image {
@extend %cardify;
position: relative;
&__caption {
position: absolute;
inset-block-end: 0;
inset-inline-end: 0;
padding: var(--spacer-0);
font-size: 0.9em;
color: var(--clr-text);
background: var(--clr-bg);
// hovering effect only for desktop/stylus users
@media (any-hover: hover) and (any-pointer: fine) {
transform: translateY(100%);
transition: transform 500ms ease-in-out;
}
}
&__img {
object-position: top;
object-fit: cover;
}
&:hover &__caption {
transform: translateY(1%); // 0% is leaving some gap from bottom
}
}

74
src/styles/modules/components/title/more-like-this.module.scss
View File

@ -29,77 +29,3 @@
min-height: 37rem;
}
}
.item {
overflow: hidden;
border-radius: 5px;
box-shadow: var(--clr-shadow);
height: 100%;
display: grid;
grid-template-rows: minmax(auto, 70%) auto;
background-color: var(--clr-bg-accent);
text-decoration: none;
color: currentColor;
&__imgContainer {
justify-self: stretch;
position: relative;
// for icon when image is unavailable
display: grid;
place-items: center;
}
&__textContainer {
display: grid;
gap: var(--spacer-1);
padding: var(--spacer-1);
// place-content: center;
text-align: center;
justify-items: center;
align-content: start;
}
&__img {
height: 100%;
object-fit: cover;
}
&__imgNA {
fill: var(--clr-fill-muted);
height: 40%;
// vertical-align: center;
}
&__heading {
}
&__genres {
}
&__rating {
// font-size: 0.9em;
display: flex;
align-items: center;
gap: var(--spacer-0);
line-height: 1;
flex-wrap: wrap;
justify-content: center;
}
&__ratingNum {
}
&__ratingIcon {
--dim: 1em;
height: var(--dim);
width: var(--dim);
fill: var(--clr-fill);
}
&:hover {
background-color: var(--clr-bg-muted);
}
}