duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 15:06:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆙 Update #2

Browse Source
This commit is contained in:
duckietm
2026-05-29 15:16:14 +02:00
parent d0c11f047a
commit 888073acb1
7 changed files with 334 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/catalog/CatalogClassicView.tsx
+46 -7
View File
@@ -1,9 +1,9 @@
import { AddLinkEventTracker, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
import { FC, useEffect } from 'react';
import { FaCog, FaEdit, FaEye, FaEyeSlash, FaPlus, FaTrash } from 'react-icons/fa';
import { CatalogType, LocalizeText } from '../../api';
import { Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
import { useCatalogActions, useCatalogData, useCatalogUiState, useHasPermission } from '../../hooks';
import { FC, useEffect, useState } from 'react';
import { FaBars, FaCog, FaEdit, FaEye, FaEyeSlash, FaPlus, FaTrash } from 'react-icons/fa';
import { CatalogType, GetConfigurationValue, LocalizeShortNumber, LocalizeText } from '../../api';
import { Column, Grid, LayoutCurrencyIcon, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
import { useCatalogActions, useCatalogData, useCatalogUiState, useHasPermission, usePurse } from '../../hooks';
import { CatalogAdminProvider, useCatalogAdmin } from './CatalogAdminContext';
import { CatalogAdminOfferEditView } from './views/admin/CatalogAdminOfferEditView';
import { CatalogAdminPageEditView } from './views/admin/CatalogAdminPageEditView';
@@ -31,6 +31,9 @@ const CatalogClassicViewInner: FC<{}> = () =>
const loading = catalogAdmin?.loading ?? false;
const isMod = useHasPermission('acc_catalogfurni');
const [ mobileMenuOpen, setMobileMenuOpen ] = useState(false);
const { purse = null } = usePurse();
const displayedCurrencies = GetConfigurationValue<number[]>('system.currency.types', []);
const buildersClubHeaderStyle = (currentType === CatalogType.BUILDER)
? { borderColor: '#d79d2e', borderBottomColor: '#000', background: 'linear-gradient(180deg, #d89f2d 0%, #c68515 100%)' }
: undefined;
@@ -121,6 +124,42 @@ const CatalogClassicViewInner: FC<{}> = () =>
{ isVisible &&
<NitroCardView classNames={ [ 'nitro-catalog-classic-window' ] } isResizable={ false } uniqueKey="catalog">
<NitroCardHeaderView className={ currentType === CatalogType.BUILDER ? 'builders-club-card-header' : '' } headerText={ LocalizeText('catalog.title') } onCloseClick={ () => setIsVisible(false) } style={ buildersClubHeaderStyle } />
<div className="nitro-catalog-classic-mobile-header">
{ isMod &&
<div className="nitro-catalog-classic-mobile-burger">
<button className="nitro-catalog-classic-burger-btn" onClick={ () => setMobileMenuOpen(value => !value) }>
<FaBars />
</button>
{ mobileMenuOpen &&
<div className="nitro-catalog-classic-burger-menu">
<button onClick={ () =>
{
setAdminMode(!adminMode); setMobileMenuOpen(false);
} }>
{ adminMode ? 'Exit Admin' : 'Admin' }
</button>
{ adminMode &&
<button disabled={ loading } onClick={ () =>
{
publishCatalog(); setMobileMenuOpen(false);
} }>
{ loading ? '...' : 'Publish' }
</button> }
</div> }
</div> }
<div className="nitro-catalog-classic-mobile-currency">
<div className="nitro-catalog-classic-coin">
<span>{ LocalizeShortNumber(purse?.credits ?? 0) }</span>
<LayoutCurrencyIcon type={ -1 } />
</div>
{ displayedCurrencies.map(type => (
<div key={ type } className="nitro-catalog-classic-coin">
<span>{ LocalizeShortNumber(purse?.activityPoints?.get(type) ?? 0) }</span>
<LayoutCurrencyIcon type={ type } />
</div>
)) }
</div>
</div>
{ adminMode &&
<div className="nitro-catalog-classic-admin-banner flex items-center justify-between text-[10px] font-bold px-3 py-0.5 uppercase tracking-wider">
<span>Admin Mode</span>
@@ -148,7 +187,7 @@ const CatalogClassicViewInner: FC<{}> = () =>
} }>
<div className={ `flex items-center gap-1 ${ isHidden ? 'opacity-40' : '' }` }>
<CatalogIconView icon={ child.iconId } />
<span className="truncate">{ child.localization }</span>
<span className="nitro-catalog-classic-tab-label truncate">{ child.localization }</span>
{ adminMode && isHidden && <FaEyeSlash className="text-[8px] text-danger ml-1" /> }
{ adminMode &&
<div className="flex items-center gap-0.5 ml-1" onClick={ e => e.stopPropagation() }>
@@ -172,7 +211,7 @@ const CatalogClassicViewInner: FC<{}> = () =>
);
}) }
{ isMod &&
<NitroCardTabsItemView isActive={ adminMode } onClick={ () => setAdminMode(!adminMode) }>
<NitroCardTabsItemView classNames={ [ 'nitro-catalog-classic-admin-tab' ] } isActive={ adminMode } onClick={ () => setAdminMode(!adminMode) }>
<FaCog className={ `text-[10px] ${ adminMode ? 'animate-spin' : '' }` } style={ adminMode ? { animationDuration: '3s' } : {} } />
</NitroCardTabsItemView> }
</NitroCardTabsView>
src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx
+9 -15
View File
@@ -1,5 +1,5 @@
import { FC } from 'react';
import { FaEdit, FaPlus } from 'react-icons/fa';
import { FaEdit, FaPlus, FaPowerOff, FaSyncAlt } from 'react-icons/fa';
import { GetConfigurationValue, LocalizeText, ProductTypeEnum, SanitizeHtml } from '../../../../../api';
import { Text } from '../../../../../common';
import { useCatalogData } from '../../../../../hooks';
@@ -17,13 +17,12 @@ import { CatalogLayoutProps } from './CatalogLayout.types';
export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
{
const { page = null } = props;
const { currentOffer = null, currentPage = null } = useCatalogData();
const { currentOffer = null, currentPage = null, roomPreviewer = null } = useCatalogData();
const catalogAdmin = useCatalogAdmin();
const adminMode = catalogAdmin?.adminMode ?? false;
return (
<div className="nitro-catalog-classic-default-layout flex flex-col h-full gap-2">
{ /* Admin: quick actions */ }
{ adminMode && !catalogAdmin.editingPageData &&
<div className="flex gap-2 nitro-catalog-classic-default-admin">
<button
@@ -42,25 +41,24 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
<FaPlus className="text-[10px]" /> { LocalizeText('catalog.admin.offer.new') }
</button>
</div> }
{ /* Product detail card. shrink-0 + visible overflow so the Buy
button never gets squeezed off-screen when the grid below
holds a lot of items. */ }
{ currentOffer &&
<div className="nitro-catalog-classic-offer-panel flex gap-0 shrink-0">
{ /* Preview area */ }
<div className="nitro-catalog-classic-offer-preview relative flex items-center justify-center">
{ (currentOffer.product.productType !== ProductTypeEnum.BADGE) &&
<>
<button className="nitro-catalog-classic-preview-btn nitro-catalog-classic-preview-rotate" onClick={ () => roomPreviewer?.changeRoomObjectDirection() }>
<FaSyncAlt /> Rotate
</button>
<button className="nitro-catalog-classic-preview-btn nitro-catalog-classic-preview-state" onClick={ () => roomPreviewer?.changeRoomObjectState() }>
<FaPowerOff /> Toggle State
</button>
<CatalogViewProductWidgetView />
<CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 right-1 absolute" />
</> }
{ (currentOffer.product.productType === ProductTypeEnum.BADGE) &&
<CatalogAddOnBadgeWidgetView className="scale-2" /> }
</div>
{ /* Product info + purchase */ }
<div className="nitro-catalog-classic-offer-info flex flex-col flex-1 min-w-0 gap-2">
{ /* Title row */ }
<div>
<div className="flex items-start justify-between gap-2">
<Text className="text-[13px]! font-bold text-dark leading-tight">{ currentOffer.localizationName }</Text>
@@ -79,13 +77,9 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
</div> }
<CatalogLimitedItemWidgetView />
</div>
{ /* Price */ }
<CatalogTotalPriceWidget />
{ /* Spinner */ }
<CatalogSpinnerWidgetView />
{ /* Actions - natural flow, no mt-auto so they can't
be pushed past the panel's bottom edge. */ }
<div className="flex gap-1.5">
<div className="nitro-catalog-classic-offer-actions flex gap-1.5">
<CatalogPurchaseWidgetView />
</div>
</div>
src/components/catalog/views/page/widgets/CatalogViewProductWidgetView.tsx
+4
View File
@@ -19,6 +19,8 @@ export const CatalogViewProductWidgetView: FC<{}> = props =>
if(!product) return;
roomPreviewer.reset(false);
roomPreviewer.updateObjectRoom('default', 'default', 'default');
roomPreviewer.updateRoomWallsAndFloorVisibility(true, true);
switch(product.productType)
{
@@ -68,6 +70,8 @@ export const CatalogViewProductWidgetView: FC<{}> = props =>
case ProductTypeEnum.WALL: {
if(!product.furnitureData) return;
roomPreviewer.updateRoomWallsAndFloorVisibility(true, true);
switch(product.furnitureData.specialType)
{
case FurniCategory.FLOOR:
src/components/inventory/views/furniture/InventoryFurnitureView.tsx
+36 -22
View File
@@ -1,7 +1,7 @@
import { InfiniteGrid } from '@layout/InfiniteGrid';
import { GetRoomEngine, GetSessionDataManager, IRoomSession, RoomObjectVariable, RoomPreviewer, Vector3d } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { FaTrashAlt } from 'react-icons/fa';
import { FaPowerOff, FaSyncAlt, FaTrashAlt } from 'react-icons/fa';
import { DispatchUiEvent, FurniCategory, GroupItem, LocalizeText, UnseenItemCategory, attemptItemPlacement } from '../../../../api';
import { LayoutLimitedEditionCompactPlateView, LayoutRarityLevelView, LayoutRoomPreviewerView } from '../../../../common';
import { CatalogPostMarketplaceOfferEvent, DeleteItemConfirmEvent } from '../../../../events';
@@ -49,22 +49,24 @@ export const InventoryFurnitureView: FC<{
if(!furnitureItem) return;
const roomEngine = GetRoomEngine();
let wallType = roomEngine.getRoomInstanceVariable<string>(roomEngine.activeRoomId, RoomObjectVariable.ROOM_WALL_TYPE);
let floorType = roomEngine.getRoomInstanceVariable<string>(roomEngine.activeRoomId, RoomObjectVariable.ROOM_FLOOR_TYPE);
let landscapeType = roomEngine.getRoomInstanceVariable<string>(roomEngine.activeRoomId, RoomObjectVariable.ROOM_LANDSCAPE_TYPE);
wallType = (wallType && wallType.length) ? wallType : '101';
floorType = (floorType && floorType.length) ? floorType : '101';
landscapeType = (landscapeType && landscapeType.length) ? landscapeType : '1.1';
roomPreviewer.reset(false);
roomPreviewer.updateObjectRoom(floorType, wallType, landscapeType);
roomPreviewer.updateRoomWallsAndFloorVisibility(true, true);
if((furnitureItem.category === FurniCategory.WALL_PAPER) || (furnitureItem.category === FurniCategory.FLOOR) || (furnitureItem.category === FurniCategory.LANDSCAPE))
const isRoomDecoration = (furnitureItem.category === FurniCategory.WALL_PAPER) || (furnitureItem.category === FurniCategory.FLOOR) || (furnitureItem.category === FurniCategory.LANDSCAPE);
if(isRoomDecoration)
{
const roomEngine = GetRoomEngine();
let wallType = roomEngine.getRoomInstanceVariable<string>(roomEngine.activeRoomId, RoomObjectVariable.ROOM_WALL_TYPE);
let floorType = roomEngine.getRoomInstanceVariable<string>(roomEngine.activeRoomId, RoomObjectVariable.ROOM_FLOOR_TYPE);
let landscapeType = roomEngine.getRoomInstanceVariable<string>(roomEngine.activeRoomId, RoomObjectVariable.ROOM_LANDSCAPE_TYPE);
wallType = (wallType && wallType.length) ? wallType : '101';
floorType = (floorType && floorType.length) ? floorType : '101';
landscapeType = (landscapeType && landscapeType.length) ? landscapeType : '1.1';
roomPreviewer.updateRoomWallsAndFloorVisibility(true, true);
floorType = ((furnitureItem.category === FurniCategory.FLOOR) ? selectedItem.stuffData.getLegacyString() : floorType);
wallType = ((furnitureItem.category === FurniCategory.WALL_PAPER) ? selectedItem.stuffData.getLegacyString() : wallType);
landscapeType = ((furnitureItem.category === FurniCategory.LANDSCAPE) ? selectedItem.stuffData.getLegacyString() : landscapeType);
@@ -77,17 +79,20 @@ export const InventoryFurnitureView: FC<{
if(data) roomPreviewer.addWallItemIntoRoom(data.id, new Vector3d(90, 0, 0), data.customParams);
}
return;
}
roomPreviewer.updateObjectRoom('default', 'default', 'default');
roomPreviewer.updateRoomWallsAndFloorVisibility(true, true);
if(selectedItem.isWallItem)
{
roomPreviewer.addWallItemIntoRoom(selectedItem.type, new Vector3d(90), furnitureItem.stuffData.getLegacyString());
}
else
{
if(selectedItem.isWallItem)
{
roomPreviewer.addWallItemIntoRoom(selectedItem.type, new Vector3d(90), furnitureItem.stuffData.getLegacyString());
}
else
{
roomPreviewer.addFurnitureIntoRoom(selectedItem.type, new Vector3d(90), selectedItem.stuffData, (furnitureItem.extra.toString()));
}
roomPreviewer.addFurnitureIntoRoom(selectedItem.type, new Vector3d(90), selectedItem.stuffData, (furnitureItem.extra.toString()));
}
}, [ roomPreviewer, selectedItem ]);
@@ -129,6 +134,15 @@ export const InventoryFurnitureView: FC<{
<div className="flex flex-col col-span-5">
<div className="relative flex flex-col">
<LayoutRoomPreviewerView height={ 140 } roomPreviewer={ roomPreviewer } />
{ selectedItem &&
<>
<button className="nitro-inventory-preview-btn nitro-inventory-preview-rotate" onClick={ () => roomPreviewer?.changeRoomObjectDirection() }>
<FaSyncAlt /> Rotate
</button>
<button className="nitro-inventory-preview-btn nitro-inventory-preview-state" onClick={ () => roomPreviewer?.changeRoomObjectState() }>
<FaPowerOff /> Toggle State
</button>
</> }
{ selectedItem &&
<NitroButton
className="bg-danger! hover:bg-danger/80! absolute bottom-2 inset-e-2 p-1"
src/css/catalog/CatalogClassicView.css
+182 -75
View File
@@ -1,26 +1,3 @@
/* ---------------------------------------------------------------------------
* Catalog "classic" window — Habbo mobile shop redesign.
*
* Palette (from the mobile shop mockup):
* --cat-blue #4b7a94 header / app chrome
* --cat-blue-dark #385d73 header borders
* --cat-ink #233a47 strong outlines / active tab border
* --cat-strip #d9e2e8 tab strip + footer background
* --cat-tab #b7c7d1 inactive tab fill
* --cat-tab-border #7a9cb0 tab outline
* --cat-panel #eef2f5 sidebar / search panels
* --cat-sub #e1e7ec sub-node rows
* --cat-line #b7c7d1 card / divider lines
* --cat-canvas #d4dadf isometric preview canvas
* --cat-canvas-2 #c9cfd4 preview checker tiles
* --cat-select #3a82a7 selected card outline
* --cat-select-bg #f0f5f8 selected card fill
* --cat-gold #f7d673 price badge fill
* --cat-gold-border #d4af37 price badge outline
* --cat-gold-ink #4a3300 price badge text
* --cat-buy #009900 buy button
* ------------------------------------------------------------------------- */
.nitro-catalog-classic-window {
--cat-blue: #4b7a94;
--cat-blue-dark: #385d73;
@@ -59,7 +36,6 @@
max-height: 38px;
}
/* Blue Habbo-mobile header. */
.nitro-catalog-classic-window .nitro-card-header {
background: var(--cat-blue);
border-color: var(--cat-blue);
@@ -71,7 +47,6 @@
background: linear-gradient(180deg, #f4d45d 0%, #d8b43e 100%);
}
/* Tab strip — light blue-grey shelf with tab "folders". */
.nitro-catalog-classic-tabs-shell {
flex-wrap: nowrap;
gap: 2px;
@@ -159,7 +134,6 @@
color: #5b7080 !important;
}
/* Sidebar category tree — flat rows that echo the mockup's landscape sidebar. */
.nitro-catalog-classic-navigation-shell {
flex: 1 1 auto;
min-height: 0;
@@ -255,7 +229,6 @@
color: #5b7080 !important;
}
/* Right-hand content column. */
.nitro-catalog-classic-layout-shell {
display: flex;
flex-direction: column;
@@ -282,16 +255,17 @@
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 auto;
flex: 0 0 auto;
min-height: 32px;
overflow: hidden;
overflow: visible;
}
.nitro-catalog-classic-layout-hero img {
display: block;
width: 100%;
max-width: 100%;
max-height: 32px;
width: auto;
height: auto;
max-height: 80px;
object-fit: contain;
}
@@ -320,26 +294,22 @@
overflow: hidden;
}
/* Isometric checkered preview canvas, straight from the mockup. */
.nitro-catalog-classic-offer-preview {
width: 136px;
min-width: 136px;
width: 190px;
min-width: 190px;
padding: 8px;
border-right: 1px solid var(--cat-line);
background-color: var(--cat-canvas);
background-image:
linear-gradient(30deg, var(--cat-canvas-2) 25%, transparent 25%),
linear-gradient(-30deg, var(--cat-canvas-2) 25%, transparent 25%),
linear-gradient(30deg, transparent 75%, var(--cat-canvas-2) 75%),
linear-gradient(-30deg, transparent 75%, var(--cat-canvas-2) 75%);
background-size: 30px 17px;
}
.nitro-catalog-classic-offer-info {
padding: 10px;
}
/* Solid-gold price pills (mockup price badge). */
.nitro-catalog-classic-offer-actions {
justify-content: flex-end;
}
.nitro-catalog-classic-offer-info .rounded-full {
background: var(--cat-gold) !important;
border-color: var(--cat-gold-border) !important;
@@ -355,7 +325,6 @@
padding: 10px;
}
/* Product grid. */
.nitro-catalog-classic-grid-shell {
min-height: 150px;
padding: 6px;
@@ -420,7 +389,6 @@
object-fit: contain;
}
/* Green "buy" action button (mockup "Acquista"). */
.nitro-catalog-classic-offer-info .bg-\[\#00800b\] {
background-color: var(--cat-buy) !important;
border-color: #007a00 !important;
@@ -480,21 +448,6 @@
background: var(--cat-panel);
}
/* ---------------------------------------------------------------------------
* Responsive layout
*
* Three tiers:
* > 1024px desktop, fixed 640x600 (default rules above)
* 641px - 1024px tablet, fluid card, single-column stage
* <= 640px phone, full-screen modal with stacked layout +
* larger touch targets and a horizontally
* scrollable tab strip
*
* A separate short-landscape branch trims chrome when height <= 480px
* (typical phone-in-landscape) so the grid still has room to breathe.
* ------------------------------------------------------------------------- */
/* Tablet (portrait + landscape between phone and desktop). */
@media (max-width: 1024px) and (min-width: 641px) {
.nitro-catalog-classic-window {
width: min(calc(100vw - 24px), 720px) !important;
@@ -505,8 +458,6 @@
max-height: calc(100vh - 24px) !important;
}
/* Drop the sidebar to a horizontal row above the content so the grid
* has the full card width on the narrower tablet viewports. */
.nitro-catalog-classic-stage {
grid-template-columns: minmax(0, 1fr);
}
@@ -516,7 +467,139 @@
}
}
/* Phone — portrait and landscape. */
.nitro-catalog-classic-mobile-header {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 5;
display: flex;
align-items: center;
height: 38px;
padding: 0 44px 0 8px;
pointer-events: none;
}
.nitro-catalog-classic-mobile-burger {
position: relative;
pointer-events: auto;
}
.nitro-catalog-classic-burger-btn {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border: 0;
border-radius: 5px;
background: rgba(0, 0, 0, 0.2);
color: #fff;
font-size: 13px;
cursor: pointer;
}
.nitro-catalog-classic-burger-btn:hover {
background: rgba(0, 0, 0, 0.3);
}
.nitro-catalog-classic-burger-btn:active {
background: rgba(0, 0, 0, 0.36);
}
.nitro-catalog-classic-burger-menu {
position: absolute;
top: 32px;
left: 0;
z-index: 60;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 150px;
padding: 6px;
border: 1px solid var(--cat-line);
border-radius: 6px;
background: #fff;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.nitro-catalog-classic-burger-menu button {
padding: 8px 10px;
border: 0;
border-radius: 4px;
background: var(--cat-strip);
color: var(--cat-ink);
font-weight: 700;
text-align: left;
cursor: pointer;
}
.nitro-catalog-classic-burger-menu button:disabled {
opacity: 0.6;
}
.nitro-catalog-classic-mobile-currency {
margin-left: auto;
display: flex;
align-items: center;
gap: 5px;
pointer-events: auto;
}
.nitro-catalog-classic-coin {
display: flex;
align-items: center;
gap: 3px;
padding: 3px 7px;
border-radius: 11px;
background: rgba(0, 0, 0, 0.25);
color: #fff;
font-size: 10px;
font-weight: 700;
}
.nitro-catalog-classic-coin span {
color: #fff;
}
.nitro-catalog-classic-admin-tab {
display: none !important;
}
.nitro-catalog-classic-preview-btn {
position: absolute;
top: 8px;
z-index: 4;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
border: 1px solid #555;
border-radius: 5px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 11px;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
}
.nitro-catalog-classic-preview-btn:hover {
background: rgba(0, 0, 0, 0.82);
}
.nitro-catalog-classic-preview-btn:active {
background: rgba(0, 0, 0, 0.9);
}
.nitro-catalog-classic-preview-rotate {
left: 8px;
}
.nitro-catalog-classic-preview-state {
right: 8px;
}
@media (max-width: 640px) {
.nitro-catalog-classic-window {
width: 100vw !important;
@@ -525,13 +608,26 @@
height: 100vh !important;
min-height: 0 !important;
max-height: 100vh !important;
/* Drop the soft drop-shadow / outer border on full-screen so it
* blends with the viewport edges. */
border-radius: 0 !important;
}
/* Tabs become a horizontally scrollable strip with bigger tap targets
* (≥ 44px tall is the WCAG / iOS recommendation). */
.draggable-window:has(> .nitro-catalog-classic-window) {
transform: none !important;
left: 0 !important;
top: 0 !important;
}
.nitro-catalog-classic-window .nitro-card-title {
display: none;
}
.nitro-catalog-classic-mobile-currency {
position: absolute;
left: 50%;
margin-left: 0;
transform: translateX(-50%);
}
.nitro-catalog-classic-tabs-shell {
min-height: 44px;
max-height: 44px;
@@ -541,25 +637,43 @@
.nitro-catalog-classic-tabs-shell .nitro-card-tab-item {
min-height: 42px;
padding: 6px 14px;
padding: 6px 12px;
font-size: 12px;
justify-content: center;
}
.nitro-catalog-classic-tab-label {
display: none;
}
.nitro-catalog-classic-content-shell {
padding: 6px !important;
}
.nitro-catalog-classic-layout-hero {
display: none;
}
.nitro-catalog-classic-offer-panel {
flex-direction: column;
}
.nitro-catalog-classic-offer-preview {
width: 100%;
min-width: 0;
border-right: 0;
border-bottom: 1px solid var(--cat-line);
}
.nitro-catalog-classic-stage {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
/* Sidebar above content, capped so most of the viewport is the grid. */
.nitro-catalog-classic-sidebar {
max-height: 33vh;
}
/* Search input + nav items grow into real touch targets. */
.nitro-catalog-classic-search-shell input {
height: 28px;
font-size: 13px;
@@ -574,21 +688,16 @@
font-size: 13px;
}
/* Bigger furni icons in the grid so a fingertip can hit them. */
.nitro-catalog-classic-window .layout-grid-item {
height: 64px;
}
/* Modal corner radius cleanups so the full-screen look is consistent. */
.nitro-catalog-classic-window .nitro-card-header-shell,
.nitro-catalog-classic-window .nitro-card-content-shell {
border-radius: 0 !important;
}
}
/* Phone in landscape — short viewport. Trim header / hero so the grid keeps
* usable height. Triggers regardless of portrait/landscape on any short
* screen, which is also the right answer for very small laptop windows. */
@media (max-height: 480px) {
.nitro-catalog-classic-window {
height: 100vh !important;
@@ -610,8 +719,6 @@
padding: 3px 6px;
}
/* Hide the marketing hero image in landscape - it's the first thing to
* sacrifice when the user clearly wants more grid. */
.nitro-catalog-classic-layout-hero {
display: none;
}
src/css/inventory/InventoryView.css
+49 -52
View File
@@ -1,20 +1,3 @@
/* ---------------------------------------------------------------------------
* Inventory window — Habbo mobile inventory skin.
*
* Matches the mobile inventory mockup and stays consistent with the catalog
* redesign: blue header, beige body, folder tabs, framed preview canvas,
* teal-accented item slots, and chunky green "place" / red "sell" buttons.
*
* Palette (from the mockup):
* --inv-blue #4a7d8c header
* --inv-beige #e2e0d6 window / body / slot fill
* --inv-tab #c7c5ba inactive tab fill
* --inv-line #919088 slot / preview outline
* --inv-accent #4a7d8c selected slot glow + count text
* --inv-place* green place button
* --inv-sell* red sell button
* ------------------------------------------------------------------------- */
.nitro-inventory-window {
--inv-blue: #4a7d8c;
--inv-beige: #e2e0d6;
@@ -32,7 +15,6 @@
background: var(--inv-beige) !important;
}
/* Blue Habbo header. */
.nitro-inventory-window .nitro-card-header {
background: var(--inv-blue);
border-color: var(--inv-blue);
@@ -40,7 +22,6 @@
box-shadow: inset 0 2px 0 #709da9, inset 0 -2px 0 #315863;
}
/* Tab strip — beige shelf with folder tabs. Light, low-contrast outlines. */
.nitro-inventory-window .nitro-inventory-tabs-shell {
background: var(--inv-beige);
gap: 4px;
@@ -71,7 +52,6 @@
top: 1px;
}
/* Tabs show the icon first, then the text label (desktop). */
.nitro-inventory-window .nitro-inventory-tab-icon {
display: inline-flex;
align-items: center;
@@ -81,12 +61,10 @@
line-height: 1;
}
/* Body — grey-beige backdrop. */
.nitro-inventory-window .nitro-inventory-body {
background: var(--inv-beige);
}
/* Filter bar — white search box + beige select, hard outlines. */
.nitro-inventory-window .nitro-inventory-filter-bar {
background: #fff;
border: 2px solid var(--inv-border);
@@ -100,7 +78,6 @@
font-weight: 700;
}
/* Item slots — beige tiles, grey outline, teal glow when selected. */
.nitro-inventory-window .bg-card-grid-item {
background-color: var(--inv-beige) !important;
}
@@ -118,20 +95,17 @@
box-shadow: 0 0 0 2px var(--inv-accent);
}
/* Count badge — white pill with a teal number (mockup). */
.nitro-inventory-window .bg-red-700 {
background-color: #fff !important;
color: var(--inv-accent) !important;
border-color: #75746e !important;
}
/* Preview canvas — white framed box around the room previewer. */
.nitro-inventory-window .shadow-room-previewer {
background-color: #fff;
border: 2px solid var(--inv-line);
}
/* Action buttons — chunky beveled Habbo buttons. */
.nitro-inventory-window .nitro-inventory-btn-place,
.nitro-inventory-window .nitro-inventory-btn-sell {
border: 2px solid var(--inv-border) !important;
@@ -159,17 +133,10 @@
background: #db4d40 !important;
}
/* ---------------------------------------------------------------------------
* Responsive layout
*
* The window ships a fixed 528x420 size (Tailwind utilities on the card).
* Mirror the catalog's three tiers so it stays usable down to phones:
* > 1024px desktop, fixed size (utilities)
* 641px - 1024px tablet, fluid card
* <= 640px phone, full-screen + stacked grid / preview
* ------------------------------------------------------------------------- */
.nitro-inventory-preview-btn {
display: none;
}
/* Tablet. */
@media (max-width: 1024px) and (min-width: 641px) {
.nitro-inventory-window {
width: min(calc(100vw - 24px), 640px) !important;
@@ -181,25 +148,28 @@
}
}
/* Phone — full-screen, single-column stack (grid on top, preview below). */
@media (max-width: 640px) {
.nitro-inventory-window {
width: 100vw !important;
.draggable-window:has(> .nitro-inventory-window) {
inset: 0 !important;
left: 0 !important;
right: 0 !important;
top: 0 !important;
bottom: 0 !important;
width: auto !important;
height: auto !important;
transform: none !important;
}
.nitro-card-shell.nitro-inventory-window {
width: calc(100% - 40px) !important;
min-width: 0 !important;
max-width: 100vw !important;
height: 100vh !important;
max-width: calc(100% - 40px) !important;
height: calc(100% - 76px) !important;
min-height: 0 !important;
max-height: 100vh !important;
border-radius: 0 !important;
max-height: calc(100% - 76px) !important;
margin: 8px auto 0 auto !important;
}
.nitro-inventory-window .nitro-card-header-shell,
.nitro-inventory-window .nitro-card-content-shell {
border-radius: 0 !important;
}
/* Icon-only tabs spread evenly across the width — text labels don't
* fit on a phone, so swap them for the per-tab glyph. */
.nitro-inventory-window .nitro-inventory-tabs-shell {
flex-wrap: nowrap;
overflow: hidden;
@@ -221,7 +191,6 @@
font-size: 17px;
}
/* Stack the item grid above the preview / action panel. */
.nitro-inventory-window .grid.grid-cols-12 {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: minmax(0, 1fr) auto !important;
@@ -232,10 +201,38 @@
grid-column: 1 / -1 !important;
}
/* Roomier touch targets for the action buttons. */
.nitro-inventory-window .nitro-inventory-btn-place,
.nitro-inventory-window .nitro-inventory-btn-sell {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.nitro-inventory-window .nitro-inventory-preview-btn {
position: absolute;
top: 6px;
z-index: 4;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 8px;
border: 1px solid #555;
border-radius: 5px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 10px;
font-weight: 700;
cursor: pointer;
}
.nitro-inventory-window .nitro-inventory-preview-btn:active {
background: rgba(0, 0, 0, 0.85);
}
.nitro-inventory-window .nitro-inventory-preview-rotate {
left: 6px;
}
.nitro-inventory-window .nitro-inventory-preview-state {
right: 6px;
}
}
src/css/nitrocard/NitroCardView.css
+8
View File
@@ -212,3 +212,11 @@
}
}
}
@media (max-width: 640px) {
.draggable-window {
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
}
}