WebDev

SMF Arcade => SMF Arcade Support + Plugins => Topic started by: Dave on August 14, 2021, 05:35:23 AM

Title: Mobile compatibility
Post by: Dave on August 14, 2021, 05:35:23 AM
Hi all,

I occasionally use my Samsung Tab S6 to play games on my site if I'm out and about. When I log in to the site I go to Arcade and the layout is huge and virtually all white (and I've tested it here too). I've attached a couple of screenshots so you can see it. It happens on all themes even the SMF default.

If I click on the 'View desktop site' option on the tablet it then shows as normal.

Now I'm not sure if this is an SMF issue or if it's the Arcade. The Quiz works as normal as does everything else.

Anyone have any idea what might cause this?

Screenshot_20210814-082300_Edge.jpg

Dave

Title: Re: Mobile compatibility
Post by: Dave on August 14, 2021, 05:36:26 AM
Quote from: Dave on August 14, 2021, 05:35:23 AMHi all,

I occasionally use my Samsung Tab S6 to play games on my site if I'm out and about. When I log in to the site I go to Arcade and the layout is huge and virtually all white (and I've tested it here too). I've attached a couple of screenshots so you can see it. It happens on all themes even the SMF default.

If I click on the 'View desktop site' option on the tablet it then shows as normal.

Now I'm not sure if this is an SMF issue or if it's the Arcade. The Quiz works as normal as does everything else.

Anyone have any idea what might cause this?

Screenshot_20210814-082300_Edge.jpg

Dave




