mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-07-22 02:19:54 +02:00
[UI/UX] Reduce width of adversary sidebar (#2055)
* Reduce width of adversary sidebar * Fix pips
This commit is contained in:
parent
c25c4d63f7
commit
489f62a379
6 changed files with 136 additions and 138 deletions
|
|
@ -7,7 +7,7 @@ export default class AdversarySheet extends DHBaseActorSheet {
|
||||||
/** @inheritDoc */
|
/** @inheritDoc */
|
||||||
static DEFAULT_OPTIONS = {
|
static DEFAULT_OPTIONS = {
|
||||||
classes: ['adversary'],
|
classes: ['adversary'],
|
||||||
position: { width: 660, height: 766 },
|
position: { width: 645, height: 760 },
|
||||||
window: { resizable: true },
|
window: { resizable: true },
|
||||||
actions: {
|
actions: {
|
||||||
toggleHitPoints: AdversarySheet.#toggleHitPoints,
|
toggleHitPoints: AdversarySheet.#toggleHitPoints,
|
||||||
|
|
|
||||||
|
|
@ -59,7 +59,6 @@
|
||||||
.slot-value {
|
.slot-value {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 0 5px;
|
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
|
@import './sheet.less';
|
||||||
@import './features.less';
|
@import './features.less';
|
||||||
@import './header.less';
|
@import './header.less';
|
||||||
@import './sheet.less';
|
|
||||||
@import './sidebar.less';
|
@import './sidebar.less';
|
||||||
@import './effects.less';
|
@import './effects.less';
|
||||||
@import './notes.less';
|
@import './notes.less';
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,13 +2,16 @@
|
||||||
@import '../../../utils/fonts.less';
|
@import '../../../utils/fonts.less';
|
||||||
|
|
||||||
.application.sheet.daggerheart.actor.dh-style.adversary {
|
.application.sheet.daggerheart.actor.dh-style.adversary {
|
||||||
|
--sidebar-width: 260px;
|
||||||
|
|
||||||
.window-content {
|
.window-content {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 275px 1fr;
|
grid-template-columns: var(--sidebar-width) 1fr;
|
||||||
grid-template-rows: auto 1fr;
|
grid-template-rows: auto 1fr;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.adversary-sidebar-sheet {
|
.adversary-sidebar-sheet {
|
||||||
grid-row: 1 / span 2;
|
grid-row: 1 / span 2;
|
||||||
|
|
@ -33,4 +36,3 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -22,8 +22,8 @@
|
||||||
|
|
||||||
.application.sheet.daggerheart.actor.dh-style.adversary {
|
.application.sheet.daggerheart.actor.dh-style.adversary {
|
||||||
.adversary-sidebar-sheet {
|
.adversary-sidebar-sheet {
|
||||||
width: 275px;
|
width: var(--sidebar-width);
|
||||||
min-width: 275px;
|
min-width: var(--sidebar-width);
|
||||||
border-right: 1px solid light-dark(@dark-blue, @golden);
|
border-right: 1px solid light-dark(@dark-blue, @golden);
|
||||||
|
|
||||||
.portrait {
|
.portrait {
|
||||||
|
|
@ -52,7 +52,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: 275px;
|
height: var(--sidebar-width);
|
||||||
}
|
}
|
||||||
|
|
||||||
.death-roll-btn {
|
.death-roll-btn {
|
||||||
|
|
@ -63,7 +63,7 @@
|
||||||
.threshold-section {
|
.threshold-section {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 7px;
|
||||||
background-color: light-dark(transparent, @dark-blue);
|
background-color: light-dark(transparent, @dark-blue);
|
||||||
color: @color-text-emphatic;
|
color: @color-text-emphatic;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
|
|
@ -107,7 +107,7 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
top: -20px;
|
top: -20px;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
margin-bottom: -10px;
|
margin-bottom: -16px;
|
||||||
|
|
||||||
&.pip-display {
|
&.pip-display {
|
||||||
top: -15px;
|
top: -15px;
|
||||||
|
|
@ -185,8 +185,8 @@
|
||||||
|
|
||||||
.shortcut-items-section {
|
.shortcut-items-section {
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
padding-top: 10px;
|
padding: 10px 0;
|
||||||
padding-bottom: 20px;
|
flex: 1;
|
||||||
scrollbar-gutter: stable;
|
scrollbar-gutter: stable;
|
||||||
.with-scroll-shadows();
|
.with-scroll-shadows();
|
||||||
|
|
||||||
|
|
@ -214,8 +214,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.experience-section {
|
.experience-section {
|
||||||
margin-bottom: 20px;
|
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
|
|
@ -232,21 +230,21 @@
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
align-items: center;
|
align-items: stretch;
|
||||||
|
padding: 0 4px 0 12px;
|
||||||
|
|
||||||
.experience-row {
|
.experience-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
width: 250px;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
.experience-name {
|
.experience-name {
|
||||||
width: 180px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: start;
|
text-align: start;
|
||||||
font-size: var(--font-size-14);
|
font-size: var(--font-size-14);
|
||||||
|
flex: 1;
|
||||||
color: light-dark(@dark, @beige);
|
color: light-dark(@dark, @beige);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -271,9 +269,7 @@
|
||||||
|
|
||||||
.reaction-section {
|
.reaction-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 0 10px;
|
margin: 10px;
|
||||||
margin-top: 20px;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
button {
|
button {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
|
|
||||||
|
|
@ -92,9 +92,11 @@
|
||||||
{{/each}}
|
{{/each}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<line-div></line-div>
|
|
||||||
<div class="reaction-section">
|
|
||||||
<button type="button" data-action="reactionRoll">{{localize "DAGGERHEART.GENERAL.Roll.reaction"}}</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="reaction-section">
|
||||||
|
<button type="button" data-action="reactionRoll">
|
||||||
|
<i class="fa-solid fa-dice"></i>
|
||||||
|
{{localize "DAGGERHEART.GENERAL.Roll.reaction"}}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue