nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-31 10:22:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

changes ig

Browse Source
This commit is contained in:
Layne 2021-06-22 03:08:16 -04:00
parent cc2ef0a8d1
commit 94bac50358
12 changed files with 53 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/styles/bootstrap/_variables.scss
View File

@ -46,7 +46,7 @@ $yellow: #ffc107 !default;
$green: #198754 !default;
$teal: #20c997 !default;
$cyan: #0dcaf0 !default;
$muted: #B6BEC5 !default;
$muted: #B6BEC5 !default;
// scss-docs-end color-variables
// scss-docs-start colors-map
@ -79,11 +79,13 @@ $success: #008026 !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: #C23027 !default;
$light: #DFDFDF !default;
$dark: $gray-900 !default;
$dark: #24211c !default;
$light-dark: $gray-800 !default;
// scss-docs-end theme-color-variables
.bg-tertiary-split {

12
src/assets/styles/scrollbars.scss
View File

@ -5,23 +5,21 @@
::-webkit-scrollbar-track {
border-radius: $border-radius;
background: rgba($primary,.4);
box-shadow:inset 1px 0 rgba($black,.2);
background: rgba($black,.1);
box-shadow:inset 0 0 1px 1px rgba($black,.1);
padding-top:3px;
}
::-webkit-scrollbar-thumb {
border-radius: $border-radius;
background: #DCDCDC;
box-shadow:inset 0px 4px $white, inset 0px -4px rgba($black,.2), 0 1px rgba($black,.2);
background: rgba($primary,.4);
width: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba($white, 1);
background: rgba($primary,.8);
}
::-webkit-scrollbar-thumb:active {
box-shadow: inset 1px 4px rgba($white,.4), inset -1px -4px rgba($black,.2), 0 1px rgba($black,.2);
background:#C4C4C4;
background: $secondary;
}

1
src/layout/card/NitroCardView.scss
View File

@ -12,7 +12,6 @@ $nitro-card-top-height: $nitro-card-header-height + $nitro-card-tabs-height;
}
.nitro-card-close-parent {
right: -3px;
top: 5px;
position: absolute;
width: auto;

2
src/layout/card/content/NitroCardContentView.scss
View File

@ -7,6 +7,8 @@
.content-area {
height: 100% !important;
min-height: auto !important;
max-height: 100% !important;
resize: none !important;
}
}

4
src/layout/card/header/NitroCardHeaderView.scss
View File

@ -1,4 +1,8 @@
.nitro-card-header {
min-height: $nitro-card-header-height;
max-height: $nitro-card-header-height;
.nitro-card-close-parent {
right:-3px;
}
}

2
src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx
View File

@ -21,7 +21,7 @@ export const CatalogLayoutSingleBundleView: FC<CatalogLayoutSingleBundleViewProp
}) }
</div>
</div>
<div className="position-relative d-flex flex-column col-5 justify-content-center align-items-center">
<div className="position-relative d-flex flex-column col-5 justify-content-center align-items-center h-100 overflow-auto">
<div className="d-block mb-2">
<img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
</div>

11
src/views/purse/PurseView.scss
View File

@ -1,5 +1,14 @@
.nitro-purse {
background: rgba($dark,.95);
border: 1px solid lighten($dark,8.3);
box-shadow: inset 0px 3px lighten(rgba($dark,.6),2.5), inset 0 -2px darken(rgba($dark,.6),4);
font-weight: bolder;
.notification-button {
color:lighten($dark,20);
cursor: pointer;
font-size: 0.9rem;
}
}
@import './currency/CurrencyView';

3
src/views/purse/PurseView.tsx
View File

@ -29,13 +29,14 @@ export const PurseView: FC<PurseViewProps> = props =>
return (
<PurseContextProvider value={ { purseState, dispatchPurseState }}>
<PurseMessageHandler />
<div className="nitro-purse row row-cols-2 g-0">
<div className="nitro-purse rounded d-flex flex-row py-1 justify-content-between">
{ currencies && currencies.map((currency, index) =>
{
if(displayedCurrencies.indexOf(currency.type) === -1) return null;
return <CurrencyView key={ index } currency={ currency } />;
}) }
<div className="notification-button px-2"><i className="fas fa-bars"/></div>
</div>
</PurseContextProvider>
);

13
src/views/purse/currency/CurrencyView.scss
View File

@ -1,9 +1,10 @@
.nitro-currency {
background: rgba(20, 20, 20, .95);
border: 1px solid #101010;
box-shadow: inset 2px 2px rgba(255, 255, 255, .1), inset -2px -2px rgba(255, 255, 255, .1);
.icon {
border-left: 1px solid rgba(255, 255, 255, .1);
pointer-events: all;
.nitro-currency-text {
max-width: 60px;
}
&:not(:last-child) {
border-right:1px solid #000;
box-shadow: 1px 0 lighten($dark,8.3)
}
}

18
src/views/purse/currency/CurrencyView.tsx
View File

@ -1,3 +1,5 @@
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
import { LocalizeShortNumber } from '../../../utils/LocalizeShortNumber';
import { CurrencyIcon } from '../../currency-icon/CurrencyIcon';
import { CurrencyViewProps } from './CurrencyView.types';
@ -6,13 +8,19 @@ export function CurrencyView(props: CurrencyViewProps): JSX.Element
const { currency = null } = props;
return (
<div className="col pe-1 pb-1">
<div className="nitro-currency p-1 d-flex rounded overflow-hidden">
<div className="flex-grow-1 px-1 me-1 text-end">{ currency.amount }</div>
<div className="icon px-1">
<OverlayTrigger
placement="left"
overlay={
<Tooltip id={`tooltip-${currency.type}`}>
{ currency.amount }
</Tooltip>
}>
<div className="nitro-currency px-1 d-flex">
<div className="px-1 text-end text-truncate nitro-currency-text">{LocalizeShortNumber(currency.amount)}</div>
<div className="icon">
<CurrencyIcon type={ currency.type } />
</div>
</div>
</div>
</OverlayTrigger>
);
}

3
src/views/right-side/RightSideView.scss
View File

@ -2,7 +2,8 @@
position: absolute;
top: 10px;
right: 10px;
width: 200px;
min-width: 200px;
max-width: 400px;
z-index: $rightside-zindex;
pointer-events: none;
}

6
src/views/toolbar/ToolbarView.scss
View File

@ -9,9 +9,9 @@
.nitro-toolbar {
height: 100%;
pointer-events: all;
background: rgba(20, 20, 20, .95);
border-top: 1px solid #101010;
box-shadow: inset 0px 2px rgba(255, 255, 255, .1);
background: rgba($dark,.95);
border-top: 2px solid lighten($dark,8.3);
box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
#toolbar-chat-input-container {
margin-left: 25px;