From 1d4321f5c1ce71d857607e80d83ba658aa4f95e0 Mon Sep 17 00:00:00 2001 From: Batman Date: Thu, 22 Apr 2021 00:32:49 -0300 Subject: [PATCH] Fucking row change --- src/assets/styles/grid.scss | 178 ++++-------------- .../result-list/NavigatorResultListView.tsx | 37 +++- .../NavigatorResultListView.types.ts | 7 + .../result/NavigatorResultView.scss | 23 ++- .../result/NavigatorResultView.tsx | 10 +- 5 files changed, 94 insertions(+), 161 deletions(-) diff --git a/src/assets/styles/grid.scss b/src/assets/styles/grid.scss index d755e273..3a23cb69 100644 --- a/src/assets/styles/grid.scss +++ b/src/assets/styles/grid.scss @@ -1,152 +1,44 @@ -.grid-container { - position: relative; +$grid-options: ( + "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12" +); + +.grid-items { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + align-content: flex-start; + width: 100%; + margin-top: -3px; overflow: hidden; - .grid-items { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; - align-content: flex-start; - width: 100%; - margin-top: -3px; - overflow: hidden; + @each $option in $grid-options { + &.grid-#{$option} { + .grid-item { + width: calc(1 / #{$option} * 100% - (1 - 1 / #{$option}) * 3px); - &.grid-1 { - - .item-detail { - width: calc(1 / 1 * 100% - (1 - 1 / 2) * 3px); - - &:nth-child(1n) { + &:nth-child(#{$option}n) { 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 { - position: relative; - height: 65px; - max-height: 65px; - margin: 3px 3px 0 0; - overflow: hidden; - - .detail-info { - width: 100%; - height: 100%; - overflow: hidden; - top: 0; - - &.has-image { - background-repeat: no-repeat; - background-position: center; - background-image: url('../images/icons/loading-icon.png'); - } - } - - &.unseen { - background-color: rgba($green, 1); - } - } - - &::after { - content: ""; - flex: auto; - } + } +} + +.row-grid { + margin: 0 !important; + + .col { + padding: 0 !important; + } +} + +@each $option in $grid-options { + .row-grid { + &.row-cols-#{$option} { + .col:nth-child(#{$option}n) { + padding-left: 10px !important; + } + } } } diff --git a/src/views/navigator/result-lists/result-list/NavigatorResultListView.tsx b/src/views/navigator/result-lists/result-list/NavigatorResultListView.tsx index 2dd4a7de..25c3f5d1 100644 --- a/src/views/navigator/result-lists/result-list/NavigatorResultListView.tsx +++ b/src/views/navigator/result-lists/result-list/NavigatorResultListView.tsx @@ -1,20 +1,32 @@ 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 { const { resultList = null, isLast = false } = props; - const [ isExtended, setIsExtended ] = useState(true); + const [ isExtended, setIsExtended ] = useState(true); + const [ displayMode, setDisplayMode ] = useState(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 ( -
-
+
+
{ LocalizeText(getListCode()) }
+ = NavigatorResultListViewDisplayMode.THUMBNAILS })} onClick={ toggleDisplayMode }> +
+
= NavigatorResultListViewDisplayMode.THUMBNAILS }) }> + { isExtended && resultList && resultList.rooms.map((room, index) => + { + return
+ +
+ }) + }
- { isExtended && resultList && resultList.rooms.map((room, index) => - { - return - }) - }
); } diff --git a/src/views/navigator/result-lists/result-list/NavigatorResultListView.types.ts b/src/views/navigator/result-lists/result-list/NavigatorResultListView.types.ts index f1a2b0de..7c9b3f87 100644 --- a/src/views/navigator/result-lists/result-list/NavigatorResultListView.types.ts +++ b/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; +} diff --git a/src/views/navigator/result-lists/result-list/result/NavigatorResultView.scss b/src/views/navigator/result-lists/result-list/result/NavigatorResultView.scss index cae1313d..5fa7661d 100644 --- a/src/views/navigator/result-lists/result-list/result/NavigatorResultView.scss +++ b/src/views/navigator/result-lists/result-list/result/NavigatorResultView.scss @@ -3,9 +3,26 @@ &:hover { cursor: pointer; } +} - &:nth-child(even) { - border-radius: $border-radius; - background: $secondary !important; +.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; + } + } + } } } diff --git a/src/views/navigator/result-lists/result-list/result/NavigatorResultView.tsx b/src/views/navigator/result-lists/result-list/result/NavigatorResultView.tsx index 08a303e1..30e9fcd3 100644 --- a/src/views/navigator/result-lists/result-list/result/NavigatorResultView.tsx +++ b/src/views/navigator/result-lists/result-list/result/NavigatorResultView.tsx @@ -39,21 +39,21 @@ export function NavigatorResultView(props: NavigatorResultViewProps): JSX.Elemen } return ( -
navigatorContext.onTryVisitRoom(result) }> +
navigatorContext.onTryVisitRoom(result) }>
- { result.userCount } + { result.userCount }
{ result.roomName }
- - { result.habboGroupId > 0 && } + + { result.habboGroupId > 0 && } { result.doorMode !== RoomDataParser.OPEN_STATE && - + }