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

Update item with js expanded function

Browse Source
This commit is contained in:
Mandar
2020-12-24 20:02:54 +01:00
parent ac0f3f7e85
commit 897eca7abb
14 changed files with 75 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
system/styles/l5r5e.css
View File

File diff suppressed because one or more lines are too long

54
system/styles/scss/items.scss
View File

@@ -49,14 +49,6 @@
}
}
}
.item-description {
flex: unset;
display: block;
height: 0;
overflow: hidden;
background: rgba(0, 0, 0, 0.05);
transition: height 0.25s ease-in;
}
.item-properties {
display: flex;
flex-direction: row;
@@ -77,13 +69,6 @@
}
}
}
&:hover {
.item-description {
height: 5rem;
overflow-y: auto;
scrollbar-width: thin;
}
}
p {
font-size: 0.85rem;
margin: 0;
@@ -261,21 +246,50 @@
}
}
}
p.item-description {
}
li {
.item-description {
flex: unset;
height: 0;
margin: 0;
padding: 0.25rem;
padding: 0;
font-size: 0.75rem;
color: rgba(0, 0, 0, 0.75);
overflow: hidden;
border: 1px solid $l5r5e-title;
background: rgba(0, 0, 0, 0.05);
border: 0 none;
transition: height 0.25s ease-in;
}
&:hover {
p.item-description {
div.item-description {
padding: 0;
&:hover,
&:active {
padding: 0;
}
}
.toggle-active {
height: 6rem;
overflow-y: auto;
scrollbar-width: thin;
border: 1px solid $l5r5e-title;
}
p {
&.toggle-active {
padding: 0.25rem;
}
}
&:hover,
&:active {
.item-description {
height: 6rem;
overflow-y: auto;
scrollbar-width: thin;
border: 1px solid $l5r5e-title;
}
p {
.item-description {
padding: 0.25rem;
}
}
}
}

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

@@ -1,9 +1,12 @@
// -- Nav
nav {
&.sheet-tabs {
height: 3rem;
line-height: 3rem;
font-family: $font-tertiary;
font-size: 1.25rem;
border: 0 none;
border-bottom: 1px solid $l5r5e-title;
margin-bottom: 0;
background: $l5r5e-white;
color: $l5r5e-black;
@@ -37,8 +40,6 @@ nav {
}
}
.item.active {
height: 2.5rem;
line-height: 2rem;
background-color: rgba(73, 12, 11, 0.85);
color: rgba(255, 255, 255, 1);
background-color: rgba(73, 12, 11, 0.85);

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

@@ -321,8 +321,9 @@
position: absolute;
background: rgba(0, 0, 0, 0.5);
color: #fff;
height: auto;
padding: 0.25rem;
bottom: -75%;
bottom: -1rem;
right: 0;
--notchSize: 0.5rem;
clip-path: polygon(
@@ -339,6 +340,7 @@
&:hover {
p {
display: block;
height: auto;
}
}
}
@@ -359,7 +361,7 @@
background: $l5r5e-white;
padding: 0.5rem;
flex-wrap: wrap;
min-height: calc(100% - 2.25rem);
min-height: calc(100% - 3.25rem);
&.tab[data-tab] {
&.active {
display: flex;
@@ -384,11 +386,16 @@
var(--notchSize) 100%,
0% calc(100% - var(--notchSize))
);
i {
color: $l5r5e-black;
margin-right: 0.5rem;
}
label {
flex: 0 0 auto;
margin: 0 0.25rem 0.25rem;
padding: 0 0.5rem;
color: $l5r5e-label;
background: $l5r5e-white;
border: 1px solid $l5r5e-label;
border-radius: 1rem;
}
@@ -453,6 +460,8 @@
th {
&:first-child {
flex: calc(100% - 16rem);
padding-left: 0.5rem;
text-align: left;
}
&:nth-child(2),
&:nth-child(3) {
@@ -461,8 +470,10 @@
}
}
tbody {
th {
.name {
flex: calc(100% - 13rem);
padding-left: 0.5rem;
text-align: left;
}
.xp,
.rank {

2
system/styles/scss/ui.scss
View File

@@ -119,7 +119,7 @@ button {
&.active,
&:hover {
background: $white;
border: 1px solid $l5r5e-border-sidebar;
border: 2px solid $l5r5e-border-sidebar;
box-shadow: 0 0 10px $l5r5e-white;
}
}

4
system/templates/actors/character/stance.html
View File

@@ -1,7 +1,7 @@
<li class="stance-content">
<label for="stance_{{ringId}}" class="stance-title {{ringId}}">
<label class="stance-title {{ringId}}">
{{ localizeRing ringId }}
<input id="stance_{{ringId}}" type="radio" name="data.stance" value="{{ringId}}" {{radioChecked ringId stance}}/>
</label>
<p class="item-description">{{ localizeStanceTip ringId }}</p>
<p class="item-description {{#ifCond ringId '==' stance}}toggle-active{{/ifCond}}">{{ localizeStanceTip ringId }}</p>
</li>

16
system/templates/actors/character/techniques.html
View File

@@ -1,15 +1,13 @@
<div class="techniques-wrapper">
<fieldset class="checklist">
<legend>
{{ localize 'l5r5e.techniques.type'}}
</legend>
<div class="checklist">
<i>{{ localize 'l5r5e.techniques.type'}}</i>
{{#each actor.data.techniquesList as |technique|}}
<label>
<input type="checkbox" name="data.techniques.{{technique}}" {{checked (lookup ../actor.data.techniques technique)}} />
{{localizeTechnique technique}}
</label>
<label>
<input type="checkbox" name="data.techniques.{{technique}}" {{checked (lookup ../actor.data.techniques technique)}} />
{{localizeTechnique technique}}
</label>
{{/each}}
</fieldset>
</div>
<fieldset class="section-header flexrow">
<legend class="technique-controls">
{{ localize 'l5r5e.techniques.title' }}

6
system/templates/items/advancement/advancement-entry.html
View File

@@ -1,10 +1,10 @@
<li class="item advancement flexcol">
<li class="item advancement flexcol toggle-on-click" data-toggle="item-description">
<ul class="item-header advancement-controls">
<li class="item-img"><img src="{{advancement.img}}" title="{{advancement.name}}" width="32px" height="32px"/></li>
<li class="item-name">{{ advancement.name }}</li>
{{#if editable}}
<li data-item-id="{{advancement._id}}" class="item-control item-edit" title="{{localize 'l5r5e.global.edit'}}"><i class="fas fa-edit"></i></li>
<li data-item-id="{{advancement._id}}" class="item-control item-delete" title="{{localize 'l5r5e.global.delete'}}"><i class="fas fa-trash"></i></li>
<li data-item-id="{{advancement._id}}" class="item-control item-edit" title="{{localize 'l5r5e.global.edit'}}"><i class="fas fa-edit"></i></li>
<li data-item-id="{{advancement._id}}" class="item-control item-delete" title="{{localize 'l5r5e.global.delete'}}"><i class="fas fa-trash"></i></li>
{{/if}}
</ul>
<div class="item-description">{{{ advancement.data.description }}}</div>

2
system/templates/items/armor/armor-entry.html
View File

@@ -1,4 +1,4 @@
<li class="item flexcol">
<li class="item armor flexcol toggle-on-click" data-toggle="item-description">
<ul class="item-header item-control">
<li class="item-img"><img src="{{item.img}}" title="{{item.name}}" width="32px" height="32px"/></li>
<li class="item-name">{{ item.name }}</li>

4
system/templates/items/item/item-entry.html
View File

@@ -1,4 +1,4 @@
<li class="item flexcol">
<li class="item flexcol toggle-on-click" data-toggle="item-description">
<ul class="item-header item-control">
<li class="item-img"><img src="{{item.img}}" title="{{item.name}}" width="32px" height="32px"/></li>
<li class="item-name">{{ item.name }} <sub>x{{ item.data.quantity }}</sub></li>
@@ -12,5 +12,5 @@
<li>{{{ property.name }}}</li>
{{/each}}
</ul>
<p class="item-description">{{{ item.data.description }}}</p>
<div class="item-description">{{{ item.data.description }}}</div>
</li>

4
system/templates/items/peculiarity/peculiarity-entry.html
View File

@@ -1,4 +1,4 @@
<<li class="item peculiarity flexcol">
<li class="item peculiarity flexcol toggle-on-click" data-toggle="item-description">
<ul class="item-header peculiarity-controls">
<li class="item-img"><img src="{{peculiarity.img}}" title="{{peculiarity.name}}" width="32px" height="32px"/></li>
<li class="item-name">{{ peculiarity.name }}</li>
@@ -7,5 +7,5 @@
<li data-item-id="{{peculiarity._id}}" class="item-control item-delete" title="{{localize 'l5r5e.global.delete'}}"><i class="fas fa-trash"></i></li>
{{/if}}
</ul>
<p class="item-description">{{{ peculiarity.data.description }}}</p>
<div class="item-description">{{{ peculiarity.data.description }}}</div>
</li>

2
system/templates/items/property/property-entry.html
View File

@@ -1,4 +1,4 @@
<li class="item property flexcol" data-property-id="{{item._id}}">
<li class="item property flexcol toggle-on-click" data-toggle="item-description" data-property-id="{{item._id}}">
<ul class="item-header property-control">
<li class="item-img"><img src="{{item.img}}" title="{{item.name}}" width="32px" height="32px"/></li>
<li class="item-name">{{ item.name }}</li>

6
system/templates/items/technique/technique-entry.html
View File

@@ -1,10 +1,10 @@
<li class="item technique flexcol">
<li class="item technique flexcol toggle-on-click" data-toggle="item-description">
<ul class="item-header technique-controls">
<li class="item-img"><img src="{{technique.img}}" title="{{technique.name}}" width="32px" height="32px"/></li>
<li class="item-name">{{ technique.name }}</li>
{{#if editable}}
<li data-item-id="{{technique._id}}" class="item-control item-edit" title="{{localize 'l5r5e.global.edit'}}"><i class="fas fa-edit"></i></li>
<li data-item-id="{{technique._id}}" class="item-control item-delete" title="{{localize 'l5r5e.global.delete'}}"><i class="fas fa-trash"></i></li>
<li data-item-id="{{technique._id}}" class="item-control item-edit" title="{{localize 'l5r5e.global.edit'}}"><i class="fas fa-edit"></i></li>
<li data-item-id="{{technique._id}}" class="item-control item-delete" title="{{localize 'l5r5e.global.delete'}}"><i class="fas fa-trash"></i></li>
{{/if}}
</ul>
<div class="item-description">{{{ technique.data.description }}}</div>

2
system/templates/items/weapon/weapon-entry.html
View File

@@ -1,4 +1,4 @@
<li class="item flexcol">
<li class="item weapon flexcol toggle-on-click" data-toggle="item-description">
<ul class="item-header item-control">
<li class="item-img"><img src="{{item.img}}" title="{{item.name}}" width="32px" height="32px"/></li>
<li class="item-name">{{ item.name }}</li>