Jump to content

SacredWiki for Mobile


Recommended Posts

yah me too... forgot about it though, rarely look at the wiki on mobile, ill try it on a tablet too... this software we're using may not have a mobile with tables  version, I remember Schot talking about this, and him saying that he'd have to manually rewrite and chop up the wiki for mobile..

big job :cry:

we'll see what he says

:superman:

gogo

Link to comment

Oh that's a very generous offer Androdion.  Thanks! :bow:

It's a bit of a tangled mess at the moment.  There is one strategy I'm looking at to untangle most of it which has to do with table layouts.  A lot of our template designs were created when the web was much more predictable.  You know....  Like, when I was gaming and wiki-ing on a CRT screen.  :scare2:  There.  I said it.  ^^

So the whole wiki was designed with static widths in mind.  As well as much of the websites on the internet.  Dare I say we were even cutting edge at the time.  :wink:

Table layouts that are used widely on the wiki  kinda force the width of the wiki to stay too wide for mobiles.  There is a bit css code I could implement that would force tables to flow down the page rather than across the page but presently that would affect all tables on the site which would cause problems with some of the tables that we wouldn't want to affect.  It would be nice if I could just write one line of code to adjust all tables that are problematic but I haven't had enough time to focus on the problem. 

At the moment I can think of only one sure method which would mean we would have to tag all problematic tables with a unique CSS class name.  Then I would write some css properties for that table class name in such a way that the table layout would change only when viewed on mobile.

So!  If you guys are game and you have some time, a quick bullet list of the most common examples of the site not displaying well in mobile would help me focus on those areas and perhaps bounce ideas off eachother.

Progress is a royal pain indeed!  :heat:  Though I'm always so pleased when it's all done.

  • Like! 1
Link to comment

