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 { .item-properties {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -77,13 +69,6 @@
} }
} }
} }
&:hover {
.item-description {
height: 5rem;
overflow-y: auto;
scrollbar-width: thin;
}
}
p { p {
font-size: 0.85rem; font-size: 0.85rem;
margin: 0; margin: 0;
@@ -261,21 +246,50 @@
} }
} }
} }
p.item-description { }
li {
.item-description {
flex: unset;
height: 0; height: 0;
margin: 0; margin: 0;
padding: 0.25rem; padding: 0;
font-size: 0.75rem; font-size: 0.75rem;
color: rgba(0, 0, 0, 0.75); color: rgba(0, 0, 0, 0.75);
overflow: hidden; overflow: hidden;
border: 1px solid $l5r5e-title; background: rgba(0, 0, 0, 0.05);
border: 0 none;
transition: height 0.25s ease-in; transition: height 0.25s ease-in;
} }
&:hover { div.item-description {
p.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; height: 6rem;
overflow-y: auto; overflow-y: auto;
scrollbar-width: thin; 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
nav { nav {
&.sheet-tabs { &.sheet-tabs {
height: 3rem;
line-height: 3rem;
font-family: $font-tertiary; font-family: $font-tertiary;
font-size: 1.25rem; font-size: 1.25rem;
border: 0 none; border: 0 none;
border-bottom: 1px solid $l5r5e-title;
margin-bottom: 0; margin-bottom: 0;
background: $l5r5e-white; background: $l5r5e-white;
color: $l5r5e-black; color: $l5r5e-black;
@@ -37,8 +40,6 @@ nav {
} }
} }
.item.active { .item.active {
height: 2.5rem;
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);

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

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

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

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

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

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

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

@@ -1,15 +1,13 @@
<div class="techniques-wrapper"> <div class="techniques-wrapper">
<fieldset class="checklist"> <div class="checklist">
<legend> <i>{{ localize 'l5r5e.techniques.type'}}</i>
{{ localize 'l5r5e.techniques.type'}}
</legend>
{{#each actor.data.techniquesList as |technique|}} {{#each actor.data.techniquesList as |technique|}}
<label> <label>
<input type="checkbox" name="data.techniques.{{technique}}" {{checked (lookup ../actor.data.techniques technique)}} /> <input type="checkbox" name="data.techniques.{{technique}}" {{checked (lookup ../actor.data.techniques technique)}} />
{{localizeTechnique technique}} {{localizeTechnique technique}}
</label> </label>
{{/each}} {{/each}}
</fieldset> </div>
<fieldset class="section-header flexrow"> <fieldset class="section-header flexrow">
<legend class="technique-controls"> <legend class="technique-controls">
{{ localize 'l5r5e.techniques.title' }} {{ 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"> <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-img"><img src="{{advancement.img}}" title="{{advancement.name}}" width="32px" height="32px"/></li>
<li class="item-name">{{ advancement.name }}</li> <li class="item-name">{{ advancement.name }}</li>
{{#if editable}} {{#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-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-delete" title="{{localize 'l5r5e.global.delete'}}"><i class="fas fa-trash"></i></li>
{{/if}} {{/if}}
</ul> </ul>
<div class="item-description">{{{ advancement.data.description }}}</div> <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"> <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-img"><img src="{{item.img}}" title="{{item.name}}" width="32px" height="32px"/></li>
<li class="item-name">{{ item.name }}</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"> <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-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> <li class="item-name">{{ item.name }} <sub>x{{ item.data.quantity }}</sub></li>
@@ -12,5 +12,5 @@
<li>{{{ property.name }}}</li> <li>{{{ property.name }}}</li>
{{/each}} {{/each}}
</ul> </ul>
<p class="item-description">{{{ item.data.description }}}</p> <div class="item-description">{{{ item.data.description }}}</div>
</li> </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"> <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-img"><img src="{{peculiarity.img}}" title="{{peculiarity.name}}" width="32px" height="32px"/></li>
<li class="item-name">{{ peculiarity.name }}</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> <li data-item-id="{{peculiarity._id}}" class="item-control item-delete" title="{{localize 'l5r5e.global.delete'}}"><i class="fas fa-trash"></i></li>
{{/if}} {{/if}}
</ul> </ul>
<p class="item-description">{{{ peculiarity.data.description }}}</p> <div class="item-description">{{{ peculiarity.data.description }}}</div>
</li> </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"> <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-img"><img src="{{item.img}}" title="{{item.name}}" width="32px" height="32px"/></li>
<li class="item-name">{{ item.name }}</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"> <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-img"><img src="{{technique.img}}" title="{{technique.name}}" width="32px" height="32px"/></li>
<li class="item-name">{{ technique.name }}</li> <li class="item-name">{{ technique.name }}</li>
{{#if editable}} {{#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-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-delete" title="{{localize 'l5r5e.global.delete'}}"><i class="fas fa-trash"></i></li>
{{/if}} {{/if}}
</ul> </ul>
<div class="item-description">{{{ technique.data.description }}}</div> <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"> <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-img"><img src="{{item.img}}" title="{{item.name}}" width="32px" height="32px"/></li>
<li class="item-name">{{ item.name }}</li> <li class="item-name">{{ item.name }}</li>