[LOG] Mobile Layout Bugs & Fixes
#1

Mobile Layout Bugs & Fixes

Hey, so turns out I'm a dumbass and the forum has been displaying in desktop view on mobile for the entire last year.

The forum now displays with its actual mobile adjustments on mobile -- however, this introduces numerous issues due to some of those adjustments being buggy and poorly executed, and many pages do not have sufficient mobile adjustments at all. For example, some elements visible on desktop are now missing/inaccessible on mobile.

Adjustments are being made this week to the forum structure to address mobile issues. However, the desktop version may also display problems while work is being done. Many of the adjustments involve stripping out the HTML table structure and replacing them with divs, which affects desktop also. I'll be noting in the Discord when I am actively working on portions of the board; otherwise, clearing your cache per instructions below should resolve any particularly janky display issues.

Known issues


GLOBAL
  • Header top level are messed up, some are inaccessible
  • Header dropdowns are weirdly positioned
BOARD INDEX
  • Recent thread/post link missing
FORUM INDEX
  • Most forum "rules"/info poorly formatted
  • Thread list does not resize for mobile (requires horizontal scroll)
  • Subforum list weird
  • Forum list headers (thread/author/replies/views) misaligned
THREAD VIEW
  • Breadcrumbs missing
COMPOSE VIEW
  • New Thread
  • New Reply
  • Edit Post
PRIVATE MESSAGES
  • PM Inbox/Folder view
  • PM Read view
  • PM Compose view
  • PM Advanced Search
  • PM Search results
USER CONTROL PANEL
  • Edit Profile
  • Edit User/pass/email
  • Edit avatar/sig
  • Subscribed forums/threads
  • Saved drafts
  • Attached accounts
OTHER VIEWS
  • Search page not properly formatted
  • Search results
  • Member list
  • Forum stats
  • Game stats

Issue reports


Check that your issue hasn't already been mentioned above, but otherwise reply to this thread to report:
  • Elements/functions MISSING on mobile
  • Elements/functions poorly formatted or difficult to perform on mobile
  • Any other bugs or errors you encounter
Where possible, please include screenshots, links to specific threads/areas, and/or specific steps to reproduce your issue. Thanks for your patience!!


User adjustments


Now that the forum adjusts for mobile, you may notice that some post tables don't look as great anymore. Some things to keep in mind:
  • Setting percentage widths (and/or fixed max-widths) is highly preferable to only a specific pixel width. Please consider using something like "width:90%; max-width:700px" instead of "width:700px" in your tables.
  • Images floating inside tables can cause text to become very squished on mobile
  • The simpler your table is, the more likely it'll look okay on a variety of screen sizes

it was me. i broke it.
commission info | instagram
  Reply
#2
Location: Search Engine
Also doesn't format to the right size.
https://cdn.discordapp.com/attachments/4...Search.jpg



Location: Global Header (Dropdowns)
I know you have a "Known Issue" that might include this, but, I'm not 100% sure? Either way, general aside from the header being wonky, the drop downs are also wonky. The below example shows me clicking on "Tools." The drop downs for the "View Threads" and to change user stuff/accounts also appear in this same spot vs. how they normally do on Desktop (ie. beneath where you click, or have the carrot at least pointing to what you clicked).




Location: Private Messages
xD I wasn't sure if your bullet was a "I know there's issues with PMs, don't mention them" or just a placeholder for what people report? Here's two issues that I noticed though in case you want issues with PMs addressed? x3



Location: Sub-Forums
Wasn't sure if this was part of the "Most forum 'rules'/info poorly formatted" thing that you listed or not? However, I noticed that, in addition to the "sub-forum header / info" sections resizing but the stuff below it not, it looks like the sub-sub forum headers/info sections are also wonky?

https://cdn.discordapp.com/attachments/4...bForum.jpg



Location: Attached Accounts Drop Down
Opening up the "Attached Accounts" drop down makes the page so that it has a horizontal scroll to view it all.



Location: Viewing Account Profiles
If you have any sort of horizontal image that is larger in width that the resized-Mobile browser's, it will break out of the forum vs. auto-resizing to fit the section of your profile that it's located within. This seems to happen both to images taking advantage of "smimg" and those simply using "img" codes.

