Fucking row change

src/assets/styles/grid.scss

@@ -1,6 +1,6 @@
-.grid-container {
+$grid-options: (
-    position: relative;
+    "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"
-    overflow: hidden;
+);
 
 .grid-items {
     display: flex;
@@ -12,141 +12,33 @@
     margin-top: -3px;
     overflow: hidden;
 
-        &.grid-1 {
+    @each $option in $grid-options {
+        &.grid-#{$option} {
+            .grid-item {
+                width: calc(1 / #{$option} * 100% - (1 - 1 / #{$option}) * 3px);
 
-            .item-detail {
+                &:nth-child(#{$option}n) {
-                width: calc(1 / 1 * 100% - (1 - 1 / 2) * 3px);
-
-                &:nth-child(1n) {
                     margin-right: 0;
                 }
             }
         }
-
-        &.grid-2 {
-
-            .item-detail {
-                width: calc(1 / 2 * 100% - (1 - 1 / 2) * 3px);
-
-                &:nth-child(2n) {
-                    margin-right: 0;
-                }
-            }
-        }
-
-        &.grid-3 {
-
-            .item-detail {
-                width: calc(1 / 3 * 100% - (1 - 1 / 3) * 3px);
-
-                &:nth-child(3n) {
-                    margin-right: 0 !important;
-                }
-            }
-        }
-
-        &.grid-5 {
-
-            .item-detail {
-                width: calc(1 / 5 * 100% - (1 - 1 / 5) * 3px);
-
-                &:nth-child(5n) {
-                    margin-right: 0;
-                }
-            }
-        }
-
-        &.grid-6 {
-
-            .item-detail {
-                width: calc(1 / 6 * 100% - (1 - 1 / 6) * 3px);
-
-                &:nth-child(6n) {
-                    margin-right: 0;
-                }
-            }
-        }
-
-        &.grid-8 {
-
-            .item-detail {
-                width: calc(1 / 8 * 100% - (1 - 1 / 8) * 3px);
-
-                &:nth-child(8n) {
-                    margin-right: 0;
-                }
-            }
-        }
-
-        &.grid-9 {
-
-            .item-detail {
-                width: calc(1 / 9 * 100% - (1 - 1 / 9) * 3px);
-
-                &:nth-child(9n) {
-                    margin-right: 0;
-                }
-            }
-        }
-
-        &.grid-10 {
-
-            .item-detail {
-                width: calc(1 / 10 * 100% - (1 - 1 / 10) * 3px);
-
-                &:nth-child(10n) {
-                    margin-right: 0;
-                }
-            }
-        }
-
-        &.grid-12 {
-
-            .item-detail {
-                width: calc(1 / 12 * 100% - (1 - 1 / 12) * 3px);
-
-                &:nth-child(12n) {
-                    margin-right: 0;
-                }
-            }
-        }
-
-        &.palette-grid {
-
-            .item-detail {
-                height: 24px !important;
-                max-height: 24px !important;
     }
 }
 
-        .item-detail {
+.row-grid {
-            position: relative;
+    margin: 0 !important;
-            height: 65px;
-            max-height: 65px;
-            margin: 3px 3px 0 0;
-            overflow: hidden;
     
-            .detail-info {
+    .col {
-                width: 100%;
+        padding: 0 !important;
-                height: 100%;
-                overflow: hidden;
-                top: 0;
-
-                &.has-image {
-                    background-repeat: no-repeat;
-                    background-position: center;
-                    background-image: url('../images/icons/loading-icon.png');
     }
 }
 
-            &.unseen {
+@each $option in $grid-options {
-                background-color: rgba($green, 1);
+    .row-grid {
-            }
+        &.row-cols-#{$option} {
-        }
+            .col:nth-child(#{$option}n) {
-
+                padding-left: 10px !important;
-        &::after {
+            }
-            content: "";
-            flex: auto;
         }
     }
 }

src/views/navigator/result-lists/result-list/NavigatorResultListView.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../utils/LocalizeText';
-import { NavigatorResultListViewProps } from './NavigatorResultListView.types';
+import { NavigatorResultListViewDisplayMode, NavigatorResultListViewProps } from './NavigatorResultListView.types';
 import { NavigatorResultView } from './result/NavigatorResultView';
 
 export function NavigatorResultListView(props: NavigatorResultListViewProps): JSX.Element
@@ -9,12 +9,24 @@ export function NavigatorResultListView(props: NavigatorResultListViewProps): JS
     const { resultList = null, isLast = false } = props;
 
     const [ isExtended, setIsExtended ]     = useState(true);
+    const [ displayMode, setDisplayMode ]   = useState<number>(0);
 
     function toggleList(): void
     {
         setIsExtended(!isExtended);
     }
 
+    useEffect(() =>
+    {
+        setDisplayMode(resultList.mode);
+    }, [ resultList ]);
+
+    function toggleDisplayMode(): void
+    {
+        const newDisplayMode = displayMode === NavigatorResultListViewDisplayMode.LIST ? NavigatorResultListViewDisplayMode.THUMBNAILS : NavigatorResultListViewDisplayMode.LIST;
+        setDisplayMode(newDisplayMode);
+    }
+
     function getListCode(): string
     {
         let name = resultList.code;
@@ -37,16 +49,21 @@ export function NavigatorResultListView(props: NavigatorResultListViewProps): JS
     }
 
     return (
-        <div className="p-2">
+        <div className="nitro-navigator-result-list p-2">
-            <div className="d-flex mb-2">
+            <div className="d-flex mb-2 small">
                 <i className={ "fas " + classNames({ 'fa-plus': !isExtended, 'fa-minus': isExtended })} onClick={ toggleList }></i>
                 <div className="align-self-center w-100 ml-2">{ LocalizeText(getListCode()) }</div>
+                <i className={ "fas " + classNames({ 'fa-bars': displayMode === NavigatorResultListViewDisplayMode.LIST, 'fa-th': displayMode >= NavigatorResultListViewDisplayMode.THUMBNAILS })} onClick={ toggleDisplayMode }></i>
             </div>
+            <div className={ 'row row-grid row-cols-' + classNames({ '1': displayMode === NavigatorResultListViewDisplayMode.LIST, '2': displayMode >= NavigatorResultListViewDisplayMode.THUMBNAILS }) }>
                 { isExtended && resultList && resultList.rooms.map((room, index) =>
                     {
-                    return <NavigatorResultView key={ index } result={ room }  />
+                        return <div className="col">
+                            <NavigatorResultView key={ index } result={ room } />
+                        </div>
                     })
                 }
             </div>
+        </div>
     );
 }

src/views/navigator/result-lists/result-list/NavigatorResultListView.types.ts

@@ -5,3 +5,10 @@ export interface NavigatorResultListViewProps
     resultList: NavigatorSearchResultList;
     isLast: boolean;
 }
+
+export class NavigatorResultListViewDisplayMode
+{
+    public static readonly LIST: number                 = 0;
+    public static readonly THUMBNAILS: number           = 1;
+    public static readonly FORCED_THUMBNAILS: number    = 2;
+}

src/views/navigator/result-lists/result-list/result/NavigatorResultView.scss

@@ -3,9 +3,26 @@
     &:hover {
         cursor: pointer;
     }
+}
 
-    &:nth-child(even) {
+.nitro-navigator-result-list {
+    .row {
+        &.row-cols-1 {
+            .col:nth-child(odd) {
+                .nitro-navigator-result {
                     border-radius: $border-radius;
                     background: $secondary !important;
                 }
             } 
+        }
+
+        &.row-cols-2 {
+            .col {
+                .nitro-navigator-result {
+                    border-radius: $border-radius;
+                    background: $secondary !important;
+                }
+            }
+        }
+    }
+}

src/views/navigator/result-lists/result-list/result/NavigatorResultView.tsx

@@ -39,21 +39,21 @@ export function NavigatorResultView(props: NavigatorResultViewProps): JSX.Elemen
     }
 
     return (
-        <div className="d-flex flex-column justify-content-center align-items-center nitro-navigator-result" onClick={ () => navigatorContext.onTryVisitRoom(result) }>
+        <div className="d-flex flex-column justify-content-center align-items-center nitro-navigator-result small" onClick={ () => navigatorContext.onTryVisitRoom(result) }>
             <div className="d-flex justify-content-between w-100 px-2 py-1">
                 <div className="d-flex justify-content-center flex-grow-1 overflow-hidden">
                     <div className={ "d-flex justify-content-center align-items-center badge text-center " + getUserCounterColor() }>
-                        <i className="fas fa-user mr-1 small"></i> { result.userCount }
+                        <i className="fas fa-user mr-1"></i> { result.userCount }
                     </div>
                     <div className="d-flex flex-column justify-content-center align-items-start flex-grow-1 px-2 overflow-hidden">
                         <span className="d-block text-truncate" style={ { maxWidth: '95%' } }>{ result.roomName }</span>
                     </div>
                 </div>
                 <div className="d-flex flex-row-reverse align-items-center">
-                    <i className="fas fa-info-circle small" onClick={ openInfo }></i>
+                    <i className="fas fa-info-circle" onClick={ openInfo }></i>
-                    { result.habboGroupId > 0 && <i className="fas fa-users mr-2 small"></i> }
+                    { result.habboGroupId > 0 && <i className="fas fa-users mr-2"></i> }
                     { result.doorMode !== RoomDataParser.OPEN_STATE && 
-                        <i className={ 'mr-2 fas small ' + classNames( {'fa-lock': result.doorMode === RoomDataParser.DOORBELL_STATE, 'fa-key': result.doorMode === RoomDataParser.PASSWORD_STATE })}></i>
+                        <i className={ 'mr-2 fas ' + classNames( {'fa-lock': result.doorMode === RoomDataParser.DOORBELL_STATE, 'fa-key': result.doorMode === RoomDataParser.PASSWORD_STATE })}></i>
                     }
                 </div>
             </div>