mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-10-23 03:13:06 +02:00
Merge branch 'main' of https://github.com/billsonnn/nitro-react
This commit is contained in:
Bill
commit
a39db6cf91
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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<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="d-flex mb-2">
|
||||
<div className="nitro-navigator-result-list p-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 <div className="col">
|
||||
<NavigatorResultView key={ index } result={ room } />
|
||||
</div>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
{ isExtended && resultList && resultList.rooms.map((room, index) =>
|
||||
{
|
||||
return <NavigatorResultView key={ index } result={ room } />
|
||||
})
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
{ result.habboGroupId > 0 && <i className="fas fa-users mr-2 small"></i> }
|
||||
<i className="fas fa-info-circle" onClick={ openInfo }></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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user