Created attachment 179537 [details] Screenshot of forums on iPhone (Safari) The forum software used is capable of adapting to mobile devices. The freebsd.org header line breaks this and makes the page render quite ugly. Please see attached screenshot on iPhone for an example. I asked a friend and he'll come up with a fix over the weekend, that's why I assigned the bug to myself. Please let me know if there is a specific format for a patch, otherwise it'll just be an HTML diff the forum admins can apply to the page themselves.
Created attachment 185843 [details] Javascript for testing the new layout Thanks for bringing my attention to this again (completely forgot). We made a demo of how this could work. This is how you can test this in Chrome: 1. Go to https://forums.freebsd.org/ 2. Right click and select "Inspect" (Or Ctrl-Shift-I) 3. Go to the Console and paste the content of forumResponse.js into it 4. Enter fbsdForumsMobileOptionsTester.test(1); Now the responsive design is enabled, you can play with different resolutions in Chrome. If you like this approach, we can discuss how to integrate it into the forums (either using the same "patch" approach, as it's unintrusive [making it part of the header] or doing something more elegant, that might also be harder to maintain) -m
Created attachment 185844 [details] Screen shot of low res chrome making use of the responsive design See this attachment for an example of the responsive design in chrome (crappy fonts due to my chromium/x config).
Hi, I tried the described procedure and I get the following: Object {isSubmenuOpen: false, test: function, css: function, addMenuButtons: function, cloneDonateButtonToSidebar: function…} fbsdForumsMobileOptionsTester.test(1); undefined and nothing happens.
(In reply to Daniel Gerzo from comment #3) This certainly works. Chrome on Mac as well as Chromium on FreeBSD. Maybe you didn't hit enter after pasting. Please see here for a screencast of how to actually do the procedure described above: https://blog.grem.de/bits/freebsdforum.mp4 I hope this helps you to reproduce.
Ah, OK, when I saw undefined after I hit enter I actually thought it doesn't work. Since I was going full screen I didn't notice the change on the screen, so it may actually work. I will test it again when I come back home.
(In reply to Daniel Gerzo from comment #5) Well of course, the responsive design only changes the look of the page if the resolution requires it to do so (we didn't want to change the appearance on a normal desktop). I agree that "undefined" is a bit confusing, this is, because that function doesn't return anything. Lesson learned: Next time we'll make the "test function" return something more encouraging like: > fbsdForumsMobileOptionsTester.test(1); < "Ok, ready to go"
OK so I tested it and it seems to work fine. So in order to implement it, should I just add the javascript file to the header with <script src="...."></script> and that's it?
Created attachment 187529 [details] Minimized version of javascript See next attachment for how to include
Created attachment 187530 [details] Human readable version of the mobile layout fix
To include the layout, simply add the script tag like in (if you can't place it there, you can also put it anywhere in the body as well): <html> <head> <script src="path/to/freebsd-forums-mobile-layout-fixer.min.js"> ... </head> ...
Hi, I have added the patch, let me know if it works as expected.
Works for me on Android. Thanks a lot!
Created attachment 189122 [details] Screenshot with patch on iPhone This works now, please see attached screenshot on iPhone
thanks for working on it!