From 9f04da51570fda7d5ea7c7e66feff2722583726e Mon Sep 17 00:00:00 2001 From: Bill Date: Fri, 14 May 2021 14:26:36 -0400 Subject: [PATCH] Various changes --- src/assets/styles/bootstrap/_variables.scss | 2 +- src/index.scss | 2 + src/layout/card/NitroCardView.scss | 41 +++++++++++++++++-- src/layout/card/NitroCardView.tsx | 14 ++++--- .../card/content/NitroCardContentView.scss | 12 ++++++ .../card/content/NitroCardContentView.tsx | 2 +- .../card/header/NitroCardHeaderView.tsx | 2 +- .../NitroCardSimpleHeaderView.tsx | 2 +- src/layout/card/tabs/NitroCardTabsView.scss | 4 +- src/layout/card/tabs/NitroCardTabsView.tsx | 8 ++-- .../tabs/tabs-item/NitroCardTabsItemView.scss | 6 +++ .../default/CatalogLayoutDefaultView.tsx | 4 +- .../CatalogLayoutSingleBundleView.tsx | 2 +- src/views/hotel-view/HotelView.tsx | 26 +++++++++++- src/views/inventory/InventoryView.scss | 4 +- .../results/InventoryBadgeResultsView.scss | 4 +- .../inventory/views/bot/InventoryBotView.tsx | 6 +-- .../bot/results/InventoryBotResultsView.scss | 4 +- .../furniture/InventoryFurnitureView.tsx | 6 +-- .../InventoryFurnitureResultsView.scss | 4 +- .../inventory/views/pet/InventoryPetView.tsx | 4 +- .../pet/results/InventoryPetResultsView.scss | 4 +- .../room-previewer/RoomPreviewerView.scss | 2 +- src/views/toolbar/ToolbarView.scss | 2 +- 24 files changed, 123 insertions(+), 44 deletions(-) diff --git a/src/assets/styles/bootstrap/_variables.scss b/src/assets/styles/bootstrap/_variables.scss index cd899423..f7f654d0 100644 --- a/src/assets/styles/bootstrap/_variables.scss +++ b/src/assets/styles/bootstrap/_variables.scss @@ -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; diff --git a/src/index.scss b/src/index.scss index 3fd73312..7961231c 100644 --- a/src/index.scss +++ b/src/index.scss @@ -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'; diff --git a/src/layout/card/NitroCardView.scss b/src/layout/card/NitroCardView.scss index 33294e70..6a82dd3a 100644 --- a/src/layout/card/NitroCardView.scss +++ b/src/layout/card/NitroCardView.scss @@ -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'; diff --git a/src/layout/card/NitroCardView.tsx b/src/layout/card/NitroCardView.tsx index 621619a7..6c3b6848 100644 --- a/src/layout/card/NitroCardView.tsx +++ b/src/layout/card/NitroCardView.tsx @@ -4,13 +4,15 @@ import { NitroCardViewProps } from './NitroCardView.types'; export const NitroCardView: FC = props => { - const { className = '', disableDrag = false } = props; + const { className = '', disableDrag = false, children = null } = props; return ( - -
- { props.children } -
- +
+ +
+ { children } +
+ +
); } diff --git a/src/layout/card/content/NitroCardContentView.scss b/src/layout/card/content/NitroCardContentView.scss index e69de29b..a9e2c7c4 100644 --- a/src/layout/card/content/NitroCardContentView.scss +++ b/src/layout/card/content/NitroCardContentView.scss @@ -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; + } +} diff --git a/src/layout/card/content/NitroCardContentView.tsx b/src/layout/card/content/NitroCardContentView.tsx index 96d9f85b..4067d928 100644 --- a/src/layout/card/content/NitroCardContentView.tsx +++ b/src/layout/card/content/NitroCardContentView.tsx @@ -4,7 +4,7 @@ import { NitroCardContentViewProps } from './NitroCardContextView.types'; export const NitroCardContentView: FC = props => { return ( -
+
{ props.children }
); diff --git a/src/layout/card/header/NitroCardHeaderView.tsx b/src/layout/card/header/NitroCardHeaderView.tsx index 6b0741e3..875671e5 100644 --- a/src/layout/card/header/NitroCardHeaderView.tsx +++ b/src/layout/card/header/NitroCardHeaderView.tsx @@ -6,7 +6,7 @@ export const NitroCardHeaderView: FC = props => const { headerText = null, onCloseClick = null } = props; return ( -
+
{ headerText }
diff --git a/src/layout/card/simple-header/NitroCardSimpleHeaderView.tsx b/src/layout/card/simple-header/NitroCardSimpleHeaderView.tsx index ff926fa3..d61941e4 100644 --- a/src/layout/card/simple-header/NitroCardSimpleHeaderView.tsx +++ b/src/layout/card/simple-header/NitroCardSimpleHeaderView.tsx @@ -6,7 +6,7 @@ export const NitroCardSimpleHeaderView: FC = pro const { headerText = null, onCloseClick = null } = props; return ( -
+
{ headerText }
diff --git a/src/layout/card/tabs/NitroCardTabsView.scss b/src/layout/card/tabs/NitroCardTabsView.scss index e9f125b4..dbfa4ff9 100644 --- a/src/layout/card/tabs/NitroCardTabsView.scss +++ b/src/layout/card/tabs/NitroCardTabsView.scss @@ -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'; +} diff --git a/src/layout/card/tabs/NitroCardTabsView.tsx b/src/layout/card/tabs/NitroCardTabsView.tsx index 76d344ca..cf49777d 100644 --- a/src/layout/card/tabs/NitroCardTabsView.tsx +++ b/src/layout/card/tabs/NitroCardTabsView.tsx @@ -4,8 +4,10 @@ import { NitroCardTabsViewProps } from './NitroCardTabsView.types'; export const NitroCardTabsView: FC = props => { return ( -
    - { props.children } -
+
+
    + { props.children } +
+
); } diff --git a/src/layout/card/tabs/tabs-item/NitroCardTabsItemView.scss b/src/layout/card/tabs/tabs-item/NitroCardTabsItemView.scss index e69de29b..8cac99e3 100644 --- a/src/layout/card/tabs/tabs-item/NitroCardTabsItemView.scss +++ b/src/layout/card/tabs/tabs-item/NitroCardTabsItemView.scss @@ -0,0 +1,6 @@ +.nav-item { + + &:last-child() { + margin-right: 0 !important; + } +} diff --git a/src/views/catalog/views/page/layout/default/CatalogLayoutDefaultView.tsx b/src/views/catalog/views/page/layout/default/CatalogLayoutDefaultView.tsx index a25fa824..1bd9fa52 100644 --- a/src/views/catalog/views/page/layout/default/CatalogLayoutDefaultView.tsx +++ b/src/views/catalog/views/page/layout/default/CatalogLayoutDefaultView.tsx @@ -21,14 +21,14 @@ export const CatalogLayoutDefaultView: FC = props
{ !product && -
+
{ GetCatalogPageText(pageParser, 0) }
} { product && -
+
{ product.uniqueLimitedItem && } diff --git a/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx b/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx index 111eb6a4..1e0d5058 100644 --- a/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx +++ b/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx @@ -21,7 +21,7 @@ export const CatalogLayoutSingleBundleView: FC
-
+
diff --git a/src/views/hotel-view/HotelView.tsx b/src/views/hotel-view/HotelView.tsx index a52b8a86..b466e4da 100644 --- a/src/views/hotel-view/HotelView.tsx +++ b/src/views/hotel-view/HotelView.tsx @@ -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 (
diff --git a/src/views/inventory/InventoryView.scss b/src/views/inventory/InventoryView.scss index 4f6c5fc4..0bec301d 100644 --- a/src/views/inventory/InventoryView.scss +++ b/src/views/inventory/InventoryView.scss @@ -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 { diff --git a/src/views/inventory/views/badge/results/InventoryBadgeResultsView.scss b/src/views/inventory/views/badge/results/InventoryBadgeResultsView.scss index 37211e14..86bc3042 100644 --- a/src/views/inventory/views/badge/results/InventoryBadgeResultsView.scss +++ b/src/views/inventory/views/badge/results/InventoryBadgeResultsView.scss @@ -1,5 +1,5 @@ .badge-item-container { - height: 144px; - max-height: 144px; + height: 139px; + max-height: 139px; overflow-y: auto; } diff --git a/src/views/inventory/views/bot/InventoryBotView.tsx b/src/views/inventory/views/bot/InventoryBotView.tsx index 71e43c19..b23635ba 100644 --- a/src/views/inventory/views/bot/InventoryBotView.tsx +++ b/src/views/inventory/views/bot/InventoryBotView.tsx @@ -70,7 +70,7 @@ export const InventoryBotView: FC = props =>
-
+
{ LocalizeText('inventory.empty.bots.title') }
@@ -81,11 +81,11 @@ export const InventoryBotView: FC = props => } return ( -
+
-
+
{ botItem &&

{ botItem.botData.name }

diff --git a/src/views/inventory/views/bot/results/InventoryBotResultsView.scss b/src/views/inventory/views/bot/results/InventoryBotResultsView.scss index a8cf160c..097c92d8 100644 --- a/src/views/inventory/views/bot/results/InventoryBotResultsView.scss +++ b/src/views/inventory/views/bot/results/InventoryBotResultsView.scss @@ -1,5 +1,5 @@ .bot-item-container { - height: 226px; - max-height: 226px; + height: 220px; + max-height: 220px; overflow-y: auto; } diff --git a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx b/src/views/inventory/views/furniture/InventoryFurnitureView.tsx index d4a223b3..29bade0e 100644 --- a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx +++ b/src/views/inventory/views/furniture/InventoryFurnitureView.tsx @@ -105,7 +105,7 @@ export const InventoryFurnitureView: FC = props =>
-
+
{ LocalizeText('inventory.empty.title') }
@@ -116,12 +116,12 @@ export const InventoryFurnitureView: FC = props => } return ( -
+
-
+
{ groupItem && groupItem.stuffData.isUnique &&
diff --git a/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.scss b/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.scss index 6f7e0f0b..3e11db9b 100644 --- a/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.scss +++ b/src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.scss @@ -1,5 +1,5 @@ .furni-item-container { - height: 192px; - max-height: 192px; + height: 188px; + max-height: 188px; overflow-y: auto; } diff --git a/src/views/inventory/views/pet/InventoryPetView.tsx b/src/views/inventory/views/pet/InventoryPetView.tsx index 4e835675..8a4f7bc3 100644 --- a/src/views/inventory/views/pet/InventoryPetView.tsx +++ b/src/views/inventory/views/pet/InventoryPetView.tsx @@ -70,7 +70,7 @@ export const InventoryPetView: FC = props =>
-
+
{ LocalizeText('inventory.empty.pets.title') }
@@ -85,7 +85,7 @@ export const InventoryPetView: FC = props =>
-
+
{ petItem &&

{ petItem.petData.name }

diff --git a/src/views/inventory/views/pet/results/InventoryPetResultsView.scss b/src/views/inventory/views/pet/results/InventoryPetResultsView.scss index 30675765..f5a48826 100644 --- a/src/views/inventory/views/pet/results/InventoryPetResultsView.scss +++ b/src/views/inventory/views/pet/results/InventoryPetResultsView.scss @@ -1,5 +1,5 @@ .pet-item-container { - height: 226px; - max-height: 226px; + height: 220px; + max-height: 220px; overflow-y: auto; } diff --git a/src/views/room-previewer/RoomPreviewerView.scss b/src/views/room-previewer/RoomPreviewerView.scss index 9483d987..55328299 100644 --- a/src/views/room-previewer/RoomPreviewerView.scss +++ b/src/views/room-previewer/RoomPreviewerView.scss @@ -3,7 +3,7 @@ width: 100%; .room-preview-image { - position: absolute; + position: relative; top: 0; left: 0; height: 100%; diff --git a/src/views/toolbar/ToolbarView.scss b/src/views/toolbar/ToolbarView.scss index c1992b42..c4511533 100644 --- a/src/views/toolbar/ToolbarView.scss +++ b/src/views/toolbar/ToolbarView.scss @@ -3,7 +3,7 @@ bottom: 0; left: 0; width: 100%; - height: 55px; + height: $toolbar-height; z-index: $toolbar-zindex; .nitro-toolbar {