Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Sheet CSS question: is there a better way to handle this?

1583216003
vÍnce
Pro
Sheet Author
Looking to see if anyone can suggest a more efficient/better method for handling this?    I want to use visability:hidden on all span's that are after radio inputs(attr_damage) greater than a given value based on the value of another attribute(attr_strength). Simplified HTML <input class="strength-value" type="hidden" name="attr_strength" value="0" /> <input class="damage" type="radio" name="attr_damage" value="0" checked /><span></span> <input class="damage" type="radio" name="attr_damage" value="1" /><span></span> <input class="damage" type="radio" name="attr_damage" value="2" /><span></span> <input class="damage" type="radio" name="attr_damage" value="3" /><span></span> <input class="damage" type="radio" name="attr_damage" value="4" /><span></span> <input class="damage" type="radio" name="attr_damage" value="5" /><span></span> <input class="damage" type="radio" name="attr_damage" value="6" /><span></span> Simplified CSS .sheet-strength[value="0"] ~ .sheet-skull[value="1"] + span::before, .sheet-strength[value="0"] ~ .sheet-skull[value="2"] + span::before, .sheet-strength[value="0"] ~ .sheet-skull[value="3"] + span::before, .sheet-strength[value="0"] ~ .sheet-skull[value="4"] + span::before, .sheet-strength[value="0"] ~ .sheet-skull[value="5"] + span::before, .sheet-strength[value="0"] ~ .sheet-skull[value="6"] + span::before, .sheet-strength[value="1"] ~ .sheet-skull[value="2"] + span::before, .sheet-strength[value="1"] ~ .sheet-skull[value="3"] + span::before, .sheet-strength[value="1"] ~ .sheet-skull[value="4"] + span::before, .sheet-strength[value="1"] ~ .sheet-skull[value="5"] + span::before, .sheet-strength[value="1"] ~ .sheet-skull[value="6"] + span::before, .sheet-strength[value="2"] ~ .sheet-skull[value="3"] + span::before, .sheet-strength[value="2"] ~ .sheet-skull[value="4"] + span::before, .sheet-strength[value="2"] ~ .sheet-skull[value="5"] + span::before, .sheet-strength[value="2"] ~ .sheet-skull[value="6"] + span::before, .sheet-strength[value="3"] ~ .sheet-skull[value="4"] + span::before, .sheet-strength[value="3"] ~ .sheet-skull[value="5"] + span::before, .sheet-strength[value="3"] ~ .sheet-skull[value="6"] + span::before, .sheet-strength[value="4"] ~ .sheet-skull[value="5"] + span::before, .sheet-strength[value="4"] ~ .sheet-skull[value="6"] + span::before, .sheet-strength[value="5"] ~ .sheet-skull[value="6"] + span::before { visibility: hidden; } The code above basically uses the value of @{strength} and compares it to every value of @{damage} and only the values that are greater than @{strength} get the visability:hidden  style.  Great, but that's quite a bit of code.  I'm doing this for multiple character attributes and even have one radio that goes from 0-48!  Using the above CSS, it ends up being over 1000 lines of CSS just to handle the 48 values...  So, can anyone see a better option for handling this?  Thanks
1583216955
GiGs
Pro
Sheet Author
API Scripter
I'm inclined to think you could use a sheet worker to create an intermediate attribute, a product of the comparison, and use that to determine what should be hidden.  But I'm not fully following what you're doing here. Can you describe what these sections are, and how they work, to give help us visualise what this is for and help us come up with shortcuts?
1583218033

Edited 1583218363
vÍnce
Pro
Sheet Author
On the Forbidden lands sheet I use damage skulls to indicate damage to a given attribute.  I used to show all 6 skulls (radio + spans) since attributes cannot be greater than 6.  I want to hide or dim the non significant skulls to help serve as a visual cue of the max value.  My code above does this, and isn't too bad for the four attributes up to value="6", but monster strength is used as HP is up to value="48"...  Makes for a huge amount of code.  That said, it doesn't seem to impact the performance of the sheet, but I would like to streamline the css if possible. :-) Monster's strength
1583218824

