Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-28 23:04:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #503 from Stremio/fix/new-next-episode-notif-design

Browse source 
feature: implemented the new pop-up design
This commit is contained in:
Tim 2023-11-06 15:14:29 +01:00 committed by GitHub
commit 2bcd92d1ff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/routes/Player/NextVideoPopup/NextVideoPopup.js
View file

@ -60,8 +60,16 @@ const NextVideoPopup = ({ className, metaItem, nextVideo, onDismiss, onNextVideo
<div className={styles['info-container']}> <div className={styles['info-container']}>
<div className={styles['details-container']}> <div className={styles['details-container']}>
{ {
typeof videoName === 'string' ? typeof metaItem?.name === 'string' ?
<div className={styles['name']}> <div className={styles['name']}>
<span className={styles['label']}>Next on</span> { metaItem.name }
</div>
:
null
}
{
typeof videoName === 'string' ?
<div className={styles['title']}>
{ videoName } { videoName }
</div> </div>
: :
@ -77,7 +85,7 @@ const NextVideoPopup = ({ className, metaItem, nextVideo, onDismiss, onNextVideo
} }
</div> </div>
<div className={styles['buttons-container']}> <div className={styles['buttons-container']}>
<Button className={styles['button-container']} onClick={onDismissButtonClick}> <Button className={classnames(styles['button-container'], styles['dismiss'])} onClick={onDismissButtonClick}>
<Icon className={styles['icon']} name={'close'} /> <Icon className={styles['icon']} name={'close'} />
<div className={styles['label']}>Dismiss</div> <div className={styles['label']}>Dismiss</div>
</Button> </Button>

39
src/routes/Player/NextVideoPopup/styles.less
View file

@ -5,8 +5,7 @@
.next-video-popup-container { .next-video-popup-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 16rem; width: 50rem;
width: 40rem;
animation: slide-fade-in 0.5s ease-in; animation: slide-fade-in 0.5s ease-in;
@keyframes slide-fade-in { @keyframes slide-fade-in {
@ -22,7 +21,7 @@
} }
.poster-container { .poster-container {
flex: 1 1 40%; flex: 1 1 45%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -45,19 +44,32 @@
} }
.info-container { .info-container {
flex: 1 1 70%; flex: 1 1 55%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.details-container { .details-container {
flex: auto; flex: auto;
padding: 1.5rem 1.5rem; padding: 2rem;
.name { .name {
flex: none; flex: none;
align-self: stretch; align-self: stretch;
max-height: 2.4em; max-height: 2.4em;
font-weight: 700; font-weight: 700;
margin-bottom: 1.5rem;
color: var(--primary-accent-color);
.label {
color: var(--primary-foreground-color);
}
}
.title {
flex: none;
align-self: stretch;
max-height: 2.4em;
font-weight: 500;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
color: var(--primary-foreground-color); color: var(--primary-foreground-color);
} }
@ -65,28 +77,33 @@
.description { .description {
color: var(--primary-foreground-color); color: var(--primary-foreground-color);
opacity: 0.5; opacity: 0.5;
max-width: 80%;
padding: 0.5rem 0;
} }
} }
.buttons-container { .buttons-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 0 1rem 2rem;
.spacing { .spacing {
flex: 0 0 50%; flex: 0 0 50%;
} }
.button-container { .button-container {
flex: 0 0 50%; flex: 0 0 45%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 3.5rem; height: 3.5rem;
padding: 0 0.5rem;
margin-left: 1rem;
border-radius: 1.75rem;
&.play-button { &.play-button {
border-radius: 0 0 var(--border-radius) 0; background-color: var(--primary-accent-color);
background-color: var(--secondary-accent-color);
.icon { .icon {
color: var(--primary-foreground-color); color: var(--primary-foreground-color);
@ -97,7 +114,7 @@
} }
&:hover { &:hover {
outline: var(--focus-outline-size) solid var(--secondary-accent-color); outline: var(--focus-outline-size) solid var(--primary-accent-color);
background-color: transparent; background-color: transparent;
} }
} }
@ -118,6 +135,10 @@
color: var(--primary-foreground-color); color: var(--primary-foreground-color);
} }
&.dismiss {
opacity: 0.6;
}
&:hover, &:focus { &:hover, &:focus {
background-color: var(--overlay-color); background-color: var(--overlay-color);
} }