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

MetaItem styles adapted to the newest conventions

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-08-06 17:19:19 +03:00
parent 6d2443a2bd
commit 23c5b8ade8
2 changed files with 25 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/common/MetaItem/MetaItem.js
View file

@ -23,12 +23,14 @@ const MetaItem = React.memo(({ className, menuClassName, id, type, name, posterS
menuOpen ? menuRef.current.close() : menuRef.current.open();
}
}, [menuOpen]);
const placeholderIcon = ICON_FOR_TYPE[type] || 'ic_movies';
return (
<Button className={classnames(className, styles['meta-item-container'], styles[`poster-shape-${posterShape}`], { 'active': menuOpen })} title={name} data-id={id} onClick={onClick} onContextMenu={onContextMenu}>
<Button className={classnames(className, styles['meta-item-container'], styles[`poster-shape-${posterShape}`], { 'active': menuOpen })} title={name} data-id={id} onContextMenu={onContextMenu} onClick={onClick}>
<div className={styles['poster-image-container']}>
<div className={styles['placeholder-image-layer']}>
<Icon className={styles['placeholder-image']} icon={placeholderIcon} />
<Icon
className={styles['placeholder-image']}
icon={ICON_FOR_TYPE[type] || 'ic_movies'}
/>
</div>
{
typeof poster === 'string' && poster.length > 0 ?

35
src/common/MetaItem/styles.less
View file

@ -1,13 +1,12 @@
.meta-item-container {
background-color: var(--color-backgroundlight);
cursor: pointer;
&:hover, &:focus, &:global(.active) {
outline: var(--focusable-border-size) solid var(--color-surfacelighter);
outline-offset: initial;
outline: 0.2rem solid var(--color-surfacelighter);
background-color: var(--color-surfacelight);
.title-bar-container {
background-color: var(--color-surfacelight);
.title {
color: var(--color-backgrounddarker);
}
@ -37,9 +36,9 @@
}
.poster-image-container {
width: 100%;
position: relative;
z-index: 0;
background-color: var(--color-backgroundlight);
.placeholder-image-layer {
position: absolute;
@ -50,6 +49,7 @@
z-index: 0;
.placeholder-image {
display: block;
width: 100%;
height: 100%;
fill: var(--color-surfacelight20);
@ -84,10 +84,11 @@
overflow: visible;
.play-icon-container {
display: block;
width: 100%;
height: 100%;
overflow: visible;
filter: drop-shadow(0 0 0.5em var(--color-backgroundlight));
filter: drop-shadow(0 0 0.5rem var(--color-backgroundlight));
.play-icon-background {
fill: var(--color-surfacelighter);
@ -105,7 +106,7 @@
bottom: 0;
left: 0;
z-index: 3;
height: 0.5em;
height: 0.5rem;
background-color: var(--color-backgroundlighter);
.progress {
@ -116,27 +117,31 @@
}
.title-bar-container {
width: 100%;
height: 2.5em;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
height: 2.5rem;
.title {
flex-grow: 1;
padding: 0 0.5em;
line-height: 2.5em;
flex: 1;
padding-left: 0.5rem;
line-height: 2.4em;
color: var(--color-surfacelighter);
white-space: nowrap;
text-overflow: ellipsis;
&:only-child {
padding-right: 0.5rem;
}
}
.menu-icon {
flex: none;
width: 2.5em;
height: 2.5em;
padding: 0.6em 0;
display: block;
width: 2.5rem;
height: 2.5rem;
padding: 0.6rem;
fill: var(--color-surfacelighter);
&:hover, &:global(.active) {