Character Vault
Any Concept / Any System
Compendium
Your System Come To Life
Roll20 for Android
Streamlined for your Tablet
Roll20 for iPad
Streamlined for your Tablet

Personal tools

Difference between revisions of "Character Sheet Enhancement"

From Roll20 Wiki

Jump to: navigation, search
m (Popup example)
m (update live)
Line 2: Line 2:
 
{{main|Building Character Sheets}}
 
{{main|Building Character Sheets}}
  
'''Character Sheet Enhancement''' is an upcoming update to character sheet and how they are made, enabling many new features, and removing some existing restrictions sheet creators have had to deal with. On Jan 29th 2021 it was made avaiable on the [[Dev Server]] for testing.
+
{{notebox| Update is live as of ''March 9th 2021''', see '''{{forum|permalink/9883156/ Character Sheet Enhancements!}}''' for more info }}
  
Roll20 have said there will eventually be documenation how the new things will work.
+
'''Character Sheet Enhancement''' is an update to character sheets and how they are made, enabling many new features, and removing some existing restrictions sheet creators have had to deal with.  
  
* Read the announcement for the full details: {{forum|post/9750841/now-on-dev-server-character-sheet-enhancements Now on Dev Server: Character Sheet Enhancements!}} - Char sheet subforum
+
 
* {{forum|permalink/9750846/ Pro subforum tread}}
+
On Jan 29th 2021, it was made available on the [[Dev Server]] for testing.
 +
 
 +
Roll20 have said there will eventually be documentation how the new things will work.
 +
 
 +
* '''{{forum|permalink/9883156/ Character Sheet Enhancements!}}''' (March 9th Release)
 +
* Dev Server Testing details (Jan 29th): {{forum|post/9750841/now-on-dev-server-character-sheet-enhancements Now on Dev Server: Character Sheet Enhancements!}} - Char sheet subforum
 +
* {{forum|permalink/9750846/ Dev Server Talk}} - Pro subforum tread  
  
  
 
==Features==
 
==Features==
A summary of what updates the system will have
+
A summary of what updates the sheet system will have.
  
 
* HTML updates:
 
* HTML updates:
Line 27: Line 33:
  
 
==Examples==
 
==Examples==
collection of examples & usercases of some features. Please expand with code or links to examples/documentation.
+
{{stub}}
 
+
Collection of examples & usercases of some features. Please expand with code or links to examples/documentation.
  
 
===Datalist===
 
===Datalist===

Revision as of 20:26, 9 March 2021

Main Page: Building Character Sheets


Character Sheet Enhancement is an update to character sheets and how they are made, enabling many new features, and removing some existing restrictions sheet creators have had to deal with.


On Jan 29th 2021, it was made available on the Dev Server for testing.

Roll20 have said there will eventually be documentation how the new things will work.


Contents

Features

A summary of what updates the sheet system will have.

  • HTML updates:
    • Accessibility enhancements: ARIA and semantic HTML support
    • No pre-pending of “sheet-” to classes
    • Enable use of #id in HTML elements
    • Allowing the usage of HTML datalists – details
    • Allowing the usage of HTML <details> and <summary>-elements – details
  • The CSS sanitizer has been removed, which now allows for:
    • Media queries that allow responsive design
    • Sheet authors can now use the print media query to style their character sheet for printing from the popout window – details
    • Support for CSS Animations – details
  • Integrated macro bar for character quick attacks, including pop out windows
  • Character Sheet/Stat Block is the default for opening a PC/NPC This is being reverted until we have more research regarding implementation.

Examples


Collection of examples & usercases of some features. Please expand with code or links to examples/documentation.

Datalist

https://app.roll20.net/forum/post/9624869/html5-datalist-for-character-sheets

"Datalists are a helpful tool for sheet authors to guide players toward filling out input-fields. Datalists combines the precision of a dropdown-field with the flexibility of an input-field." -Peter B.

<input type="text" list="abilityScores" name="attr_abilityScore">
<datalist id="abilityScores">
    <option value="@{strength}">Strength</option>
    <option value="@{dexterity}">Dexterity</option>
    <option value="@{constitution}">Constitution</option>
    <option value="@{intelligence}">Intelligence</option>
    <option value="@{wisdom}">Wisdom</option>
    <option value="@{charisma}">Charisma</option>
</datalist>

<details>

A more simple way to create a collapsible section on a sheet than the old CSS tricks we have.

You have a <details> where everything is inside, and then the <summary>-element inside it determine what is shown when it's collapsed.

<details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

Popup

code snippet by Roll20 Dev exemplifying how popups can be implemented on sheets.

https://codepen.io/imprakash/pen/GgNMXO