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

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 ? menuRef.current.close() : menuRef.current.open();
} }
}, [menuOpen]); }, [menuOpen]);
const placeholderIcon = ICON_FOR_TYPE[type] || 'ic_movies';
return ( 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['poster-image-container']}>
<div className={styles['placeholder-image-layer']}> <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> </div>
{ {
typeof poster === 'string' && poster.length > 0 ? typeof poster === 'string' && poster.length > 0 ?

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

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