Latest revision as of 15:01, 6 April 2022

Page Updated:   2022-04-06

This is related to Editing(coding) Character Sheets, which require Pro info to be able to use. Main Page: Building Character Sheets

This article is a stub. You can help the Roll20 Community Wiki by expanding it.

Page on building character sheets to work with the Mobile app. This relies your sheet being adapted to CSE.

@media only screen and (max-width: 480px) {
// css that only affects sheet on mobile. Play around with "max-width" vaule, might differ between phones
}

• Mobile App Beta now available for Pro users!^(Forum)(Pro Forum thread)
• Help for reproducing Roll20 Companion view in browser March 2022

[edit] Character Sheets for Mobile

[edit] General Tips

• Make Roll Buttons & input fields larger
• Using CSS Grid or Flexbox for the normal sheet layout will make it easier to create a resposive/phone-adapted version of the layout.
  • Example: If some stat sections on the normal sheet is arranged in a 2x3 grid, on mobile it could be easy show them in a 1x6 grid, a single column. Can also be a easier first step to adjust
• reduce number of features that requires you to "hover" your mouse over some section. (tooltips are less accessible on mobile)
• On mobile, when you click on a <input type="number"> attribute, it will show you a number keyboard, instead of the normal keyboard, making it quicker to fill in numbers.
• Hiding some advanced sheet features/settings could make the sheet easier to adapt/use on mobile.
  • Add a checkbox somewhere to hide/show the advanced stuff

[edit] Example

link: Detects sheet is viewed on small screen.

@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;
    }
}

[edit] Features

Some roll20 sheet related features need to done slightly differently on mobile, not just adjust visually.

[edit] Custom Fonts

Google Fonts importing using @font-face by Adam .S

Using google fonts on the Mobile app takes a few extra steps. @import doesn't seem to work to add fonts for mobile (yet?). Below is what I found works.

I started with the typical in css tab.

@import url('https://fonts.googleapis.com/css?family=Oswald%7COrbitron%7C&display=swap');

I then pasted the URL from the import into my browser.

https://fonts.googleapis.com/css?family=Oswald%7COrbitron%7C&display=swap

I copied the code on the browser page. I removed the Unicode range part.

@font-face {
    font-family: 'Orbitron';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/orbitron/v17/yMJMMIlzdpvBhQQL_SC3X9yhF25-T1nyGy6BoWgz.woff2') format('woff2');
}

Then paste that into the top of the CSS tab on the custom sheet. If your page has multiple fonts the process will have to be repeated for each one.

[edit] Roll Templates

You can make rolls appear on the mobile app, but many normal roll templates don't seem to work as-is, giving a "Error formatting roll"-message, and the roll is only visible in the q Text Chat, not mobile.

CortexPrime-Hammerheads & CortexPrime-Tales-of-Xadia-Playtest have managed to make roll results appear on mobile.

[edit] Avatar on Sheet

• You can show the character's avatar on the mobile sheet with <img name="attr_character_avatar">
  source

[edit] Orientation

You can use @media (orientation: landscape)/ @media (orientation: landscape) to detect phone orientation, so mobile sheet can be adapted to look good in both orientations.

• @media orientation

[edit] Existing Mobile-adapted Sheets

List of Character Sheets that have at least partially been adapted to the mobile app

• D&D 5E by Roll20 - Roll20 re-did the mobile sheet from scratch, slowly adding back features on the main sheet
• CortexPrime-Tales-of-Xadia-Playtest - sheet contains adaptations for mobile layout, and have managed to make the rolls results display on mobile.
  • CortexPrime-Hammerheads very similar to other CortexPrime sheet, but rolls aren't shown on mobile
• PokemonTabletopAdventures_v3 Some issues with saving and displaying data, but mostly works properly. Rolls display on the phone, potentially as a consequence of the roll templates being used. March 2022
• https://github.com/Roll20/roll20-character-sheets/pull/10427 Harnmaster3 - April 2022
• CyberpunkRed standalone roll20 sheet by Adam S., looks solid on phone, has working google fonts on mobile, (2021)
• MythicD6 The Attributes & Skill sections have been adjusted to be less wide to avoid sideways scrolling, but the mobile implementation still has lot to adjust. (2021)

[edit] iOS

As the iOS Roll20 mobile app is based on Safari(like all iOS web/browser-based are), it means some character sheets will look different on iOS vs. android phones.

Examples & fixes:

[edit] Related Pages

• CSE
• BCS/Bugs - known bugs & issues with char sheet development
• Mobile - the app will eventually fully support mobile versions for any sheets, currently it's reliable only for the D&D 5E by Roll20 sheet.

[edit] Discussions

• https://app.roll20.net/forum/post/10789586/harnmaster3-more-user-feedback-requested-mobile-view