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

refactor: style MetaPreview

Browse source
This commit is contained in:
Tim 2023-06-16 14:37:46 +02:00
parent 4a8c7ddfbf
commit 7368b9e6b2
6 changed files with 83 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/App/styles.less
View file

@ -22,6 +22,7 @@
--focus-outline-size: 2px;
--color-facebook: #4267b2;
--color-twitter: #1DA1F2;
--color-imdb: #f5c518;
--color-placeholder: #60606080;
--color-placeholder-text: @color-surface-50;
--color-placeholder-background: @color-surface-dark5-20;

2
src/common/MetaPreview/ActionButton/ActionButton.js
View file

@ -9,7 +9,7 @@ const styles = require('./styles');
const ActionButton = ({ className, icon, label, ...props }) => {
return (
<Button title={label} {...props} className={classnames(className, styles['action-button-container'])}>
<Button title={label} {...props} className={classnames(className, styles['action-button-container'], { 'wide': typeof label === 'string' })}>
{
typeof icon === 'string' && icon.length > 0 ?
<div className={styles['icon-container']}>

46
src/common/MetaPreview/ActionButton/styles.less
View file

@ -5,33 +5,34 @@
.action-button-container {
display: flex;
flex-direction: column;
flex-direction: row;
justify-content: center;
background-color: @color-surface-light5-20;
align-items: center;
gap: 1rem;
border-radius: 100%;
background-color: var(--primary-overlay-color);
backdrop-filter: blur(5px);
transition: all 0.1s ease-out;
&:hover, &:focus {
background-color: @color-accent3;
box-shadow: 0 0 0 0.1rem var(--primary-foreground-color) inset;
background-color: transparent;
}
.icon-container {
flex: 0 0 50%;
align-self: stretch;
padding-top: 15%;
&:only-child {
padding: 5% 0;
}
flex: none;
.icon {
display: block;
width: 100%;
height: 100%;
color: @color-surface-light5-90;
height: 1.75rem;
width: 1.75rem;
color: var(--primary-foreground-color);
opacity: 0.9;
}
}
.label-container {
flex: 0 0 50%;
flex: none;
align-self: stretch;
display: flex;
flex-direction: row;
@ -39,11 +40,13 @@
.label {
flex: 1;
font-size: 1rem;
font-weight: 500;
max-height: 2.4em;
padding: 0 0.2rem;
text-align: center;
color: @color-surface-light5-90;
color: var(--primary-foreground-color);
opacity: 0.9;
}
}
}
@ -54,21 +57,8 @@
padding: 0 1rem;
.icon-container {
flex: none;
align-self: center;
height: 2rem;
width: 2rem;
padding-top: 0;
margin-right: 0.5rem;
&:only-child {
padding: 0;
margin-right: 0;
}
}
.label-container {
flex: 1;
}
}
}

21
src/common/MetaPreview/MetaLinks/styles.less
View file

@ -4,10 +4,12 @@
.meta-links-container {
.label-container {
margin-bottom: 0.2rem;
margin-bottom: 0.75rem;
text-transform: uppercase;
font-weight: 500;
color: @color-surface-dark3-90;
font-size: 0.95rem;
font-weight: 700;
color: var(--primary-foreground-color);
opacity: 0.3;
}
.links-container {
@ -19,15 +21,18 @@
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
margin-right: 0.5rem;
margin-bottom: 0.2rem;
padding: 0.3rem 0.5rem;
margin-right: 0.75rem;
margin-bottom: 0.75rem;
padding: 0.4rem 1.25rem;
white-space: nowrap;
text-overflow: ellipsis;
border-radius: 2rem;
border: var(--focus-outline-size) solid transparent;
color: @color-surface-light2-90;
background-color: @color-surface-light5-20;
font-size: 1rem;
font-weight: 500;
color: var(--primary-foreground-color);
background-color: var(--primary-overlay-color);
backdrop-filter: blur(5px);
&:hover, &:focus {
background-color: @color-surface-light5-30;

16
src/common/MetaPreview/MetaPreview.js
View file

@ -147,8 +147,8 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
target={'_blank'}
{...(compact ? { tabIndex: -1 } : null)}
>
<Icon className={styles['icon']} name={'imdb'} />
<div className={styles['label']}>{linksGroups.get(CONSTANTS.IMDB_LINK_CATEGORY).label}</div>
<Icon className={styles['icon']} name={'imdb'} />
</Button>
:
null
@ -157,14 +157,6 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
:
null
}
{
compact && typeof name === 'string' && name.length > 0 ?
<div className={styles['name-container']}>
{name}
</div>
:
null
}
{
compact && typeof description === 'string' && description.length > 0 ?
<div className={styles['description-container']}>{description}</div>
@ -194,7 +186,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
<ActionButton
className={styles['action-button']}
icon={inLibrary ? 'remove-from-library' : 'add-to-library'}
label={inLibrary ? t('REMOVE_FROM_LIB') : t('ADD_TO_LIB')}
label={compact ? null : inLibrary ? t('REMOVE_FROM_LIB') : t('ADD_TO_LIB')}
tabIndex={compact ? -1 : 0}
onClick={toggleInLibrary}
/>
@ -206,7 +198,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
<ActionButton
className={styles['action-button']}
icon={'trailer'}
label={t('TRAILER')}
label={compact ? null : t('TRAILER')}
tabIndex={compact ? -1 : 0}
href={trailerHref}
/>
@ -231,7 +223,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
<ActionButton
className={styles['action-button']}
icon={'share'}
label={t('CTX_SHARE')}
tooltip={t('CTX_SHARE')}
tabIndex={compact ? -1 : 0}
onClick={openShareModal}
/>

104
src/common/MetaPreview/styles.less
View file

@ -13,12 +13,11 @@
.meta-info-container {
.logo, .logo-placeholder {
width: 100%;
height: 8rem;
background-color: @color-surface-dark5-10;
height: 6rem;
}
.runtime-release-info-container {
justify-content: space-evenly;
justify-content: space-between;
.runtime-label, .release-info-label {
margin: 1rem 0.4rem;
@ -31,8 +30,7 @@
}
.action-buttons-container {
justify-content: space-evenly;
padding: 0;
justify-content: space-between;
.action-button:not(:last-child) {
margin-right: 0;
@ -55,7 +53,8 @@
bottom: 0;
left: 0;
z-index: 1;
background: @color-background-dark2-60;
background: var(--tertiary-background-color);
opacity: 0.8;
content: "";
}
@ -65,8 +64,7 @@
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0.9;
filter: blur(5px);
filter: blur(10px);
}
}
@ -91,7 +89,7 @@
}
.logo {
height: 8rem;
height: 9rem;
object-fit: contain;
object-position: center;
}
@ -110,10 +108,10 @@
.runtime-label, .release-info-label {
flex: 0 1 auto;
margin-right: 2rem;
margin-bottom: 0.5rem;
font-size: 1.4rem;
color: @color-surface-light5-90;
margin-right: 3rem;
font-size: 1.25rem;
font-weight: 600;
color: var(--primary-foreground-color);
}
.imdb-button-container {
@ -121,55 +119,41 @@
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 0.5rem;
padding: 0.3rem 1rem;
border-radius: 2.5rem;
border: var(--focus-outline-size) solid transparent;
background-color: @color-surface-light5-20;
&:hover, &:focus {
background-color: @color-surface-light5-30;
}
&:focus {
outline: none;
border: var(--focus-outline-size) solid @color-surface-light5;
}
.label {
flex: 0 1 auto;
margin-right: 1rem;
font-size: 1.25rem;
font-weight: 600;
color: var(--primary-foreground-color);
}
.icon {
flex: none;
width: 3rem;
height: 1.1rem;
margin-right: 1rem;
color: @color-surface-90;
}
.label {
flex: 0 1 auto;
max-height: 1.2em;
font-size: 1.6rem;
font-weight: 500;
color: @color-surface-light5-90;
height: 3rem;
color: var(--color-imdb);
}
}
}
.name-container {
margin-top: 1rem;
font-size: 1.5rem;
color: @color-surface-light5-90;
}
.description-container {
max-height: 6em;
margin-top: 1rem;
font-size: 1.1rem;
line-height: 1.5em;
color: @color-surface-light5-90;
font-size: 1rem;
font-weight: 400;
line-height: 2em;
color: var(--primary-foreground-color);
}
.meta-links {
margin-top: 1rem;
margin-top: 1.5rem;
}
}
@ -184,12 +168,18 @@
.action-button {
flex: none;
width: 6rem;
height: 6rem;
margin: 2rem 0;
width: 4rem;
height: 4rem;
margin-bottom: 3rem;
&:global(.wide) {
width: auto;
padding: 0 2rem;
border-radius: 4rem;
}
&:not(:last-child) {
margin-right: 2rem;
margin-right: 1rem;
}
}
}
@ -205,12 +195,21 @@
padding: 0 1.5rem;
.logo {
margin: 1em 0;
margin: 2rem auto;
}
.runtime-release-info-container {
justify-content: space-between;
.runtime-label, .release-info-label {
margin: 0;
}
}
}
.action-buttons-container {
flex-wrap: nowrap;
margin-top: 3rem;
padding: 0 1.5rem;
overflow-x: visible;
scrollbar-width: none;
@ -218,17 +217,6 @@
&::-webkit-scrollbar {
display: none;
}
.action-button {
width: auto;
height: 4rem;
max-width: 60%;
margin: 1rem 0;
&:not(:last-child) {
margin-right: 1rem;
}
}
}
}