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

Update LTD

Browse Source
This commit is contained in:
Bill 2022-01-05 22:04:53 -05:00
parent 12ca81c688
commit 0e728d9654
12 changed files with 160 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/common/layout/LayoutGridItem.tsx
View File

@ -1,6 +1,6 @@
import { FC, useMemo } from 'react'; import { FC, useMemo } from 'react';
import { ItemCountView } from '../../views/shared/item-count/ItemCountView'; import { ItemCountView } from '../../views/shared/item-count/ItemCountView';
import { LimitedEditionStyledNumberView } from '../../views/shared/limited-edition/styled-number/LimitedEditionStyledNumberView'; import { LimitedEditionStyledNumberView } from '../../views/shared/limited-edition/LimitedEditionStyledNumberView';
import { Base } from '../Base'; import { Base } from '../Base';
import { Column, ColumnProps } from '../Column'; import { Column, ColumnProps } from '../Column';

112
src/views/shared/limited-edition/LimitedEdition.scss
View File

@ -21,11 +21,13 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
background: url("../../../assets/images/unique/grid-bg-glass.png") center no-repeat; background: url("../../../assets/images/unique/grid-bg-glass.png") center no-repeat;
z-index: 3; bottom: 0;
z-index: 4;
} }
&.sold-out:before { &.sold-out:after {
background: url("../../../assets/images/unique/grid-bg-sold-out.png") center no-repeat, url("../../../assets/images/unique/grid-bg-glass.png") center no-repeat; background: url("../../../assets/images/unique/grid-bg-sold-out.png") center no-repeat,
url("../../../assets/images/unique/grid-bg-glass.png") center no-repeat;
} }
.unique-item-counter { .unique-item-counter {
@ -37,7 +39,7 @@
width: 100%; width: 100%;
height: 9px; height: 9px;
background: url("../../../assets/images/unique/grid-count-bg.png") center no-repeat; background: url("../../../assets/images/unique/grid-count-bg.png") center no-repeat;
z-index: 4; z-index: 3;
} }
} }
@ -57,6 +59,102 @@
} }
} }
@import './compact-plate/LimitedEditionCompactPlateView'; .unique-compact-plate {
@import './complete-plate/LimitedEditionCompletePlateView'; display: flex;
@import './styled-number/LimitedEditionStyledNumberView'; flex-direction: column;
justify-content: flex-end;
align-items: center;
right: 16px;
width: 34px;
height: 37px;
background: url("../../../assets/images/unique/inventory-info-amount-bg.png");
div {
display: flex;
justify-content: center;
align-items: center;
height: 9.5px;
}
}
.unique-complete-plate {
width: 170px;
height: 29px;
background: url("../../../assets/images/unique/catalog-info-amount-bg.png") no-repeat center;
z-index: 1;
padding-top: 3px;
.plate-container {
margin-left: 45px;
width: 100px;
font-size: 10px;
color: black;
> :first-child {
margin-bottom: 2px;
}
}
}
.limited-edition-number {
display: inline-block;
outline: 0;
height: 5px;
margin-right: 1px;
background-image: url('../../../assets/images/unique/numbers.png');
background-repeat: no-repeat;
&:last-child {
margin-right: 0px;
}
&.n-0 {
width: 4px;
background-position: -1px 0px;
}
&.n-1 {
width: 2px;
background-position: -6px 0px;
}
&.n-2 {
width: 4px;
background-position: -9px 0px;
}
&.n-3 {
width: 4px;
background-position: -14px 0px;
}
&.n-4 {
width: 4px;
background-position: -19px 0px;
}
&.n-5 {
width: 4px;
background-position: -24px 0px;
}
&.n-6 {
width: 4px;
background-position: -29px 0px;
}
&.n-7 {
width: 4px;
background-position: -34px 0px;
}
&.n-8 {
width: 4px;
background-position: -39px 0px;
}
&.n-9 {
width: 4px;
background-position: -44px 0px;
}
}

11
src/views/shared/limited-edition/compact-plate/LimitedEditionCompactPlateView.tsx → src/views/shared/limited-edition/LimitedEditionCompactPlateView.tsx
View File

