uberwald/l5rx-chiaroscuro
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update sheet for 100% height and make editor functional

Browse Source
This commit is contained in:
Mandar
2020-12-12 20:43:46 +01:00
parent c9c1b4f206
commit eb76d38aa1
10 changed files with 170 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@@ -3693,9 +3693,9 @@
"dev": true "dev": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.8",
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
"integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
"dev": true "dev": true
}, },
"interpret": { "interpret": {

2
system/styles/l5r5e.css
View File

File diff suppressed because one or more lines are too long

32
system/styles/scss/global.scss
View File

@@ -12,6 +12,7 @@ body {
position: relative; position: relative;
background: url("../assets/imgs/bgL5R.webp") no-repeat; background: url("../assets/imgs/bgL5R.webp") no-repeat;
background-size: cover; background-size: cover;
scrollbar-width: thin;
} }
.window-resizable-handle { .window-resizable-handle {
z-index: 2; z-index: 2;
@@ -50,6 +51,12 @@ li {
padding: 0; padding: 0;
} }
// Fieldset
fieldset {
flex: 1;
display: flex;
}
// inputs // inputs
input[type="text"], input[type="text"],
input[type="number"], input[type="number"],
@@ -62,9 +69,24 @@ input[type="time"] {
color: $l5r5e-bold; color: $l5r5e-bold;
} }
// Editors
.editor {
flex: 1;
}
// Elements Colors // Elements Colors
.earth {color: $l5r5e-earth;} .earth {
.air {color: $l5r5e-air;} color: $l5r5e-earth;
.water {color: $l5r5e-water;} }
.fire {color: $l5r5e-fire;} .air {
.void {color: $l5r5e-void;} color: $l5r5e-air;
}
.water {
color: $l5r5e-water;
}
.fire {
color: $l5r5e-fire;
}
.void {
color: $l5r5e-void;
}

92
system/styles/scss/nav.scss
View File

@@ -1,52 +1,60 @@
// -- Nav // -- Nav
nav { nav {
&.sheet-tabs { &.sheet-tabs {
font-family: $font-tertiary; font-family: $font-tertiary;
border: 0 none; border: 0 none;
margin-bottom: 0; margin-bottom: 0;
background: $l5r5e-white; background: $l5r5e-white;
color: $l5r5e-black; color: $l5r5e-black;
--notchSize: 0.5rem; --notchSize: 0.5rem;
clip-path: polygon( clip-path: polygon(
0% var(--notchSize), 0% var(--notchSize),
var(--notchSize) 0%, var(--notchSize) 0%,
calc(100% - var(--notchSize)) 0%, calc(100% - var(--notchSize)) 0%,
100% var(--notchSize), 100% var(--notchSize),
100% calc(100% - var(--notchSize)), 100% calc(100% - var(--notchSize)),
calc(100%) 100%, calc(100%) 100%,
var(--notchSize) 100%, var(--notchSize) 100%,
0% calc(100%) 0% calc(100%)
); );
} }
.item { .item {
&:hover {
&:hover { background-color: $l5r5e-label;
background-color: $l5r5e-label; color: $white;
color: $white; text-shadow: none;
text-shadow: none; clip-path: polygon(
} 0% var(--notchSize),
var(--notchSize) 0%,
calc(100% - var(--notchSize)) 0%,
100% var(--notchSize),
100% 100%,
0 100%,
0% 0%,
0% 100%
);
}
} }
.item.active { .item.active {
height: 2.5rem; height: 2.5rem;
line-height: 2rem; line-height: 2rem;
background-color: rgba(73, 12, 11, 0.85); background-color: rgba(73, 12, 11, 0.85);
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
background-color: rgba(73, 12, 11, 0.85); background-color: rgba(73, 12, 11, 0.85);
clip-path: polygon( clip-path: polygon(
0% var(--notchSize), 0% var(--notchSize),
var(--notchSize) 0%, var(--notchSize) 0%,
calc(100% - var(--notchSize)) 0%, calc(100% - var(--notchSize)) 0%,
100% var(--notchSize), 100% var(--notchSize),
100% 100%, 100% 100%,
0 100%, 0 100%,
0% 0%, 0% 0%,
0% 100% 0% 100%
); );
&:hover { &:hover {
background-color: rgba(73, 12, 11, 0.85); background-color: rgba(73, 12, 11, 0.85);
cursor: default; cursor: default;
} }
} }
} }

57
system/styles/scss/sheets.scss
View File

@@ -1,6 +1,14 @@
/** Sheets **/ /** Sheets **/
&.sheet { &.sheet {
min-width: 600px; min-width: 600px;
form {
display: flex;
flex-wrap: wrap;
}
.sheet-header,
.sheet-body {
flex: 100%;
}
.sheet-header { .sheet-header {
h1 { h1 {
flex: auto; flex: auto;
@@ -138,11 +146,20 @@
z-index: 2; z-index: 2;
position: absolute; position: absolute;
bottom: -100%; bottom: -100%;
background: rgba(0,0,0,0.5); background: rgba(0, 0, 0, 0.5);
color: #fff; color: #fff;
padding: 0.25rem; padding: 0.25rem;
--notchSize: 0.5rem; --notchSize: 0.5rem;
clip-path: polygon(0% 0, 0 0%, 100% 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, var(--notchSize) 100%, 0% calc(100% - var(--notchSize))); clip-path: polygon(
0% 0,
0 0%,
100% 0%,
100% var(--notchSize),
100% calc(100% - var(--notchSize)),
calc(100% - var(--notchSize)) 100%,
var(--notchSize) 100%,
0% calc(100% - var(--notchSize))
);
} }
&:hover { &:hover {
p { p {
@@ -169,10 +186,14 @@
background: $l5r5e-white; background: $l5r5e-white;
padding: 0.5rem; padding: 0.5rem;
flex-wrap: wrap; flex-wrap: wrap;
&.tab[data-tab]{ min-height: calc(100% - 2.25rem);
&.active {display: flex;} &.tab[data-tab] {
&.active {
display: flex;
}
} }
.skills-wrapper, .feats-wrapper { .skills-wrapper,
.feats-wrapper {
flex: 50%; flex: 50%;
> li { > li {
display: flex; display: flex;
@@ -181,7 +202,16 @@
margin: 0 0 1rem; margin: 0 0 1rem;
border: 1px solid $l5r5e-title; border: 1px solid $l5r5e-title;
--notchSize: 0.75rem; --notchSize: 0.75rem;
clip-path: polygon(0 var(--notchSize), var(--notchSize) 0, 100% 0, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), 100% 100%, 0 100%, 0 100%); clip-path: polygon(
0 var(--notchSize),
var(--notchSize) 0,
100% 0,
100% var(--notchSize),
100% calc(100% - var(--notchSize)),
100% 100%,
0 100%,
0 100%
);
h4 { h4 {
flex: 100%; flex: 100%;
margin: 0; margin: 0;
@@ -190,7 +220,16 @@
background: $l5r5e-title; background: $l5r5e-title;
color: $l5r5e-label; color: $l5r5e-label;
--notchSize: 0.5rem; --notchSize: 0.5rem;
clip-path: polygon(0% var(--notchSize), var(--notchSize) 0%, calc(100%) 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, var(--notchSize) 100%, 0% calc(100%)); clip-path: polygon(
0% var(--notchSize),
var(--notchSize) 0%,
calc(100%) 0%,
100% var(--notchSize),
100% calc(100% - var(--notchSize)),
calc(100% - var(--notchSize)) 100%,
var(--notchSize) 100%,
0% calc(100%)
);
} }
ul { ul {
flex: 50%; flex: 50%;
@@ -204,7 +243,9 @@
strong { strong {
color: $l5r5e-black; color: $l5r5e-black;
} }
&[data-skill="melee"], &[data-skill="ranged"], &[data-skill="unarmed"] { &[data-skill="melee"],
&[data-skill="ranged"],
&[data-skill="unarmed"] {
strong { strong {
float: left; float: left;
line-height: 0.75rem; line-height: 0.75rem;

20
system/templates/item/feat-sheet.html
View File

@@ -6,22 +6,22 @@
</div> </div>
</header> </header>
{{!-- Sheet Tab Navigation --}}
<nav class="sheet-tabs tabs" data-group="primary">
<a class="item" data-tab="description">Description</a>
<a class="item" data-tab="attributes">Attributes</a>
</nav>
{{!-- Sheet Body --}} {{!-- Sheet Body --}}
<section class="sheet-body"> <section class="sheet-body">
{{!-- Sheet Tab Navigation --}}
<nav class="sheet-tabs tabs" data-group="primary">
<a class="item" data-tab="description">Description</a>
<a class="item" data-tab="attributes">Attributes</a>
</nav>
{{!-- Description Tab --}} {{!-- Description Tab --}}
<div class="tab" data-group="primary" data-tab="description"> <article class="tab" data-group="primary" data-tab="description">
{{editor content=data.description target="data.description" button=true owner=owner editable=editable}} {{editor content=data.description target="data.description" button=true owner=owner editable=editable}}
</div> </article>
{{!-- Attributes Tab --}} {{!-- Attributes Tab --}}
<div class="tab attributes" data-group="primary" data-tab="attributes"> <article class="tab attributes" data-group="primary" data-tab="attributes">
<div class="flexrow"> <div class="flexrow">
<div class="attribute-container"> <div class="attribute-container">
<label class="attribute-label">{{ localize 'l5r5e.xp.spent' }}</label> <label class="attribute-label">{{ localize 'l5r5e.xp.spent' }}</label>
@@ -32,6 +32,6 @@
<input type="text" name="data.rank" value="{{data.rank}}" data-dtype="Number" placeholder="0"/> <input type="text" name="data.rank" value="{{data.rank}}" data-dtype="Number" placeholder="0"/>
</div> </div>
</div> </div>
</div> </article>
</section> </section>
</form> </form>

20
system/templates/item/item-sheet.html
View File

@@ -14,22 +14,22 @@
</div> </div>
</header> </header>
{{!-- Sheet Tab Navigation --}}
<nav class="sheet-tabs tabs" data-group="primary">
<a class="item" data-tab="description">Description</a>
<a class="item" data-tab="attributes">Attributes</a>
</nav>
{{!-- Sheet Body --}} {{!-- Sheet Body --}}
<section class="sheet-body"> <section class="sheet-body">
{{!-- Sheet Tab Navigation --}}
<nav class="sheet-tabs tabs" data-group="primary">
<a class="item" data-tab="description">Description</a>
<a class="item" data-tab="attributes">Attributes</a>
</nav>
{{!-- Description Tab --}} {{!-- Description Tab --}}
<div class="tab" data-group="primary" data-tab="description"> <article class="tab" data-group="primary" data-tab="description">
{{editor content=data.description target="data.description" button=true owner=owner editable=editable}} {{editor content=data.description target="data.description" button=true owner=owner editable=editable}}
</div> </article>
{{!-- Attributes Tab --}} {{!-- Attributes Tab --}}
<div class="tab attributes" data-group="primary" data-tab="attributes"> <article class="tab attributes" data-group="primary" data-tab="attributes">
<header class="attributes-header flexrow"> <header class="attributes-header flexrow">
<span class="attribute-key">Attribute Key</span> <span class="attribute-key">Attribute Key</span>
<span class="attribute-value">Value</span> <span class="attribute-value">Value</span>
@@ -59,6 +59,6 @@
</li> </li>
{{/each}} {{/each}}
</ol> </ol>
</div> </article>
</section> </section>
</form> </form>

14
system/templates/item/weapon-sheet.html
View File

@@ -14,16 +14,16 @@
</div> </div>
</header> </header>
{{!-- Sheet Tab Navigation --}}
<nav class="sheet-tabs tabs" data-group="primary">
<a class="item" data-tab="description">Description</a>
</nav>
{{!-- Sheet Body --}} {{!-- Sheet Body --}}
<section class="sheet-body"> <section class="sheet-body">
{{!-- Sheet Tab Navigation --}}
<nav class="sheet-tabs tabs" data-group="primary">
<a class="item" data-tab="description">Description</a>
</nav>
{{!-- Description Tab --}} {{!-- Description Tab --}}
<div class="tab" data-group="primary" data-tab="description"> <article class="tab" data-group="primary" data-tab="description">
<div class="weapon-stats-content"> <div class="weapon-stats-content">
<div> <div>
<label class="attribute-label">{{ localize 'l5r5e.damage' }}</label> <label class="attribute-label">{{ localize 'l5r5e.damage' }}</label>
@@ -36,6 +36,6 @@
</div> </div>
<h4 class="text-block-header">{{ localize 'l5r5e.properties' }}</h4> <h4 class="text-block-header">{{ localize 'l5r5e.properties' }}</h4>
{{editor content=data.properties target="data.properties" button=true owner=owner editable=editable}} {{editor content=data.properties target="data.properties" button=true owner=owner editable=editable}}
</div> </article>
</section> </section>
</form> </form>

19
system/templates/sheets/actor-sheet.html
View File

@@ -13,18 +13,17 @@
{{> 'systems/l5r5e/templates/sheets/actor/attributes.html' }} {{> 'systems/l5r5e/templates/sheets/actor/attributes.html' }}
</div> </div>
</header> </header>
{{!-- Sheet Tab Navigation --}}
<nav class="sheet-tabs tabs" data-group="primary">
<a class="item" data-tab="skills">{{ localize 'l5r5e.skills.title' }}</a>
<a class="item" data-tab="narrative">{{ localize 'l5r5e.narrative' }}</a>
<a class="item" data-tab="conflict">{{ localize 'l5r5e.conflict.title' }}</a>
<a class="item" data-tab="inventory">{{ localize 'l5r5e.inventory' }}</a>
<a class="item" data-tab="experience">{{ localize 'l5r5e.experience' }}</a>
</nav>
{{!-- Sheet Body --}} {{!-- Sheet Body --}}
<section class="sheet-body"> <section class="sheet-body">
{{!-- Sheet Tab Navigation --}}
<nav class="sheet-tabs tabs" data-group="primary">
<a class="item" data-tab="skills">{{ localize 'l5r5e.skills.title' }}</a>
<a class="item" data-tab="narrative">{{ localize 'l5r5e.narrative' }}</a>
<a class="item" data-tab="conflict">{{ localize 'l5r5e.conflict.title' }}</a>
<a class="item" data-tab="inventory">{{ localize 'l5r5e.inventory' }}</a>
<a class="item" data-tab="experience">{{ localize 'l5r5e.experience' }}</a>
</nav>
{{!-- Skills Tab --}} {{!-- Skills Tab --}}
<article class="tab skills" data-group="primary" data-tab="skills"> <article class="tab skills" data-group="primary" data-tab="skills">
<ul class="skills-wrapper"> <ul class="skills-wrapper">

6
system/templates/sheets/actor/narrative.html
View File

@@ -12,5 +12,7 @@
<input type="text" name="data.social_standing.titles" value="{{data.social_standing.titles}}"/> <input type="text" name="data.social_standing.titles" value="{{data.social_standing.titles}}"/>
</li> </li>
</ul> </ul>
<h4 class="text-block-header">{{ localize 'l5r5e.notes' }}</h4> <fieldset>
{{ editor content=data.notes.value target="data.notes.value" button=true editable=editable }} <legend class="text-block-header">{{ localize 'l5r5e.notes' }}</legend>
{{ editor content=data.notes.value target="data.notes.value" button=true editable=editable }}
</fieldset>