flex style

2026-03-11 21:27:05 +00:00 · 2018-11-21 15:32:45 +02:00 · 2018-11-21 15:32:45 +02:00 · bbcf69975a
commit bbcf69975a
parent bfade83684
4 changed files with 113 additions and 90 deletions
--- a/src/common/Stream/Stream.js
+++ b/src/common/Stream/Stream.js
@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import Icon from 'stremio-icons/dom';
-import colors from 'stremio-colors';
 import styles from './styles';

 const renderLogo = (logo, sourceName) => {
@ -49,15 +49,15 @@ const renderProgress = (progress) => {

 const Stream = (props) => {
    return (
-        <div onClick={props.play} style={{ backgroundColor: props.progress ? colors.black40 : null }} className={styles['stream-container']}>
-            <div className={styles['stream']}>
+        <div onClick={props.play} className={classnames(styles['stream-container'], { [styles['active']]: props.progress })}>
+            <div className={styles['flex-row-container']}>
                {renderLogo(props.logo, props.sourceName)}
                <div className={styles['text-container']}>
                    {renderTitle(props.title)}
                    {renderSubtitle(props.subtitle)}
                </div>
                <div className={styles['play-container']}>
-                    <Icon style={{ width: props.progress ? '65%' : null, height: props.progress ? '65%' : null,  fill: props.progress ? colors.white : null }} className={styles['play']} icon={'ic_play'} />
+                    <Icon className={styles['play']} icon={'ic_play'} />
                </div>
            </div>
            {renderProgress(props.progress)}
@ -82,4 +82,4 @@ Stream.defaultProps = {
    progress: 0
 };

-export default Stream;
+export default Stream;
--- a/src/common/Stream/styles.less
+++ b/src/common/Stream/styles.less
@ -7,29 +7,25 @@
 .stream-container {
    width: @stream-width;

-    .stream {
+    .source-name {
+        font-size: 13px;
+    }
+
+    .text-container {
        min-height: round((@stream-width * 0.2));
+        line-height: 15px;

-        .source-name {
-            font-size: 13px;
+        .title {
+            font-size: 11px;
        }

-        .text-container {
-            line-height: 15px;
-
-            .title {
-                font-size: 11px;
-            }
-
-            .subtitle {
-                font-size: 11px;
-            }
+        .subtitle {
+            font-size: 11px;
        }
+    }

-        .play-container {
-            height: @play-width;
-            width: @play-width;
-        }
+    .play-container {
+        height: @play-width;
    }

    .progress {
@ -41,20 +37,24 @@
    margin: 10px; //remove
    background-color: @colorblack20;

-    .stream {
+    &.active {
+        background-color: @colorblack40;
+    }
+
+    .flex-row-container {
        display: flex;
        align-items: center;
        justify-content: space-around;

        .logo {
-            width: 20%;
+            flex: 1;
+            margin: 0% 5%;
            fill: @colorwhite;
        }

        .source-name {
-            display: flex;
-            justify-content: center;
-            width: 20%;
+            flex: 1;
+            margin: 0% 5%;
            color: @colorwhite;
            overflow: hidden;
            white-space: pre;
@ -62,7 +62,10 @@
        }

        .text-container {
-            width: 45%;
+            flex: 3;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
            padding: 2% 0%;

            .title {
@ -77,6 +80,7 @@
        }

        .play-container {
+            flex: 1;
            display: flex;

            .play {
--- a/src/common/Video/Video.js
+++ b/src/common/Video/Video.js
@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import Icon, { dataUrl as iconDataUrl } from 'stremio-icons/dom';
 import colors from 'stremio-colors';
 import styles from './styles';
@ -9,14 +10,15 @@ const renderPoster = (poster) => {
        return null;
    }

-    const videoWidth = 340;
-    const placeholderIconUrl = iconDataUrl({ icon: 'ic_channels', fill: colors.accent, width: '20%', height: videoWidth * 0.13 });
+    const placeholderIconUrl = iconDataUrl({ icon: 'ic_channels', fill: colors.accent });
    const imageStyle = {
        backgroundImage: `url('${poster}'), url('${placeholderIconUrl}')`
    };

    return (
-        <div style={imageStyle} className={styles['poster']} />
+        <div className={styles['poster-container']}>
+            <div style={imageStyle} className={styles['poster']} />
+        </div>
    );
 }

@ -26,7 +28,7 @@ const renderTitle = (number, title) => {
    }

    return (
-        <div className={styles['title']}>{number + '.' + ' ' + title}</div>
+        <div className={styles['title']}>{number}. {title}</div>
    );
 }

@ -38,12 +40,12 @@ const renderReleasedDate = (released) => {
    const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

    return (
-        <div className={styles['released-date']}>{released.getDate() + ' ' + months[released.getMonth()]}</div>
+        <div className={styles['released-date']}>{released.getDate()} {months[released.getMonth()]}</div>
    );
 }

 const renderUpcomingLabel = (isUpcoming) => {
-    if(!isUpcoming) {
+    if (!isUpcoming) {
        return null;
    }

@ -53,7 +55,7 @@ const renderUpcomingLabel = (isUpcoming) => {
 }

 const renderWatchedLabel = (isWatched) => {
-    if(!isWatched) {
+    if (!isWatched) {
        return null;
    }

@ -76,19 +78,21 @@ const renderProgress = (progress) => {

 const Video = (props) => {
    return (
-        <div onClick={props.onVideoClicked} style={{ backgroundColor: props.progress ? colors.black40 : null }} className={styles['video-container']}>
-            <div className={styles['video']}>
+        <div onClick={props.onVideoClicked} className={classnames(styles['video-container'], { [styles['active']]: props.progress > 0 })}>
+            <div className={styles['flex-row-container']}>
                {renderPoster(props.poster)}
-                <div style={{width: props.poster ? '50%' : '77%' }} className={styles['text-container']}>
-                    {renderTitle(props.number, props.title)}
-                    {renderReleasedDate(props.released)}
-                    <div className={styles['label-container']}>
-                        {renderUpcomingLabel(props.isUpcoming)}
-                        {renderWatchedLabel(props.isWatched)}
+                <div className={styles['text-container']}>
+                    <div className={styles['text-content']}>
+                        {renderTitle(props.number, props.title)}
+                        {renderReleasedDate(props.released)}
+                        <div className={styles['label-container']}>
+                            {renderUpcomingLabel(props.isUpcoming)}
+                            {renderWatchedLabel(props.isWatched)}
+                        </div>
                    </div>
                </div>
-                <div className={styles['play-container']}>
-                    <Icon style={{ width: props.progress ? '65%' : null, height: props.progress ? '65%' : null,  fill: props.progress ? colors.white : null }} className={styles['play']} icon={'ic_arrow_left'} />
+                <div className={styles['arrow-container']}>
+                    <Icon className={styles['arrow']} icon={'ic_arrow_left'} />
                </div>
            </div>
            {renderProgress(props.progress)}
@ -116,4 +120,4 @@ Video.defaultProps = {
    progress: 0
 };

-export default Video;
+export default Video;
--- a/src/common/Video/styles.less
+++ b/src/common/Video/styles.less
@ -1,19 +1,15 @@
@import 'stremio-colors';

@video-width: 340px;
-@play-width: ceil((@video-width * 0.13));
+@icon-width: round((@video-width * 0.14));
@progress-height: 3px;

 .video-container {
    width: @video-width;

-    .video {
+    .text-container {
        min-height: round((@video-width * 0.2));

-        .poster {
-            height: round((@video-width * 0.14));
-        }
-
        .title {
            font-size: 12px;
        }
@ -26,11 +22,10 @@
            font-size: 10px;
            border-radius: 2px;
        }
+    }

-        .play-container {
-            height: @play-width;
-            width: @play-width;
-        }
+    .arrow-container {
+        width: @icon-width;
    }

    .progress {
@ -40,59 +35,76 @@

 .video-container {
    margin: 10px; //remove
-    background-color: @colorblack20;
+    background-color: @colorglass;

-    .video {
+    .flex-row-container {
        display: flex;
+        flex-direction: row;
        align-items: center;
-        justify-content: space-around;

-        .poster {
-            width: 20%;
-            background-position: center;
-            background-size: cover, auto;
-            background-repeat: no-repeat;
+        .poster-container {
+            flex: 1;
+            display: flex;
+            align-self: stretch;
+            align-items: center;
+            justify-content: flex-end;
+
+            .poster {
+                height: 70%;
+                width: 90%;
+                background-position: center;
+                background-size: cover, auto;
+                background-repeat: no-repeat;
+            }
        }

        .text-container {
-            padding: 2% 0%;
+            flex: 2;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;

-            .title {
-                color: @colorwhite;
-                word-break: break-word;
-            }
+            .text-content {
+                margin: 2% 4%;

-            .released-date {
-                color: @colorwhite60;
-            }
-
-            .label-container {
-                display: flex;
-                justify-content: space-between;
-
-                .watched-label, .upcoming-label {
-                    padding: 0% 3%;
-                    font-weight: 600;
+                .title {
                    color: @colorwhite;
+                    word-break: break-word;
                }

-                .watched-label {
-                    background-color: @colorprimlight;
+                .released-date {
+                    color: @colorwhite60;
                }

-                .upcoming-label {
-                    background-color: @colorsignal5;
+                .label-container {
+                    display: flex;
+
+                    .upcoming-label, .watched-label {
+                        padding: 0em 0.6em;
+                        font-weight: 600;
+                        color: @colorwhite;
+                    }
+
+                    .upcoming-label {
+                        margin-right: 8%;
+                        background-color: @colorsignal5;
+                    }
+
+                    .watched-label {
+                        background-color: @colorprimlight;
+                    }
                }
            }
        }

-        .play-container {
+        .arrow-container {
            display: flex;
+            align-items: center;
+            justify-content: center;
            transform: rotate(180deg);

-            .play {
-                width: 38%;
-                height: 38%;
+            .arrow {
+                width: 30%;
                margin: auto;
                fill: @colorwhite60;
            }
@ -100,7 +112,7 @@
    }

    .progress-container {
-        background-color: @colorwhite20;
+        background-color: @colorprim;

        .progress {
            background-color: @colorprimlight;
@ -109,6 +121,9 @@

    &:hover {
        cursor: pointer;
-        background-color: @colorwhite20;
+
+        .flex-row-container {
+            background-color: @colorwhite20;
+        }
    }
 }