mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-08-19 14:35:53 +00:00
addon moved; ui changed
This commit is contained in:
svetlagasheva
parent
ea5368a945
commit
6932072e76
5 changed files with 33 additions and 75 deletions
|
|
@ -6,7 +6,6 @@ import MetadataItem from './MetadataItem';
|
|||
import Router from './Router';
|
||||
import LibraryItemList from './LibraryItemList';
|
||||
import MetaItem from './MetaItem';
|
||||
import Addon from './Addon';
|
||||
import ShareAddon from './ShareAddon';
|
||||
import UserPanel from './UserPanel';
|
||||
import Slider from './Slider';
|
||||
|
|
@ -20,7 +19,6 @@ export {
|
|||
Router,
|
||||
LibraryItemList,
|
||||
MetaItem,
|
||||
Addon,
|
||||
ShareAddon,
|
||||
UserPanel,
|
||||
Slider
|
||||
|
|
|
|||
|
|
@ -48,25 +48,9 @@ const renderDescription = (description) => {
|
|||
);
|
||||
}
|
||||
|
||||
const renderUrls = (urls) => {
|
||||
if (urls.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['urls-container']}>
|
||||
{urls.map((url) => {
|
||||
return (
|
||||
<div key={url} className={styles['url']}>{url}</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const Addon = (props) => {
|
||||
return (
|
||||
<div className={styles['addon']}>
|
||||
<div className={classnames(styles['addon'], props.className)}>
|
||||
<div className={styles['logo-container']}>
|
||||
<Icon className={styles['logo']} icon={props.logo.length === 0 ? 'ic_addons' : props.logo} />
|
||||
</div>
|
||||
|
|
@ -78,27 +62,27 @@ const Addon = (props) => {
|
|||
</div>
|
||||
{renderType(props.types)}
|
||||
{renderDescription(props.description)}
|
||||
{renderUrls(props.urls)}
|
||||
<div className={styles['buttons']}>
|
||||
<div className={classnames(styles['button'], props.isInstalled ? styles['uninstall-button'] : styles['install-button'])} onClick={props.onToggleClicked}>
|
||||
<span className={styles['label']}>{props.isInstalled ? 'Uninstall' : 'Install'}</span>
|
||||
</div>
|
||||
<div className={classnames(styles['button'], styles['share-button'])} onClick={props.shareAddon}>
|
||||
<Icon className={styles['icon']} icon={'ic_share'} />
|
||||
<span className={styles['label']}>SHARE ADD-ON</span>
|
||||
</div>
|
||||
<div className={classnames(styles['button'], props.isInstalled ? styles['install-button'] : styles['uninstall-button'])} onClick={props.onToggleClicked}>
|
||||
<span className={styles['label']}>{props.isInstalled ? 'Install' : 'Uninstall'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Addon.propTypes = {
|
||||
className: PropTypes.string,
|
||||
logo: PropTypes.string.isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
version: PropTypes.string.isRequired,
|
||||
types: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||||
description: PropTypes.string.isRequired,
|
||||
urls: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||||
isOfficial: PropTypes.bool.isRequired,
|
||||
isInstalled: PropTypes.bool.isRequired,
|
||||
shareAddon: PropTypes.func.isRequired,
|
||||
onToggleClicked: PropTypes.func.isRequired
|
||||
|
|
@ -109,8 +93,8 @@ Addon.defaultProps = {
|
|||
version: '',
|
||||
types: [],
|
||||
description: '',
|
||||
urls: [],
|
||||
isOfficial: false,
|
||||
isInstalled: false
|
||||
};
|
||||
|
||||
export default Addon;
|
||||
export default Addon;
|
||||
|
|
@ -1,34 +1,21 @@
|
|||
.addon {
|
||||
--addon-width: 514px;
|
||||
--name-font-size: 20px;
|
||||
--version-font-size: 12px;
|
||||
--type-font-size: 12px;
|
||||
--description-font-size: 12px;
|
||||
--url-font-size: 12px;
|
||||
--button-border-width: 2px;
|
||||
--button-label-font-size: 14px;
|
||||
}
|
||||
|
||||
.addon {
|
||||
display: grid;
|
||||
display: inline-grid;
|
||||
width: var(--addon-width);
|
||||
padding: 2%;
|
||||
background-color: var(--color-background);
|
||||
grid-template-columns: 1fr 4fr;
|
||||
grid-template-rows: calc(0.04 * var(--addon-width)) calc(0.04 * var(--addon-width)) auto auto calc((0.08 * var(--addon-width)));
|
||||
padding: 1.6em;
|
||||
background-color: var(--color-backgroundlighter);
|
||||
grid-template-columns: 1fr 6fr 3fr;
|
||||
grid-template-rows: calc(0.03 * var(--addon-width)) calc(0.03 * var(--addon-width)) auto;
|
||||
grid-template-areas:
|
||||
"logo header"
|
||||
"logo type"
|
||||
"logo description"
|
||||
"urls urls"
|
||||
"buttons buttons";
|
||||
"logo header buttons"
|
||||
"logo type buttons"
|
||||
"logo description buttons";
|
||||
|
||||
.logo-container {
|
||||
grid-area: logo;
|
||||
|
||||
.logo {
|
||||
width: calc(0.2 * var(--addon-width));
|
||||
height: calc(0.2 * var(--addon-width));
|
||||
width: calc(0.12 * var(--addon-width));
|
||||
height: calc(0.12 * var(--addon-width));
|
||||
padding: 20%;
|
||||
fill: var(--color-surfacelighter);
|
||||
background-color: var(--color-backgrounddarker);
|
||||
|
|
@ -50,7 +37,7 @@
|
|||
.name {
|
||||
max-width: 80%;
|
||||
margin-right: 3%;
|
||||
font-size: var(--name-font-size);
|
||||
font-size: 1.8em;
|
||||
color: var(--color-surfacelighter);
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
|
|
@ -59,7 +46,6 @@
|
|||
|
||||
.version {
|
||||
flex: 1;
|
||||
font-size: var(--version-font-size);
|
||||
color: var(--color-surface);
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
|
|
@ -73,39 +59,25 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 4%;
|
||||
font-size: var(--type-font-size);
|
||||
color: var(--color-secondarylighter);
|
||||
}
|
||||
|
||||
.description {
|
||||
grid-area: description;
|
||||
padding-left: 4%;
|
||||
font-size: var(--description-font-size);
|
||||
color: var(--color-surfacelighter);
|
||||
word-break: break-all; //Firefox doesn't support { break-word }
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.urls-container {
|
||||
grid-area: urls;
|
||||
padding: 4% 0%;
|
||||
overflow: auto;
|
||||
word-break: break-all;
|
||||
|
||||
.url {
|
||||
font-size: var(--url-font-size);
|
||||
color: var(--color-surface);
|
||||
}
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
grid-area: buttons;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
|
||||
.button {
|
||||
width: 46%;
|
||||
width: 85%;
|
||||
height: calc(0.05 * var(--addon-width));
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -114,15 +86,17 @@
|
|||
border-style: solid;
|
||||
|
||||
.icon {
|
||||
width: 7%;
|
||||
margin-right: 2%;
|
||||
width: 8%;
|
||||
margin-right: 3%;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 1.1em;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&.share-button {
|
||||
margin-top: 4em;
|
||||
border-color: var(--color-secondarylighter);
|
||||
|
||||
.icon {
|
||||
|
|
@ -134,7 +108,8 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-secondarylighter);
|
||||
border-color: var(--color-secondarylight);
|
||||
background-color: var(--color-secondarylight);
|
||||
|
||||
.icon {
|
||||
fill: var(--color-surfacelighter);
|
||||
|
|
@ -151,7 +126,7 @@
|
|||
background-color: var(--color-signal5);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-signal580);
|
||||
background-color: var(--color-signal560);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { Addon, Checkbox, LibraryItemList, MetaItem, ShareAddon, UserPanel } from 'stremio-common';
|
||||
import { Checkbox, LibraryItemList, MetaItem, ShareAddon, UserPanel } from 'stremio-common';
|
||||
import Addon from '../src/routes/Addons/Addon';
|
||||
import Stream from '../src/routes/Detail/StreamsList/Stream';
|
||||
import Video from '../src/routes/Detail/VideosList/Video';
|
||||
import VideosList from '../src/routes/Detail/VideosList';
|
||||
|
|
|
|||
Loading…
Reference in a new issue