@ -1,7 +1,12 @@
import { FC, useMemo } from 'react'; import { FC, useMemo } from 'react';
import { Base } from '../../../../common/Base'; import { Base, BaseProps } from '../../../common/Base';
import { LimitedEditionStyledNumberView } from '../styled-number/LimitedEditionStyledNumberView'; import { LimitedEditionStyledNumberView } from './LimitedEditionStyledNumberView';
import { LimitedEditionCompactPlateViewProps } from './LimitedEditionCompactPlateView.types';
export interface LimitedEditionCompactPlateViewProps extends BaseProps<HTMLDivElement>
{
uniqueNumber: number;
uniqueSeries: number;
}
export const LimitedEditionCompactPlateView: FC<LimitedEditionCompactPlateViewProps> = props => export const LimitedEditionCompactPlateView: FC<LimitedEditionCompactPlateViewProps> = props =>
{ {

41
src/views/shared/limited-edition/LimitedEditionCompletePlateView.tsx Normal file
View File

@ -0,0 +1,41 @@
import { FC, useMemo } from 'react';
import { LocalizeText } from '../../../api';
import { Base, BaseProps } from '../../../common/Base';
import { Column } from '../../../common/Column';
import { Flex } from '../../../common/Flex';
import { LimitedEditionStyledNumberView } from './LimitedEditionStyledNumberView';
export interface LimitedEditionCompletePlateViewProps extends BaseProps<HTMLDivElement>
{
uniqueLimitedItemsLeft: number;
uniqueLimitedSeriesSize: number;
}
export const LimitedEditionCompletePlateView: FC<LimitedEditionCompletePlateViewProps> = props =>
{
const { uniqueLimitedItemsLeft = 0, uniqueLimitedSeriesSize = 0, classNames = [], ...rest } = props;
const getClassNames = useMemo(() =>
{
const newClassNames: string[] = [ 'unique-complete-plate' ];
if(classNames.length) newClassNames.push(...classNames);
return newClassNames;
}, [ classNames ]);
return (
<Base classNames={ getClassNames } { ...rest }>
<Column className="plate-container" gap={ 0 }>
<Flex justifyContent="between" alignItems="center">
{ LocalizeText('unique.items.left') }
<LimitedEditionStyledNumberView value={ uniqueLimitedItemsLeft } />
</Flex>
<Flex justifyContent="between" alignItems="center">
{ LocalizeText('unique.items.number.sold') }
<LimitedEditionStyledNumberView value={ uniqueLimitedSeriesSize } />
</Flex>
</Column>
</Base>
);
}

6
src/views/shared/limited-edition/styled-number/LimitedEditionStyledNumberView.tsx → src/views/shared/limited-edition/LimitedEditionStyledNumberView.tsx
View File

@ -1,5 +1,9 @@
import { FC } from 'react'; import { FC } from 'react';
import { LimitedEditionStyledNumberViewProps } from './LimitedEditionStyledNumberView.types';
export interface LimitedEditionStyledNumberViewProps
{
value: number;
}
export const LimitedEditionStyledNumberView: FC<LimitedEditionStyledNumberViewProps> = props => export const LimitedEditionStyledNumberView: FC<LimitedEditionStyledNumberViewProps> = props =>
{ {

17
src/views/shared/limited-edition/compact-plate/LimitedEditionCompactPlateView.scss
View File

@ -1,17 +0,0 @@
.unique-compact-plate {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
right: 16px;
width: 34px;
height: 37px;
background: url("../../../../assets/images/unique/inventory-info-amount-bg.png");
div {
display: flex;
justify-content: center;
align-items: center;
height: 9.5px;
}
}

7
src/views/shared/limited-edition/compact-plate/LimitedEditionCompactPlateView.types.ts
View File

@ -1,7 +0,0 @@
import { BaseProps } from '../../../../common/Base';
export interface LimitedEditionCompactPlateViewProps extends BaseProps<HTMLDivElement>
{
uniqueNumber: number;
uniqueSeries: number;
}

20
src/views/shared/limited-edition/complete-plate/LimitedEditionCompletePlateView.scss
View File

@ -1,20 +0,0 @@
.unique-complete-plate {
top: 145px;
left: 10px;
width: 170px;
height: 29px;
background: url("../../../../assets/images/unique/catalog-info-amount-bg.png");
div {
position: relative;
padding-left: 45px;
padding-right: 20px;
font-size: 10px;
color: #000;
div {
position: absolute;
right: 0px;
}
}
}

26
src/views/shared/limited-edition/complete-plate/LimitedEditionCompletePlateView.tsx
View File

@ -1,26 +0,0 @@
import { FC } from 'react';
import { LocalizeText } from '../../../../api';
import { LimitedEditionStyledNumberView } from '../styled-number/LimitedEditionStyledNumberView';
import { LimitedEditionCompletePlateViewProps } from './LimitedEditionCompletePlateView.types';
export const LimitedEditionCompletePlateView: FC<LimitedEditionCompletePlateViewProps> = props =>
{
const { uniqueLimitedItemsLeft = 0, uniqueLimitedSeriesSize = 0 } = props;
return (
<div className="unique-complete-plate mt-1 mx-auto" style={ { zIndex: 1 } }>
<div>
<div>
<LimitedEditionStyledNumberView value={ uniqueLimitedItemsLeft } />
</div>
{ LocalizeText('unique.items.left') }
</div>
<div>
<div>
<LimitedEditionStyledNumberView value={ uniqueLimitedSeriesSize } />
</div>
{ LocalizeText('unique.items.number.sold') }
</div>
</div>
);
}

5
src/views/shared/limited-edition/complete-plate/LimitedEditionCompletePlateView.types.ts
View File

@ -1,5 +0,0 @@
export interface LimitedEditionCompletePlateViewProps
{
uniqueLimitedItemsLeft: number;
uniqueLimitedSeriesSize: number;
}

62
src/views/shared/limited-edition/styled-number/LimitedEditionStyledNumberView.scss
View File

@ -1,62 +0,0 @@
.limited-edition-number {
display: inline-block;
outline: 0;
height: 5px;
margin-right: 1px;
background-image: url('../../../../assets/images/unique/numbers.png');
background-repeat: no-repeat;
&:last-child {
margin-right: 0px;
}
&.n-0 {
width: 4px;
background-position: -1px 0px;
}
&.n-1 {
width: 2px;
background-position: -6px 0px;
}
&.n-2 {
width: 4px;
background-position: -9px 0px;
}
&.n-3 {
width: 4px;
background-position: -14px 0px;
}
&.n-4 {
width: 4px;
background-position: -19px 0px;
}
&.n-5 {
width: 4px;
background-position: -24px 0px;
}
&.n-6 {
width: 4px;
background-position: -29px 0px;
}
&.n-7 {
width: 4px;
background-position: -34px 0px;
}
&.n-8 {
width: 4px;
background-position: -39px 0px;
}
&.n-9 {
width: 4px;
background-position: -44px 0px;
}
}

4
src/views/shared/limited-edition/styled-number/LimitedEditionStyledNumberView.types.ts
View File

@ -1,4 +0,0 @@
export interface LimitedEditionStyledNumberViewProps
{
value: number;
}