Sorry I should have resized the attachment  :-[
Title: Re: Mobile compatibility
Post by: Chen Zhen on August 14, 2021, 01:56:05 PM
The Arcade has mobile detection and automatically uses the mobile template.
Only one mobile template is available for the arcade although it does allow people to create their own mobile templates using hooks and custom files.

The default mobile template is just a plain white background template.
I left it up to people to design their own templates or perhaps have one made for them by a 3rd party.
The design of the mobile template is geared toward mobile devices up to approx. 12.5 inch.
If you're looking at the tablet in portrait mode it will show like your screenshots.
Turning the tablet to side view (landscape mode) will switch it to two games wide.
If your tablet is large enough to view like a laptop then you will have to use desktop mode on it.

The one thing I can do is to have an option in the arcade itself to switch modes and have it save that option in the user's arcade profile.
Options for mobile view, desktop view or automatic.



Title: Re: Mobile compatibility
Post by: Dave on August 14, 2021, 05:26:39 PM
Quote from: Chen Zhen on August 14, 2021, 01:56:05 PMThe one thing I can do is to have an option in the arcade itself to switch modes and have it save that option in the user's arcade profile.
Options for mobile view, desktop view or automatic.

That sounds like a good plan. I did look on SMF theme site to see if there were any mobile themes, but they are very limited.

Thank UD
Title: Re: Mobile compatibility
Post by: Chen Zhen on August 14, 2021, 06:16:15 PM

I was not referring to SMF mobile themes although that would be a good idea.
What I meant was that hooks are added via the Arcade installation to allow for custom Arcade skins & lists.
 
A new RC has been installed on your site.
There is a new setting in your Arcade user profile to disable mobile detection for skins & lists.
It will still use the detection for game play.

Test it out and let me know if I forgot something.
Title: Re: Mobile compatibility
Post by: Dave on August 15, 2021, 02:50:32 AM
Thanks  UD

I have set the settings to 'Detection Disabled' and the way I see it on my mobile now is as the attachments, which is better as it shows more games in the list below.

Where would a custom theme for the Arcade be stored?

Screenshot_20210815-074157_Edge (Copy).jpg
Title: Re: Mobile compatibility
Post by: Chen Zhen on August 15, 2021, 09:30:49 PM
The custom Arcade hooks were introduced 1 year ago.
No one has made any custom skins or lists as of yet.
If you are capable of developing your own then you can use the following info for reference:
https://web-develop.ca/index.php?page=arcade_hook_usage

Another option is to ask for paid help on the SMF mother site. A developer can use that link as reference.
Title: Re: Mobile compatibility
Post by: Dave on August 16, 2021, 02:13:43 AM
Quote from: Chen Zhen on August 15, 2021, 09:30:49 PMIf you are capable of developing your own then you can use the following info for reference:
https://web-develop.ca/index.php?page=arcade_hook_usage

I wish I was that clever UD

Thanks again for the help

Dave
Title: Re: Mobile compatibility
Post by: Skhilled on August 26, 2021, 12:08:31 PM
We are working on a SMF RC4 theme and the RC versions are mobile ready. It's almost finished...not far to go. But have not tried to see if the arcade, etc. will show using it like portals do with SMF themes. I have not installed any mods yet until it is completed or almost. That would be a good thing. :)

You can see the theme here:

https://docskillz.com/smfrc4

I did plan on "trying" to make skins for the arcade but started a new job and was working 6 days a week for the past 4 months or so and it is a very physically demanding job. Now that they've cut it back to 5 days I'll have more time after I'm finished this theme. :)
Title: Re: Mobile compatibility
Post by: Hero on August 26, 2021, 12:56:39 PM
nice style.  I like it very much.  It's a shame that it is not for smf 2.0.18.
Title: Re: Mobile compatibility
Post by: Skhilled on September 06, 2021, 10:20:10 AM
You can get the 2.0 versions at:

https://www.jpr62.com/theme/index.php

My friend, Jeff, created the original themes and other friends have helped keep the site going since his passing. Now I've taken it up to help keep them going and also hosting the site for free on my hosting servers.
Title: Re: Mobile compatibility
Post by: Skhilled on September 09, 2021, 12:31:31 AM
Chen, a question... I'm ready to start working on a skin, well, changing the color scheme for the skins and should I use SMF 2.0 or the RC version for this or does it make a difference?
Title: Re: Mobile compatibility
Post by: Chen Zhen on September 09, 2021, 06:42:35 PM
No it does not make a difference.
The arcade, its skins & lists work for both versions.

Remember that the arcade has custom hooks for its skins and lists.
You do not need to edit any existing arcade files.

ref.
https://web-develop.ca/index.php?page=arcade_hook_usage
Title: Re: Mobile compatibility
Post by: Skhilled on September 10, 2021, 08:26:40 AM
That's the problem, I've never got into hooks, etc. I can easily change most css styles and create some of my own and know a little about php. However, I've never got that far into php. I thought maybe it was similar to smf themes and would have to create my own directory under the arcade's /Themes directory, copy the default one's from it and then edit those.
Title: Re: Mobile compatibility
Post by: Chen Zhen on September 10, 2021, 06:58:13 PM
Do it that way to design your template & css files and then I will help you with adding hooks.

In my templates I use a lot of style elements for the css but using class & a css file is better.
So when you edit the template you may have to take most of the style element css (change to class elements) and transfer it to a css file .

example:
<div style="color: red;">Hello</div>
becomes:
<div class="theme_x_color">Hello</div>
with a css file containing:
.theme_x_color {
  color: red;
}

Always load css files in the header.
So in your php source file you use $context['html_headers'] for that.
Do you know how to do that from perusing SMF files in the past?
Title: Re: Mobile compatibility
Post by: Skhilled on September 14, 2021, 12:01:40 PM
I'll give it a shot...
Title: Re: Mobile compatibility
Post by: Skhilled on September 16, 2021, 06:42:19 AM
Ok, after checking things out I've realized that my assumption of putting the skins, css, etc. in the arcade's /Theme directory was because I first took a look at the arcade's zip file which includes an actual /Themes. After looking at a live site it dawned on me that those files actually go into SMF's /Theme/default...duh! I think I was tired when I checked and wasn't paying attention. LOL

However, it may make sense for the arcade to have a /Skins directory with everything in it on a live site. It would make it easier to tell the difference between skins and lists from a coding perspective. For instance, SkinA would be:

/root-forum-directory/Arcade/SkinA/css
/root-forum-directory/Arcade/SkinA/scripts ...etc.

This would be for each skin to keep them separated. It would increase the number of files on a site, tho...
Title: Re: Mobile compatibility
Post by: Dave on December 01, 2021, 11:50:34 AM
Did you get any further with this that you can share Steve?

Title: Re: Mobile compatibility
Post by: Skhilled on December 01, 2021, 10:45:17 PM
Sorry, with working extra hours (6-7 days), the holidays, and some server issues I've been way too busy to even look at it. LOL

Things are finally settling down a bit but Xmas is around the corner. LMAO

EDIT: I also need to redo my forum so everything's updated...
Title: Re: Mobile compatibility
Post by: Dave on December 02, 2021, 02:32:58 AM
Quote from: Skhilled on December 01, 2021, 10:45:17 PMEDIT: I also need to redo my forum so everything's updated...

Yes I completely understand. I'm no good at major coding so I can't even begin to understand what UD was talking about hooks etc.

I have just rebuilt my site because of issues and now I'm quite pleased with the result but when I access the site on my tablet it doesn't work well. I then use the 'Show as Desktop' setting in the browser and it's better. Apparently the mobile detect mod on the SMF site works with some code changes but I wouldn't know where to start.

Anyway, take care and have a peaceful Christmas.
Title: Re: Mobile compatibility
Post by: Skhilled on December 12, 2021, 07:30:42 PM
Is that for the entire site or just the arcade? You can press F12 and choose a mobile size for your tablet's size and adjust the settings according in the css so it looks better on the tablet and it won't affect the desktop or other mobile sizes.

Not sure which smf version you are using but 2.0 sucks for mobile. 2.1 is way better and much easier to make changes. The only problem with it is they've grouped too many of the classes and styles together and you may have to separate them to get exactly what you want.

As far as the skins go, I'm playing with it right now. My biggest problem is getting used to seeing the styles/classes in the arcade's files and not in the css files. It keeps throwing me off. LOL

EDIT: Hard to figure out what styles/classes are in which arcade files using the web dev tools.
Title: Re: Mobile compatibility
Post by: Dave on December 13, 2021, 02:29:23 AM
Quote from: Skhilled on December 12, 2021, 07:30:42 PMIs that for the entire site or just the arcade?

The entire site on SMF 2.0. I have a test site thats running 2.1 and I agree. I was convinced I had done something that was affecting the site in various ways so I backed everything up and just deleted the whole site and started again  with a fresh install.

I think one of my issues is with my choice of themes that I like, the current one 'Curve Reborn' uses a lot of JS and another one I like 'Lamartine' has the same. The only one that seems to work OK without issues is Crips 'Cleantek 20g' but that's proably becuase there is very small amount of JS in it, I'm using it on my other site and wanted Quizland to be different.

I may play with that next year and see if I can change the colours etc to get it to be something like what I'm after.

Good luck with the theme Steve and have a great Christmas and New Year

Dave
Title: Re: Mobile compatibility
Post by: Chen Zhen on December 13, 2021, 10:24:52 PM
@Skhilled; re. arcade mobile skin/list

You can always change style to class and then include a custom css file.
Sometimes JavaScript is used to change the style directly though.
You can edit it so the class is changed instead for that scenario and provide the alternate classes.
ie. for orientation changes, etc.
Title: Re: Mobile compatibility
Post by: Skhilled on December 26, 2021, 12:38:32 AM
Dave, thanks and the same to you and your family! :)

Chen, I just need time to really go over the files so I can see what is going and then go from there. Lately, I've only been briefly looking at things when time permits. LOL I hate it when I'd like to start something but too many other things get in the way.  >:(
EhPortal 1.39.6 © 2024, WebDev