Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +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['details-container']}>
{
typeof videoName === 'string' ?
typeof metaItem?.name === 'string' ?
<div className={styles['name']}>
<span className={styles['label']}>Next on</span> { metaItem.name }
</div>
:
null
}
{
typeof videoName === 'string' ?
<div className={styles['title']}>
{ videoName }
</div>
:
@ -77,7 +85,7 @@ const NextVideoPopup = ({ className, metaItem, nextVideo, onDismiss, onNextVideo
}
</div>
<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'} />
<div className={styles['label']}>Dismiss</div>
</Button>

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

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