Layout updates

src/assets/styles/utils.scss

@@ -47,6 +47,10 @@ ul {
     cursor: pointer;
 }
 
+.cursor-not-allowed {
+    cursor: not-allowed;
+}
+
 .pointer-events-none {
     pointer-events: none;
 }

src/common/Grid.tsx

@@ -16,24 +16,22 @@ export interface GridProps extends BaseProps<HTMLDivElement>
 
 export const Grid: FC<GridProps> = props =>
 {
-    const { columnCount = 0, columnMinWidth = 40, columnMinHeight = 40, grow = false, inline = false, gap = 2, maxContent = false, classNames = [], style = {}, ...rest } = props;
+    const { columnCount = 0, columnMinWidth = 40, columnMinHeight = 40, grow = false, fullHeight = undefined, inline = false, gap = 2, maxContent = false, classNames = [], style = {}, ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
         const newClassNames: string[] = [];
 
-        if(!grow) newClassNames.push('h-100');
-        else newClassNames.push('flex-basis-fit-content');
-
         if(inline) newClassNames.push('inline-grid');
         else newClassNames.push('grid');
 
         if(gap) newClassNames.push('gap-' + gap);
+        else if(gap === 0) newClassNames.push('gap-0');
 
         if(classNames.length) newClassNames.push(...classNames);
 
         return newClassNames;
-    }, [ grow, inline, gap, classNames ]);
+    }, [ inline, gap, classNames ]);
 
     const getStyle = useMemo(() =>
     {
@@ -60,7 +58,7 @@ export const Grid: FC<GridProps> = props =>
 
     return (
         <GridContextProvider value={ { isCssGrid: true } }>
-            <Base classNames={ getClassNames } style={ getStyle } { ...rest } />
+            <Base classNames={ getClassNames } style={ getStyle } fullHeight={ ((fullHeight !== undefined) ? fullHeight : !grow) } { ...rest } />
         </GridContextProvider>
     );
 }

src/common/index.scss

@@ -9,6 +9,15 @@
         background-color: $grid-active-bg-color !important;
     }
 
+    &.disabled {
+        cursor: not-allowed;
+
+        img {
+            opacity: .5;
+            filter: grayscale(1);
+        }
+    }
+
     &.unseen {
         background-color: rgba($success, 0.4);
     }

src/common/layout/LayoutGridItem.tsx

@@ -14,11 +14,12 @@ export interface LayoutGridItemProps extends ColumnProps
     itemUniqueSoldout?: boolean;
     itemUniqueNumber?: number;
     itemUnseen?: boolean;
+    disabled?: boolean;
 }
 
 export const LayoutGridItem: FC<LayoutGridItemProps> = props =>
 {
-    const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemCountMinimum = 1, itemUniqueSoldout = false, itemUniqueNumber = -2, itemUnseen = false, center = true, column = true, style = {}, classNames = [], position = 'relative', overflow = 'hidden', children = null, ...rest } = props;
+    const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemCountMinimum = 1, itemUniqueSoldout = false, itemUniqueNumber = -2, itemUnseen = false, disabled = false, center = true, column = true, style = {}, classNames = [], position = 'relative', overflow = 'hidden', children = null, ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
@@ -32,12 +33,14 @@ export const LayoutGridItem: FC<LayoutGridItemProps> = props =>
 
         if(itemUnseen) newClassNames.push('unseen');
 
+        if(disabled) newClassNames.push('disabled')
+
         if(itemImage === null) newClassNames.push('icon', 'loading-icon');
 
         if(classNames.length) newClassNames.push(...classNames);
 
         return newClassNames;
-    }, [ itemActive, itemUniqueSoldout, itemUniqueNumber, itemUnseen, itemImage, classNames ]);
+    }, [ itemActive, itemUniqueSoldout, itemUniqueNumber, itemUnseen, disabled, itemImage, classNames ]);
 
     const getStyle = useMemo(() =>
     {

src/layout/card/NitroCardView.scss

@@ -4,8 +4,9 @@ $nitro-card-tabs-height: 33px;
 .nitro-card {
     resize: both;
 
-    @include media-breakpoint-down(sm) {
+    @include media-breakpoint-down(lg) {
         max-width: 100vw !important;
+        max-height: 100vh !important;
     }
 
     &.theme-primary {

src/layout/draggable-window/DraggableWindow.scss

@@ -10,11 +10,11 @@
     @include media-breakpoint-down(lg) {
         display: flex;
         justify-content: center;
-        transform: none !important;
 
         .draggable-window {
-            top: 10px !important;
+            top: unset !important;
-            left: 0 !important;
+            left: unset !important;
+            transform: none !important;
         }
     }
 

src/layout/user-profile-icon/UserProfileIconView.tsx

@@ -1,24 +1,29 @@
 import { FC, useMemo } from 'react';
 import { GetUserProfile } from '../../api';
-import { NitroLayoutBase } from '../base';
+import { Base, BaseProps } from '../../common/Base';
-import { UserProfileIconViewProps } from './UserProfileIconView.types';
+
+export interface UserProfileIconViewProps extends BaseProps<HTMLDivElement>
+{
+    userId?: number;
+    userName?: string;
+}
 
 export const UserProfileIconView: FC<UserProfileIconViewProps> = props =>
 {
-    const { userId = 0, userName = null, className = '', children = null, ...rest  } = props;
+    const { userId = 0, userName = null, classNames = [], pointer = true, children = null, ...rest  } = props;
 
-    const getClassName = useMemo(() =>
+    const getClassNames = useMemo(() =>
     {
-        let newClassName = 'nitro-friends-spritesheet icon-profile-sm me-1 cursor-pointer';
+        const newClassNames: string[] = [ 'nitro-friends-spritesheet', 'icon-profile-sm' ];
 
-        if(className && className.length) newClassName += ` ${ className }`;
+        if(classNames.length) newClassNames.push(...classNames);
 
-        return newClassName;
+        return newClassNames;
-    }, [ className ]);
+    }, [ classNames ]);
 
     return (
-        <NitroLayoutBase className={ getClassName } onClick={ event => GetUserProfile(userId) } { ... rest }>
+        <Base classNames={ getClassNames } onClick={ event => GetUserProfile(userId) } { ... rest }>
             { children }
-        </NitroLayoutBase>
+        </Base>
     );
 }

src/layout/user-profile-icon/UserProfileIconView.types.ts

@@ -1,7 +0,0 @@
-import { NitroLayoutBaseProps } from '../base';
-
-export interface UserProfileIconViewProps extends NitroLayoutBaseProps
-{
-    userId?: number;
-    userName?: string;
-}

src/layout/user-profile-icon/index.ts

@@ -1,2 +1 @@
 export * from './UserProfileIconView';
-export * from './UserProfileIconView.types';