Plots2: Alert boxes push down tag page image headings

Created on 18 Jul 2020  路  6Comments  路  Source: publiclab/plots2

When on pages like https://publiclab.org/tag/water-quality, if there is an alert box such as logging out, it pushes down the lead image. Haven't captured it but it's in this view:

Screenshot_20200718-075953

Should be easy to make them float!

HTML bug help wanted

All 6 comments

@jywarren I'd be happy to help anyway I can. Do you know anyway to get the alert boxes to pop up so can try recreating the bug?

@jywarren So I found the problem and tried changing the positioning to absolute of the alert as well as the z-index to 1. Here's the result:

Changes

I'm not exactly sure where to find to HTML code for this in the repo to change it, but tell me what you think of the changes.

I think this would be great. I think it ought to apply to the .alerts-container class, but only on this page -- could we do it as inline CSS? Because in other contexts, it seems it ought to display as it had before.

    position: absolute;
    z-index: 999;
    width: 100%;
    left: 0;
    padding: 0 20px;

these seem pretty good!

Would you like to try inserting it in this inline style block?

https://github.com/publiclab/plots2/blob/122e8a73b440bb752f080375aad3f24a02b7c8f9/app/views/tag/show.html.erb#L7-L14

If so, we'd love to see a PR, just be sure to link to it from here! Thank you so much!

And, what I did was, log in from that page, and you get directed back with the alert showing! It then hides itself, but you can use the inspector to delete display:none if you want to try working on it more. Thank you!!!

Hey @jywarren , this looks stale, can I work on this?

I think I have to add .alerts-container in style block and insert the css, right?

Yes, that would be great, thank you @avats-dev -- and if @AntonioFry finds more time I'm happy to help find a new issue for you too!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

keshavsethi picture keshavsethi  路  3Comments

keshavsethi picture keshavsethi  路  3Comments

RuthNjeri picture RuthNjeri  路  3Comments

grvsachdeva picture grvsachdeva  路  3Comments

grvsachdeva picture grvsachdeva  路  3Comments