Have completed "Phase I" of our project "Prototyping New Responsive Mobile UNIX.COM", I am now moving to "Phase II" which will be changing many of the menus and buttons to use Javascript and CSS for the mobile site menus.
For example, here is the new "main side menu" for the mobile site (below). I will create similar menus on a per page basis to eliminate the needs for the "ugly buttons" the mobile site currently has.
Prototype Contact Menu for Mobile User Profile Page (still plan on adding more info, user avatar and other info at some point in time - This page needs a lot of work, I think.)
TODO:
Anything else?
Made some changes to the Mobile Proto for Who Is Online.
Set this page to auto-refresh every 60 seconds (maybe make this user configurable later)
Still need to add some info and maybe the user avatar and reformat. Anywayyyyyy ....
Am slowly removing all legacy buttons on the mobile site and replacing most of them ASCII symbols:
Some of the symbols I am using to replace the old buttons with may not be intuitively obvious to everyone, so when I am nearly done, will create a legend.
Mobile Thread Admin - Delete and Edit Symbols:
Also, just started replacing the "forum status icons"... simply using the site ux logo in a 16px round css markup to give this effect:
Here is the manual refresh symbol on the who is online page. That page is also set to auto refresh every 60 seconds when viewing on mobile:
Here is an example of a symbol I am using on the bottom of the various man pages (currently in blue) which will bring out another sidebar menu:
The prototype side bar menu for all man pages:
Here is the Prototype Mobile Who Is Online and Profile Page with User Avatar (took me quite some time to figure this out!)... but it is basically done!
Here is a status update:
Basically, I'm pretty happy with the basics of the mobile site prototype.
Next I plan to:
(1) Create some better "forum search forum code" using some similar kind of Javascript with CSS sidebar. Do the same for the "man page search code".
(2) Clean up and update some editor and other supporting pages which I have not checked completely yet (format, increase font input sizes, etc).
(3) Consider adding Javascript "swipe gesture code" so when looking at one thread, can swipe to the right or left across the mobile screen and go to the next or previous thread.
That's about it for now..... the mobile prototype seems to be coming along nicely and I feel some remorse I did not do this a few years ago (my bad); but back then I did not have a 34" gaming monitor and so coding is much more fun and easier on this monster 34" monitor compared to doing it all (as I did for many years) on 13" notebook (MacBook Air) screens.
In fact, I cannot emphasis enough how much my coding and software development has improved once I got this big gaming monitor to work on and stopped trying to code on a tiny laptop screen. Should have purchased years ago.
OBTW, I write code on this monitor:
Highly Recommended
FYI: Have made it so search results (new topics page, posts in last 24 hours page, etc.) and who is online (whoisonline) page auto refreshes every (configurable) 30 seconds in the mobile prototype.
I use this feature often on my iPhone+ as I watch the news or do other tasks to keep an eye on the forums.
Yesterday I tried some Javascript "swiper code" so we can do pagination on mobile with right and left screen swipes, but for some odd reason the code worked fine on text pages before I wrapped the forum pages inside. Worked on this feature for a few hours and decided to take a break and will try again another day soon.
May take a break and get some badly needed exercise, LOL.
Your body needs a break once in a while! I find that exercise and Sudoku puzzles help clear my mind and sometimes let flashes of solutions to problems I've been working on for days seep into my consciousness.
Cheers,
Don
For mobile "who is online" and for the member's profile, I added code for usergroup default avatars for those who do not have avatars:
$avatarurl = fetch_avatar_url($userinfo['userid']);
if (!$avatarurl) {
if($userinfo['usergroupid'] == '10') // Mods
$icon_url = 'https://www.unix.com/customavatars/avatar302016126_2.png';
else if($userinfo['usergroupid'] == '5') //Mods
$icon_url = 'https://www.unix.com/customavatars/avatar302016126_2.png';
else if($userinfo['usergroupid'] == '13') // Banned
$icon_url = 'https://www.unix.com/customavatars/avatar34166_2.gif';
else if($userinfo['usergroupid'] == '11') // Undergrounders
$icon_url = 'https://www.unix.com/customavatars/avatar44786_2.gif';
else if($userinfo['usergroupid'] == '9') // Readonly
$icon_url = 'https://www.unix.com/customavatars/read_only_1.png';
else if($userinfo['usergroupid'] == '17') //Vips
$icon_url = 'https://www.unix.com/customavatars/vip.png';
else // default
$icon_url = 'https://www.unix.com/customavatars/avatar46598_1.gif';
$neo_avatar = $icon_url;
} else {
$neo_avatar = $vbulletin->options['bburl'] . '/' . $avatarurl[0];
}
this morning it started with the desktop view instead of the phone view. about 4 hours ago. it starts with the phone view now.
You don't mean configurable by the user?? I'm finding that when viewing "Who's online" (especially with avatars taking up screen room), if there are a lot of members connected, my screen refreshes and takes me back to top of page before I can reach the bottom of the page.
Even more so, this happens when browsing down through "Today's posts" because there can be quite a lot of posts in 24 hours.
Anybody else finding this irritating? Or am I missing something?
(This isn't a great criticism. I realise it's under development.)