From 655b8654e4179fec3e2f1e3f108552bf003a582e Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Wed, 19 Feb 2020 13:24:38 +0200
Subject: [PATCH] nav bars layout in search using grid

---
 src/routes/Search/Search.js   | 106 +++++++++++----------
 src/routes/Search/styles.less | 171 ++++++++++++++++------------------
 2 files changed, 133 insertions(+), 144 deletions(-)

diff --git a/src/routes/Search/Search.js b/src/routes/Search/Search.js
index f06a44a3f..464862170 100644
--- a/src/routes/Search/Search.js
+++ b/src/routes/Search/Search.js
@@ -31,65 +31,63 @@ const Search = ({ queryParams }) => {
                 notificationsMenu={true}
                 navMenu={true}
             />
-            <div className={styles['search-content-container']}>
-                <MainVerticalNavBar className={styles['nav-bar']} route={'search'} />
-                <div className={styles['search-content']}>
-                    {
-                        search.selected === null || search.selected.extra.every(([name]) => name !== 'search') ?
+            <MainVerticalNavBar className={styles['vertical-nav-bar']} route={'search'} />
+            <div className={styles['search-content']}>
+                {
+                    search.selected === null || search.selected.extra.every(([name]) => name !== 'search') ?
+                        <div className={styles['message-container']}>
+                            <div className={styles['message-content']}>
+                                <Icon className={styles['icon']} icon={'ic_movies'} />
+                                <div className={styles['label']}>Search for movies, series, YouTube and TV channels</div>
+                            </div>
+                            <div className={styles['message-content']}>
+                                <Icon className={styles['icon']} icon={'ic_actor'} />
+                                <div className={styles['label']}>Search for actors, directors and writers</div>
+                            </div>
+                        </div>
+                        :
+                        search.catalog_resources.length === 0 ?
                             <div className={styles['message-container']}>
                                 <div className={styles['message-content']}>
-                                    <Icon className={styles['icon']} icon={'ic_movies'} />
-                                    <div className={styles['label']}>Search for movies, series, YouTube and TV channels</div>
-                                </div>
-                                <div className={styles['message-content']}>
-                                    <Icon className={styles['icon']} icon={'ic_actor'} />
-                                    <div className={styles['label']}>Search for actors, directors and writers</div>
+                                    <div className={styles['label']}> No addons were requested for catalogs</div>
                                 </div>
                             </div>
                             :
-                            search.catalog_resources.length === 0 ?
-                                <div className={styles['message-container']}>
-                                    <div className={styles['message-content']}>
-                                        <div className={styles['label']}> No addons were requested for catalogs</div>
-                                    </div>
-                                </div>
-                                :
-                                search.catalog_resources.map((catalog_resource, index) => {
-                                    switch (catalog_resource.content.type) {
-                                        case 'Ready':
-                                            return (
-                                                <MetaRow
-                                                    key={index}
-                                                    className={styles['search-row']}
-                                                    title={catalog_resource.addon_name}
-                                                    items={catalog_resource.content.content}
-                                                    href={catalog_resource.href}
-                                                    limit={10}
-                                                />
-                                            );
-                                        case 'Err':
-                                            return (
-                                                <MetaRow
-                                                    key={index}
-                                                    className={styles['search-row']}
-                                                    title={catalog_resource.addon_name}
-                                                    message={`Error(${catalog_resource.content.content.type})${typeof catalog_resource.content.content.content === 'string' ? ` - ${catalog_resource.content.content.content}` : ''}`}
-                                                    limit={10}
-                                                />
-                                            );
-                                        case 'Loading':
-                                            return (
-                                                <MetaRow.Placeholder
-                                                    key={index}
-                                                    className={styles['search-row-placeholder']}
-                                                    title={catalog_resource.addon_name}
-                                                    limit={10}
-                                                />
-                                            );
-                                    }
-                                })
-                    }
-                </div>
+                            search.catalog_resources.map((catalog_resource, index) => {
+                                switch (catalog_resource.content.type) {
+                                    case 'Ready':
+                                        return (
+                                            <MetaRow
+                                                key={index}
+                                                className={styles['search-row']}
+                                                title={catalog_resource.addon_name}
+                                                items={catalog_resource.content.content}
+                                                href={catalog_resource.href}
+                                                limit={10}
+                                            />
+                                        );
+                                    case 'Err':
+                                        return (
+                                            <MetaRow
+                                                key={index}
+                                                className={styles['search-row']}
+                                                title={catalog_resource.addon_name}
+                                                message={`Error(${catalog_resource.content.content.type})${typeof catalog_resource.content.content.content === 'string' ? ` - ${catalog_resource.content.content.content}` : ''}`}
+                                                limit={10}
+                                            />
+                                        );
+                                    case 'Loading':
+                                        return (
+                                            <MetaRow.Placeholder
+                                                key={index}
+                                                className={styles['search-row-placeholder']}
+                                                title={catalog_resource.addon_name}
+                                                limit={10}
+                                            />
+                                        );
+                                }
+                            })
+                }
             </div>
         </div>
     );
diff --git a/src/routes/Search/styles.less b/src/routes/Search/styles.less
index 352a01c05..96f85d1ec 100644
--- a/src/routes/Search/styles.less
+++ b/src/routes/Search/styles.less
@@ -11,78 +11,79 @@
 }
 
 .search-container {
-    display: flex;
-    flex-direction: column;
+    display: grid;
     width: 100%;
     height: 100%;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto 1fr;
+    grid-template-areas:
+        "horizontal-nav-bar horizontal-nav-bar"
+        "vertical-nav-bar search-content";
     background-color: var(--color-background);
 
+
     .horizontal-nav-bar {
-        flex: none;
-        align-self: stretch;
+        grid-area: horizontal-nav-bar;
     }
 
-    .search-content-container {
-        display: flex;
-        flex-direction: row;
-        height: 100%;
+    .vertical-nav-bar {
+        grid-area: vertical-nav-bar;
+    }
 
-        .search-content {
-            flex: 1;
-            align-self: stretch;
-            overflow-y: auto;
+    .search-content {
+        grid-area: search-content;
+        overflow-y: auto;
 
-            .search-row, .search-row-placeholder {
-                margin: 4rem 2rem;
+        .search-row, .search-row-placeholder {
+            margin: 4rem 2rem;
 
-                &:first-child {
-                    margin-top: 2rem;
-                }
-
-                &:last-child {
-                    margin-bottom: 2rem;
-                }
-
-                .see-all-container, .see-all-container-placeholder {
-                    width: 12rem;
-                }
+            &:first-child {
+                margin-top: 2rem;
             }
 
-            .message-container {
+            &:last-child {
+                margin-bottom: 2rem;
+            }
+
+            .see-all-container, .see-all-container-placeholder {
+                width: 12rem;
+            }
+        }
+
+        .message-container {
+            display: flex;
+            flex-direction: row;
+            align-items: flex-start;
+            justify-content: center;
+            max-height: calc(100% - 10rem);
+            margin: 5rem;
+
+            .message-content {
+                flex: 1;
                 display: flex;
-                flex-direction: row;
-                align-items: flex-start;
+                flex-direction: column;
+                align-items: center;
                 justify-content: center;
-                max-height: calc(100% - 10rem);
-                margin: 5rem;
 
-                .message-content {
-                    flex: 1;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    justify-content: center;
+                &:not(:first-child) {
+                    margin-left: 5rem;
+                }
 
-                    &:not(:first-child) {
-                        margin-left: 5rem;
-                    }
+                .icon {
+                    flex: none;
+                    width: 6rem;
+                    height: 6rem;
+                    margin-bottom: 2rem;
+                    fill: var(--color-surfacelighter80);
+                }
 
-                    .icon {
-                        flex: none;
-                        width: 6rem;
-                        height: 6rem;
-                        margin-bottom: 2rem;
-                        fill: var(--color-surfacelighter80);
-                    }
-
-                    .label {
-                        flex-grow: 0;
-                        flex-shrink: 1;
-                        flex-basis: auto;
-                        font-size: 1.2rem;
-                        color: var(--color-surfacelighter80);
-                        text-align: center;
-                    }
+                .label {
+                    flex-grow: 0;
+                    flex-shrink: 1;
+                    flex-basis: auto;
+                    font-size: 1.2rem;
+                    color: var(--color-surfacelighter80);
+                    text-align: center;
                 }
             }
         }
@@ -91,13 +92,11 @@
 
 @media only screen and (min-width: @large) {
     .search-container {
-        .search-content-container {
-            .search-content {
-                .search-row, .search-row-placeholder {
-                    .meta-item, .meta-item-placeholder {
-                        &:nth-child(n+9) {
-                            display: none;
-                        }
+        .search-content {
+            .search-row, .search-row-placeholder {
+                .meta-item, .meta-item-placeholder {
+                    &:nth-child(n+9) {
+                        display: none;
                     }
                 }
             }
@@ -107,13 +106,11 @@
 
 @media only screen and (max-width: @large) {
     .search-container {
-        .search-content-container {
-            .search-content {
-                .search-row, .search-row-placeholder {
-                    .meta-item, .meta-item-placeholder {
-                        &:nth-child(n+8) {
-                            display: none;
-                        }
+        .search-content {
+            .search-row, .search-row-placeholder {
+                .meta-item, .meta-item-placeholder {
+                    &:nth-child(n+8) {
+                        display: none;
                     }
                 }
             }
@@ -123,13 +120,11 @@
 
 @media only screen and (max-width: @medium) {
     .search-container {
-        .search-content-container {
-            .search-content {
-                .search-row, .search-row-placeholder {
-                    .meta-item, .meta-item-placeholder {
-                        &:nth-child(n+7) {
-                            display: none;
-                        }
+        .search-content {
+            .search-row, .search-row-placeholder {
+                .meta-item, .meta-item-placeholder {
+                    &:nth-child(n+7) {
+                        display: none;
                     }
                 }
             }
@@ -139,13 +134,11 @@
 
 @media only screen and (max-width: @small) {
     .search-container {
-        .search-content-container {
-            .search-content {
-                .search-row, .search-row-placeholder {
-                    .meta-item, .meta-item-placeholder {
-                        &:nth-child(n+6) {
-                            display: none;
-                        }
+        .search-content {
+            .search-row, .search-row-placeholder {
+                .meta-item, .meta-item-placeholder {
+                    &:nth-child(n+6) {
+                        display: none;
                     }
                 }
             }
@@ -155,13 +148,11 @@
 
 @media only screen and (max-width: @xsmall) {
     .search-container {
-        .search-content-container {
-            .search-content {
-                .search-row, .search-row-placeholder {
-                    .meta-item, .meta-item-placeholder {
-                        &:nth-child(n+5) {
-                            display: none;
-                        }
+        .search-content {
+            .search-row, .search-row-placeholder {
+                .meta-item, .meta-item-placeholder {
+                    &:nth-child(n+5) {
+                        display: none;
                     }
                 }
             }