League of Extraordinary FoundryVTT DevelopersEthck

Overlay hiding stars

Hey y'all! I've run into a general CSS/design problem that I'm kinda stumped on solving. In the image the red circles are highlighting the star(s) in the constellation that are overlaid by my absolute positioned elements and therefore are uninteractable without stretching to some insane dimensions. Any suggestions? I've thought about maybe adding a margin to the image but that just makes the scrolling even worse :(

Daniel Thorp•1,007d ago

Maybe add a hover zone near the top that makes the overlay appear temporarily? It could fade out after a few seconds if not interacted with.

Ethck•1,007d ago

So it's not very intuitive but the "Boons spent on Other" line also has a hover listener. Any idea if you can have nested hovers like that? Additionally, I just thought about what if there was a button that collapsed/expanded it? Would that work?

Daniel Thorp•1,007d ago

Yeah, I think you can Yes, I think it would also work vote

LTL

Leo The League Lion•1,007d ago

@arcanistzed gave LeaguePoints™ to @ethck (#19 • 90)

Daniel Thorp•1,007d ago

Unrelated, but I think you should add some padding to the left part of the overlay

Ethck•1,007d ago

Hmm, well those are certainly some ideas to work with then. Thanks @arcanistzed !

LTL

Leo The League Lion•1,007d ago

@ethck gave LeaguePoints™ to @arcanistzed (#16 • 127)

Ethck•1,007d ago

CSS is not my strong suit lol

Ethck•1,007d ago

Do you mean for the text?

Ethck•1,007d ago

here's a better picture of that It's inside of a tidy5e sheet

Daniel Thorp•1,007d ago

I mean the entire box which has all of those labels and input fields

Ethck•1,007d ago

Even more padding???

Daniel Thorp•1,007d ago

Just around this part, yes

Ethck•1,007d ago

Wait, padding for the inside of the box or on the outside?

Daniel Thorp•1,007d ago

Padding is on the inside; margin is on the outside

Ethck•1,007d ago

🤦

Ethck•1,007d ago

With 5px? Is that good or do you recommend more?

Daniel Thorp•1,007d ago

It's good like that, but you should probably avoid using fixed values. I usually use em, vh, vw, or just a percentage. Try 1% for padding, maybe? It lets it be more dynamic when you use it on different sized screens or when resizing the window Keep in mind that I'm also not a CSS expert, having just started development in general

Ethck•1,007d ago

So it looks like either way I'm going I need to make a collapsible field for this. Any advice on making things collapse? Most collapsing I've done was with summary and details lol

Daniel Thorp•1,007d ago

Yeah, that works well. Maybe try something like this, if you want a simple alternative https://github.com/arcanistzed/toggle-banner/blob/main/scripts/module.js The scaling and transition in the CSS make it much more dynamic https://github.com/arcanistzed/toggle-banner/blob/main/styles/module.css

Ethck•1,007d ago

Seems simple enough. Your "commands" if you will are based on the logo, what would you recommend for my use case? Add small button to display it?

Clemente•1,007d ago

You can't add that info on its own panel outside the image frame?

Ethck•1,007d ago

I'm not entirely sure what you mean... I'll post a more full picture for reference though (ignore the health value lol)

Clemente•1,007d ago

I meant something like this

Ethck•1,007d ago

Ooooh, I like that... Let me see if I can pull it off easily. Oh man, that's so much easier! Thanks @mclemente !

LTL

Leo The League Lion•1,007d ago

@ethck gave LeaguePoints™ to @mclemente (#48 • 32)

Clemente•1,007d ago

btw, that's the Constellation idea that's been on the Trello board, right? are you using Cytoscape by any chance?

Ethck•1,007d ago

Recommendations? Definitely need to change the colors but I'm still thinking it might be cool to do the collapsing section.

Ethck•1,007d ago

No, this was actually for a commission. No clue what Cytoscape is.

Clemente•1,007d ago

Cytoscape is lib for graphs like that (https://js.cytoscape.org/), but if you managed to do it without it, you're probably fine lol it's just that I found it being used on Foundry on Moerill's Mindmap module (RIP)

Ethck•1,007d ago

Hmm, flexrow isn't what I was looking for apparently. I want the big section to be left aligned but the right section (level, cost) to be aligned to the right, just like in the original. Any ideas? This makes me wish I had found it sooner... I've done crude approximations based on percentages...

Clemente•1,007d ago

does <details><summary>Info</summary> CONTENT HERE </details> work on that sheet?

Daniel Thorp•1,007d ago

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container align-items: end;

Ethck•1,007d ago

Turns out details/summary makes that trivial...

Ethck•1,007d ago

changed the color to make it visible while messing with it, but align-items: end gets closer.

Unknown User•1,007d ago

Ethck•1,007d ago

So the big box on the left should be on the left (basically where it is) and the Level/Cost should be on the right and it should be tiny (like 15% width)

Unknown User•1,007d ago

Ethck•1,007d ago

Man, I wish I could do CSS while still waking up 🤣

Unknown User•1,007d ago

Ethck•1,007d ago

Can it do Chrome & Firefox?

Unknown User•1,007d ago

Ethck•1,007d ago

Awesome!

Ethck•1,007d ago

And Voila!

Ethck•1,007d ago

Thanks tons @nekrodarkmoon ! Now I just need to find color choices...

LTL

Leo The League Lion•1,007d ago

@ethck gave LeaguePoints™ to @nekrodarkmoon (#22 • 75)

Unknown User•1,007d ago

Ethck•1,007d ago

Wait, the right side or the left side?

Unknown User•1,007d ago

Ethck•1,007d ago

Okay, just making sure lol

Unknown User•1,007d ago

Ethck•1,007d ago

You never really know with the dark magic that is CSS... I swear I've built data pipelines for billions of records in less time than it took me to solve this lol

Unknown User•1,007d ago

Ethck•1,007d ago

With the collapsing?

Unknown User•1,007d ago

Ethck•1,007d ago

I had it that way originally, but no collapsing :(

Unknown User•1,007d ago

Ethck•1,007d ago

Close, but not what I intended lol

Ethck•1,007d ago

Unknown User•1,007d ago

Ethck•1,007d ago

Unknown User•1,007d ago

Ethck•1,007d ago

I semi reverted back to position absolute and got this :) Yeah, idk why that happened 🤷

Unknown User•1,007d ago

Ethck•1,007d ago

So, here's a bit of a code dump but maybe you can help me figure out that last row...

.astrology .boon-tracker {
    background-color:rgba(225, 224, 214, .9);
    z-index: 10;
    position: absolute;
}

.astrology .boon-tracker.left {
    width: 40%;
    top: 35%;
    left: 5%;
    padding: 1%;
}

.astrology .boon-tracker.right {
    top: 35%;
    right: 5%;
    margin-left: auto;
    font-size: 20px;
    padding: 5px;
    width: 15%;
}

.astrology .boon-tracker.left div input {
    flex-basis: 20%;
    flex-grow: 0;
    background-color:rgba(223, 221, 213, 1);
    box-shadow: 0 0 0 1px var(--primary-accent) inset;
    padding:5px;
}

.astrology .boon-tracker {
    background-color:rgba(225, 224, 214, .9);
    z-index: 10;
    position: absolute;
}

.astrology .boon-tracker.left {
    width: 40%;
    top: 35%;
    left: 5%;
    padding: 1%;
}

.astrology .boon-tracker.right {
    top: 35%;
    right: 5%;
    margin-left: auto;
    font-size: 20px;
    padding: 5px;
    width: 15%;
}

.astrology .boon-tracker.left div input {
    flex-basis: 20%;
    flex-grow: 0;
    background-color:rgba(223, 221, 213, 1);
    box-shadow: 0 0 0 1px var(--primary-accent) inset;
    padding:5px;
}

Unknown User•1,007d ago

Ethck•1,007d ago

Man, there's just so much here that I don't know...

Unknown User•1,007d ago

Ethck•1,007d ago

So I've determined it's not because of the row itself, but rather probably the container. Each row is exactly 26px tall.

Unknown User•1,007d ago

Ethck•1,007d ago

oh I'm dumb It's the 1% padding I put in on every side

Unknown User•1,007d ago

Ethck•1,007d ago

It's changing the size of the box it's all in, yes.

Unknown User•1,007d ago

Ethck•1,007d ago

Unknown User•1,007d ago

Ethck•1,007d ago

Honestly I don't even know where that highlight is coming from lol

Unknown User•1,007d ago

Ethck•1,007d ago

Oh, found it

Unknown User•1,007d ago

Ethck•1,007d ago

Oh, and it definitely is because of that For this table specifically?

Unknown User•1,007d ago

Ethck•1,007d ago

It's pretty general except for the fact that I'm forced to use some other classes (that I didn't really need except for some selectors...)

Unknown User•1,007d ago

Ethck•1,007d ago

It's ugly af

<div class="inventory-list astrology-list unlocked items-list" style="overflow-y: visible;">
        <div class="item-list">
            <details>
                <summary>Boon Tracking</summary>
                <div style="width:100%; display: flex;">
                    <div class="boon-tracker left">
                        <div class="flexrow">
                            <span>Boons Earned: </span>
                            <input type="number" id="totalBoons" value="{{aBoonFlags.totalBoons}}"/>
                        </div>
                        <div class="flexrow">
                            <span>Boons Spent on Constellation: </span>
                            <input type="number" id="constellationBoons" value="{{aBoonFlags.constellationBoons}}"/>
                        </div>
                        <div class="flexrow">
                            <span>Boons Spent on Experience: </span>
                            <input type="number" id="experienceBoons" value="{{aBoonFlags.experienceBoons}}"/>
                        </div>
                        <div id="astrology-other" class="flexrow item">
                            <span>Boons Spent on Other: </span>
                            <input type="number" id="otherBoons" value="{{aBoonFlags.otherBoons}}"/>
                            <!-- tidy5e side popout structure -->
                            <div class="info-card" id="astrology-other-card" style="overflow-y: scroll">
                                <p class="info-card-name">{{title}}</p>
                                <textarea id="otherBoonsDesc" style="width:100%; height:100%;">{{aBoonFlags.otherBoonsDesc}}</textarea>
                            </div>
                        </div>
                        <div class="flexrow">
                            <span>Unspent Boons: </span>
                            <input type="number" id="unspentBoons" value="{{aBoonFlags.unspentBoons}}"/>
                        </div>
                    </div>
                    <div class="boon-tracker right">
                        <div class="flexcolumn">
                            <div class="flexrow">
                                <span>Level: </span>
                                <span>{{actorLevelBoons.level}}</span>
                            </div>
                        </div>
                        <div class="flexcolumn">
                            <div class="flexrow">
                                <span>Cost: </span>
                                <span>{{actorLevelBoons.cost}}</span>
                            </div>
                        </div>

                    </div>
                </div>
            </details>
        </div>
    </div>

<div class="inventory-list astrology-list unlocked items-list" style="overflow-y: visible;">
        <div class="item-list">
            <details>
                <summary>Boon Tracking</summary>
                <div style="width:100%; display: flex;">
                    <div class="boon-tracker left">
                        <div class="flexrow">
                            <span>Boons Earned: </span>
                            <input type="number" id="totalBoons" value="{{aBoonFlags.totalBoons}}"/>
                        </div>
                        <div class="flexrow">
                            <span>Boons Spent on Constellation: </span>
                            <input type="number" id="constellationBoons" value="{{aBoonFlags.constellationBoons}}"/>
                        </div>
                        <div class="flexrow">
                            <span>Boons Spent on Experience: </span>
                            <input type="number" id="experienceBoons" value="{{aBoonFlags.experienceBoons}}"/>
                        </div>
                        <div id="astrology-other" class="flexrow item">
                            <span>Boons Spent on Other: </span>
                            <input type="number" id="otherBoons" value="{{aBoonFlags.otherBoons}}"/>
                            <!-- tidy5e side popout structure -->
                            <div class="info-card" id="astrology-other-card" style="overflow-y: scroll">
                                <p class="info-card-name">{{title}}</p>
                                <textarea id="otherBoonsDesc" style="width:100%; height:100%;">{{aBoonFlags.otherBoonsDesc}}</textarea>
                            </div>
                        </div>
                        <div class="flexrow">
                            <span>Unspent Boons: </span>
                            <input type="number" id="unspentBoons" value="{{aBoonFlags.unspentBoons}}"/>
                        </div>
                    </div>
                    <div class="boon-tracker right">
                        <div class="flexcolumn">
                            <div class="flexrow">
                                <span>Level: </span>
                                <span>{{actorLevelBoons.level}}</span>
                            </div>
                        </div>
                        <div class="flexcolumn">
                            <div class="flexrow">
                                <span>Cost: </span>
                                <span>{{actorLevelBoons.cost}}</span>
                            </div>
                        </div>

                    </div>
                </div>
            </details>
        </div>
    </div>

The commission was very specific and wanted me to use tidy5e's popout structure for some of the additional details, and that requires it to have a very nested selector chain :(

Unknown User•1,007d ago

Ethck•1,007d ago

So the issue here is that the "other boons" has the item class... which sets the background and center aligns (via flex!)

Unknown User•1,007d ago

Ethck•1,007d ago

I don't understand the black magic

Unknown User•1,007d ago

Ethck•1,007d ago

And voila!