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 "BCS/Mobile"

From Roll20 Wiki

Jump to: navigation, search
(Character Sheets for Mobile)
(link to mobile cyberpunk red code, minor stuff)
Line 3: Line 3:
 
{{stub}}
 
{{stub}}
  
Page on building [[CS|character sheets]] to work with the [[mobile]] app. This relies your  sheet being adapted to [[CSE]].
+
Page on building [[CS|character sheets]] to work with the [[Mobile]] app. This relies your  sheet being adapted to [[CSE]].
  
 
<pre data-language="css" style="overflow:auto;white-space:pre-wrap;">
 
<pre data-language="css" style="overflow:auto;white-space:pre-wrap;">
Line 10: Line 10:
 
}
 
}
 
</pre>
 
</pre>
 +
* {{forum|post/9912751/mobile-app-beta-now-available-for-pro-users Mobile App Beta now available for Pro users!}}(Pro Forum thread)
 +
* {{forum|permalink/9883156/ Character Sheet Enhancements!}}
 
__TOC__
 
__TOC__
 
=Character Sheets for Mobile=
 
=Character Sheets for Mobile=
Line 109: Line 111:
 
}
 
}
 
</pre>
 
</pre>
 +
 +
=Features=
 +
Some roll20 sheet related features need to done slightly differently on mobile, not just adjust visually.
  
 
==Custom Fonts==
 
==Custom Fonts==
  
'''Google Fonts importing using @font-face'''
+
'''Google Fonts importing using <code>@font-face</code>''' by '''Adam .S'''
Using google fonts on the Mobile app takes a few extra steps. You can not use @import to add fonts. Below is what I found works.
+
 
 +
Using google fonts on the Mobile app takes a few extra steps. <code>@import</code> 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.
 
I started with the typical in css tab.
Line 123: Line 129:
 
<code>https://fonts.googleapis.com/css?family=Oswald|Orbitron|&display=swap</code>
 
<code>https://fonts.googleapis.com/css?family=Oswald|Orbitron|&display=swap</code>
  
I copied the code on the bowser page. I removed the Unicode range part.
+
I copied the code on the browser page. I removed the Unicode range part.
  
<code>@font-face {<br>
+
<pre data-language="css" style="overflow:auto;white-space:pre-wrap;">
font-family: 'Orbitron';<br>
+
@font-face {
font-style: normal;<br>
+
    font-family: 'Orbitron';
font-weight: 400;<br>
+
    font-style: normal;
font-display: swap;<br>
+
    font-weight: 400;
src: url('https://fonts.gstatic.com/s/orbitron/v17/yMJMMIlzdpvBhQQL_SC3X9yhF25-T1nyGy6BoWgz.woff2') format('woff2');}</code>
+
    font-display: swap;
 +
    src: url('https://fonts.gstatic.com/s/orbitron/v17/yMJMMIlzdpvBhQQL_SC3X9yhF25-T1nyGy6BoWgz.woff2') format('woff2');
 +
}</pre>
  
 
Then paste that into the top of the CSS tab on the custom sheet.
 
Then paste that into the top of the CSS tab on the custom sheet.
Line 139: Line 147:
  
 
{{repo|Roll20/roll20-character-sheets/tree/master/CortexPrime-Hammerheads CortexPrime-Hammerheads}} & {{repo|Roll20/roll20-character-sheets/tree/master/CortexPrime-Tales-of-Xadia-Playtest CortexPrime-Tales-of-Xadia-Playtest}} have managed to make roll results appear on mobile.
 
{{repo|Roll20/roll20-character-sheets/tree/master/CortexPrime-Hammerheads CortexPrime-Hammerheads}} & {{repo|Roll20/roll20-character-sheets/tree/master/CortexPrime-Tales-of-Xadia-Playtest CortexPrime-Tales-of-Xadia-Playtest}} have managed to make roll results appear on mobile.
 +
 +
==Avatar on Sheet==
 +
* (experimental) You can show the character's avatar on the mobile sheet with <code><nowiki><img name="attr_character_avatar"></nowiki></code> {{source| https://app.roll20.net/forum/permalink/10077312/}}
  
 
==Existing Mobile-adapted Sheets==
 
==Existing Mobile-adapted Sheets==
Line 144: Line 155:
 
* [[D&D 5E by Roll20]] - Roll20 re-did the mobile sheet from scratch, slowly adding back features on the main sheet
 
* [[D&D 5E by Roll20]] - Roll20 re-did the mobile sheet from scratch, slowly adding back features on the main sheet
 
* {{repo|Roll20/roll20-character-sheets/tree/master/CortexPrime-Hammerheads CortexPrime-Hammerheads}} & {{repo|Roll20/roll20-character-sheets/tree/master/CortexPrime-Tales-of-Xadia-Playtest CortexPrime-Tales-of-Xadia-Playtest}} - sheet contains adaptations for mobile layout, and have made the rolls work.
 
* {{repo|Roll20/roll20-character-sheets/tree/master/CortexPrime-Hammerheads CortexPrime-Hammerheads}} & {{repo|Roll20/roll20-character-sheets/tree/master/CortexPrime-Tales-of-Xadia-Playtest CortexPrime-Tales-of-Xadia-Playtest}} - sheet contains adaptations for mobile layout, and have made the rolls work.
* [[MythicD6]] the Attributes & Skill sections have been adjusted to be less wid, to avoid sideways scrolling, but the implementation still has lot to adjust.
+
* {{repo|Nevar530/Roll20-CyberpunkRed-Character-Sheet CyberpunkRed}} standalone roll20 sheet by '''Adam S.''', looks solid on phone, has working google fonts on mobile,
 +
* [[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.
  
 
=Related Pages=
 
=Related Pages=
Line 153: Line 165:
 
<br>
 
<br>
 
[[Category:Character Sheet Creation]]
 
[[Category:Character Sheet Creation]]
 +
[[Category:Mobile]]

Revision as of 13:41, 2 July 2021

Character Sheet Creation
Getting Started


General


Reference


Tools & Tips


Git/GitHub GitHubLogo.png


Other

Main Page: Building Character Sheets


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
}

Contents

Character Sheets for Mobile

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

Example

GitHubLogo.png:
@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;
    }
}

Features

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

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.

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.

GitHubLogo.png & GitHubLogo.png have managed to make roll results appear on mobile.

Avatar on Sheet

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
  • GitHubLogo.png & GitHubLogo.png - sheet contains adaptations for mobile layout, and have made the rolls work.
  • GitHubLogo.png standalone roll20 sheet by Adam S., looks solid on phone, has working google fonts on mobile,
  • 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.

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.