Edited 1583218930
vÍnce
Pro
Sheet Author
For fun, here's the css that handles the 4 main attributes and monster strength. (class names are different and I'm currently using opacity instead of hidden as compared to my my simple example above) 1200+ lines <a href="https://gist.github.com/vince-roll20/ca81709d53fcbfc1ca9a4b382b18e899" rel="nofollow">https://gist.github.com/vince-roll20/ca81709d53fcbfc1ca9a4b382b18e899</a>
1583219275
GiGs
Pro
Sheet Author
API Scripter
This is surprisingly tricky. One way would be to create a hidden input for each skull, and have a sheet worker populate its values: giving it 0 if its meant to be visible, and 1 if your hidden visibility setting is to be applied.&nbsp; Then give each skull a unique class, in addition to the sheet-class, like so for empathy class="skull empathy-0" class="skull empathy-1" class="skull empathy-2" class="skull empathy-3" etc. Then you can use one CSS comparison per skull, to check the calculated value is 0 or 1, and hide as appropriate.
1583219831
vÍnce
Pro
Sheet Author
Hmm add 91 hidden attributes vs 1200 lines of css.&nbsp; I wonder which would have a bigger impact on a sheet's performance?
1583244771
Caden
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Do yourself a favor and switch to using pug/scss. Then you can just write a loop to handle it. Try a selector like&nbsp; : nth-of-type ( 1 n+1) rather than each individual number. For Mutant Year Zero which was written based on your Forbidden lands sheet I did something like this: input[name="attr_rot_permenant"][value="0"] ~ input:nth-of-type(1n+1) + span, input[name="attr_rot_permenant"][value="1"] ~ input:nth-of-type(1n+4) + span, input[name="attr_rot_permenant"][value="2"] ~ input:nth-of-type(1n+5) + span, input[name="attr_rot_permenant"][value="3"] ~ input:nth-of-type(1n+6) + span, input[name="attr_rot_permenant"][value="4"] ~ input:nth-of-type(1n+7) + span, input[name="attr_rot_permenant"][value="5"] ~ input:nth-of-type(1n+8) + span, input[name="attr_rot_permenant"][value="6"] ~ input:nth-of-type(1n+9) + span, input[name="attr_rot_permenant"][value="7"] ~ input:nth-of-type(1n+10) + span, input[name="attr_rot_permenant"][value="8"] ~ input:nth-of-type(1n+11) + span, input[name="attr_rot_permenant"][value="9"] ~ input:nth-of-type(1n+12) + span, input[name="attr_rot_permenant"][value="10"] ~ input:nth-of-type(1n+13) + span { &nbsp; content: ""; }
1583249912

Edited 1583252829
vÍnce
Pro
Sheet Author
I found some examples of nth of child, but couldn't wrap my head around getting it to work for this.&nbsp; I'll try again using your example. Thanks Cassie
1583252697
Caden
Forum Champion
Sheet Author
API Scripter
Compendium Curator
I typically stick with nth-of-type rather than nth child. :)
1583252841

Edited 1583256425
vÍnce
Pro
Sheet Author
nth of type,&nbsp; oops. pug/sass can only be used locally correct?&nbsp; You still need to use pure css for roll20?
1583253830
Caden
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Yep. It is easy enough to just write in Pug &amp; SCSS then compile the css &amp; html to the main folder. So it's not even a noticeable step. Pug in particular is well worth it. I dropped my sheet creation time from about 80 hours down to 20-40.
1583256494
vÍnce
Pro
Sheet Author
I love pugs. ;-)
1583303806

Edited 1611119169
vÍnce
Pro
Sheet Author
Just reporting back... I used nth-of-type(n) which cut down the amount of code needed substantially!!&nbsp; Can't say I fully grasp how the&nbsp; formula &nbsp;is constructed (planning to study the linked tutorial when I get a sec...), but I was able to make it work with a little fiddling.&nbsp; Thanks for the help. this; input[name="attr_strength"][value="0"] ~ input.sheet-skull:nth-of-type(1n+3) + span::before, input[name="attr_strength"][value="1"] ~ input.sheet-skull:nth-of-type(1n+4) + span::before, input[name="attr_strength"][value="2"] ~ input.sheet-skull:nth-of-type(1n+5) + span::before, input[name="attr_strength"][value="3"] ~ input.sheet-skull:nth-of-type(1n+6) + span::before, input[name="attr_strength"][value="4"] ~ input.sheet-skull:nth-of-type(1n+7) + span::before, input[name="attr_strength"][value="5"] ~ input.sheet-skull:nth-of-type(1n+8) + span::before, input[name="attr_strength"][value="6"] ~ input.sheet-skull:nth-of-type(1n+9) + span::before { opacity: .25; } replaced this; .sheet-strength[value="0"] ~ .sheet-skull[value="1"] + span::before, .sheet-strength[value="0"] ~ .sheet-skull[value="2"] + span::before, .sheet-strength[value="0"] ~ .sheet-skull[value="3"] + span::before, .sheet-strength[value="0"] ~ .sheet-skull[value="4"] + span::before, .sheet-strength[value="0"] ~ .sheet-skull[value="5"] + span::before, .sheet-strength[value="0"] ~ .sheet-skull[value="6"] + span::before, .sheet-strength[value="1"] ~ .sheet-skull[value="2"] + span::before, .sheet-strength[value="1"] ~ .sheet-skull[value="3"] + span::before, .sheet-strength[value="1"] ~ .sheet-skull[value="4"] + span::before, .sheet-strength[value="1"] ~ .sheet-skull[value="5"] + span::before, .sheet-strength[value="1"] ~ .sheet-skull[value="6"] + span::before, .sheet-strength[value="2"] ~ .sheet-skull[value="3"] + span::before, .sheet-strength[value="2"] ~ .sheet-skull[value="4"] + span::before, .sheet-strength[value="2"] ~ .sheet-skull[value="5"] + span::before, .sheet-strength[value="2"] ~ .sheet-skull[value="6"] + span::before, .sheet-strength[value="3"] ~ .sheet-skull[value="4"] + span::before, .sheet-strength[value="3"] ~ .sheet-skull[value="5"] + span::before, .sheet-strength[value="3"] ~ .sheet-skull[value="6"] + span::before, .sheet-strength[value="4"] ~ .sheet-skull[value="5"] + span::before, .sheet-strength[value="4"] ~ .sheet-skull[value="6"] + span::before, .sheet-strength[value="5"] ~ .sheet-skull[value="6"] + span::before { opacity: .25; } really made a SUBSTANTIAL difference when doing the code up to value="48".