slaguru666/roll20-character-sheets-tester
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add flex formatting

Browse Source
This commit is contained in:
James Fleming
2022-01-03 13:44:59 -05:00
parent 60cc3182e0
commit dfbee4648f
2 changed files with 77 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
The Fantasy Trip/TFT.css
+22
View File
@@ -43,6 +43,7 @@
.sheet-first-word {
font-size: larger;
align-self: flex-start;
}
.sheet-stat-input {
@@ -69,6 +70,7 @@
border-color: #BBBBBB;
text-align: center;
font-weight: bold;
align-self: flex-start;
}
.sheet-expand-button:hover,
@@ -388,3 +390,23 @@
.charsheet .sheet-toggle:checked ~ .sheet-toggle-unchecked {
display: none;
}
/* Flex Stuff */
.charsheet .sheet-flex-section {
display: flex;
gap: .25rem;
align-items: flex-end;
}
.charsheet .sheet-flex {
flex: 1 1 auto;
width: 13rem;
}
.charsheet .sheet-flex-checkbox {
align-self: center;
width: 2rem;
}
.charsheet .sheet-flex-buttons-stub {
width: 6.2rem;
}
The Fantasy Trip/TFT.html
+55 -49
View File
@@ -34,9 +34,9 @@
<span class=sheet-stat-label>ST</span>
<input class=sheet-stat-input type=number name="attr_ST_max" value="8"/>
<span class=sheet-stat-plus>+</span>
<input class=sheet-stat-input type=number title="Temporary adjustment to ST." name="attr_ST_adj" value="0"/>
<input class=sheet-stat-input type=number title="Temporary adjustment to ST, not counting Wounds or Fatigue." name="attr_ST_adj" value="0"/>
<span class=sheet-stat-equals>=</span>
<span class=sheet-stat-final title="Final ST. Base plus Adjustments." name="attr_ST"/>
<span class=sheet-stat-final title="Final ST. Base plus Adjustments, not counting Wounds or Fatigue." name="attr_ST"/>
&nbsp;
<button class=sheet-dice-button type="action" name="act_st_check3">3</button>
<button class=sheet-dice-button type="action" name="act_st_check4">4</button>
@@ -87,30 +87,30 @@
</div>
</div>
<div class="sheet-combat sheet-block">
<div>
<div> <!-- just to stop from wrapping -->
<div>
<button type=roll title="Add yourself to Turn Order." value="&{template:initiative} {{character_name=@{character_name}}} {{initiative=[[@{DX}[DEX] &{tracker}]]}}"><b style='font-size: .8em;'>Initiative</b></button>
</div>
<div>
<div style='white-space:nowrap'>
<span class=sheet-label style='width: 7em;'>
<span class=sheet-first-word title="Current hit points due to Wounds and Fatigue.">Hit Points</span>
<span class=sheet-first-word title="Current Strength adjusted by Wounds and Fatigue.">Health</span>
</span>
<span class=sheet-stat-final name="attr_stcurrent"/>
</div>
<div>
<div style='white-space:nowrap'>
<span class=sheet-label style='width: 7em;' title="Subtracted from enemy dex when attacking you.">Minus to Hit</span>
<span class=sheet-stat-final name="attr_minustohit"/>
</div>
</div style='white-space:nowrap'>
<div>
<span class=sheet-label style='width: 7em;' title="Hits blocked per attack by your armor/shields/abilities.">Hits Blocked</span>
<span class=sheet-stat-final name="attr_totalblock"/>
</div>
</div style='white-space:nowrap'>
<div>
<span class=sheet-label style='width: 7em;' title="Damage done to you, must be healed.">Wounds</span>
<span class=sheet-label style='width: 7em;' title="Damage done to your Health, must be healed.">Wounds</span>
<input type=number style='width: 3.5em;' name="attr_Hits" value="0"/>
</div>
<div>
<span class=sheet-label style='width: 7em;' title="Temporary damage done to you as for spellcasting.">Fatigue</span>
<div style='white-space:nowrap'>
<span class=sheet-label style='width: 7em;' title="Temporary damage done to your Health as for spellcasting.">Fatigue</span>
<input type=number style='width: 3.5em;' name="attr_Fatigue" value="0"/>
</div>
</div>
@@ -121,8 +121,8 @@
<span class=sheet-first-word style='width: 14rem'>Talent</span>
</div>
<fieldset class=repeating_talents>
<div>
<input type=text name=attr_talentname style='width: 13rem;'>
<div class=sheet-flex-section>
<input type=text name=attr_talentname class=sheet-flex>
&nbsp;
<button class="sheet-describe-button" title="Describe the talent." type="action" name="act_describe"/>
<button class="sheet-expand-button" title="Expand and edit more fields." type="action" name="act_expand"/>
@@ -170,23 +170,24 @@
</div>
</div>
<div class="sheet-weapons sheet-block">
<div class=sheet-fieldset-header>
<span class=sheet-first-word style='width: 11.75rem;'>Weapon</span>
<span label style='width: 6rem;'>Damage</span>
<div class='sheet-fieldset-header sheet-flex-section'>
<span class=sheet-first-word style='width: 12.5rem;'>Weapon</span>
<span style='width: 6rem;'>Damage</span>
<span style='width: 4rem;' title="Dex adjustment to hit an enemy.">To Hit</span>
<span style='width: 35rem;'>Notes</span>
<span class=sheet-flex>Notes</span>
<span style='width: 4rem;' title="Weight per item.">Lbs</span>
<span style='width: 2rem;' title="Not carried, won't count as weight.">NC</span>
<span class=sheet-flex-buttons-stub />
</div>
<fieldset class=repeating_weapons>
<div>
<input title="Select this Weapon for Attack!" type="checkbox" name="attr_selected">
<div class=sheet-flex-section>
<input title="Select this Weapon for Attack!" type="checkbox" class=sheet-flex-checkbox name="attr_selected">
<input type=text name=attr_weaponname style='width: 10rem;'>
<input type=text name=attr_weapondamage style='width: 6rem;'>
<input type=text name=attr_tohit style='width: 4rem;'>
<input type=text name=attr_weaponnotes style='width: 35rem;'>
<input type=text name=attr_weaponnotes class=sheet-flex>
<input type=text name=attr_weight style='width: 4rem;'>
<input type="checkbox" name="attr_notcarried" value="1" style='width: 2rem;'>
<input type="checkbox" name="attr_notcarried" value="1" class=sheet-flex-checkbox>
&nbsp;
<button class=sheet-describe-button title="Describe the weapon." type="action" name="act_describe"/>
<button class=sheet-expand-button title="Expand and edit more fields in the selected weapon." type="action" name="act_expand"/>
@@ -201,21 +202,22 @@
</fieldset>
</div>
<div class="sheet-spells sheet-block">
<div class=sheet-fieldset-header>
<span class=sheet-first-word style='width: 11.75rem;'>Spell</span>
<div class='sheet-fieldset-header sheet-flex-section'>
<span class=sheet-first-word style='width: 12.5rem;'>Spell</span>
<span style='width: 6rem;'>Damage</span>
<span style='width: 4rem;' title="Dex adjustment to hit an enemy.">To Hit</span>
<span style='width: 7rem;' title="Strength cost when casting.">ST Cost</span>
<span style='width: 34rem;'>Notes</span>
<span class=sheet-flex>Notes</span>
<span class=sheet-flex-buttons-stub />
</div>
<fieldset class=repeating_spells>
<div>
<input title="Select this Spell for Attack!" type="checkbox" name="attr_selected">
<div class=sheet-flex-section>
<input title="Select this Spell for Attack!" type="checkbox" class=sheet-flex-checkbox name="attr_selected">
<input type=text name=attr_spellname style='width: 10rem;'>
<input type=text name=attr_spelldamage style='width: 6rem;'>
<input type=text name=attr_tohit style='width: 4rem;'>
<input type=text name=attr_stcost style='width: 7rem;'>
<input type=text name=attr_spellnotes style='width: 34rem;'>
<input type=text name=attr_spellnotes class=sheet-flex>
&nbsp;
<button class=sheet-describe-button title="Describe the spell." type="action" name="act_describe"/>
<button class=sheet-expand-button title="Expand and edit more fields." type="action" name="act_expand"/>
@@ -244,24 +246,25 @@
</fieldset>
</div>
<div class="sheet-armor sheet-block">
<div class=sheet-fieldset-header>
<span class=sheet-first-word style='width: 13rem'>Armor or Shield</span>
<div class='sheet-fieldset-header sheet-flex-section'>
<span class=sheet-first-word style='width: 13rem;'>Armor or Shield</span>
<span style='width: 5rem;' title="Damage absorbed per attack.">Hits Blocked</span>
<span style='width: 5rem;' title="Subtracted from opponent's Dex when they attack.">Minus to Hit</span>
<span style='width: 5rem;' title="Subtracted from your Dex.">Dex Penalty</span>
<span style='width: 27.5rem;'>Notes</span>
<span class=sheet-flex>Notes</span>
<span style='width: 4rem;' title="Weight of armor/shield.">Lbs</span>
<span style='width: 2rem;' title="Not carried, won't count as weight.">NC</span>
<span class=sheet-flex-buttons-stub />
</div>
<fieldset class=repeating_armor>
<div>
<div class=sheet-flex-section>
<input type=text name=attr_defensename value="" style='width: 13rem;'>
<input type=text name=attr_hitsblocked value="0" style='width: 5rem;'>
<input type=text name=attr_minustohit value="0" style='width: 5rem;'>
<input type=text name=attr_dexpenalty value="0" style='width: 5rem;'>
<input type=text name=attr_defensenotes style='width: 27.5rem;'>
<input type=text name=attr_defensenotes class=sheet-flex>
<input type=text name=attr_weight value="" style='width: 4rem;'>
<input type="checkbox" name="attr_notcarried" value="1" style='width: 2rem;'>
<input type="checkbox" name="attr_notcarried" value="1" class=sheet-flex-checkbox>
&nbsp;
<button class=sheet-describe-button title="Describe the Armor/Shield." type="action" name="act_describe"/>
<button class=sheet-expand-button title="Expand and edit more fields." type="action" name="act_expand"/>
@@ -274,20 +277,21 @@
</fieldset>
</div>
<div class="sheet-equip sheet-block">
<div class=sheet-fieldset-header>
<div class='sheet-fieldset-header sheet-flex-section'>
<span class=sheet-first-word style='width: 13rem'>Equipment</span>
<span class=sheet-label style='width: 5rem;'>Count</span>
<span class=sheet-label style='width: 38rem;'>Notes</span>
<span class=sheet-label style='width: 4rem;' title="Weight per item.">Lbs</span>
<span class=sheet-label style='width: 2rem;' title="Not carried, won't count as weight.">NC</span>
<span style='width: 5rem;'>Count</span>
<span class=sheet-flex>Notes</span>
<span style='width: 4rem;' title="Weight per item.">Lbs</span>
<span style='width: 2rem;' title="Not carried, won't count as weight.">NC</span>
<span class=sheet-flex-buttons-stub />
</div>
<fieldset class=repeating_equipment>
<div>
<div class=sheet-flex-section>
<input type=text name=attr_name style='width: 13rem;'>
<input type=number name=attr_count value="1" style='width: 5rem;'>
<input type=text name=attr_notes style='width: 38rem;'>
<input type=text name=attr_notes class=sheet-flex>
<input type=text name=attr_weight value="" style='width: 4rem;'>
<input type=checkbox name=attr_notcarried value="1" style='width: 2rem;'>
<input type=checkbox name=attr_notcarried value="1" class=sheet-flex-checkbox>
&nbsp;
<button class=sheet-describe-button title="Describe the Equipment." type="action" name="act_describe"/>
<button class=sheet-expand-button title="Expand and edit more fields." type="action" name="act_expand"/>
@@ -320,15 +324,17 @@
</div>
</span>
<br>
<span>
<span class=sheet-label style='width: 12em;' title="Put abilities that you buy here, to track the experience cost.">Attribute Acquired</span>
<span class=sheet-label style='width: 6em;'>Exp Spent</span>
<span class=sheet-label style='width: 35em;'>Notes</span>
</span>
<div class='sheet-fieldset-header sheet-flex-section'>
<span style='width: 12rem;' title="Put abilities that you buy here, to track the experience cost.">Attribute Acquired</span>
<span style='width: 8rem;'>Exp Spent</span>
<span class=sheet-flex>Notes</span>
</div>
<fieldset class=repeating_exphistory>
<input type=text name=attr_expability style='width: 12em;'>
<input type=number name=attr_expspent style='width: 6em;'>
<input type=text name=attr_expnotes style='width: 35em;'>
<div class=sheet-flex-section>
<input type=text name=attr_expability style='width: 12rem;'>
<input type=number name=attr_expspent style='width: 8rem;'>
<input type=text name=attr_expnotes class=sheet-flex>
</div>
</fieldset>
</div>
<div class="sheet-notes sheet-block">