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 (Features)
(mobile adaptation example)
Line 143: Line 143:
 
====Mobile====
 
====Mobile====
 
Responsive design leads way to more easily adapting/optimizing Char Sheet for eventual use with the new [[Mobile]]-app, which is in Open Beta(as of 18th March 2021).
 
Responsive design leads way to more easily adapting/optimizing Char Sheet for eventual use with the new [[Mobile]]-app, which is in Open Beta(as of 18th March 2021).
 +
 +
* {{repo|Roll20/roll20-character-sheets/tree/master/CortexPrime-Hammerheads CortexPrime-Hammerheads sourcecode}} - sheet contains adaptations for mobile layout that have been tested to work with [[CSE]] at some point.
 +
 +
{{repo|Roll20/roll20-character-sheets/blob/93d8a80ff162cd10be8e8fbc9d8799149f7550f5/CortexPrime-Hammerheads/CortexPrime-Hammerhead.css#L481 link}}:
 +
<pre pre data-language="css">
 +
@media only screen and (max-width: 480px) {
 +
    .sheet-wrapper {
 +
        min-width: 320px;
 +
    }
 +
       
 +
    .sheet-traits4 {
 +
        display: grid;
 +
        grid-template-columns: repeat(2, 1fr );
 +
        align-items: start;
 +
    }
 +
 +
    .sheet-traits3 {
 +
        display: grid;
 +
        grid-template-columns: repeat(1, 1fr );
 +
        align-items: start;
 +
    }
 +
 +
    .sheet-traits2 {
 +
        display: grid;
 +
        grid-template-columns: repeat(1, 1fr );
 +
        align-items: start;
 +
    }
 +
 +
    .sheet-traits2 .sheet-traits2 {
 +
        display: grid;
 +
        grid-template-columns: repeat(2, 1fr );
 +
        align-items: start;
 +
    }
 +
 +
    .sheet-traits1 {
 +
        display: grid;
 +
        grid-template-columns: repeat(1, 1fr );
 +
        align-items: start;
 +
    }
 +
 +
/* halo layout */
 +
 +
    .sheet-editPane {
 +
        width: 80%;
 +
    }
 +
   
 +
    input[name="attr_Portrait"][value="PC0"]  {
 +
        border: 1px solid #cccc00;
 +
        text-align: center;
 +
        background-color: rgba(255, 128, 0, 0.05);
 +
    }
 +
 +
    h1.sheet-hide {
 +
        visibility: visible !important;
 +
        display: block;
 +
    }
 +
 +
    input[name="attr_Portrait"]:not([value="PC0"]) ~ .sheet-physical {
 +
        position: static;
 +
        border: 1px dashed #ffcb2b;
 +
        border-top: 6px solid #ffcb2b;
 +
        padding: 5px;
 +
    }
 +
 +
    input[name="attr_Portrait"]:not([value="PC0"]) ~ .sheet-mental {
 +
        position: static;
 +
        border: 1px dashed #ffcb2b;
 +
        border-top: 6px solid #ffcb2b;
 +
        padding: 5px;
 +
    }
 +
 +
    input[name="attr_Portrait"]:not([value="PC0"]) ~ .sheet-social {
 +
        position: static;
 +
        border: 1px dashed #ffcb2b;
 +
        border-top: 6px solid #ffcb2b;
 +
        padding: 5px;
 +
    }
 +
   
 +
    input[name="attr_Portrait"]:not([value="PC0"]) + .sheet-action {
 +
        display: block;
 +
        visibility: visible;
 +
    }
 +
   
 +
    .charsheet button[type="roll"].sheet-blank-roll-button + span {
 +
        display: block !important;
 +
        visibility: visible !important;
 +
    }
 +
}
 +
</pre>
  
 
===Popup===
 
===Popup===

Revision as of 17:33, 23 March 2021

Main Page: Building Character Sheets


Character Sheet Enhancement (or CSE for short) 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.


It was available on the Dev Server for testing During February, and fully released on March 9th 2021, then partially(?) rolled back little later due to some problems.

Contents

Info


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 datalistssuggestion thread(Forum)
    • Allowing the usage of HTML <details> and <summary>-elements – suggestion thread(Forum) (part of semantic HTML support)
  • The CSS sanitizer has been removed, which now allows for:
  • 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.

How to update sheet to new


CSE Examples


Collection of examples, usercases or links to info of some of the new features. Please expand with code or links to examples/documentation.

ID

Examples of using the HTML global element #id.

id CSS selector

Use an id to select one unique element. An id name cannot start with a number.

//html
<input type="text" id="character-name" name="attr_character_name" value="" placeholder="Character Name" />

//css
#character-name {
  text-align: center;
  color: red;
}

id Clickable Label text

Create "clickable" label text by using a linked label and input. Linked labels could replace various methods that use hidden checkboxes to simulate clickable text/buttons on a sheet.

//html
<input id="attackMod1" name="attr_attackMod1" type="checkbox" value="1" class="hidden">
<label for="attackMod1" class="link">Apply Modifier</label>
//css
.sheet-hidden {
    display:none;
}
label.link:hover {
  cursor: help;
  text-decoration: underline;
  color: red;
}
input[type="checkbox"]:checked + label.link {
  color: red;
}

id Sheet Anchors

Create links to jump to anchored elements of a sheet. Could be used as a "Navigational Menu/Table of Contents", or simply as clickable text that can quickly move to another section of a sheet.

//html
<h2>Sheet Anchor example</h2>
<h3 id="menu">Menu</h3>
<ul>
    <li><a href="#Attacks">Attacks</a></li>
    <li><a href="#Skills">Skills</a></li>
    <li><a href="#Spells">Spells</a></li>
</ul>
<h3 id="Attacks">Attacks</h3>
<p>"Lorem ipsum"</p>
<h3 id="Skills">Skills</h3>
<p>"Lorem ipsum"</p>
<h3 id="Spells">Spells</h3>
<p>"Lorem ipsum"</p>
<hr>
<p><a href="#menu">Menu</a></p>

Datalist

suggestion thread(Forum)

"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>

Accessability

Accessibility enhancements: ARIA and semantic HTML support

Responsive Design

Aimed at making adjustment for mobile

Mobile

Responsive design leads way to more easily adapting/optimizing Char Sheet for eventual use with the new Mobile-app, which is in Open Beta(as of 18th March 2021).

link:

@media only screen and (max-width: 480px) {
    .sheet-wrapper {
        min-width: 320px;
    }
        
    .sheet-traits4 {
        display: grid;
        grid-template-columns: repeat(2, 1fr );
        align-items: start;
    }

    .sheet-traits3 {
        display: grid;
        grid-template-columns: repeat(1, 1fr );
        align-items: start;
    }

    .sheet-traits2 {
        display: grid;
        grid-template-columns: repeat(1, 1fr );
        align-items: start;
    }

    .sheet-traits2 .sheet-traits2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr );
        align-items: start;
    }

    .sheet-traits1 {
        display: grid;
        grid-template-columns: repeat(1, 1fr );
        align-items: start;
    }