When Gogo mentioned a complete rewrite I understood that it should be something like a migration from tables to full CSS, and I know how much of a pain that is (in theory since in practice I can't write code to save my life). I'll see if I can snap some screens on my phone and you'll see it very clearly.

Here they are:

Screenshot_20200619-112442_Chrome.thumb.jpg.40acb1467ed92425daf22fd65286712c.jpg  Screenshot_20200619-112449_Chrome.thumb.jpg.e830e49d2dcd9f025f93856a795bb23c.jpg  Screenshot_20200619-112456_Chrome.thumb.jpg.4659adeeebcce5cae05f25dcd59bd035.jpg

Screenshot_20200619-112505_Chrome.thumb.jpg.f3f072259f57d03a845d5c7bd671c471.jpg  Screenshot_20200619-112512_Chrome.thumb.jpg.47ce83e1be170de68c1feeef087771bf.jpg  Screenshot_20200619-112520_Chrome.thumb.jpg.2514f86ca12f3bbd858ba6a46ce09b1b.jpg

Screenshot_20200619-112534_Chrome.thumb.jpg.14b17d983ce51f2953884d52208d272f.jpg  Screenshot_20200619-112540_Chrome.thumb.jpg.e8758125a457b30e523b5570a4d2b844.jpg  Screenshot_20200619-112553_Chrome.thumb.jpg.b49dc4ac3f866ab5ef350b8acca4d21c.jpg

Screenshot_20200619-112602_Chrome.thumb.jpg.8b1905ed34dbf5b135715ef253049f36.jpg

  • Thanks! 1
Link to comment
7 hours ago, Schot said:

Like, when I was gaming and wiki-ing on a CRT screen.  :scare2:  There.  I said it.  ^^

So the whole wiki was designed with static widths in mind.  

at least im glad I decided right bcause im working with the wiki on a 4:3 screen 

Link to comment
On 6/19/2020 at 6:20 AM, Androdion said:

When Gogo mentioned a complete rewrite I understood that it should be something like a migration from tables to full CSS, and I know how much of a pain that is (in theory since in practice I can't write code to save my life). I'll see if I can snap some screens on my phone and you'll see it very clearly.

Here they are:

           1                          2                           3                          4                           5                         6                        7                          8                        9                        10

Screenshot_20200619-112442_Chrome.thumb.jpg.40acb1467ed92425daf22fd65286712c.jpg  Screenshot_20200619-112449_Chrome.thumb.jpg.e830e49d2dcd9f025f93856a795bb23c.jpg   Screenshot_20200619-112456_Chrome.thumb.jpg.4659adeeebcce5cae05f25dcd59bd035.jpg  Screenshot_20200619-112505_Chrome.thumb.jpg.f3f072259f57d03a845d5c7bd671c471.jpg  Screenshot_20200619-112512_Chrome.thumb.jpg.47ce83e1be170de68c1feeef087771bf.jpg  Screenshot_20200619-112520_Chrome.thumb.jpg.2514f86ca12f3bbd858ba6a46ce09b1b.jpg Screenshot_20200619-112534_Chrome.thumb.jpg.14b17d983ce51f2953884d52208d272f.jpg  Screenshot_20200619-112540_Chrome.thumb.jpg.e8758125a457b30e523b5570a4d2b844.jpg  Screenshot_20200619-112553_Chrome.thumb.jpg.b49dc4ac3f866ab5ef350b8acca4d21c.jpg Screenshot_20200619-112602_Chrome.thumb.jpg.8b1905ed34dbf5b135715ef253049f36.jpg

 

Very true on migrating from non-styled html tables to css styled html tables.  Thankfully, the wiki skin/theme itself is mobile friendly.  That happened when we upgraded the wiki some months ago and I rushed to transfer the style of our now broken/outdated/invisible wiki theme into the new upgraded wiki default mobile friendly theme.  So the core is mobile friendly but our very old content layout methods are very not friendly. 

Thanks for the pictures Androdian!  I quoted your pics and then resized them for quick reference.  (Quick tip!  You can resize images in posts while in edit mode by double clicking on them)

Pictures 1, 2, 3 should be fixed now which is the main sacredwiki page in mobile.  I had to remove the menu links and the user links at the very bottom of the page which were causing the problem.  Because of this change, all pages will have improved at least somewhat.  In mobile. 

Pictures 4, 5, 6 (Diablo 2 Fallen page) as can be seen on picture 5, the Class and God icons are in a table that is pushing out the width of the page.  The icons in picture 2 had the same problem.  I fixed it by creating a class for it and typing the class name into the start of the table code.  We can do the same with all instances of this kind of problem.  Just need to create class names that would logically apply.

Pictures 7, 8, 9, 10 (Barbarian page) are a bit more complicated.  I'll take a look at that tomorrow.

Thanks Androdion!   I'll come up with ways that can help me as I create css classes for these problems.  Maybe have you guys copy paste the class names in where needed.  At your convenience of course.

On 6/19/2020 at 9:25 AM, zerisius said:

At least I'm glad I decided right because I'm working with the wiki on a 4:3 screen.

Oh how I dream of a 4:3 world zerisius, haha.  *secretly working in 21:9* 

Link to comment
1 hour ago, Schot said:

I quoted your pics and then resized them for quick reference.  (Quick tip!  You can resize images in posts while in edit mode by double clicking on them)

Yeah, I'm terrible with formatting! :D 

Yellow group works alright until the adds start breaking the position of the Sacred banners (pic 1). Blue group is still the same for me, does Chrome for Android allow you to clear cache or something?

@gogoblender S10 Lite is it?

Link to comment
1 hour ago, Androdion said:

Yeah, I'm terrible with formatting! :D 

Yellow group works alright until the adds start breaking the position of the Sacred banners (pic 1). Blue group is still the same for me, does Chrome for Android allow you to clear cache or something?

@gogoblender S10 Lite is it?

haaaaaaaaaaaaa... im apple sheep a few years ago, but Schot still loves them :gun2: .. thats his phone  :P

cool u noticed it :lol: ...he had an old samsung s7 for four years... holding it together with tape :4rofl: 

... i think he got the s20 plus? I work for phone company Fido so can get good deal

:ike:

 

gogo

Link to comment
1 hour ago, Androdion said:

Yeah, I'm terrible with formatting! :D 

Yellow group works alright until the adds start breaking the position of the Sacred banners (pic 1). Blue group is still the same for me, does Chrome for Android allow you to clear cache or something?

@gogoblender S10 Lite is it?

No worries.  :wink: 

Ah yes, yellow has a new problem now that I've made changes.  Need to lock down that banner.  Blue and Orange I've yet to work on.  Never used Chrome Android I'm afraid.  I'm a Firefoxer.  :D

35 minutes ago, Androdion said:

Even better! :D

So shiny!

Link to comment

Incredible how a simple Google search can help me find the solution to my own question. :blush: Cleared cache on the mobile browser but the description on yellow and blue remains the same. Here's what the adds do.

Screenshot_20200620-004235_Chrome.thumb.jpg.87916446397cd894032f199cda7d927f.jpg

Just noticed how I misread your initial post, sorry mate I thought you said that 5 was fixed as well but you didn't. Damned wonky eyes. :D

Link to comment

Thanks for testing @zerisius.  Aaaalmost got a complete solution for character pages.  Presently testing with the Barbarian page.  Once I'm done I'll have a quick solution to implement across all character pages.  :heat:

  • Respect! 1
Link to comment
1 hour ago, Schot said:

Thanks for testing @zerisius.  Aaaalmost got a complete solution for characters pages.  Presently testing with the Barbarian page.  Once I'm done I'll have a quick solution to implement across all character pages.  :heat:

That's pretty awesome the way it shrinks the images and auto-resizes/moves the rest of the content.  :thumbsup:

  • Thanks! 1
Link to comment

Flix, you saw that trick ! Yah it's looking amazing :superman:

He's been 24 /7 this weekend almost :lol: ... he has to custom code some of the really horrible big tables ... going to have be inventive to try and make some of those tables make "sense" and maybe make them run down the page instead on a cell phone?

:)

 

gogo

Link to comment
2 hours ago, Flix said:

That's pretty awesome the way it shrinks the images and auto-resizes/moves the rest of the content.  :thumbsup:

Thanks Flix!  :D

It's quite a challenge trying to trick old code into thinking it's the latest greatest cutting edge stuff.  Haha.  Most challenging of all is CSSing as much as possible so as to require as few wiki edits as possible.  Granted, I don't think I need to explain to you the trials of tweaking code!

  • Like! 1
Link to comment

Lots of hard work, but def paying off. It looks very smooth and fluid how it resizes / re-wraps now!

2 hours ago, gogoblender said:

Flix, you saw that trick ! Yah it's looking amazing :superman:

He's been 24 /7 this weekend almost :lol: ... he has to custom code some of the really horrible big tables ... going to have be inventive to try and make some of those tables make "sense" and maybe make them run down the page instead on a cell phone?

:)

 

gogo

 

  • Like! 1
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...
Please Sign In or Sign Up