Wedge

Public area => Bug reports => The Pub => Archived fixes => Topic started by: CerealGuy on December 19th, 2016, 06:33 PM

Title: [CSS] Login looking bad on small screens
Post by: CerealGuy on December 19th, 2016, 06:33 PM
(http://i.imgur.com/Rmk2OJL.png)

Idea is to do something like this, but would need CSS3.
https://jsfiddle.net/1dqm3rgt/ (zoom in/out to see the difference)
Title: Re: [CSS] Login looking bad on small screens
Post by: CerealGuy on January 16th, 2017, 01:23 PM
Fixable without changing any html.
Code: (section.css) [Select]
@if guest
.login
margin: auto
dl
overflow: none
clear: right !important
dt, dd
margin: 0 0 .4em
width: 44% !important
padding: .1em
dt
float: left
clear: both !important
text-align: right
font-weight: 700
dd
width: 54% !important
float: right
text-align: left
padding-left: 0px !important
clear: none !important
p
text-align: center
input
max-width: 100%

@media (max-width: 450px)
.login
dt, dd
float, text-align: left
width: 100% !important

This stuff caused problems:
Code: (section.css) [Select]
// Even smaller? A smartphone, maybe..?
@media all and (max-width: 600px)
body #wedge // Precedence killjoy.
overflow: hidden

dt, dd
clear: both
width: 100%
dd
padding-left: 12px
On small screens (<= 600px) dt, dd got modified.
 Clear got set to both, width to 100%, padding-left: 12px got added to dd.
Nothing we want on .login dd or .login dt. Therefore added !important flags
that those rules don't get overwritten. Also i removed an overflow, those
added scrollbars look really bad and aren't needed. Everything's on screen.
And input rules for max-width :100% didn't get set for the password input.
Now setting it for all inputs.
Besides that, on very small screens (<= 450px) we now do line breaks
between dt and dd. Looks better.

Small Screen (screen width: 630px)
(http://i.imgur.com/Hfa4DA3.png)
Very small screen (screen width: 353px)
(http://i.imgur.com/Rw2zQCs.png)

PR: https://github.com/Wedge/wedge/pull/48
Title: Re: [CSS] Login looking bad on small screens
Post by: Nao on January 16th, 2017, 11:43 PM
This looks sensible to me. I don't have time to test, but I'll try & merge it at the very least. ;)
Title: Re: [CSS] Login looking bad on small screens
Post by: Nao on February 8th, 2017, 08:21 PM
So... Looked a bit into this commit, and I have a few remarks.
- overflow: auto isn't about adding scrollbars, it's about clearfixing the item. It's a well-known advantage of that overflow type. As long as you don't actually have a div big enough to get scrollbars, it's all fine.
- I tried to revert the commit locally, and only keep the @media override at the end. It worked perfectly that way (i.e. I'm getting what you showed in your last screenshot.). Are you sure you didn't commit too much...? I understand that precedence might be a problem, but you could simply add body #wedge before the declaration, and the .login dt will then get better precedence. However I didn't even get problems myself...
I tried to change the media width to 600px instead of 450, and same results to me.
Interestingly, I also removed the overflow entirely, and didn't get any issues.

Can you look into this..? (e.g. just try wedge.org on your mobile phone and browser...)
Title: Re: [CSS] Login looking bad on small screens
Post by: CerealGuy on February 9th, 2017, 11:14 AM
Looks fine on my galaxy s3, will try later on other devices :cool:
Title: Re: [CSS] Login looking bad on small screens
Post by: Nao on February 9th, 2017, 11:15 AM
Thanks.
Title: Re: [CSS] Login looking bad on small screens
Post by: Drunken Clam on February 9th, 2017, 12:44 PM
Looks great on my Galaxy S6 and Galaxy Tab A  :cool:
Title: Re: [CSS] Login looking bad on small screens
Post by: CerealGuy on February 9th, 2017, 12:57 PM
Looks fine on all my devices. The only thing to tweak is when it should change. 600px seems to be a bit high in my opinion, alread on 550px it looks ways better. But this is something we can always change.
Title: Re: [CSS] Login looking bad on small screens
Post by: Nao on February 10th, 2017, 02:00 PM
I dunno, the 600px size was decided upon several years ago, and I don't remember exactly why I chose that threshold...
All I know is that the smartphone-specific code isn't there, it's in @media $responsive, that one is only for narrow windows (as well as smartphones of course.)
Title: Re: [CSS] Login looking bad on small screens
Post by: CerealGuy on February 23rd, 2017, 12:08 PM
Now I remember, I set it to 450px because that was a good
point where it should get split into different lines. 600px is
in my opinion too high, between 450px and 600px it still
looks fine if it's in the same line. But that's just cosmetics.
All your other changes work as expected  :cool:


Example: It's on 540px, definetly enough space to still have it
in one line.
(https://i.imgur.com/gTWJZCY.png)





Title: Re: [CSS] Login looking bad on small screens
Post by: Nao on February 23rd, 2017, 10:35 PM
Hmm yeah, feel free to commit a 450px revert if you feel it's for the best.
I just aimed for consistency. But this might matter more. ;)
Title: Re: [CSS] Login looking bad on small screens
Post by: CerealGuy on February 24th, 2017, 11:26 AM
Will do one but could take a while and it's not really high priority. Exams are :D
Title: Re: [CSS] Login looking bad on small screens
Post by: Nao on February 25th, 2017, 10:49 PM
Should also modify the RSS feed list (in the sidebar) to use some normal stuff instead of these fucking dd/dt/dl tags. I'm really sick with them... display:table for the win? Heck you can even push columns to new rows through @media...