League of Extraordinary FoundryVTT Developers•4y ago

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 :(

107 Replies

arcanistzed•4y 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.

EthckOP•4y 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?

arcanistzed•4y ago

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

Leo The League Lion•4y ago

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

arcanistzed•4y ago

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

EthckOP•4y ago

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

Leo The League Lion•4y ago

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

EthckOP•4y ago

CSS is not my strong suit lol

EthckOP•4y ago

Do you mean for the text?

EthckOP•4y ago

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

arcanistzed•4y ago

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

EthckOP•4y ago

Even more padding???

arcanistzed•4y ago

Just around this part, yes

EthckOP•4y ago

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

arcanistzed•4y ago

Padding is on the inside; margin is on the outside

EthckOP•4y ago

🤦

EthckOP•4y ago

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

arcanistzed•4y 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

EthckOP•4y 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

arcanistzed•4y 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

EthckOP•4y 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•4y ago

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

EthckOP•4y 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•4y ago

I meant something like this

EthckOP•4y ago

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

Leo The League Lion•4y ago

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

Clemente•4y ago

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

EthckOP•4y ago

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

EthckOP•4y ago

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

Clemente•4y 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)

EthckOP•4y 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•4y ago

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

arcanistzed•4y ago

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

EthckOP•4y ago

Turns out details/summary makes that trivial...

EthckOP•4y ago

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

Unknown User•4y ago

Message Not Public

EthckOP•4y 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•4y ago

Message Not Public

EthckOP•4y ago

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

Unknown User•4y ago

Message Not Public

EthckOP•4y ago

Can it do Chrome & Firefox?

Unknown User•4y ago

Message Not Public

EthckOP•4y ago

Awesome!

EthckOP•4y ago

And Voila!

EthckOP•4y ago

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

Leo The League Lion•4y ago

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

Unknown User•4y ago

Message Not Public

EthckOP•4y ago

Wait, the right side or the left side?

Unknown User•4y ago

Message Not Public

EthckOP•4y ago

Okay, just making sure lol

Unknown User•4y ago

Message Not Public

EthckOP•4y 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•4y ago

Message Not Public

EthckOP•4y ago

With the collapsing?

Unknown User•4y ago

Message Not Public

EthckOP•4y ago

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

Unknown User•4y ago

Message Not Public

EthckOP•4y ago

Close, but not what I intended lol

EthckOP•4y ago

Unknown User•4y ago

Message Not Public

EthckOP•4y ago

Unknown User•4y ago

Message Not Public

EthckOP•4y ago

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

Unknown User•4y ago

Message Not Public

EthckOP•4y 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•4y ago

Message Not Public

EthckOP•4y ago

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

Unknown User•4y ago

Message Not Public

EthckOP•4y 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•4y ago

Message Not Public

EthckOP•4y ago

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

Unknown User•4y ago

Message Not Public

EthckOP•4y ago

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

Unknown User•4y ago

Message Not Public

EthckOP•4y ago

Unknown User•4y ago

Message Not Public

EthckOP•4y ago

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

Unknown User•4y ago

Message Not Public

EthckOP•4y ago

Oh, found it

Unknown User•4y ago

Message Not Public

EthckOP•4y ago

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

Unknown User•4y ago

Message Not Public

EthckOP•4y 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•4y ago

Message Not Public

EthckOP•4y 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•4y ago

Message Not Public

EthckOP•4y 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•4y ago

Message Not Public

EthckOP•4y ago

I don't understand the black magic

Unknown User•4y ago

Message Not Public

EthckOP•4y ago

And voila!