search

SOBotics / Higgs

A generic dashboard for viewing and providing feedback to SOBotics bots.
GNU General Public License v3.0
4 stars 0 forks source link

Display issues on mobile devices #18

Closed Filnor closed 6 years ago

Filnor commented 6 years ago

I noticed some issues while displaying Higgs on my phone (Samsung Galaxy S7, running Android 7.0, with Chrome 64.0.3282.137). The first thing is the footer, which overflows the color of the <div> block it should be in:

screenshot_20180305-103321

On the 404 page, the xkcd image also overflows the page width and doesn't resize responsively:

screenshot_20180305-091308

rjrudman commented 6 years ago

Yeah, I noticed this too. I'll take a look at it, but if anyone else is a bootstrap guru, I'd be happy for them to give it a crack

rjrudman commented 6 years ago

Also, the dropdown menu overflows the header

Papershine commented 6 years ago

Err this looks just weird...

1f33f744-6b88-4a74-9222-a5b90e9cf502

rjrudman commented 6 years ago

@paper1111 Yeah, I was following a bootstrap4 tutorial for footers, but it appears to be completely broken when scrolling, and particularly for multi-line footers.

Filnor commented 6 years ago

@rjrudman Is the Bootstrap 4 tutorial outdated? The first productive version was released on Jan 18th 2018.

rjrudman commented 6 years ago

@pbdevch BS4 should be the latest. I likely misunderstood how it worked and borked it somewhere

Filnor commented 6 years ago

@rjrudman Ok. I just wanted to make that sure because I had some screwups with the Alpha versions back in 2016.

Filnor commented 6 years ago

I've tested just a little bit with the CSS as the footer also appears to be borked on the Report site. I didn't look into the actual source code, but at least in Chrome's dev tools the issue can be fixed (in both mobile and desktop) by this CSS:

.footer[_ngcontent-c0] {
    position: relative; /* Was "absolute" before */
    bottom: 0;
    width: 100%;
    /* height: 60px; * /* Removing/commenting out the height setting makes the background to go with the text, no matter how long it is */
    line-height: 60px;
    background-color: #f7f7f7;
}

@rjrudman Let me know if that helps, maybe I can throw in PR.

rjrudman commented 6 years ago

I believe it was originally absolute, as I was trying to make it stick to the bottom of the page, when the content isn't very long. The bootstrap tutorial works fine; and despite me copy & pasting it all, I couldn't get it to work.

This makes things a lot nicer, and usable on mobile now. Thanks!

If you'd like to make a pull request, the file you'll need to edit is here:

https://github.com/SOBotics/Higgs/blob/master/Web/src/app/app.component.scss#L4

rjrudman commented 6 years ago

Also, while you're there, could you add the following to .footer?:

line-height: 30px;
padding-top: 5px;
padding-bottom: 5px;