Forum Mobile View!

Discussion in 'Empire Updates' started by Aikar, Jan 23, 2016.

  1. A long time ago I opened a task to the community for any web designers to help us out with making the forums responsive, and easier to view on mobile.

    I was told it could not be done without completely redesigning the theme.... but I knew better :)

    I knew it was possible, it just required someone who knew enough about CSS to restructure the page for mobile.

    Well, after about 5 hours of work, I have completed the basics, and launched a mostly-mobile friendly modifications to the site!

    Home page, Forum Index, Forum Views, Thread Views, PM List and PM's have been optimized to display much nicer on mobile.

    It's not perfect. I still need to do profile page, but its a great start!

    Please let me know of any other pages that look really bad now with the new code that are 'necessary' while on phone.

    If any designer wants to contribute improvements, make a folder, inside of it download
    then in chrome sources tab, right click on left and add folder to workspace. Add your folder

    Then right click YOUR responsive.css in folder and map to network resource. It should list ours, map.

    Now, when ever you hit save on responsive.css it will apply to your home, so hit the responsive view button in top left, go to iphone 5, make a change in the file and hack away.
  2. This looks awesome. Great work mate
    omarsgifford14 likes this.
  3. [rant]
    Few questions/remarks:
    - The "become a supporter now" thingy is too wide for the page to work correctly, to it extends and allows us to scroll to the side
    - Where on earth is the "watch new threads" button?
    - How do I turn it off?
    Actually, I noticed this a few minutes ago, and wanted to ask a mod to who I should report the side being weird, lol
    [/rant] (now really :p)
  4. Though I know This is in early development it shows me when I hold me forum the new layout but it only on half of my vertical screen. The ad at the bottum isn't affected by this.

    I have an I phone 5s. Don't know if this info on how I see this new layout helps but glad to see the forums are now mobile friendly !
  5. Oh I didn't see some of the ads... I'll do it logged out after I get some sleep and make more fixes.

    I handled the farthest bottom ad but not the hidden one to supporters.

    I'll check on support button too.

    Note landscape mode will go to normal view since I restricted it to skinny width only
    Kytula and 607 like this.
  6. The bottom one is also weird for me.
    And, how do we turn it off? :p I'm used to it being the old way, after all, I've used it for 3 years or so now :)

    EDIT: I can't find the "what's new" button... Where is it?
    607 likes this.
  7. Well I use a samsung galaxy note 4, let's see how it looks :p
  8. I had trouble answering a conversation in my inbox this morning. Three times I wrote it out and pushed Post Reply. But, it was never sent, just disappeared. Just letting you know! Thanks, Aikar! I use a Samsung Galaxy 5.
  9. Since I use mobile probably more than on a computer now, I've got some points I'd like to make for improvement:

    -I'm using a Samsung note 5, all text in threads is unnervingly close to the left side, I think a little margin would be nice :p (also doesn't let you edit as easily)

    -The top of the page should be shortened into a small retractable menu. If that's possible. Right now the header of all menus takes up my whole screen on the home page

    -Horizontal scaling when zooming out?

    -Moving the recently active threads to a better location than the very bottom of all threads

    -A "revert to old layout" option

    -Signatures are enormous, larger than the posts themselves. Some mobile sites remove signatures so that their forums are more readable

    That's all I've got for now. I'll post if there are any other problems. This is a nice consideration though, aikar
    607 likes this.
  10. Hm, looks pretty nice! For anyone having problems, in Google Chrome you can "request desktop site". It may be possible in newer versions of Safari too.
    Kytula likes this.
  11. Time to charge my phone. :eek: Thank you, Aikar! :D
  12. That doesn't work for me, sadly :/
  13. Oh, never mind, then, I didn't actually try it out.
    I'm not sure how Aikar did this, but I think it should always be made possible to use the desktop version of a site. Just like how it should always be possible to use the US version of a site (some sites don't work for me because they automatically redirect to the Dutch version, and then mess up).
    Kytula likes this.
  14. I was wondering why it looked so weird... I thought my phone just had problems. However, it doesn't quite fit my screen properly.

    EDIT: Although, it does seem to be more mobile friendly and the layout looks okay, just the fitting problem.
    TomvanWijnen likes this.
  15. Indeed. :) My school has a website to see grades and whatever, and recently they've added a mobile version, which sucks an inifinite amount, you aren't even able to see your grades anymore... The biggest problem is that you can't change it back to the desktop version, because of no freaking reason ;( *cries internally*
    I hope EMC will let us though :)
    607 likes this.
  16. Hey, the events page is all wonky. I know this is another early development, but so far it's not working out great for me. With an iPhone 6s, the keyboard is too big for the screen... :confused:
    FluffeMarshmallo likes this.
  17. Agreed.
  18. I knew there was something different about it! It looks pretty good, but, as said above, everything jumps to the left and is sort of oddly jumbled together at the top. Maybe there should be an option to do web view or mobile view for the time being, but overall it looks pretty good so far. Thanks Aikar!
    607 likes this.
  19. By the looks and feel of things, he is using the CSS media queries. Unfortunately, that renders the "request desktop" mute as that is designed to set a variable back when it was the norm to have separate "mobile site" and "desktop site".

    I also agree a reverting option should be available. I understand that the landscape position renders it back to full size but in that position the site is useless as it takes the whole screen up to type - not happy about that.

    I also understand there is a lot of work to change this fully and still a good amount to be done. But this really shouldnt have been pushed until it was cleaned up. Buttons are all overlapping, padding needs to be added badly, some sizing of things in funky and most importantly it needs to be styled better so its not so hard to determine who posts what. Too much junk things. I agree (with the person who mentioned it before. On phone now and second quote is messing around ) that hiding the sigs on this mobile view is needed. All i can say in final is i hope this gets solved ratherly quickly, cause google probably wont enjoy this.