Jump to content

Sign in to follow this  
Androdion

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

Share this post


Link to post

Yeah, that seems like a lot of work. If he has to completely rewrite all the page formatting then it's a royal pain!

Share this post


Link to post

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

Share this post


Link to post

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

Share this post


Link to post
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 

Share this post


Link to post
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* 

Share this post


Link to post

Schot work... looking good!

IMG_3698.jpg

 

:bounce:

gogo

Share this post


Link to post
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?

Share this post


Link to post
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

Share this post


Link to post
31 minutes ago, gogoblender said:

I think he got the s20 plus?

Even better! :D

Share this post


Link to post
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!

Share this post


Link to post

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

Share this post


Link to post

Hehe Androdion.  :badbad:  All good.  I'll tackle the misbehaving google tomorrow.

Share this post


Link to post

Looks pretty good on my Ammamma's Tablet

:superman:

gogo

Share this post


Link to post
Posted (edited)

took the code changes schot made and implemented into my <edited out> working fine on mobile. 

Edited by zerisius
  • Thanks! 1

Share this post


Link to post

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

Share this post


Link to post
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

Share this post


Link to post

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

Share this post


Link to post
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

Share this post


Link to post

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

Share this post


Link to post

workin, workin workin... 

:moil:

IMG_3730.jpg

Share this post


Link to post

Just wanted to say that the mobile version is so much better as it is now, even if it's still a work in progress. :)

Someone give that man a scotch!

  • Like! 1

Share this post


Link to post

Cheers @Androdion!  And a Scotch for you too for getting this whole thing rolling. 

I think I need to build in a mobile menu after this.  :wink:

  • Like! 1

Share this post


Link to post

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...