From bf06c4a58fc7d311d5e77ac0024a00b44bc461f4 Mon Sep 17 00:00:00 2001 From: Bill Date: Tue, 11 Jan 2022 23:01:59 -0500 Subject: [PATCH] Layout updates --- src/assets/styles/utils.scss | 4 +++ src/common/Grid.tsx | 10 +++----- src/common/index.scss | 9 +++++++ src/common/layout/LayoutGridItem.tsx | 7 ++++-- src/layout/card/NitroCardView.scss | 3 ++- .../draggable-window/DraggableWindow.scss | 6 ++--- .../user-profile-icon/UserProfileIconView.tsx | 25 +++++++++++-------- .../UserProfileIconView.types.ts | 7 ------ src/layout/user-profile-icon/index.ts | 1 - 9 files changed, 42 insertions(+), 30 deletions(-) delete mode 100644 src/layout/user-profile-icon/UserProfileIconView.types.ts diff --git a/src/assets/styles/utils.scss b/src/assets/styles/utils.scss index 88b8d48f..89ece1b4 100644 --- a/src/assets/styles/utils.scss +++ b/src/assets/styles/utils.scss @@ -47,6 +47,10 @@ ul { cursor: pointer; } +.cursor-not-allowed { + cursor: not-allowed; +} + .pointer-events-none { pointer-events: none; } diff --git a/src/common/Grid.tsx b/src/common/Grid.tsx index 4a3a4448..799dd555 100644 --- a/src/common/Grid.tsx +++ b/src/common/Grid.tsx @@ -16,24 +16,22 @@ export interface GridProps extends BaseProps export const Grid: FC = 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 = props => return ( - + ); } diff --git a/src/common/index.scss b/src/common/index.scss index 8601b512..be5d045f 100644 --- a/src/common/index.scss +++ b/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); } diff --git a/src/common/layout/LayoutGridItem.tsx b/src/common/layout/LayoutGridItem.tsx index 718b6409..07a081c2 100644 --- a/src/common/layout/LayoutGridItem.tsx +++ b/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 = 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 = 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(() => { diff --git a/src/layout/card/NitroCardView.scss b/src/layout/card/NitroCardView.scss index cb20bf0b..c9a37448 100644 --- a/src/layout/card/NitroCardView.scss +++ b/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 { diff --git a/src/layout/draggable-window/DraggableWindow.scss b/src/layout/draggable-window/DraggableWindow.scss index 10d69a56..f35835c6 100644 --- a/src/layout/draggable-window/DraggableWindow.scss +++ b/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; - left: 0 !important; + top: unset !important; + left: unset !important; + transform: none !important; } } diff --git a/src/layout/user-profile-icon/UserProfileIconView.tsx b/src/layout/user-profile-icon/UserProfileIconView.tsx index cb527364..29f9a21e 100644 --- a/src/layout/user-profile-icon/UserProfileIconView.tsx +++ b/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 { UserProfileIconViewProps } from './UserProfileIconView.types'; +import { Base, BaseProps } from '../../common/Base'; + +export interface UserProfileIconViewProps extends BaseProps +{ + userId?: number; + userName?: string; +} export const UserProfileIconView: FC = 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; - }, [ className ]); + return newClassNames; + }, [ classNames ]); return ( - GetUserProfile(userId) } { ... rest }> + GetUserProfile(userId) } { ... rest }> { children } - + ); } diff --git a/src/layout/user-profile-icon/UserProfileIconView.types.ts b/src/layout/user-profile-icon/UserProfileIconView.types.ts deleted file mode 100644 index 8f8702dd..00000000 --- a/src/layout/user-profile-icon/UserProfileIconView.types.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { NitroLayoutBaseProps } from '../base'; - -export interface UserProfileIconViewProps extends NitroLayoutBaseProps -{ - userId?: number; - userName?: string; -} diff --git a/src/layout/user-profile-icon/index.ts b/src/layout/user-profile-icon/index.ts index cdc2fff5..66f3cb26 100644 --- a/src/layout/user-profile-icon/index.ts +++ b/src/layout/user-profile-icon/index.ts @@ -1,2 +1 @@ export * from './UserProfileIconView'; -export * from './UserProfileIconView.types';