nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-22 22:30:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Various changes

Browse Source
This commit is contained in:
Bill 2021-05-14 14:26:36 -04:00
parent 2fb2431db0
commit 9f04da5157
24 changed files with 123 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/styles/bootstrap/_variables.scss
View File

@ -353,7 +353,7 @@ $container-max-widths: (
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12 !default;
$grid-gutter-width: 1rem !default;
$grid-gutter-width: 16px !default;
$grid-row-columns: 6 !default;
$gutters: $spacers !default;

2
src/index.scss
View File

@ -33,6 +33,8 @@ $grid-border-color: $muted;
$grid-active-bg-color: #ECECEC;
$grid-active-border-color: $white;
$toolbar-height: 55px;
@import './utils/Styles';
@import './App';
@import './hooks/Styles';

41
src/layout/card/NitroCardView.scss
View File

@ -2,8 +2,41 @@ $nitro-card-header-height: 33px;
$nitro-card-tabs-height: 33px;
$nitro-card-top-height: $nitro-card-header-height + $nitro-card-tabs-height;
.nitro-card-responsive {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
.nitro-card {
pointer-events: all;
@import './content/NitroCardContentView';
@import './header/NitroCardHeaderView';
@import './simple-header/NitroCardSimpleHeaderView';
@import './tabs/NitroCardTabsView';
}
@include media-breakpoint-down(md) {
.draggable-window {
top: 0 !important;
left: 0 !important;
width: 100%;
height: 100%;
transform: none !important;
}
.nitro-card {
width: 100%;
&.rounded {
border-radius: 0 !important;
}
}
}
}
@import './accordion/NitroCardAccordionView';
@import './content/NitroCardContentView';
@import './header/NitroCardHeaderView';
@import './simple-header/NitroCardSimpleHeaderView';
@import './tabs/NitroCardTabsView';

14
src/layout/card/NitroCardView.tsx
View File

@ -4,13 +4,15 @@ import { NitroCardViewProps } from './NitroCardView.types';
export const NitroCardView: FC<NitroCardViewProps> = props =>
{
const { className = '', disableDrag = false } = props;
const { className = '', disableDrag = false, children = null } = props;
return (
<DraggableWindow handle=".drag-handler" disableDrag= { disableDrag }>
<div className={ 'nitro-card d-flex flex-column rounded border shadow overflow-hidden ' + className }>
{ props.children }
</div>
</DraggableWindow>
<div className="nitro-card-responsive">
<DraggableWindow handle=".drag-handler" disableDrag= { disableDrag }>
<div className={ 'nitro-card d-flex flex-column rounded border shadow overflow-hidden ' + className }>
{ children }
</div>
</DraggableWindow>
</div>
);
}

12
src/layout/card/content/NitroCardContentView.scss
View File

@ -0,0 +1,12 @@
.content-area {
padding-top: $container-padding-x;
padding-bottom: $container-padding-x;
}
@include media-breakpoint-down(md) {
.content-area {
height: 100% !important;
max-height: 100% !important;
}
}

2
src/layout/card/content/NitroCardContentView.tsx
View File

@ -4,7 +4,7 @@ import { NitroCardContentViewProps } from './NitroCardContextView.types';
export const NitroCardContentView: FC<NitroCardContentViewProps> = props =>
{
return (
<div className="bg-light p-2 content-area">
<div className="container-fluid bg-light content-area">
{ props.children }
</div>
);

2
src/layout/card/header/NitroCardHeaderView.tsx
View File

@ -6,7 +6,7 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
const { headerText = null, onCloseClick = null } = props;
return (
<div className="drag-handler d-flex align-items-center bg-primary px-2 py-1 nitro-card-header">
<div className="drag-handler container-fluid d-flex align-items-center bg-primary py-1 nitro-card-header">
<div className="d-flex flex-grow-1 justify-content-center align-items-center">
<div className="h4 m-0 text-white text-shadow">{ headerText }</div>
</div>

2
src/layout/card/simple-header/NitroCardSimpleHeaderView.tsx
View File

@ -6,7 +6,7 @@ export const NitroCardSimpleHeaderView: FC<NitroCardSimpleHeaderViewProps> = pro
const { headerText = null, onCloseClick = null } = props;
return (
<div className="d-flex align-items-center bg-light">
<div className="d-flex container-fluid align-items-center bg-light">
<div className="col-1"></div>
<div className="d-flex bg-primary-split flex-grow-1 justify-content-center align-items-center border border-top-0 rounded-bottom px-2 py-1">
<div className="h5 m-0 text-white text-shadow">{ headerText }</div>

4
src/layout/card/tabs/NitroCardTabsView.scss
View File

@ -1,6 +1,6 @@
.nitro-card-tabs {
min-height: $nitro-card-tabs-height;
max-height: $nitro-card-tabs-height;
}
@import './tabs-item/NitroCardTabsItemView';
@import './tabs-item/NitroCardTabsItemView';
}

8
src/layout/card/tabs/NitroCardTabsView.tsx
View File

@ -4,8 +4,10 @@ import { NitroCardTabsViewProps } from './NitroCardTabsView.types';
export const NitroCardTabsView: FC<NitroCardTabsViewProps> = props =>
{
return (
<ul className="nav nav-tabs justify-content-center bg-secondary px-2 pt-1 nitro-card-tabs">
{ props.children }
</ul>
<div className="container-fluid d-flex bg-secondary pt-1 nitro-card-tabs justify-content-center">
<ul className="nav nav-tabs">
{ props.children }
</ul>
</div>
);
}

6
src/layout/card/tabs/tabs-item/NitroCardTabsItemView.scss
View File

@ -0,0 +1,6 @@
.nav-item {
&:last-child() {
margin-right: 0 !important;
}
}

4
src/views/catalog/views/page/layout/default/CatalogLayoutDefaultView.tsx
View File

@ -21,14 +21,14 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutDefaultViewProps> = props
<CatalogPageOffersView offers={ pageParser.offers } />
</div>
{ !product &&
<div className="position-relative d-flex flex-column col justify-content-center align-items-center">
<div className="position-relative d-flex flex-column col-5 justify-content-center align-items-center">
<div className="d-block mb-2">
<img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
</div>
<div className="fs-6 text-center text-black lh-sm overflow-hidden">{ GetCatalogPageText(pageParser, 0) }</div>
</div> }
{ product &&
<div className="position-relative d-flex flex-column col">
<div className="position-relative d-flex flex-column col-5">
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
{ product.uniqueLimitedItem &&
<LimitedEditionCompletePlateView uniqueLimitedItemsLeft={ product.uniqueLimitedItemsLeft } uniqueLimitedSeriesSize={ product.uniqueLimitedSeriesSize } /> }

2
src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx
View File

@ -21,7 +21,7 @@ export const CatalogLayoutSingleBundleView: FC<CatalogLayoutSingleBundleViewProp
}) }
</div>
</div>
<div className="position-relative d-flex flex-column col justify-content-center align-items-center">
<div className="position-relative d-flex flex-column col-5 justify-content-center align-items-center">
<div className="d-block mb-2">
<img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
</div>

26
src/views/hotel-view/HotelView.tsx
View File

@ -1,9 +1,31 @@
import { Nitro } from 'nitro-renderer';
import { Nitro, RoomSessionEvent } from 'nitro-renderer';
import { useCallback, useState } from 'react';
import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
import { GetConfiguration } from '../../utils/GetConfiguration';
import { HotelViewProps } from './HotelView.types';
export function HotelView(props: HotelViewProps): JSX.Element
{
const [ isVisible, setIsVisible ] = useState(true);
const onRoomSessionEvent = useCallback((event: RoomSessionEvent) =>
{
switch(event.type)
{
case RoomSessionEvent.CREATED:
setIsVisible(false);
return;
case RoomSessionEvent.ENDED:
setIsVisible(event.openLandingView);
return;
}
}, []);
useRoomSessionManagerEvent(RoomSessionEvent.CREATED, onRoomSessionEvent);
useRoomSessionManagerEvent(RoomSessionEvent.ENDED, onRoomSessionEvent);
if(!isVisible) return null;
const backgroundColor = GetConfiguration('hotelview.images')['background.colour'];
const background = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview.images')['background']);
const sun = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview.images')['sun']);
@ -11,7 +33,7 @@ export function HotelView(props: HotelViewProps): JSX.Element
const left = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview.images')['left']);
//const rightRepeat = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview.images')['right.repeat']);
//const right = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview.images')['right']);
return (
<div className="nitro-hotel-view" style={ (backgroundColor && backgroundColor) ? { background: backgroundColor } : {} }>
<div className="background position-absolute" style={ (background && background.length) ? { backgroundImage: `url(${ background })` } : {} } />

4
src/views/inventory/InventoryView.scss
View File

@ -2,8 +2,8 @@
width: 475px;
.content-area {
height: 243.5px;
max-height: 243.5px;
height: calc(220px + (#{$container-padding-x} * 2));
max-height: calc(220px + (#{$container-padding-x} * 2));
}
.empty-image {

4
src/views/inventory/views/badge/results/InventoryBadgeResultsView.scss
View File

@ -1,5 +1,5 @@
.badge-item-container {
height: 144px;
max-height: 144px;
height: 139px;
max-height: 139px;
overflow-y: auto;
}

6
src/views/inventory/views/bot/InventoryBotView.tsx
View File

@ -70,7 +70,7 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
<div className="col-5 d-flex justify-content-center align-items-center">
<div className="empty-image"></div>
</div>
<div className="d-flex flex-column col justify-content-center">
<div className="d-flex flex-column col-7 justify-content-center">
<div className="h5 m-0 text-black fw-bold m-0 mb-2">
{ LocalizeText('inventory.empty.bots.title') }
</div>
@ -81,11 +81,11 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
}
return (
<div className="row h-100">
<div className="row">
<div className="col-7">
<InventoryBotResultsView botItems={ botItems } />
</div>
<div className="d-flex flex-column col justify-space-between">
<div className="d-flex flex-column col-5 justify-space-between">
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
{ botItem && <div className="d-flex flex-column flex-grow-1">
<p className="flex-grow-1 fs-6 text-black my-2">{ botItem.botData.name }</p>

4
src/views/inventory/views/bot/results/InventoryBotResultsView.scss
View File

@ -1,5 +1,5 @@
.bot-item-container {
height: 226px;
max-height: 226px;
height: 220px;
max-height: 220px;
overflow-y: auto;
}

6
src/views/inventory/views/furniture/InventoryFurnitureView.tsx
View File

@ -105,7 +105,7 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
<div className="col-5 d-flex justify-content-center align-items-center">
<div className="empty-image"></div>
</div>
<div className="d-flex flex-column col justify-content-center">
<div className="d-flex flex-column col-7 justify-content-center">
<div className="h5 m-0 text-black fw-bold m-0 mb-2">
{ LocalizeText('inventory.empty.title') }
</div>
@ -116,12 +116,12 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
}
return (
<div className="row h-100">
<div className="row">
<div className="col-7">
<InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
<InventoryFurnitureResultsView groupItems={ filteredGroupItems } />
</div>
<div className="position-relative d-flex flex-column col justify-space-between">
<div className="position-relative d-flex flex-column col-5 justify-space-between">
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
{ groupItem && groupItem.stuffData.isUnique &&
<div className="position-absolute limited-edition-info-container">

4
src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.scss
View File

@ -1,5 +1,5 @@
.furni-item-container {
height: 192px;
max-height: 192px;
height: 188px;
max-height: 188px;
overflow-y: auto;
}

4
src/views/inventory/views/pet/InventoryPetView.tsx
View File

@ -70,7 +70,7 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
<div className="col-5 d-flex justify-content-center align-items-center">
<div className="empty-image"></div>
</div>
<div className="d-flex flex-column col justify-content-center">
<div className="d-flex flex-column col-7 justify-content-center">
<div className="h5 m-0 text-black fw-bold m-0 mb-2">
{ LocalizeText('inventory.empty.pets.title') }
</div>
@ -85,7 +85,7 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
<div className="col-7">
<InventoryPetResultsView petItems={ petItems } />
</div>
<div className="d-flex flex-column col justify-space-between">
<div className="d-flex flex-column col-5 justify-space-between">
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
{ petItem && <div className="d-flex flex-column flex-grow-1">
<p className="flex-grow-1 fs-6 text-black my-2">{ petItem.petData.name }</p>

4
src/views/inventory/views/pet/results/InventoryPetResultsView.scss
View File

@ -1,5 +1,5 @@
.pet-item-container {
height: 226px;
max-height: 226px;
height: 220px;
max-height: 220px;
overflow-y: auto;
}

2
src/views/room-previewer/RoomPreviewerView.scss
View File

@ -3,7 +3,7 @@
width: 100%;
.room-preview-image {
position: absolute;
position: relative;
top: 0;
left: 0;
height: 100%;

2
src/views/toolbar/ToolbarView.scss
View File

@ -3,7 +3,7 @@
bottom: 0;
left: 0;
width: 100%;
height: 55px;
height: $toolbar-height;
z-index: $toolbar-zindex;
.nitro-toolbar {