Cleaned up SCSS and character sheet print
- Normalized many SCSS files as deep as possible - Fixed print css to display all 6 pages - Fixed sheet header to match original sheet header - Fixed issue with range property for ranged items
This commit is contained in:
Lukas Obermann
@@ -1,3 +1,4 @@
|
||||
node_modules/
|
||||
npm-debug.log
|
||||
.vs/
|
||||
.vscode/
|
||||
Vendored
+4039
-3694
File diff suppressed because it is too large
Load Diff
Vendored
+1
-1
File diff suppressed because one or more lines are too long
@@ -38,3 +38,4 @@ p {
|
||||
|
||||
@import "components/_Components";
|
||||
@import "views/_Views";
|
||||
@import "Print";
|
||||
|
||||
@@ -4,6 +4,5 @@
|
||||
|
||||
@import "Fonts";
|
||||
@import "Headings";
|
||||
@import "Print";
|
||||
|
||||
@import "AppBootstrap";
|
||||
|
||||
+82
-77
@@ -3,112 +3,117 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
$border-1px: 0.95pt;
|
||||
$border-2px: 1.25pt;
|
||||
|
||||
@media print {
|
||||
html {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media only print {
|
||||
html, body, #bodywrapper, #body {
|
||||
overflow: visible !important;
|
||||
background: none;
|
||||
}
|
||||
|
||||
main {
|
||||
.titlebar, .subtabs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
section#profile {
|
||||
padding: 0 !important;
|
||||
overflow: visible !important;
|
||||
background: white !important;
|
||||
}
|
||||
html, body, #bodywrapper, #body, .page {
|
||||
overflow: auto;
|
||||
@include size(auto);
|
||||
}
|
||||
|
||||
#sheets {
|
||||
padding: 0 !important;
|
||||
overflow: visible !important;
|
||||
|
||||
#body, section {
|
||||
background: none;
|
||||
}
|
||||
|
||||
#body {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.titlebar, .subtabs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
section {
|
||||
padding-top: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.page {
|
||||
padding-top: 0;
|
||||
flex: unset;
|
||||
display: block;
|
||||
|
||||
.options {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sheet-wrapper.scroll.gm-scrollbar-container {
|
||||
overflow: visible !important;
|
||||
.scroll-sheet-wrapper.scroll.gm-scrollbar-container {
|
||||
overflow: auto;
|
||||
flex: unset;
|
||||
|
||||
.gm-scroll-view {
|
||||
overflow: visible !important;
|
||||
height: auto !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.gm-scrollbar {
|
||||
display: none !important;
|
||||
}
|
||||
.gm-scroll-view {
|
||||
overflow: auto;
|
||||
height: auto !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.scroll-inner {
|
||||
padding: 0 !important;
|
||||
display: block !important;
|
||||
.gm-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sheet {
|
||||
display: block !important;
|
||||
margin: 0 !important;
|
||||
height: 296mm !important;
|
||||
.scroll-inner {
|
||||
padding: 0 !important;
|
||||
|
||||
.sheet {
|
||||
margin-top: 0 !important;
|
||||
height: 296mm !important;
|
||||
|
||||
&:not(:last-child) {
|
||||
page-break-after: always;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
> .header {
|
||||
.attributes {
|
||||
> .attr {
|
||||
> .value {
|
||||
border-width: calc(0.5mm - 0.57pt/2) !important;
|
||||
> .header {
|
||||
.attributes {
|
||||
> .attr {
|
||||
> .value {
|
||||
border-width: calc(0.5mm - 0.57pt/2) !important;
|
||||
|
||||
> div {
|
||||
border-width: 0.57pt !important;
|
||||
position: relative;
|
||||
|
||||
> div {
|
||||
border-width: 0.57pt !important;
|
||||
position: relative;
|
||||
|
||||
> div {
|
||||
@include size(100%);
|
||||
}
|
||||
@include size(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.main {
|
||||
> .upper {
|
||||
> .ap {
|
||||
> div {
|
||||
span {
|
||||
&:first-child {
|
||||
border-width: $border-1px !important;
|
||||
}
|
||||
&.main {
|
||||
> .upper {
|
||||
> .ap {
|
||||
> div {
|
||||
span {
|
||||
&:first-child {
|
||||
// border-width: $border-1px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .portrait {
|
||||
.avatar {
|
||||
border-width: $border-1px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .lower {
|
||||
> .calculated {
|
||||
> div {
|
||||
> .values {
|
||||
> div {
|
||||
border-width: $border-1px !important;
|
||||
> .portrait {
|
||||
.avatar {
|
||||
// border-width: $border-1px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
width: calc(1.2mm - 0.57pt);
|
||||
height: calc(1.2mm - 0.57pt);
|
||||
}
|
||||
> .lower {
|
||||
> .calculated {
|
||||
> div {
|
||||
> .values {
|
||||
> div {
|
||||
// border-width: $border-1px !important;
|
||||
|
||||
> div {
|
||||
width: calc(1.2mm - 0.57pt);
|
||||
height: calc(1.2mm - 0.57pt);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -70,7 +70,7 @@ $attr8: #ac6000;
|
||||
// $attr8color4: #d55f11;
|
||||
// $attr8color5: #ebe0b0;
|
||||
|
||||
$print-border: 0.57pt solid black;
|
||||
$print-border: 0.25mm solid black;
|
||||
|
||||
$titlebar-height: 80px;
|
||||
// $titlebar-height: 76px;
|
||||
|
||||
@@ -2,7 +2,7 @@ import AppDispatcher from '../dispatcher/AppDispatcher';
|
||||
import ActionTypes from '../constants/ActionTypes';
|
||||
import WebAPIUtils from '../utils/WebAPIUtils';
|
||||
import createOverlay from '../utils/createOverlay';
|
||||
import ProfileAvatarChange from '../views/profile/ProfileAvatarChange';
|
||||
import OverviewAvatarChange from '../views/profile/OverviewAvatarChange';
|
||||
import OverviewAddAP from '../views/profile/OverviewAddAP';
|
||||
import React from 'react';
|
||||
|
||||
@@ -14,7 +14,7 @@ export default {
|
||||
});
|
||||
},
|
||||
showImageUpload: function() {
|
||||
createOverlay(<ProfileAvatarChange />);
|
||||
createOverlay(<OverviewAvatarChange />);
|
||||
},
|
||||
showAddAP: function() {
|
||||
createOverlay(<OverviewAddAP />);
|
||||
|
||||
@@ -96,12 +96,12 @@
|
||||
|
||||
&-scrollbar-container {
|
||||
position: relative;
|
||||
overflow: hidden !important;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.gm-scroll-view {
|
||||
width: calc(100% + 17px) !important;
|
||||
width: calc(100% + 17px);
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
@@ -2,12 +2,12 @@
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 800;
|
||||
|
||||
> .titlebar-inner {
|
||||
height: $titlebar-height;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
// background: linear-gradient(to bottom, transparentize($background2, .5) 0%, transparentize($background2, 1) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.titlebar-inner {
|
||||
height: $titlebar-height;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
// background: linear-gradient(to bottom, transparentize($background2, .5) 0%, transparentize($background2, 1) 100%);
|
||||
}
|
||||
@@ -91,7 +91,6 @@ function _init(raw) {
|
||||
_itemTemplatesById[id] = new Item({ ...raw[id], isTemplateLocked: true });
|
||||
_itemTemplates.push(id);
|
||||
}
|
||||
console.log(_itemTemplatesById[_itemTemplates[0]]);
|
||||
}
|
||||
|
||||
function _updateFilterText(text) {
|
||||
|
||||
@@ -100,14 +100,18 @@ export default class Item extends Core {
|
||||
target[name] = value;
|
||||
}
|
||||
}
|
||||
delete target.range1;
|
||||
delete target.range2;
|
||||
delete target.range3;
|
||||
return target;
|
||||
}
|
||||
|
||||
static prepareDataForEditor(target) {
|
||||
target.range1 = target.range[0];
|
||||
target.range2 = target.range[1];
|
||||
target.range3 = target.range[2];
|
||||
delete target.range;
|
||||
return target;
|
||||
let newTarget = { ...target };
|
||||
newTarget.range1 = newTarget.range[0];
|
||||
newTarget.range2 = newTarget.range[1];
|
||||
newTarget.range3 = newTarget.range[2];
|
||||
delete newTarget.range;
|
||||
return newTarget;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,7 +18,7 @@ export const getLP = () => {
|
||||
return {
|
||||
id: 'LP',
|
||||
short: 'LE',
|
||||
label: 'Lebensenergie',
|
||||
name: 'Lebensenergie',
|
||||
calc: '(GW der Spezies + KO + KO)',
|
||||
base,
|
||||
mod,
|
||||
@@ -47,7 +47,7 @@ export const getAE = () => {
|
||||
return {
|
||||
id: 'AE',
|
||||
short: 'AE',
|
||||
label: 'Astralenergie',
|
||||
name: 'Astralenergie',
|
||||
calc: '(20 durch Zauberer + Leiteigenschaft)',
|
||||
base,
|
||||
mod,
|
||||
@@ -77,7 +77,7 @@ export const getKP = () => {
|
||||
return {
|
||||
id: 'KP',
|
||||
short: 'KE',
|
||||
label: 'Karmaenergie',
|
||||
name: 'Karmaenergie',
|
||||
calc: '(20 durch Geweiht + Leiteigenschaft)',
|
||||
base,
|
||||
mod,
|
||||
@@ -102,7 +102,7 @@ export const getSPI = () => {
|
||||
return {
|
||||
id: 'SPI',
|
||||
short: 'SK',
|
||||
label: 'Seelenkraft',
|
||||
name: 'Seelenkraft',
|
||||
calc: '(GW der Spezies + (MU + KL + IN)/6)',
|
||||
base,
|
||||
mod,
|
||||
@@ -124,7 +124,7 @@ export const getTOU = () => {
|
||||
return {
|
||||
id: 'TOU',
|
||||
short: 'ZK',
|
||||
label: 'Zähigkeit',
|
||||
name: 'Zähigkeit',
|
||||
calc: '(GW der Spezies + (KO + KO + KK)/6)',
|
||||
base,
|
||||
mod,
|
||||
@@ -135,7 +135,7 @@ export const getTOU = () => {
|
||||
export const getDO = () => ({
|
||||
id: 'DO',
|
||||
short: 'AW',
|
||||
label: 'Ausweichen',
|
||||
name: 'Ausweichen',
|
||||
calc: '(GE/2)',
|
||||
value: Math.round(get('AGI').value / 2)
|
||||
});
|
||||
@@ -143,7 +143,7 @@ export const getDO = () => ({
|
||||
export const getINI = () => ({
|
||||
id: 'INI',
|
||||
short: 'INI',
|
||||
label: 'Initiative',
|
||||
name: 'Initiative',
|
||||
calc: '(MU + GE)/2',
|
||||
value: Math.round((get('COU').value + get('AGI').value) / 2)
|
||||
});
|
||||
@@ -156,7 +156,7 @@ export const getMOV = () => {
|
||||
return {
|
||||
id: 'MOV',
|
||||
short: 'GS',
|
||||
label: 'Geschwindigkeit',
|
||||
name: 'Geschwindigkeit',
|
||||
calc: '(GW der Spezies, mögl. Einbeinig)',
|
||||
value
|
||||
};
|
||||
|
||||
+30
-25
@@ -1,3 +1,8 @@
|
||||
main {
|
||||
@extend %max-size-relative;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
section {
|
||||
@extend %max-size-relative;
|
||||
padding-top: $titlebar-height;
|
||||
@@ -7,10 +12,6 @@ section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
> .subtabs {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.scroll {
|
||||
flex: 1 1 100%;
|
||||
|
||||
@@ -18,31 +19,35 @@ section {
|
||||
padding: 0 35px 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .page {
|
||||
flex: 1 1 auto;
|
||||
padding: 8px 0 0;
|
||||
font: 14px/22px Alegreya Sans;
|
||||
letter-spacing: 0.025em;
|
||||
color: $color2;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
.subtabs {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
> .options {
|
||||
flex: 1 0 auto;
|
||||
width: 200px;
|
||||
margin-left: 35px;
|
||||
.page {
|
||||
flex: 1 1 auto;
|
||||
padding: 8px 0 0;
|
||||
font: 14px/22px Alegreya Sans;
|
||||
letter-spacing: 0.025em;
|
||||
color: $color2;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
|
||||
.radiobutton-group, .btn {
|
||||
width: 100%;
|
||||
}
|
||||
> .options {
|
||||
flex: 1 0 auto;
|
||||
width: 200px;
|
||||
margin-left: 35px;
|
||||
|
||||
.btn {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.radiobutton-group, .btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+2
-4
@@ -36,10 +36,8 @@ export default class Router extends Component {
|
||||
return (
|
||||
<div id="body">
|
||||
<Loader isLoading={isLoading} text={loadingText} />
|
||||
<main>
|
||||
<TitleBar currentSection={section} currentTab={tab} />
|
||||
<Route id={tab} />
|
||||
</main>
|
||||
<TitleBar currentSection={section} currentTab={tab} />
|
||||
<Route id={tab} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+2
-13
@@ -1,25 +1,14 @@
|
||||
html, body, #bodywrapper, #body {
|
||||
-ms-scroll-translation: vertical-to-horizontal;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-touch-callout: none;
|
||||
cursor: default;
|
||||
height: 100%;
|
||||
@extend %max-size-relative;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
touch-action: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#body {
|
||||
cursor: default;
|
||||
background: $background1;
|
||||
display: flex;
|
||||
font: 14px/23px Alegreya;
|
||||
position: relative;
|
||||
|
||||
> main {
|
||||
@extend %max-size-relative;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,7 @@
|
||||
#body > main section#about {
|
||||
.page {
|
||||
.scroll-inner {
|
||||
.third-party-software {
|
||||
font-size: 12px;
|
||||
line-height: normal;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
#about {
|
||||
.third-party-software {
|
||||
font-size: 12px;
|
||||
line-height: normal;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,15 +1,9 @@
|
||||
#body > main section#account {
|
||||
.page {
|
||||
.scroll-inner {
|
||||
padding-bottom: 22px;
|
||||
#account {
|
||||
.change {
|
||||
height: 74px;
|
||||
}
|
||||
|
||||
> .change {
|
||||
height: 74px;
|
||||
}
|
||||
|
||||
> .btn {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
#body > main section#attribute {
|
||||
#attribute {
|
||||
.page::before {
|
||||
position: absolute;
|
||||
@include calc(width, "100% - 70px");
|
||||
@@ -15,110 +15,109 @@
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.attr {
|
||||
margin: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex: none;
|
||||
position: relative;
|
||||
.counter {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
> .short {
|
||||
font: bold 14px/28px Alegreya;
|
||||
color: $color1;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
.main, .calculated {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
> .value {
|
||||
border: 2px solid transparent;
|
||||
padding: 2px;
|
||||
background: $background4;
|
||||
.number-box {
|
||||
top: 70px;
|
||||
right: -6px;
|
||||
width: 24px;
|
||||
z-index: 2;
|
||||
|
||||
> .value-inner {
|
||||
border: 1px solid $color4;
|
||||
padding: 1px;
|
||||
|
||||
> div {
|
||||
@include size(45px);
|
||||
text-align: center;
|
||||
font: bold 28px/45px Alegreya Sans;
|
||||
color: $color1;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
background: $background2;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@at-root .overlay > .calc-attr-overlay {
|
||||
width: 280px;
|
||||
|
||||
p.calc-text {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
> .btn-round {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
$colors: (1: $attr1, 2: $attr2, 3: $attr3, 4: $attr4, 5: $attr5, 6: $attr6, 7: $attr7, 8: $attr8);
|
||||
|
||||
@for $i from 1 through 8 {
|
||||
&.ATTR_#{$i} > .value {
|
||||
border-color: map-get($map: $colors, $key: $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .counter {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
> .main, > .calculated {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
.number-box {
|
||||
top: 70px;
|
||||
right: -6px;
|
||||
width: 24px;
|
||||
z-index: 2;
|
||||
|
||||
+ .btn-round {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .main {
|
||||
padding-bottom: 16px;
|
||||
// border-bottom: 1px solid transparentize(white, .925);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
.number-box {
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
> .calculated {
|
||||
.value {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.number-box {
|
||||
width: 40px;
|
||||
+ .btn-round {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
padding-bottom: 16px;
|
||||
// border-bottom: 1px solid transparentize(white, .925);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
.number-box {
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.calculated {
|
||||
.value {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.number-box {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.short {
|
||||
font: bold 14px/28px Alegreya;
|
||||
color: $color1;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.value {
|
||||
border: 2px solid transparent;
|
||||
padding: 2px;
|
||||
background: $background4;
|
||||
}
|
||||
|
||||
.value-inner {
|
||||
border: 1px solid $color4;
|
||||
padding: 1px;
|
||||
|
||||
> div {
|
||||
@include size(45px);
|
||||
text-align: center;
|
||||
font: bold 28px/45px Alegreya Sans;
|
||||
color: $color1;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
background: $background2;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-round {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.attr {
|
||||
margin: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex: none;
|
||||
position: relative;
|
||||
|
||||
$colors: (1: $attr1, 2: $attr2, 3: $attr3, 4: $attr4, 5: $attr5, 6: $attr6, 7: $attr7, 8: $attr8);
|
||||
|
||||
@for $i from 1 through 8 {
|
||||
&.ATTR_#{$i} > .value {
|
||||
border-color: map-get($map: $colors, $key: $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.overlay > .calc-attr-overlay {
|
||||
width: 280px;
|
||||
|
||||
p.calc-text {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
@@ -15,7 +15,7 @@ export default class AttributeCalcItem extends Component {
|
||||
|
||||
render() {
|
||||
|
||||
const { attribute : { base, calc, currentAdd, maxAdd, mod, label, short, value }, phase } = this.props;
|
||||
const { attribute : { base, calc, currentAdd, maxAdd, mod, name, short, value }, phase } = this.props;
|
||||
|
||||
const increaseElement = maxAdd && value !== '-' && phase > 2 ? (
|
||||
<IconButton className="add" icon="" onClick={this.addMaxEnergyPoint} disabled={!maxAdd || currentAdd >= maxAdd} />
|
||||
@@ -31,8 +31,8 @@ export default class AttributeCalcItem extends Component {
|
||||
|
||||
return (
|
||||
<AttributeBorder label={short} value={value} tooltip={<div className="calc-attr-overlay">
|
||||
<h4><span>{label}</span><span>{value}</span></h4>
|
||||
<p className="calc-text">{calc} = {value || '-'}</p>
|
||||
<h4><span>{name}</span><span>{value}</span></h4>
|
||||
<p className="calc-text">{calc} = {base || '-'}</p>
|
||||
{ mod || mod === 0 || ((currentAdd || currentAdd === 0) && phase > 2) ? <p>
|
||||
{ mod || mod === 0 ? <span className="mod">Modifikator: {mod}<br/></span> : null}
|
||||
{ (currentAdd || currentAdd === 0) && phase > 2 ? <span className="add">Gekauft: {currentAdd} / {maxAdd || '-'}</span> : null}
|
||||
|
||||
@@ -1,14 +1,8 @@
|
||||
#body > main section#disadv {
|
||||
.page {
|
||||
table {
|
||||
tbody {
|
||||
tr {
|
||||
@extend %tr-imp;
|
||||
@extend %tr-typ;
|
||||
@extend %tr-untyp;
|
||||
@extend %large-tr;
|
||||
}
|
||||
}
|
||||
}
|
||||
#disadv {
|
||||
tr {
|
||||
@extend %tr-imp;
|
||||
@extend %tr-typ;
|
||||
@extend %tr-untyp;
|
||||
@extend %large-tr;
|
||||
}
|
||||
}
|
||||
@@ -1,107 +1,103 @@
|
||||
@import "HeroCreation";
|
||||
|
||||
#body > main section#herolist {
|
||||
.page {
|
||||
.scroll-list {
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 1px 0;
|
||||
list-style: none;
|
||||
#herolist {
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 1px 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
padding: 11px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
li {
|
||||
position: relative;
|
||||
padding: 11px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> svg {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 7px;
|
||||
-webkit-filter: drop-shadow(0 0 2px black);
|
||||
filter: drop-shadow(0 0 2px black);
|
||||
z-index: 2;
|
||||
visibility: hidden;
|
||||
> svg {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 7px;
|
||||
-webkit-filter: drop-shadow(0 0 2px black);
|
||||
filter: drop-shadow(0 0 2px black);
|
||||
z-index: 2;
|
||||
visibility: hidden;
|
||||
|
||||
.progress-arc--fg {
|
||||
stroke: #8f52cc;
|
||||
// stroke: #0cc8c6;
|
||||
}
|
||||
}
|
||||
.progress-arc--fg {
|
||||
stroke: #8f52cc;
|
||||
// stroke: #0cc8c6;
|
||||
}
|
||||
}
|
||||
|
||||
> .el {
|
||||
$size: 55px;
|
||||
$padding: 2px;
|
||||
> .el {
|
||||
$size: 55px;
|
||||
$padding: 2px;
|
||||
|
||||
z-index: 1;
|
||||
flex: none;
|
||||
@include size($size);
|
||||
z-index: 1;
|
||||
flex: none;
|
||||
@include size($size);
|
||||
|
||||
> div {
|
||||
@include size($size - $padding * 2);
|
||||
border-radius: 50%;
|
||||
}
|
||||
> div {
|
||||
@include size($size - $padding * 2);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
> div.el-value {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
background: rgba(0, 0, 0, .75);
|
||||
> div.el-value {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
background: rgba(0, 0, 0, .75);
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
line-height: $size - $padding * 2;
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .main {
|
||||
flex: 1 1 100%;
|
||||
margin-left: 16px;
|
||||
|
||||
h2 .player {
|
||||
padding-left: 20px;
|
||||
font-size: 16px;
|
||||
color: $color4;
|
||||
}
|
||||
|
||||
.rcp {
|
||||
span:last-child {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// h2 {
|
||||
// line-height: 22px;
|
||||
// margin-bottom: 5px;
|
||||
// }
|
||||
}
|
||||
|
||||
.base-values {
|
||||
display: flex;
|
||||
|
||||
> div:not(:first-child) {
|
||||
margin-left: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid transparentize(white, .925);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@extend %yellow-border;
|
||||
|
||||
> svg, > .el > div.el-value {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
> .btn.btn-primary {
|
||||
min-width: 140px;
|
||||
}
|
||||
h2 {
|
||||
text-align: center;
|
||||
line-height: $size - $padding * 2;
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .main {
|
||||
flex: 1 1 100%;
|
||||
margin-left: 16px;
|
||||
|
||||
h2 .player {
|
||||
padding-left: 20px;
|
||||
font-size: 16px;
|
||||
color: $color4;
|
||||
}
|
||||
|
||||
.rcp {
|
||||
span:last-child {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// h2 {
|
||||
// line-height: 22px;
|
||||
// margin-bottom: 5px;
|
||||
// }
|
||||
}
|
||||
|
||||
.base-values {
|
||||
display: flex;
|
||||
|
||||
> div:not(:first-child) {
|
||||
margin-left: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid transparentize(white, .925);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@extend %yellow-border;
|
||||
|
||||
> svg, > .el > div.el-value {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
> .btn.btn-primary {
|
||||
min-width: 140px;
|
||||
}
|
||||
}
|
||||
}
|
||||
+8
-10
@@ -1,4 +1,4 @@
|
||||
#body > main section#home {
|
||||
#home {
|
||||
&::before {
|
||||
position: absolute;
|
||||
@include calc(width, "100% - 70px");
|
||||
@@ -10,16 +10,14 @@
|
||||
top: $titlebar-height;
|
||||
left: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
&#home-overview .scroll-inner {
|
||||
padding-top: 20px;
|
||||
#home-overview .scroll-inner {
|
||||
padding-top: 20px;
|
||||
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
line-height: normal;
|
||||
letter-spacing: 0.075em;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
line-height: normal;
|
||||
letter-spacing: 0.075em;
|
||||
}
|
||||
}
|
||||
@@ -15,7 +15,7 @@ export default class InventoryListItem extends Component {
|
||||
data: PropTypes.instanceOf(Item).isRequired,
|
||||
};
|
||||
|
||||
edit = () => InventoryActions.showItemEditor(InventoryStore.get(this.props.data.id));
|
||||
edit = () => InventoryActions.showItemEditor(Item.prepareDataForEditor(InventoryStore.get(this.props.data.id)));
|
||||
delete = () => InventoryActions.removeFromList(this.props.data.id);
|
||||
add = () => InventoryActions.addToList(this.props.data);
|
||||
|
||||
|
||||
@@ -1,16 +1,14 @@
|
||||
@import "ItemEditor";
|
||||
|
||||
.page {
|
||||
&#inventory {
|
||||
tbody {
|
||||
td:last-child {
|
||||
padding-right: 11px;
|
||||
}
|
||||
#inventory {
|
||||
tbody {
|
||||
td:last-child {
|
||||
padding-right: 11px;
|
||||
}
|
||||
|
||||
td.inc > .btn {
|
||||
height: 32px;
|
||||
padding: 2px;
|
||||
}
|
||||
td.inc > .btn {
|
||||
height: 32px;
|
||||
padding: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,14 +14,14 @@ export default class CombatSheet extends Component {
|
||||
render() {
|
||||
|
||||
const source = {
|
||||
attributes: AttributeStore.getAllForView(),
|
||||
attributes: AttributeStore.getAll(),
|
||||
baseValues: AttributeStore.getBaseValues(),
|
||||
race: RaceStore.getCurrentName(),
|
||||
culture: CultureStore.getCurrentName(),
|
||||
profession: ProfessionVariantStore.getCurrentName() !== null ? `${ProfessionStore.getCurrentName()} (${ProfessionVariantStore.getCurrentName()})` : ProfessionStore.getCurrentName(),
|
||||
el: ELStore.getStart().name,
|
||||
apTotal: APStore.get(),
|
||||
apUsed: APStore.getUsed(),
|
||||
apTotal: APStore.getTotal(),
|
||||
apUsed: APStore.getSpent(),
|
||||
advActive: DisAdvStore.getActiveForView(true),
|
||||
disadvActive: DisAdvStore.getActiveForView(false)
|
||||
};
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import AttributeStore from '../../stores/AttributeStore';
|
||||
import * as secondaryAttributes from '../../utils/secondaryAttributes';
|
||||
import APStore from '../../stores/APStore';
|
||||
import AttributeStore from '../../stores/AttributeStore';
|
||||
import CultureStore from '../../stores/CultureStore';
|
||||
import DisAdvStore from '../../stores/DisAdvStore';
|
||||
import ELStore from '../../stores/ELStore';
|
||||
import { getPrimaryAttrID } from '../../stores/ListStore';
|
||||
import MainSheetCalc from './MainSheetCalc';
|
||||
import MainSheetPersonalData from './MainSheetPersonalData';
|
||||
import OverviewConstSkills from './OverviewConstSkills';
|
||||
import ProfileStore from '../../stores/ProfileStore';
|
||||
import ProfessionStore from '../../stores/ProfessionStore';
|
||||
import ProfessionVariantStore from '../../stores/ProfessionVariantStore';
|
||||
import ProfileStore from '../../stores/ProfileStore';
|
||||
import RaceStore from '../../stores/RaceStore';
|
||||
import React, { Component } from 'react';
|
||||
import SheetHeader from './SheetHeader';
|
||||
@@ -17,28 +17,29 @@ import SpecialAbilitiesStore from '../../stores/SpecialAbilitiesStore';
|
||||
import TextBox from '../../components/TextBox';
|
||||
|
||||
export default class MainSheet extends Component {
|
||||
|
||||
render() {
|
||||
|
||||
const ap = APStore.getAll();
|
||||
const el = ELStore.getStart().name;
|
||||
const profile = ProfileStore.getAll();
|
||||
const race = RaceStore.getCurrentName();
|
||||
const culture = CultureStore.getCurrentName();
|
||||
const profession = ProfessionVariantStore.getCurrentName() !== null ? `${ProfessionStore.getCurrentName()} (${ProfessionVariantStore.getCurrentName()})` : ProfessionStore.getCurrentName();
|
||||
const race = RaceStore.getCurrent();
|
||||
const culture = CultureStore.getCurrent();
|
||||
const profession = ProfessionStore.getCurrent().name;
|
||||
const professionVariant = ProfessionVariantStore.getCurrent();
|
||||
const haircolorTags = ProfileStore.getHaircolorTags();
|
||||
const eyecolorTags = ProfileStore.getEyecolorTags();
|
||||
const socialstatusTags = ProfileStore.getSocialstatusTags();
|
||||
|
||||
const advActive = DisAdvStore.getActiveForView(true);
|
||||
const disadvActive = DisAdvStore.getActiveForView(false);
|
||||
const commonsaActive = SpecialAbilitiesStore.getActiveForView(1,2);
|
||||
const generalsaActive = SpecialAbilitiesStore.getActiveForView(1,2);
|
||||
|
||||
const attributes = AttributeStore.getAllForView();
|
||||
const attrPrimary = [getPrimaryAttrID(1), getPrimaryAttrID(2)];
|
||||
const attributes = secondaryAttributes.getAll();
|
||||
const baseValues = AttributeStore.getBaseValues();
|
||||
|
||||
return (
|
||||
<div className="sheet main">
|
||||
<div className="sheet" id="main-sheet">
|
||||
<SheetHeader title="Persönliche Daten" />
|
||||
<MainSheetPersonalData
|
||||
ap={ap}
|
||||
@@ -47,27 +48,24 @@ export default class MainSheet extends Component {
|
||||
eyecolorTags={eyecolorTags}
|
||||
haircolorTags={haircolorTags}
|
||||
profession={profession}
|
||||
professionVariant={professionVariant}
|
||||
profile={profile}
|
||||
race={race}
|
||||
socialstatusTags={socialstatusTags}
|
||||
/>
|
||||
<div className="lower">
|
||||
<div className="lists">
|
||||
<TextBox className="adv" label="Vorteile">
|
||||
<TextBox className="advantages" label="Vorteile">
|
||||
<OverviewConstSkills list={advActive} />
|
||||
</TextBox>
|
||||
<TextBox className="disadv" label="Nachteile">
|
||||
<TextBox className="disadvantages" label="Nachteile">
|
||||
<OverviewConstSkills list={disadvActive} />
|
||||
</TextBox>
|
||||
<TextBox className="common_special" label="Allgemeine Sonderfertigkeiten">
|
||||
<OverviewConstSkills list={commonsaActive} />
|
||||
<TextBox className="general-special-abilities" label="Allgemeine Sonderfertigkeiten">
|
||||
<OverviewConstSkills list={generalsaActive} />
|
||||
</TextBox>
|
||||
</div>
|
||||
<MainSheetCalc
|
||||
attributes={attributes}
|
||||
attrPrimary={attrPrimary}
|
||||
baseValues={baseValues}
|
||||
/>
|
||||
<MainSheetCalc attributes={attributes} baseValues={baseValues} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
#sheets .sheet-wrapper .sheet.main {
|
||||
#main-sheet {
|
||||
> .upper {
|
||||
flex: none;
|
||||
|
||||
@@ -84,16 +84,13 @@
|
||||
flex-direction: column;
|
||||
|
||||
.box {
|
||||
width: 3.2cm;
|
||||
width: 30mm;
|
||||
height: 148px;
|
||||
|
||||
.avatar {
|
||||
img.avatar {
|
||||
@include size(100%);
|
||||
|
||||
> img {
|
||||
object-fit: cover;
|
||||
@include size(100%);
|
||||
}
|
||||
border-radius: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -5,14 +5,13 @@ import React, { Component, PropTypes } from 'react';
|
||||
export default class MainSheetCalc extends Component {
|
||||
|
||||
static propTypes = {
|
||||
attrPrimary: PropTypes.array.isRequired,
|
||||
attributes: PropTypes.array.isRequired,
|
||||
baseValues: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
render() {
|
||||
|
||||
const { attributes, attrPrimary, baseValues } = this.props;
|
||||
const { attributes, baseValues } = this.props;
|
||||
|
||||
return attributes.length > 0 ? (
|
||||
<div className="calculated">
|
||||
@@ -23,24 +22,17 @@ export default class MainSheetCalc extends Component {
|
||||
<div>Max</div>
|
||||
</div>
|
||||
<MainSheetCalcItem
|
||||
label="Lebensenergie"
|
||||
calc="(GW der Spezies + KO + KO)"
|
||||
value={baseValues.le + attributes[6].value * 2}
|
||||
add={do {
|
||||
if (get('ADV_25') && get('ADV_25').active)
|
||||
get('ADV_25').tier;
|
||||
else if (get('DISADV_28') && get('DISADV_28').active)
|
||||
-get('DISADV_28').tier;
|
||||
else
|
||||
0;
|
||||
}}
|
||||
purchased={baseValues.leAdd}
|
||||
label={attributes[0].name}
|
||||
calc={attributes[0].calc}
|
||||
value={attributes[0].value}
|
||||
add={attributes[0].mod}
|
||||
purchased={attributes[0].currentAdd}
|
||||
subLabel="Grundwert"
|
||||
subArray={[baseValues.le]} />
|
||||
<MainSheetCalcItem
|
||||
label="Astralenergie"
|
||||
calc="(20 durch Zauberer + Leiteigenschaft)"
|
||||
value={attrPrimary[0] === 'ATTR_0' || !get(attrPrimary[0]) ? 0 : 20 + get(attrPrimary[0]).value}
|
||||
value={attributes[1].value}
|
||||
add={do {
|
||||
if (get('ADV_23') && get('ADV_23').active)
|
||||
get('ADV_23').tier;
|
||||
@@ -52,11 +44,11 @@ export default class MainSheetCalc extends Component {
|
||||
purchased={baseValues.aeAdd}
|
||||
subLabel="perm. eingesetzt/davon zurückgekauft"
|
||||
subArray={[0,0]}
|
||||
empty={attrPrimary[0] === 'ATTR_0'} />
|
||||
empty={attributes[1].value === '-'} />
|
||||
<MainSheetCalcItem
|
||||
label="Karmaenergie"
|
||||
calc="(20 durch Geweihter + Leiteigenschaft)"
|
||||
value={attrPrimary[1] === 'ATTR_0' || !get(attrPrimary[1]) ? 0 : 20 + get(attrPrimary[1]).value}
|
||||
value={attributes[2].value}
|
||||
add={do {
|
||||
if (get('ADV_24') && get('ADV_24').active)
|
||||
get('ADV_24').tier;
|
||||
@@ -68,7 +60,7 @@ export default class MainSheetCalc extends Component {
|
||||
purchased={baseValues.keAdd}
|
||||
subLabel="perm. eingesetzt/davon zurückgekauft"
|
||||
subArray={[0,0]}
|
||||
empty={attrPrimary[1] === 'ATTR_0'} />
|
||||
empty={attributes[2] === '-'} />
|
||||
<MainSheetCalcItem
|
||||
label="Seelenkraft"
|
||||
calc="(GW der Spezies + (MU + KL + IN)/6)"
|
||||
|
||||
@@ -12,7 +12,10 @@ export default class MainSheetCalcItem extends Component {
|
||||
purchased: PropTypes.number,
|
||||
subArray: PropTypes.array,
|
||||
subLabel: PropTypes.string,
|
||||
value: PropTypes.number
|
||||
value: PropTypes.oneOfType([
|
||||
PropTypes.number,
|
||||
PropTypes.string
|
||||
])
|
||||
};
|
||||
|
||||
render() {
|
||||
|
||||
@@ -7,18 +7,36 @@ export default class MainSheetPersonalData extends Component {
|
||||
|
||||
static propTypes = {
|
||||
ap: PropTypes.object.isRequired,
|
||||
culture: PropTypes.string.isRequired,
|
||||
culture: PropTypes.object.isRequired,
|
||||
el: PropTypes.string.isRequired,
|
||||
eyecolorTags: PropTypes.array.isRequired,
|
||||
haircolorTags: PropTypes.array.isRequired,
|
||||
profession: PropTypes.string.isRequired,
|
||||
profession: PropTypes.object.isRequired,
|
||||
professionVariant: PropTypes.object,
|
||||
profile: PropTypes.object.isRequired,
|
||||
race: PropTypes.string.isRequired,
|
||||
race: PropTypes.object.isRequired,
|
||||
socialstatusTags: PropTypes.array.isRequired
|
||||
};
|
||||
|
||||
render() {
|
||||
const { ap, culture, el, eyecolorTags, haircolorTags, profession, profile: { name, family, placeofbirth, dateofbirth, age, sex, size, weight, haircolor, eyecolor, title, socialstatus, characteristics, otherinfo, avatar }, race, socialstatusTags } = this.props;
|
||||
const { ap, culture, el, eyecolorTags, haircolorTags, profession, professionVariant, profile: { name, family, placeofbirth, dateofbirth, age, sex, size, weight, haircolor, eyecolor, title, socialstatus, characteristics, otherinfo, avatar }, race, socialstatusTags } = this.props;
|
||||
|
||||
const raceName = race.name;
|
||||
const cultureName = culture.name;
|
||||
const professionName = (() => {
|
||||
let { name, subname } = profession || { name: 'Loading...' };
|
||||
if (typeof name === 'object') {
|
||||
name = name[sex];
|
||||
}
|
||||
if (typeof subname === 'object') {
|
||||
subname = subname[sex];
|
||||
}
|
||||
let { name: vname } = professionVariant || { name: 'Loading...' };
|
||||
if (typeof vname === 'object') {
|
||||
vname = vname[sex];
|
||||
}
|
||||
return name + (subname ? ` (${subname})` : professionVariant ? ` (${vname})` : '');
|
||||
})();
|
||||
|
||||
return (
|
||||
<div className="upper">
|
||||
@@ -29,13 +47,13 @@ export default class MainSheetPersonalData extends Component {
|
||||
<Plain className="dateofbirth" label="Geburtsdatum" value={dateofbirth} />
|
||||
<Plain className="age" label="Alter" value={age} />
|
||||
<Plain className="sex" label="Geschlecht" value={sex} />
|
||||
<Plain className="race" label="Spezies" value={race} />
|
||||
<Plain className="race" label="Spezies" value={raceName} />
|
||||
<Plain className="size" label="Größe" value={size} />
|
||||
<Plain className="weight" label="Gewicht" value={weight} />
|
||||
<Plain className="haircolor" label="Haarfarbe" value={haircolorTags[haircolor - 1]} />
|
||||
<Plain className="eyecolor" label="Augenfarbe" value={eyecolorTags[eyecolor - 1]} />
|
||||
<Plain className="culture" label="Kultur" value={culture} />
|
||||
<Plain className="profession" label="Profession" value={profession} />
|
||||
<Plain className="culture" label="Kultur" value={cultureName} />
|
||||
<Plain className="profession" label="Profession" value={professionName} />
|
||||
<Plain className="title" label="Titel" value={title} />
|
||||
<Plain className="socialstatus" label="Sozialstatus" value={socialstatusTags[socialstatus - 1]} />
|
||||
<Plain className="characteristics" label="Charakteristika" value={characteristics} />
|
||||
|
||||
@@ -76,8 +76,8 @@ export default class ProfileAvatarChange extends Component {
|
||||
let reader = new FileReader();
|
||||
let file = event.target.files[0];
|
||||
let filetype = file.type;
|
||||
let mime = new Set(['image/jpeg','image/png','image/jpg']);
|
||||
if (!file || !mime.has(filetype)) {
|
||||
let mime = ['image/jpeg','image/png','image/jpg'];
|
||||
if (!file || !mime.includes(filetype)) {
|
||||
this.setState({ file, fileValid: !file, filePreview: '' });
|
||||
} else {
|
||||
reader.onload = e => {
|
||||
@@ -56,8 +56,8 @@ export default class Profile extends Component {
|
||||
{
|
||||
label: 'Heldenbogen',
|
||||
tag: 'sheets',
|
||||
disabled: true
|
||||
// disabled: phase < 3
|
||||
// disabled: true
|
||||
disabled: phase < 3
|
||||
}
|
||||
]}
|
||||
active={this.state.tab}
|
||||
|
||||
@@ -1,109 +1,112 @@
|
||||
#body > main section#profile {
|
||||
.page#overview {
|
||||
.title-wrapper {
|
||||
margin-top: 11px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
#overview {
|
||||
.title-wrapper {
|
||||
margin-top: 11px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.avatar-wrapper {
|
||||
flex: 1 0 auto;
|
||||
@include size(150px);
|
||||
.avatar-wrapper {
|
||||
flex: 1 0 auto;
|
||||
@include size(150px);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
> div.avatar {
|
||||
box-shadow: 0 0 0 71px transparentize(black, .15) inset;
|
||||
.avatar {
|
||||
box-shadow: 0 0 0 71px transparentize(black, .15) inset;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 39px;
|
||||
left: 39px;
|
||||
content: "\E2C6";
|
||||
width: 64px;
|
||||
font: 64px/64px Material;
|
||||
color: #f1e6d4;
|
||||
text-align: center;
|
||||
}
|
||||
&::after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.no-avatar) {
|
||||
padding: 4px;
|
||||
background: #785a28;
|
||||
|
||||
> div.avatar::after {
|
||||
top: 43px;
|
||||
left: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-avatar {
|
||||
border-width: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.text-wrapper {
|
||||
flex: 1 1 100%;
|
||||
margin-left: 26px;
|
||||
&:not(.no-avatar) {
|
||||
padding: 4px;
|
||||
background: #785a28;
|
||||
|
||||
$size: 38px;
|
||||
.avatar::after {
|
||||
top: 43px;
|
||||
left: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-avatar {
|
||||
border-width: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar::after {
|
||||
position: absolute;
|
||||
top: 39px;
|
||||
left: 39px;
|
||||
display: none;
|
||||
content: "\E2C6";
|
||||
@include size(64px);
|
||||
font: 64px/64px Material;
|
||||
color: $color1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
> h1 {
|
||||
.text-wrapper {
|
||||
flex: 1 1 100%;
|
||||
margin-left: 26px;
|
||||
|
||||
$size: 38px;
|
||||
|
||||
> h1 {
|
||||
margin: 0;
|
||||
font: 400 #{$size}/#{$size} Alegreya Sans;
|
||||
letter-spacing: 0.025em;
|
||||
color: #f1e6d4;
|
||||
}
|
||||
|
||||
> h1, > div.change-name {
|
||||
display: flex;
|
||||
height: $size;
|
||||
align-items: center;
|
||||
|
||||
> div.textfield {
|
||||
margin: 0;
|
||||
font: 400 #{$size}/#{$size} Alegreya Sans;
|
||||
letter-spacing: 0.025em;
|
||||
color: #f1e6d4;
|
||||
}
|
||||
|
||||
> h1, > div.change-name {
|
||||
display: flex;
|
||||
height: $size;
|
||||
align-items: center;
|
||||
|
||||
> div.textfield {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> div.btn {
|
||||
margin-left: 11px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
> div.btn {
|
||||
margin-left: 11px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> div:not(.change-name) {
|
||||
margin: 4px 0 0;
|
||||
|
||||
span:last-child {
|
||||
font-weight: 500;
|
||||
}
|
||||
> div:not(.change-name) {
|
||||
margin: 4px 0 0;
|
||||
|
||||
span:last-child {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-ap {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.add-ap {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.personal-data {
|
||||
.personal-data {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 10px;
|
||||
|
||||
> div {
|
||||
flex: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 10px;
|
||||
|
||||
> div {
|
||||
flex: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 323px;
|
||||
margin-right: 22px;
|
||||
margin-bottom: 10px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
width: 323px;
|
||||
margin-right: 22px;
|
||||
margin-bottom: 10px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.end-char-creation, .delete-char {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.end-char-creation, .delete-char {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import AttributeBorder from '../attributes/AttributeBorder';
|
||||
import AttributeStore from '../../stores/AttributeStore';
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import SheetHeaderAttribute from './SheetHeaderAttribute';
|
||||
|
||||
export default class SheetHeader extends Component {
|
||||
|
||||
@@ -15,19 +15,19 @@ export default class SheetHeader extends Component {
|
||||
|
||||
render() {
|
||||
|
||||
const array = AttributeStore.getAllForView();
|
||||
const { add, title } = this.props;
|
||||
|
||||
array.push(...this.props.add);
|
||||
const array = AttributeStore.getAll().concat(add);
|
||||
|
||||
return (
|
||||
<div className="header">
|
||||
<div className="title">
|
||||
<div className="sheet-header">
|
||||
<div className="sheet-title">
|
||||
<h1>Heldendokument</h1>
|
||||
<h2>{this.props.title}</h2>
|
||||
<p>{title}</p>
|
||||
</div>
|
||||
<div className="attributes">
|
||||
<div className="sheet-attributes">
|
||||
{
|
||||
array.map((attr,i) => <AttributeBorder key={`ATTR_${i}`} className={attr.id} label={attr.short} value={attr.value} />)
|
||||
array.map(attr => <SheetHeaderAttribute key={attr.id} id={attr.id} label={attr.short} value={attr.value} />)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
.sheet-header {
|
||||
margin-bottom: 5mm;
|
||||
align-items: flex-end;
|
||||
flex: none;
|
||||
height: 32mm;
|
||||
}
|
||||
|
||||
.sheet-title {
|
||||
flex: 1 1 100%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
h1, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
font: 17px/13px Alegreya SC;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.sheet-attributes {
|
||||
flex: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import classNames from 'classnames';
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
|
||||
export default class SheetHeader extends Component {
|
||||
|
||||
static propTypes = {
|
||||
id: PropTypes.string.isRequired,
|
||||
label: PropTypes.string.isRequired,
|
||||
value: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
render() {
|
||||
|
||||
const { id, label, value } = this.props;
|
||||
|
||||
const className = classNames('sheet-attribute', id);
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<span className="label">{label}</span>
|
||||
<span className="value">{value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
.sheet-attribute {
|
||||
flex: none;
|
||||
margin: 2mm 2mm 0;
|
||||
outline-width: 0.55mm;
|
||||
outline-style: solid;
|
||||
outline-color: transparent;
|
||||
border: $print-border;
|
||||
@include size(12mm);
|
||||
|
||||
&.ATTR_1 {
|
||||
outline-color: red;
|
||||
}
|
||||
|
||||
&.ATTR_2 {
|
||||
outline-color: #90c;
|
||||
}
|
||||
|
||||
&.ATTR_3 {
|
||||
outline-color: #3c3;
|
||||
}
|
||||
|
||||
&.ATTR_4 {
|
||||
outline-color: black;
|
||||
}
|
||||
|
||||
&.ATTR_5 {
|
||||
outline-color: yellow;
|
||||
}
|
||||
|
||||
&.ATTR_6 {
|
||||
outline-color: blue;
|
||||
}
|
||||
|
||||
&.ATTR_7 {
|
||||
outline-color: white;
|
||||
}
|
||||
|
||||
&.ATTR_8 {
|
||||
margin-right: 0;
|
||||
outline-color: #f60;
|
||||
}
|
||||
|
||||
.label {
|
||||
font: bold 10px/14px Alegreya; // change
|
||||
color: black; // change
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
display: block;
|
||||
top: 0; // change
|
||||
padding: 2px 6px 0; // change
|
||||
}
|
||||
|
||||
.value {
|
||||
text-align: center;
|
||||
font: bold 21px/24px Alegreya Sans; // change
|
||||
color: black; // change
|
||||
letter-spacing: 0.05em;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -52,118 +52,13 @@
|
||||
font: bold 16px Alegreya;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
> .header {
|
||||
margin-bottom: 11px;
|
||||
align-items: flex-end;
|
||||
flex: none;
|
||||
height: 110px;
|
||||
|
||||
> .title {
|
||||
flex: 1 1 100%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
h1, h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.attributes {
|
||||
flex: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap-reverse;
|
||||
width: 12.65cm;
|
||||
|
||||
.attr {
|
||||
flex: none;
|
||||
margin: 1.5mm 1.5mm 0; // change
|
||||
position: relative; // change
|
||||
@include size(13mm);
|
||||
|
||||
> .short {
|
||||
font: bold 10px/14px Alegreya; // change
|
||||
color: black; // change
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
position: absolute; // change
|
||||
top: 0; // change
|
||||
padding: 4px 8px 0; // change
|
||||
}
|
||||
|
||||
> .value {
|
||||
border-width: calc(0.5mm - 0.57pt/2);
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
padding: 0; // change
|
||||
|
||||
> div {
|
||||
border: $print-border; // change
|
||||
padding: 0; // change
|
||||
|
||||
> div {
|
||||
@include size(44px);
|
||||
text-align: center;
|
||||
font: bold 21px/30px Alegreya Sans; // change
|
||||
color: black; // change
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
background: transparent; // change
|
||||
overflow: hidden;
|
||||
padding-top: 14px; // change
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.ATTR_1 > .value {
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
&.ATTR_2 > .value {
|
||||
border-color: #90c;
|
||||
}
|
||||
|
||||
&.ATTR_3 > .value {
|
||||
border-color: #3c3;
|
||||
}
|
||||
|
||||
&.ATTR_4 > .value {
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
&.ATTR_5 > .value {
|
||||
border-color: yellow;
|
||||
}
|
||||
|
||||
&.ATTR_6 > .value {
|
||||
border-color: blue;
|
||||
}
|
||||
|
||||
&.ATTR_7 > .value {
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
&.ATTR_8 {
|
||||
margin-right: 0;
|
||||
|
||||
> .value {
|
||||
border-color: #f60;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import "SheetHeader";
|
||||
@import "SheetHeaderAttribute";
|
||||
|
||||
// #sheets {
|
||||
// flex-flow: column nowrap;
|
||||
|
||||
|
||||
@@ -14,14 +14,14 @@ export default class TalentsSheet extends Component {
|
||||
render() {
|
||||
|
||||
const source = {
|
||||
attributes: AttributeStore.getAllForView(),
|
||||
attributes: AttributeStore.getAll(),
|
||||
baseValues: AttributeStore.getBaseValues(),
|
||||
race: RaceStore.getCurrentName(),
|
||||
culture: CultureStore.getCurrentName(),
|
||||
profession: ProfessionVariantStore.getCurrentName() !== null ? `${ProfessionStore.getCurrentName()} (${ProfessionVariantStore.getCurrentName()})` : ProfessionStore.getCurrentName(),
|
||||
el: ELStore.getStart().name,
|
||||
apTotal: APStore.get(),
|
||||
apUsed: APStore.getUsed(),
|
||||
apTotal: APStore.getTotal(),
|
||||
apUsed: APStore.getSpent(),
|
||||
advActive: DisAdvStore.getActiveForView(true),
|
||||
disadvActive: DisAdvStore.getActiveForView(false)
|
||||
};
|
||||
|
||||
+127
-154
@@ -1,194 +1,167 @@
|
||||
#body > main section#rcp {
|
||||
#rcp {
|
||||
background-image: url("images/rcp.png");
|
||||
background-color: #010c0a;
|
||||
|
||||
.page {
|
||||
> .scroll-list {
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 1px 0;
|
||||
list-style: none;
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 1px 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
padding: 11px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> .left {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
> .right {
|
||||
flex: 0 0 auto;
|
||||
margin-left: 11px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
line-height: 22px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.base-values {
|
||||
display: flex;
|
||||
|
||||
> div:not(:first-child) {
|
||||
margin-left: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid transparentize(white, .925);
|
||||
}
|
||||
|
||||
&.active {
|
||||
.btn {
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
@extend %yellow-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.professions {
|
||||
li {
|
||||
h2 {
|
||||
padding: 5px 0 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font: 500 13px/15px Alegreya Sans SC;
|
||||
color: #878683;
|
||||
text-transform: uppercase;
|
||||
margin-top: 0;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.iconbutton {
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to bottom, #c6a767 0%, #ad8736 10%, #9a7830 76%, #6d5024 100%);
|
||||
padding: 2px;
|
||||
overflow: hidden;
|
||||
|
||||
> div {
|
||||
border-radius: 50%;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
background: #1e282d;
|
||||
&.professions {
|
||||
li {
|
||||
h2 {
|
||||
padding: 5px 0 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(to bottom, #f0e6d2 0%, #c89b3c 100%);
|
||||
|
||||
> div {
|
||||
background-image: linear-gradient(to bottom, transparentize(#c89b3c, 1) 50%, transparentize(#c89b3c, .75) 100%);
|
||||
color: #f0e6d2;
|
||||
}
|
||||
h3 {
|
||||
font: 500 13px/15px Alegreya Sans SC;
|
||||
color: #878683;
|
||||
text-transform: uppercase;
|
||||
margin-top: 0;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&#professions {
|
||||
}
|
||||
|
||||
.spec {
|
||||
> div {
|
||||
display: flex;
|
||||
li {
|
||||
position: relative;
|
||||
padding: 11px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> div:last-child:not(:first-child) {
|
||||
margin-left: 11px;
|
||||
}
|
||||
}
|
||||
> .left {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
> .right {
|
||||
flex: 0 0 auto;
|
||||
margin-left: 11px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
line-height: 22px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.base-values {
|
||||
display: flex;
|
||||
|
||||
> div:not(:first-child) {
|
||||
margin-left: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid transparentize(white, .925);
|
||||
}
|
||||
|
||||
&.active {
|
||||
.btn {
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
@extend %yellow-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.list.curses {
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
#professions {
|
||||
.spec {
|
||||
> div {
|
||||
display: flex;
|
||||
|
||||
&:hover {
|
||||
background: #1e2328;
|
||||
}
|
||||
> div:last-child:not(:first-child) {
|
||||
margin-left: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .checkbox {
|
||||
flex: 1 1 100%;
|
||||
.list.curses {
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: #1e2328;
|
||||
}
|
||||
|
||||
> span {
|
||||
margin: 0 11px;
|
||||
}
|
||||
> .checkbox {
|
||||
flex: 1 1 100%;
|
||||
|
||||
> .btn {
|
||||
padding: 0 14px 3px;
|
||||
min-width: auto;
|
||||
font-size: 16px;
|
||||
flex: none;
|
||||
margin-left: 4px;
|
||||
}
|
||||
&:hover {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.list.lang_lit {
|
||||
> h4 > span {
|
||||
&.error {
|
||||
color: #aa1b32;
|
||||
}
|
||||
}
|
||||
> span {
|
||||
margin: 0 11px;
|
||||
}
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .btn {
|
||||
padding: 0 14px 3px;
|
||||
min-width: auto;
|
||||
font-size: 16px;
|
||||
flex: none;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #1e2328;
|
||||
}
|
||||
.list.lang_lit {
|
||||
> h4 > span {
|
||||
&.error {
|
||||
color: #aa1b32;
|
||||
}
|
||||
}
|
||||
|
||||
> .checkbox {
|
||||
flex: 1 1 100%;
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: #1e2328;
|
||||
}
|
||||
|
||||
> .dropdown {
|
||||
margin: 0;
|
||||
line-height: 26px;
|
||||
> .checkbox {
|
||||
flex: 1 1 100%;
|
||||
|
||||
> div > div {
|
||||
&.value {
|
||||
height: 28px;
|
||||
&:hover {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 9px;
|
||||
}
|
||||
> .dropdown {
|
||||
margin: 0;
|
||||
line-height: 26px;
|
||||
|
||||
&::after {
|
||||
bottom: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
> div > div {
|
||||
&.value {
|
||||
height: 28px;
|
||||
|
||||
&.bottom > div > .down {
|
||||
top: 28px;
|
||||
&::before {
|
||||
top: 9px;
|
||||
}
|
||||
|
||||
&.top > div > .down {
|
||||
bottom: 28px;
|
||||
&::after {
|
||||
bottom: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bottom > div > .down {
|
||||
top: 28px;
|
||||
}
|
||||
|
||||
.scroll-inner > .btn.btn-primary {
|
||||
margin-top: 20px;
|
||||
&.top > div > .down {
|
||||
bottom: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-inner > .btn.btn-primary {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
+13
-19
@@ -1,24 +1,18 @@
|
||||
#body > main section#skills {
|
||||
.page {
|
||||
&#talents table {
|
||||
tbody {
|
||||
tr {
|
||||
@extend %tr-typ;
|
||||
@extend %tr-untyp;
|
||||
}
|
||||
}
|
||||
}
|
||||
#talents {
|
||||
tr {
|
||||
@extend %tr-typ;
|
||||
@extend %tr-untyp;
|
||||
}
|
||||
}
|
||||
|
||||
&#specialabilities table {
|
||||
tbody {
|
||||
tr {
|
||||
@extend %large-tr;
|
||||
#specialabilities {
|
||||
tbody {
|
||||
tr {
|
||||
@extend %large-tr;
|
||||
|
||||
td.ap:last-child {
|
||||
padding-right: 11px;
|
||||
}
|
||||
}
|
||||
td.ap:last-child {
|
||||
padding-right: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,8 +12,10 @@
|
||||
"flux": "^2.1.1",
|
||||
"immutable": "^3.8.1",
|
||||
"jquery": "^2.2.4",
|
||||
"keymirror": "^0.1.1",
|
||||
"react": "^15.4.1",
|
||||
"react-addons-update": "^15.3.2",
|
||||
"react-dom": "^15.4.1",
|
||||
"react-gemini-scrollbar": "^2.1.5",
|
||||
"react-perfect-scrollbar": "^0.1.1",
|
||||
"react-progress-arc": "^1.0.7",
|
||||
|
||||
Reference in New Issue
Block a user