/* halo layout */

    .sheet-editPane {
         width: 80%;
     }
    
    input[name="attr_Portrait"][value="PC0"]  {
        border: 1px solid #cccc00;
        text-align: center;
        background-color: rgba(255, 128, 0, 0.05);
    }

    h1.sheet-hide {
        visibility: visible !important;
        display: block;
    }

    input[name="attr_Portrait"]:not([value="PC0"]) ~ .sheet-physical {
        position: static;
        border: 1px dashed #ffcb2b;
        border-top: 6px solid #ffcb2b;
        padding: 5px;
    }

    input[name="attr_Portrait"]:not([value="PC0"]) ~ .sheet-mental {
        position: static;
        border: 1px dashed #ffcb2b;
        border-top: 6px solid #ffcb2b;
        padding: 5px;
    }

    input[name="attr_Portrait"]:not([value="PC0"]) ~ .sheet-social {
        position: static;
        border: 1px dashed #ffcb2b;
        border-top: 6px solid #ffcb2b;
        padding: 5px;
    }
    
    input[name="attr_Portrait"]:not([value="PC0"]) + .sheet-action {
        display: block;
        visibility: visible;
    }
    
    .charsheet button[type="roll"].sheet-blank-roll-button + span {
        display: block !important;
        visibility: visible !important;
    }
}

Popup

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

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

Print-Friendly

suggestion thread(Forum) Guide - How to Create Printer-friendly Pages with CSS

See Also