Mobile Bandaid CSS - It still hurts, but it seems better
218 replies, posted
Pushed a small update. Thread titles can now have more then one row.
Kinda a big issue: the new subforum (automotive addicts) does not show up on mobile. @diwako
@Trekintosh can you show me as it is available on mine.
https://files.facepunch.com/forum/upload/134/f17bbe67-3ad1-4c44-a78a-f933bd7db98a/Screenshot_20180331-192042.jpg
Whoops must have been my cache. I refreshed to double check and it was there. My bad.
This is so much better and actually usable now, thank you.
Thanks for the css fix, now I can actually read the titles of threads. 😚
Appreciate the effort, diwako! At least now I can somewhat browse a bit more easily. Thanks
I am thinking of removing some stuff from the main page as the new subforums need a bit more space.
Option A:
https://files.facepunch.com/forum/upload/134/7d63a5df-1988-4711-9c48-066a65b11911/image.png
Option B:
https://files.facepunch.com/forum/upload/134/2a7fbcaa-10cf-4d5d-bf01-91ab87077c6f/image.png
How it looks like right now:
https://files.facepunch.com/forum/upload/134/da856df4-e5f3-47bc-bcf7-0ccb5436d42e/image.png
I guess we can vote by rating or post suggestions.
vote agree for Option A and Disagree for option B. Dumb for "keep as is".
I voted option B since I rarely go straight to the latest post in an entire forum. I'm more inclined to open the forum/subforum and then from the threads list go to any particular post.
also looks the least cluttered :v
I like that idea so I tried to replicate this. This is how it looks right now.
https://files.facepunch.com/forum/upload/134/35c44963-3d89-41ef-bc69-0968a3f3b16e/image.png
Call me blind but I can’t find the new thread button.
You are not blind, the sidebar is completely disabled. It also slipped my mind as I do not create many threads. Thinking about it, I need to address the sidebar at some point as it now a central point in user profiles.
Kinda an issue now that community, chat, and megathreads are all banned so almost every thought will require making a new thread.
I agree with that. I am looking into a solution right now, but something keeps occupying me.
Pushed an update
Thread names on main page are now aligned to the right.
New thread and subscribe button to subforums have been added
https://files.facepunch.com/forum/upload/134/68dec98c-d174-423b-9720-0406b4bdabb1/image.png
You're doing God's work man, thanks a ton. You're actually making some interesting changes in lieu of the lost screen real estate. A recommendation: can you see about re-introducing stuff like backgrounds and avatars? they're fairly useful for identifying users in the room. I quickly threw these ideas together, not sure if they're actually be good ideas in practice though..
https://files.facepunch.com/forum/upload/132431/163f9c5f-4ca3-41c1-8520-62ce99d7aeeb/image.png
https://files.facepunch.com/forum/upload/132431/3ddf52ea-ea87-43df-a2ae-03c04ec83bbe/image.png
And for avatars, I kinda shoved the name of the user to the side to try and accommodate for this. Might get a little hairy since we have unique height and width options, but this might be a good start. (sorry Pascall for using my avatar as an example, you didn't have one!)
https://files.facepunch.com/forum/upload/132431/078cc275-afe2-45fb-b2c7-ef7ae4ca22bb/image.png
Those are some really good suggestions. If diwako doesn’t design it first I’ll give it a go later today and see if I can throw something together (and put in a PR for it as well or at the very least release the style sheet for it).
@caseytube that was harder then I expected
https://files.facepunch.com/forum/upload/134/587635fe-1c0e-4fa2-b2f7-2611167f42c0/image.png
@diwako will you push the non-live stylesheet you’re working with atm as a separate one to your Git? I’m not at home but will be in less than an hour and I’d rather not start from scratch if you’ve already got something somewhat functional going
You mean everyone who doesn't have a 4k screen on their phone? I insist on using portrait because it's how I hold my phone, but you surely don't think this is usable anyway?
https://files.facepunch.com/forum/upload/111821/321dedaa-5040-4269-b713-748d0f797551/image.png
Alright, here's what I've come up with.
https://i.imgur.com/CDS0QIw.png?1
What do you guys think? Yea or nay? I modified Reagy's level bar to fit across the userbar, so it'll change colors depending on the user's level.
The bottom screenshot is a good idea (shrunk avatars and no backgrounds); maybe do some fiddling with the CSS to include a max height/max width that fits a similar ratio to the default avatar size, and just make the bigger avatars shrunk down to fit the ratio.
I was also thinking of adding reagy's progress bar, tho imo it would be better if it weren't that bit and just beneath the username. Did you also check for people who have avatars that are have a higher width?
Avatars are forced to that size so there shouldn't be any scaling issues whatsoever (I ran through several threads just to make sure).
As for the background it scales to the width of the post and stretches its height based off that.
There's not really a happy median I could find to also keep those in if you don't want them stretching as well.
Anyway here's the stylesheet I have for it (I threw it into a gist because I changed quite a lot of stuff). You'll have to make the gradient scale for the fade-out on the background images if you decide to keep them in.
https://gist.github.com/WitheredGryphon/80a42df420b0589ccfc03bdb2d78173a
Changing the size/position of the level bar is super easy, it's all contained under ".userlevel"
Is there a way to hide the forum descriptions?
@Hybrid_Theory
body.page-forum .forumblock .forumname .forumsubtitle {
display: none;
}
That won't be included in this CSS tho.
I will take a look and pick the stuff i think fit best. Thanks
Alright, this is how it looks like right now:
https://files.facepunch.com/forum/upload/134/9fb46d93-072b-4230-a842-1eb097259e5f/image.png
https://files.facepunch.com/forum/upload/134/78b06b0a-bf13-4702-845d-bdf9a2c71fec/image.png
Avatars are now not squished in some cases and are just culled out if they go over the border.
Re-aligned level status bar
added z-index on post footer (ratings reply box).
removed color styling as this css should not recolor stuff
user backgrounds are now clickthrough
removed background image form the forums as you never see it anyways
Thoughts on this so far? it is not pushed yet as I am waiting for feedback.
Should probably add the background image back. I can see it on mobile on every page at the top and the bottom of the screen (I'd post a screenshot but it's a hassle getting it through dropbox and uploaded).
@WitheredGryphon nah. I will update awfully dark as well so it uses background-color so it looks okay again. It looks alright on vanilla newpunch.
Sorry, you need to Log In to post a reply to this thread.