I would also advise players to remove extensive formatting done in the Appearance/Personality/History sections, as some of these also break out of the forum, rendering information unable to be read/viewed due to the forum not allowing horizontal scroll for those instances.



Also, re: users that only use "width=###px" code to set their table widths, on Mobile, your tables will BREAK beyond the page's horizontal max, and the forum DOES NOT allow you to horizontal scroll. So, if you have text that goes beyond the browser's max width, you will be unable to read it unless you flip to "View Printable Version" or the "Lite (Archive) Mode." And, even in these versions, you will have to horizontal scroll to read/view your tables.

So, I definitely recommend you all change your tables to have the max-width code as Kiri mentioned above.
  Reply
#3
If y'all are seeing borked things, trying clearing your cookies/cache first to see if that fixes the issue!

  • Chrome - Desktop
    • Option 1: Hit keyboard button: F12. Right click the "Refresh" icon. Select "Empty Cache and Hard Reload."

    • Option 2: Click on the 3 dots up by your address bar. In the drop down, navigate to "More Tools" and select "Clear browsing data...". In the new window that appears, select Time Range to be "All Time" and make sure to check the Cookies/Cache boxes. Click "Clear Data." Restart your browser.

  • Chrome - Mobile
    • Click on the 3 dots up at the top. In the drop down, click on "History." Click on "Clear browsing data...". Make sure to select "All time" for Time range. Make sure to check the Cookies/Cache boxes. Click "Clear Data." Restart browser.

  • Firefox - Desktop
    • Click on the 3 lines up by your address bar. In the drop down, select "History." Chose "Clear Recent History...". In the window that pops up, for Time range to clear, select "Everything." Make sure to check the Cookies/Cache boxes. Click "Clear Data." Restart browser.

  • Firefox - Mobile
    • Click on the 3 dots up at the bottom. Select "Settings." Click on "Delete browsing data". Make sure to check the Cookies/Cache boxes. Click "Delete browsing data." Restart browser.

  • Safari - Mobile (According to Google — I don't have an iPhone so I can't check this Dx) - Youtube How-To
    • Open "Settings." Scroll down and find "Safari." Scroll down and click "Clear History and Website Data." Confirm "Clear History and Data." Restart browser.
  Reply
#4
The following should be updated and working on both desktop and mobile:

- New Thread
- New Reply
- Edit Post
- Global Header menu links (dropdowns still oddly positioned though)
- Board Index
- Forum Index (thread list headers are misaligned still though)

If the board looks weird on desktop OR mobile, clear your cache/hard refresh per instructions above. If something is still off, please report here unless it's already been noted.
it was me. i broke it.
commission info | instagram
  Reply
#5
The following should be updated and working on both desktop and mobile:

- Search page
- All forum infoboxes, aside from packs
- Profiles
- PM Inbox/Folder view
- PM Read view
- PM Compose view

If the board looks weird on desktop OR mobile, clear your cache/hard refresh per instructions above. If something is still off, please report here unless it's already been noted.

PS -- UCP menu being stacked is intentional; there's not really a good alternative, but remember you can collapse individual sections:

[Image: unknown.png]
it was me. i broke it.
commission info | instagram
  Reply
#6
The following should be updated and working on both desktop and mobile:

UCP>Home
UCP>Change Password
UCP>Change Username
UCP>Change Email
UCP>Change Avatar
UCP>Change Signature
UCP>Edit Profile
UCP>Edit Options
UCP>Buddy/Ignore List
UCP>Manage Attachments
UCP>Subscribed Threads
UCP>Forum Subs
UCP>Saved Drafts
UCP>Attached Accounts
Board Stats
Game Stats
Forum topic header alignment
Search results
Account list
Account search

I think that's most of the major pages on the board. I still need to do PM Search and some more obscure stuff like MCP. A few parts of the board still make excessive use of tables (like Thread View), but currently work okay on mobile anyway. Am debating whether it's worth it to convert everything to divs while I'm at it...
it was me. i broke it.
commission info | instagram
  Reply


Forum Jump: