mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-11 21:27:05 +00:00
style improvements
This commit is contained in:
svetlagasheva
parent
0788b9a2d5
commit
b4916cfba2
5 changed files with 174 additions and 178 deletions
|
|
@ -4,6 +4,8 @@ import classnames from 'classnames';
|
|||
import Icon from 'stremio-icons/dom';
|
||||
import styles from './styles';
|
||||
|
||||
const MAX_DESCRIPTION_SYMBOLS = 500;
|
||||
|
||||
const renderName = (name) => {
|
||||
if (name.length === 0) {
|
||||
return null;
|
||||
|
|
@ -42,7 +44,7 @@ const renderDescription = (description) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={styles['description']}>{description}</div>
|
||||
<div className={styles['description']}>{description.length > MAX_DESCRIPTION_SYMBOLS ? description.slice(0, MAX_DESCRIPTION_SYMBOLS) + '...' : description}</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -64,28 +66,26 @@ const renderUrls = (urls) => {
|
|||
|
||||
const Addon = (props) => {
|
||||
return (
|
||||
<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 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-container']}>
|
||||
<div className={styles['header']}>
|
||||
{renderName(props.name)}
|
||||
{renderVersion(props.version)}
|
||||
</div>
|
||||
<div className={styles['header-container']}>
|
||||
<div className={styles['header']}>
|
||||
{renderName(props.name)}
|
||||
{renderVersion(props.version)}
|
||||
</div>
|
||||
</div>
|
||||
{renderType(props.types)}
|
||||
{renderDescription(props.description)}
|
||||
{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>
|
||||
{renderType(props.types)}
|
||||
{renderDescription(props.description)}
|
||||
{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 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>
|
||||
|
|
|
|||
|
|
@ -1,195 +1,189 @@
|
|||
@import 'stremio-colors';
|
||||
|
||||
@addon-width: 514px;
|
||||
@addon-padding: 18px;
|
||||
@logo-width: floor((@addon-width * 0.2));
|
||||
|
||||
.addon-container {
|
||||
width: (@addon-width + (2 * @addon-padding));
|
||||
padding: @addon-padding;
|
||||
.addon {
|
||||
width: @addon-width;
|
||||
grid-template-rows: floor((@logo-width * 0.25)) floor((@logo-width * 0.20)) auto auto ceil((@addon-width * 0.08));
|
||||
|
||||
.addon {
|
||||
width: @addon-width;
|
||||
grid-template-rows: floor((@logo-width * 0.25)) floor((@logo-width * 0.20)) auto auto ceil((@addon-width * 0.08));
|
||||
.logo {
|
||||
width: @logo-width;
|
||||
height: @logo-width;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: @logo-width;
|
||||
height: @logo-width;
|
||||
}
|
||||
.name {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 20px;
|
||||
}
|
||||
.type {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.type {
|
||||
font-size: 12px;
|
||||
}
|
||||
.description {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 12px;
|
||||
}
|
||||
.urls-container {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.urls-container {
|
||||
font-size: 12px;
|
||||
}
|
||||
.button {
|
||||
border-width: 2px;
|
||||
|
||||
.button {
|
||||
border-width: 2px;
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
}
|
||||
.label {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addon-container {
|
||||
.addon {
|
||||
display: grid;
|
||||
padding: 2%;
|
||||
background-color: @colorglass;
|
||||
grid-template-columns: 1fr 4fr;
|
||||
grid-template-areas:
|
||||
"logo header"
|
||||
"logo type"
|
||||
"logo description"
|
||||
"urls urls"
|
||||
"buttons buttons";
|
||||
|
||||
.addon {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 4fr;
|
||||
grid-template-areas:
|
||||
"logo header"
|
||||
"logo type"
|
||||
"logo description"
|
||||
"urls urls"
|
||||
"buttons buttons";
|
||||
.logo-container {
|
||||
grid-area: logo;
|
||||
|
||||
.logo-container {
|
||||
grid-area: logo;
|
||||
|
||||
.logo {
|
||||
padding: 20%;
|
||||
fill: @colorwhite;
|
||||
background-color: @colordarkest;
|
||||
}
|
||||
.logo {
|
||||
padding: 20%;
|
||||
fill: @colorwhite;
|
||||
background-color: @colordarkest;
|
||||
}
|
||||
}
|
||||
|
||||
.header-container {
|
||||
grid-area: header;
|
||||
.header-container {
|
||||
grid-area: header;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
padding-left: 4%;
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
padding-left: 4%;
|
||||
align-items: baseline;
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
.name {
|
||||
max-width: 80%;
|
||||
margin-right: 3%;
|
||||
color: @colorwhite;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.version {
|
||||
flex: 1;
|
||||
color: @colorwhite60;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.name {
|
||||
max-width: 80%;
|
||||
margin-right: 3%;
|
||||
color: @colorwhite;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.type {
|
||||
grid-area: type;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 4%;
|
||||
color: @coloraccent;
|
||||
}
|
||||
|
||||
.description {
|
||||
grid-area: description;
|
||||
padding-left: 4%;
|
||||
color: @colorwhite;
|
||||
}
|
||||
|
||||
.urls-container {
|
||||
grid-area: urls;
|
||||
padding: 4% 0%;
|
||||
overflow: auto;
|
||||
word-break: break-all;
|
||||
|
||||
.url {
|
||||
.version {
|
||||
flex: 1;
|
||||
color: @colorwhite60;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
grid-area: buttons;
|
||||
.type {
|
||||
grid-area: type;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 4%;
|
||||
color: @coloraccent;
|
||||
}
|
||||
|
||||
.description {
|
||||
grid-area: description;
|
||||
padding-left: 4%;
|
||||
color: @colorwhite;
|
||||
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 {
|
||||
color: @colorwhite60;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
grid-area: buttons;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
|
||||
.button {
|
||||
width: 46%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-style: solid;
|
||||
|
||||
.button {
|
||||
width: 46%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-style: solid;
|
||||
.icon {
|
||||
width: 7%;
|
||||
margin-right: 2%;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: @colorwhite;
|
||||
}
|
||||
|
||||
&.share-button {
|
||||
border-color: @coloraccent;
|
||||
|
||||
.icon {
|
||||
width: 7%;
|
||||
margin-right: 2%;
|
||||
fill: @coloraccent;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: @colorwhite;
|
||||
}
|
||||
|
||||
&.share-button {
|
||||
border-color: @coloraccent;
|
||||
|
||||
.icon {
|
||||
fill: @coloraccent;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: @coloraccent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @coloraccent;
|
||||
|
||||
.icon {
|
||||
fill: @colorwhite;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: @colorwhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.install-button {
|
||||
border-color: @colorsignal5;
|
||||
background-color: @colorsignal5;
|
||||
|
||||
&:hover {
|
||||
background-color: @colorsignal580;
|
||||
}
|
||||
}
|
||||
|
||||
&.uninstall-button {
|
||||
border-color: @colorneutral;
|
||||
|
||||
&:hover {
|
||||
background-color: @colorneutral;
|
||||
}
|
||||
color: @coloraccent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: none;
|
||||
background-color: @coloraccent;
|
||||
|
||||
.icon {
|
||||
fill: @colorwhite;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: @colorwhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.install-button {
|
||||
border-color: @colorsignal5;
|
||||
background-color: @colorsignal5;
|
||||
|
||||
&:hover {
|
||||
background-color: @colorsignal580;
|
||||
}
|
||||
}
|
||||
|
||||
&.uninstall-button {
|
||||
border-color: @colorneutral;
|
||||
|
||||
&:hover {
|
||||
background-color: @colorneutral;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
@import 'stremio-colors';
|
||||
|
||||
@stream-width: 360px;
|
||||
@spacing: min(12px, ceil((@stream-width * 0.04)));
|
||||
@spacing: max(12px, ceil((@stream-width * 0.04)));
|
||||
@progress-height: 5px;
|
||||
|
||||
.stream-container {
|
||||
|
|
@ -68,6 +68,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
color: @colorwhite;
|
||||
word-break: break-all; //Firefox doesn't support { break-word }
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import 'stremio-colors';
|
||||
|
||||
@video-width: 360px;
|
||||
@spacing: min(8px, ceil((@video-width * 0.02)));
|
||||
@spacing: max(8px, ceil((@video-width * 0.02)));
|
||||
@progress-height: 5px;
|
||||
|
||||
.video-container {
|
||||
|
|
@ -70,6 +70,7 @@
|
|||
|
||||
.title {
|
||||
color: @colorwhite;
|
||||
word-break: break-all; //Firefox doesn't support { break-word }
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ storiesOf('Addon', module)
|
|||
version={'1.3.0'}
|
||||
isInstalled={true}
|
||||
types={['Channels', 'Videos']}
|
||||
description={'Watch your favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notified when they upload new videos.'}
|
||||
description={'Watch your favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiourfavourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notiour favourite YouTube channels ad-free and get notified when they upload new videos.'}
|
||||
urls={['https://channels.strem.io/stremioget/stremio/v1', 'https://channels.strem.io/stremioget/stremio/v1']}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -226,9 +226,9 @@ storiesOf('Video', module)
|
|||
<div style={storyStyle} className={appStyles['app']}>
|
||||
<Video
|
||||
className={styles['video']}
|
||||
poster={'https://www.nationalgeographic.com/content/dam/photography/rights-exempt/pod-archive-grid-wide.adapt.945.1.jpg'}
|
||||
poster={'https://www.stremio.com/website/home-stremio.png'}
|
||||
number={2}
|
||||
title={'The Bing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis'}
|
||||
title={'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis'}
|
||||
released={new Date(2018, 4, 23)}
|
||||
isUpcoming={true}
|
||||
isWatched={true}
|
||||
|
|
@ -240,7 +240,7 @@ storiesOf('Video', module)
|
|||
<div style={storyStyle} className={appStyles['app']}>
|
||||
<Video
|
||||
className={styles['video']}
|
||||
poster={'https://www.nationalgeographic.com/content/dam/photography/rights-exempt/pod-archive-grid-wide.adapt.945.1.jpg'}
|
||||
poster={'https://www.stremio.com/website/home-stremio.png'}
|
||||
number={2}
|
||||
title={'The Bing Bran Hypothesis'}
|
||||
isWatched={true}
|
||||
|
|
|
|||
Loading…
Reference in a new issue