Athemis/ds4
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fix tab jumping on form input changes by preventing sheet re-rendering

Browse source
This commit is contained in:
Alexander Minges 2025-07-29 20:20:50 +02:00
parent d020822012
commit f643999573
Signed by: Athemis
GPG key ID: 31FBDEF92DDB162B
4 changed files with 103 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

79
scss/components/shared/_form_group.scss
View file

@ -4,12 +4,13 @@
* SPDX-License-Identifier: MIT
*/
.ds4-form-group {
.ds4-form-group,
.ds4-item-sheet .form-group {
clear: both;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 3px 0;
margin: 8px 0;
align-items: center;
&--start {
@ -24,4 +25,78 @@
flex: 2;
line-height: var(--input-height);
}
// Add spacing between form groups
& + & {
margin-top: 12px;
}
// Style for slim form groups (input + select combinations)
&.slim {
margin: 6px 0;
.form-fields {
display: flex;
align-items: center;
gap: 4px;
input {
flex: 1;
min-width: 60px;
}
select {
flex: 0 0 auto;
min-width: 120px;
width: auto !important;
}
label {
flex: 0 0 auto;
margin-right: 8px;
font-weight: bold;
}
}
}
}
// Style standard Foundry form-fields containers
.ds4-item-sheet .form-fields {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
input, select, textarea {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--color-border);
border-radius: 3px;
padding: 4px 8px;
color: var(--color-text-primary);
&:focus {
border-color: var(--color-text-accent);
box-shadow: 0 0 3px var(--color-text-accent);
}
}
select {
background: rgba(255, 255, 255, 0.05);
appearance: none;
background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23efe6d8' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 8px;
padding-right: 24px;
width: auto !important;
}
}
// Improve label styling
.ds4-item-sheet .form-group > label {
flex: 0 0 160px;
font-weight: bold;
color: var(--color-form-label);
line-height: var(--input-height);
margin-right: 12px;
}

12
scss/global/_fonts.scss
View file

@ -59,13 +59,11 @@
--ds4-font-heading: "Wood Stamp", sans-serif;
}
// Apply Wood Stamp font only to DS4 sheet-specific elements
.ds4-actor-sheet h1,
// Apply Wood Stamp font only to DS4 sheet-specific elements (excluding window titles)
.ds4-actor-sheet h2,
.ds4-actor-sheet h4,
.ds4-actor-sheet h5,
.ds4-actor-sheet h6,
.ds4-item-sheet h1,
.ds4-item-sheet h2,
.ds4-item-sheet h4,
.ds4-item-sheet h5,
@ -76,3 +74,11 @@
text-transform: uppercase;
font-weight: 100 !important;
}
// Keep window titles readable with standard font
.ds4-actor-sheet .window-title,
.ds4-item-sheet .window-title {
font-family: var(--font-sans) !important;
text-transform: none !important;
font-weight: normal !important;
}