From 9ed33c2eb4018bbdaae5d2f18bb4e48ffaf02bca Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Mon, 30 Mar 2020 14:51:18 +0300
Subject: [PATCH] StreamsList layout changed

---
 .../MetaDetails/StreamsList/StreamsList.js    | 47 ++++++-------
 .../MetaDetails/StreamsList/styles.less       | 69 ++++++++-----------
 2 files changed, 49 insertions(+), 67 deletions(-)

diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js
index c722bd1b3..b0e125ac4 100644
--- a/src/routes/MetaDetails/StreamsList/StreamsList.js
+++ b/src/routes/MetaDetails/StreamsList/StreamsList.js
@@ -14,37 +14,32 @@ const StreamsList = ({ className, streamsResources }) => {
             .flat(1);
     }, [streamsResources]);
     return (
-        <div className={classnames(className, styles['streams-list-container'], { 'streams-list-message': streamsResources.length === 0 || streamsResources.every((streamsResource) => streamsResource.content.type === 'Err') })}>
-            <div className={styles['streams-scroll-container']}>
-                {
-                    streamsResources.length === 0 ?
+        <div className={classnames(className, styles['streams-list-container'])}>
+            {
+                streamsResources.length === 0 ?
+                    <div className={styles['message-container']}>
+                        <Image className={styles['image']} src={'/images/empty.png'} alt={' '} />
+                        <div className={styles['label']}>No addons were requested for streams!</div>
+                    </div>
+                    :
+                    streamsResources.every((streamsResource) => streamsResource.content.type === 'Err') ?
                         <div className={styles['message-container']}>
-                            <Image className={styles['image']} src={'/images/empty.png'} />
-                            <div className={styles['label']}>No addons were requested for streams</div>
+                            <Image className={styles['image']} src={'/images/empty.png'} alt={' '} />
+                            <div className={styles['label']}>No streams were found!</div>
                         </div>
                         :
-                        streamsResources.every((streamsResource) => streamsResource.content.type === 'Err') ?
-                            <div className={styles['message-container']}>
-                                <Image className={styles['image']} src={'/images/empty.png'} />
-                                <div className={styles['label']}>No streams were found!</div>
-                                <div className={styles['description']}>Please install some addons to find more streams</div>
+                        streams.length > 0 ?
+                            <div className={styles['streams-container']}>
+                                {streams.map((stream, index) => (
+                                    <Stream {...stream} key={index} />
+                                ))}
                             </div>
                             :
-                            streams.length > 0 ?
-                                streams.map((stream, index) => (
-                                    <Stream
-                                        {...stream}
-                                        key={index}
-                                        className={styles['stream']}
-                                    />
-                                ))
-                                :
-                                <React.Fragment>
-                                    <Stream.Placeholder className={styles['stream']} />
-                                    <Stream.Placeholder className={styles['stream']} />
-                                </React.Fragment>
-                }
-            </div>
+                            <div className={styles['streams-container']}>
+                                <Stream.Placeholder />
+                                <Stream.Placeholder />
+                            </div>
+            }
             <Button className={styles['install-button-container']} title={'Install Addons'} href={'#/addons'}>
                 <Icon className={styles['icon']} icon={'ic_addons'} />
                 <div className={styles['label']}>Install Addons</div>
diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less
index cab77f336..2142a7aa8 100644
--- a/src/routes/MetaDetails/StreamsList/styles.less
+++ b/src/routes/MetaDetails/StreamsList/styles.less
@@ -4,54 +4,41 @@
     display: flex;
     flex-direction: column;
 
-    &:global(.streams-list-message) {
-        background-color: @color-background-dark3-80;
-    }
-
-    .streams-scroll-container {
-        flex-grow: 0;
-        flex-shrink: 1;
-        flex-basis: auto;
+    .message-container {
+        flex: 0 1 auto;
         align-self: stretch;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 2rem 2rem 0;
         overflow-y: auto;
 
-        .message-container {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            width: var(--item-size);
-            height: 100%;
-            padding: 2rem;
-
-            &>:not(:last-child) {
-                margin-bottom: 1rem;
-            }
-
-            .image {
-                flex: none;
-                width: 10rem;
-                opacity: 0.9;
-            }
-
-            .label {
-                flex: none;
-                font-size: 1.4rem;
-                text-align: center;
-                color: @color-surface-light5-90;
-            }
-
-            .description {
-                flex: none;
-                text-align: center;
-                color: @color-surface-dark1-90;
-            }
+        .image {
+            flex: none;
+            width: 10rem;
+            height: 10rem;
+            max-width: 100%;
+            margin-bottom: 1rem;
+            object-fit: contain;
+            object-position: center;
+            opacity: 0.9;
         }
 
-        .stream {
-            width: var(--item-size);
+        .label {
+            flex: none;
+            font-size: 1.4rem;
+            text-align: center;
+            color: @color-secondaryvariant2-light1-90;
         }
     }
 
+    .streams-container {
+        flex: 0 1 auto;
+        align-self: stretch;
+        padding-top: 1rem;
+        overflow-y: auto;
+    }
+
     .install-button-container {
         flex: none;
         align-self: stretch;
@@ -59,7 +46,7 @@
         flex-direction: row;
         align-items: center;
         justify-content: center;
-        margin: 1.5rem;
+        margin: 2rem;
         padding: 1.5rem 1rem;
         background-color: @color-accent3;