Mobile Bandaid CSS - It still hurts, but it seems better
218 replies, posted
I normally browse FP on desktop, but I am not always at home and then I gotta browse on mobile. Right now @tisseman890 's app is out of commission (hopefully it will be back in working oder soon) which leaves us only with the normal web browser.
Using the site on mobile is, well... not good right now. Garry is working on the desktop version so far and is adding needed tools and features. In the mean time I got annoyed that browsing FP on a mobile device is visually a pain. So I put some CSS together to make it at least somewhat usable, but still broken here and there.
So what is this?
It is a CSS theme to make the site somewhat usable on mobile. Meaning it should look and hopefully behave like a mobile website.
What this is not:
It is not a magical bullet that will fix all of your problems when browsing FP on mobile! It will most likely introduce problems and behaviors you do not like. It is a bandaid fix, it does not fix the underlying problems! That task is for garry or who ever he hires as web dev.
Call for contribution:
Like Facepunch Awfully Dark II I will be reviewing push requests to this CSS file. So if you want to contribute and fix some stuff, please make a pull request and describe the change over at the GitHub page.
Screenshots (note: this theme will not change any colors):
https://files.facepunch.com/forum/upload/134/3e3dcbbc-9c57-4bce-bbd7-bc4742d26771/image.png
https://files.facepunch.com/forum/upload/134/87314c6d-eff3-4dfe-a062-9b62833e5675/image.png
https://files.facepunch.com/forum/upload/134/470d80e0-02a8-4189-a605-5204730efd4b/image.png
How do I get this?
Simply paste the following into your custom CSS box in your site preferences
@import url('https://diwako.github.io/fpcss/mobile.css');
Does this affect the desktop site as well?
Nope
damn, now this is actually usable. champion
good work!
not a bad temp fix for those who insist on using portrait
The site on mobile works somewhat fine if you enable desktop view, but this thing will save me those 2 clicks and that one refresh which is welcome.
You are a saint
I can say, that the updated app should be out soon, as I have nailed the most isses there is now. I pretty much just need to polish it a bit.
landscape mode really sucks for taller phones. I have to stretch my thumbs when I'm typing and it's really uncomfortable.
I appreciate this; thanks for creating and posting that CSS fix.
Thanks, this is exactly what I needed. I usually browse in landscape mode on my phone but when typing a pose the onscreen keyboard totally eclipses the text box when horizontal, and switching to vertical breaks the style and makes composing messages a pain, so this is an excellent stopgap.
This is great, thanks! Hopefully garry gets that API/JSON all finalized soon so an actual app (especially for iOS) can happen.
good one, at least you can actually read something with this.
as a mostly mobile user I'm grateful for this
would it be easy to add a little left and right padding on post content? I think that would improve it a lot
I agree. It's otherwise a really great job, but the padding needs some adjusting.
I updated this theme a bit. Padding is now addressed in posts. I changed the ratings section a bit. Voting items you can choose from are now larger.
If you are able to update your CSS with another addition, another user's mobile CSS has a change to improve the display of mobile thread titles by allowing titles to use multiple lines when on a mobile resolution. It works well with your theme too.
@media screen and (max-width: 768px)
{
.threadblock .threadmain .threadtitle .threadname {overflow: visible; white-space: pre-line; display: block; font-size: 1rem!important;}
}
Could you scale the user backgrounds back by around 75%? Also I'd rather the notification icons be smaller as well, or at least off to the side. Vertical space is valuable. Thanks for making this though, it's nice.
https://files.facepunch.com/forum/upload/596/40da5292-6b8d-40f3-ae7b-baa16c7d3b80/Screenshot_20180318-190054.png
I snuck that also in when i added the padding for posts. The only difference I see from your snippet is the thread title's font is a bit larger. However, do tell me if thread titles still do not have multiple lines on your end.
Weird, even in landscape mode it should cull out the user's avatar and background. e.g.
https://files.facepunch.com/forum/upload/134/6fa32238-7c93-407a-addc-4b4bcac7dfb1/image.png
No, I'd rather keep the avatars and such, so I know who's posting. You can hide them in portrait mode, but please keep them in landscape.
I meant is as, for me they are hidden even in landscape mode, which I also intended. Maybe you are also running some other CSS on the side or your phones display is juuuuuust a bit larger then the media query tag of the bandaid fix.
Pushed an update regarding Forum Update 5.
i think the background escape is too aggressive I can't click on any alerts on mobile now
Oh, turns out I changed something on my local copy but did not include it in the push. Should be fixed now.
On really old devices, the text input boxes are crushed lengthwise and it makes things a pain to type. I'm not sure if this fixes it but I'll check when I get the chance and upload a screenie
Is there anyway to fit the user avatar or background in design wise? Perhaps display the avatar above the username? Don't mind if the portrait mobile view is stretched vertically a bit
I removed avatars and background as it is personal preference and I wanted to attempt safe some some bandwidth. In tisseman890's app backgrounds and avatars are still there. I could port that over and provide a css or snippet for this as well.
I don't know if this is caused by the latest CSS update on the mobile CSS, or the latest update on Garry's end, but mobile users can no longer scroll through the submenus for notifications/ratings/etc. Also, thanks for the hard work on the updates in general.
You mean these ones? In the HTML structure there are only these elements there, not more.
https://files.facepunch.com/forum/upload/134/88e37094-b429-4ced-980e-739522fb1b98/image.png
Correct; while I have used iOS/Safari, I've been unable to scroll through notifications since the latest update. I don't have any screens on me, but I've had longer form notifications that I've been unable to scroll through that were cut off.
I also cannot scroll through them because there are not more elements in the pop up. Seems that garry's change hard caps at a certain number.
it's still very unusable for me won't even load pages now.
hopefully there's a CSS that makes this site completely bare-bones.
Sorry, you need to Log In to post a reply to this thread.