mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-04-18 17:02:12 +00:00
addon refactored
This commit is contained in:
svetlagasheva
parent
c80b1f9b27
commit
5c46765f7c
2 changed files with 123 additions and 108 deletions
|
|
@ -10,7 +10,7 @@ const renderName = (name) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<span className={styles['name']}>{name}</span>
|
||||
<div className={styles['name']}>{name}</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -20,9 +20,7 @@ const renderVersion = (version) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={styles['version-container']}>
|
||||
<div className={styles['version']}>{'v. ' + version}</div>
|
||||
</div>
|
||||
<div className={styles['version']}>{'v. ' + version}</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -57,7 +55,7 @@ const renderUrls = (urls) => {
|
|||
<div className={styles['urls-container']}>
|
||||
{urls.map((url) => {
|
||||
return (
|
||||
<span key={url} className={styles['url']}>{url}</span>
|
||||
<div key={url} className={styles['url']}>{url}</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
|
@ -66,26 +64,28 @@ const renderUrls = (urls) => {
|
|||
|
||||
const Addon = (props) => {
|
||||
return (
|
||||
<div className={styles['addon']}>
|
||||
<div className={styles['info-container']}>
|
||||
<div className={styles['addon-container']}>
|
||||
<div className={styles['addon']}>
|
||||
<div className={styles['logo-container']}>
|
||||
<Icon className={styles['logo']} icon={props.logo.length === 0 ? 'ic_addons' : props.logo} />
|
||||
</div>
|
||||
<div className={styles['header']}>
|
||||
{renderName(props.name)}
|
||||
{renderVersion(props.version)}
|
||||
<div className={styles['header-container']}>
|
||||
<div className={styles['header']}>
|
||||
{renderName(props.name)}
|
||||
{renderVersion(props.version)}
|
||||
</div>
|
||||
</div>
|
||||
{renderType(props.types)}
|
||||
{renderDescription(props.description)}
|
||||
</div>
|
||||
{renderUrls(props.urls)}
|
||||
<div className={styles['buttons']}>
|
||||
<div onClick={props.shareAddon} className={classnames(styles['button-container'], styles['share-button'])}>
|
||||
<Icon className={styles['icon']} icon={'ic_share'} />
|
||||
<span className={styles['label']}>SHARE ADD-ON</span>
|
||||
</div>
|
||||
<div onClick={props.onToggleClicked} className={classnames(styles['button-container'], props.isInstalled ? styles['install-button'] : styles['uninstall-button'])}>
|
||||
<span className={styles['label']}>{props.isInstalled ? 'Install' : 'Uninstall'}</span>
|
||||
{renderUrls(props.urls)}
|
||||
<div className={styles['buttons']}>
|
||||
<div onClick={props.shareAddon} className={classnames(styles['button'], styles['share-button'])}>
|
||||
<Icon className={styles['icon']} icon={'ic_share'} />
|
||||
<span className={styles['label']}>SHARE ADD-ON</span>
|
||||
</div>
|
||||
<div onClick={props.onToggleClicked} className={classnames(styles['button'], props.isInstalled ? styles['install-button'] : styles['uninstall-button'])}>
|
||||
<span className={styles['label']}>{props.isInstalled ? 'Install' : 'Uninstall'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,59 +1,65 @@
|
|||
@import 'stremio-colors';
|
||||
|
||||
.addon {
|
||||
width: 550px;
|
||||
padding: 18px;
|
||||
font-size: 12px;
|
||||
color: @colorwhite;
|
||||
font-family: LatoLight;
|
||||
@addon-width: 514px;
|
||||
@addon-padding: 18px;
|
||||
|
||||
@logo-width: floor((@addon-width * 0.2));
|
||||
|
||||
.addon-container {
|
||||
width: (@addon-width + (2 * @addon-padding));
|
||||
padding: @addon-padding;
|
||||
background-color: @colorglass;
|
||||
|
||||
.info-container {
|
||||
.addon {
|
||||
width: @addon-width;
|
||||
display: grid;
|
||||
margin-bottom: 26px;
|
||||
grid-template-columns: 80px 14px 420px;
|
||||
grid-template-rows: 22px 2px 18px 2px 36px auto;
|
||||
grid-template-columns: 1fr 4fr;
|
||||
grid-template-rows: floor((@logo-width * 0.25)) floor((@logo-width * 0.20)) auto auto ceil((@addon-width * 0.08));
|
||||
grid-template-areas:
|
||||
"logo . header"
|
||||
"logo . ."
|
||||
"logo . type"
|
||||
"logo . ."
|
||||
"logo . description"
|
||||
"logo . description";
|
||||
"logo header"
|
||||
"logo type"
|
||||
"logo description"
|
||||
"urls urls"
|
||||
"buttons buttons";
|
||||
|
||||
.logo-container {
|
||||
grid-area: logo;
|
||||
display: flex;
|
||||
|
||||
.logo {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
width: @logo-width;
|
||||
height: @logo-width;
|
||||
padding: 20%;
|
||||
background-color: @colordarkest;
|
||||
fill: @colorwhite;
|
||||
background-color: @colordarkest;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
.header-container {
|
||||
grid-area: header;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
padding-left: 4%;
|
||||
|
||||
.name {
|
||||
font-size: 20px;
|
||||
max-width: 350px;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
margin-right: 10px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
.version-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
color: @colorwhite60;
|
||||
.name {
|
||||
max-width: 80%;
|
||||
margin-right: 3%;
|
||||
font-size: 20px;
|
||||
color: @colorwhite;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.version {
|
||||
margin-top: 4px;
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
color: @colorwhite60;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -63,92 +69,101 @@
|
|||
|
||||
.type {
|
||||
grid-area: type;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 4%;
|
||||
font-size: 12px;
|
||||
color: @coloraccent;
|
||||
}
|
||||
|
||||
.description {
|
||||
grid-area: description;
|
||||
padding-left: 4%;
|
||||
font-size: 12px;
|
||||
color: @colorwhite;
|
||||
}
|
||||
}
|
||||
|
||||
.urls-container {
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
flex-direction: column;
|
||||
.urls-container {
|
||||
grid-area: urls;
|
||||
padding: 4% 0%;
|
||||
font-size: 12px;
|
||||
overflow: auto;
|
||||
word-break: break-all;
|
||||
|
||||
.url {
|
||||
color: @colorwhite60;
|
||||
.url {
|
||||
color: @colorwhite60;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
margin-top: 26px;
|
||||
justify-content: space-between;
|
||||
|
||||
.button-container {
|
||||
width: 230px;
|
||||
.buttons {
|
||||
grid-area: buttons;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
padding: 10px 0px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
|
||||
.icon {
|
||||
width: 18px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&.share-button {
|
||||
border-color: @coloraccent;
|
||||
.button {
|
||||
width: 46%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid;
|
||||
|
||||
.icon {
|
||||
fill: @coloraccent;
|
||||
width: 7%;
|
||||
margin-right: 2%;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: @coloraccent;
|
||||
font-size: 14px;
|
||||
color: @colorwhite;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @coloraccent;
|
||||
&.share-button {
|
||||
border-color: @coloraccent;
|
||||
|
||||
.icon {
|
||||
fill: @colorwhite;
|
||||
fill: @coloraccent;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: @colorwhite;
|
||||
color: @coloraccent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @coloraccent;
|
||||
|
||||
.icon {
|
||||
fill: @colorwhite;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: @colorwhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.install-button {
|
||||
border-color: @colorsignal5;
|
||||
background-color: @colorsignal5;
|
||||
&.install-button {
|
||||
border-color: @colorsignal5;
|
||||
background-color: @colorsignal5;
|
||||
|
||||
&:hover {
|
||||
background-color: @colorsignal580;
|
||||
}
|
||||
}
|
||||
|
||||
&.uninstall-button {
|
||||
border-color: @colorneutral;
|
||||
|
||||
&:hover {
|
||||
background-color: @colorneutral;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @colorsignal580;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.uninstall-button {
|
||||
border-color: @colorneutral;
|
||||
|
||||
&:hover {
|
||||
background-color: @colorneutral;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue