Jump to content
AAD Web Team

Home of the Blizzard - another site from the Australian Antarctic Division

Recommended Posts

Hi all,

I thought that you'd be interested to know we've now launched our third ProcessWire site, called Home of the Blizzard - The Australasian Antarctic Expedition. It's about Douglas Mawson's famous expedition of 1911-1914. As a part of the move to ProcessWire from our previous CMS it has undergone a redesign as well. It has been done completely in-house.

https://mawsonshuts.antarctica.gov.au/

It uses Fancybox for the image galleries and modal menu, Plyr for video, and Modernizr (primarily to check for CSS Grid compatibility).

It was actually the first PW site we started working on, but then the SCAR COMNAP and Antarctic Jobs sites became priorities so it got pushed back. It's great to have it live at last.

The next PW site we launch should be our main site (http://www.antarctica.gov.au)! That's still a work in progress. 🙂

  • Like 7

Share this post


Link to post
Share on other sites

Thx for sharing and congratulations for the great site!

Interesting approach for the menu! I tested it on mobile and found this little hickup (and spacings could also be removed):

Screenshot_20190521-104518.thumb.png.71e71658c224a4272f72623c193c6373.png

Also I'd suggest to list all children at the bottom of those pages: https://mawsonshuts.antarctica.gov.au/preparation/australia-and-antarctica/ (not only next and previous). For me it was not clear that the two links at the bottom belong to one parent (as seen very well in the menu). You can have a look how I did it here: https://www.maletschek.at/segelmacherei/persenning/cockpitpersenning/

Share this post


Link to post
Share on other sites

Thanks for the feedback @bernhard. May I ask what type of phone and which browser that is? It was tested extensively across a range of devices and browsers using BrowserStack, but there are so many possible combinations these days it's easy to miss some.

Your feedback on the navigation is also appreciated. The content presented across the site is very linear in nature as it is based on Douglas Mawson's book, hence the previous and next links. We'll take another look.

Share this post


Link to post
Share on other sites

It's a WIKO phone, Android + Chrome https://www.amazon.de/gp/product/B01EM2SUL2/

Another thing I just found: https://mawsonshuts.antarctica.gov.au/preparation/australia-and-antarctica/

Quote

This page was last updated on 13 September 2011.

The edited date is in the footer, so for me this seems like the whole website was last updated in 2011... Maybe that could be moved to the content block of the site.

Share this post


Link to post
Share on other sites

Thanks again for your feedback, and for the phone details @bernhard. Browserstack doesn't include any WIKO phones, but I was able to recreate the issue on a Nexus 5. I'll see what I can do to fix it.

Share this post


Link to post
Share on other sites

Hi @bernhard,

I think I've now fixed the issue with the menu that you were experiencing with your phone. Would you mind taking another look?

mobile-menu-fixed.thumb.png.844d463b4c77c9808102e58a8580ae9c.png

Thanks!

Share this post


Link to post
Share on other sites

This issue is fixed now, but when I try to scroll down the menu further than shown on the screenshot the modal closes:

Screenshot_20190606-084804.thumb.png.b7707c0fcb4d674137b86646ef62bc2a.png

Share this post


Link to post
Share on other sites
17 hours ago, bernhard said:

This issue is fixed now, but when I try to scroll down the menu further than shown on the screenshot the modal closes:

This is an odd one. It seems to only happen in the Android version of Chrome. If you keep your finger on the menu while scrolling it works, but as soon as you touch the blue background and scroll, the modal closes. In my testing, it doesn't happen in Firefox on the same type of phone, nor does it happen in Chrome or Safari on iOS.

I'm not sure if this is a bug with Fancybox or a bug with Chrome for Android - either way I'm not sure how to go about fixing it or even where to report the bug. I'll keep Googling to see if I can find anyone else with the same issue.

Share this post


Link to post
Share on other sites

Just an idea... but there might be an event() in your .js that watches if someone clicks or touches outside the opened navigation container and therefore closes it. It's not that uncommon to take care of opened elements and to close them if there is an click/touch event somewhere else.

As you use fancybox I looked for this feature and found this:

  // Clicked on the background (backdrop) element;
  // if you have not changed the layout, then most likely you need to use `clickSlide` option
  clickOutside: "close",

There are more similar options, maybe someone can look into it and test it.

  • Like 2

Share this post


Link to post
Share on other sites

Thanks @wbmnfktr, I'll certainly have to have a play around with those options (I've left them all at their defaults).

However, I would've thought the resulting behaviour should be the same across browsers. In this case, it's only a problem with the Android version of Chrome. In all other browsers that I've tested it behaves as it should, where the menu only closes if you tap the close button or outside the blue menu area.

Share this post


Link to post
Share on other sites

Hi again @bernhard and @wbmnfktr,

It should now be fixed. Well, I think there's still some kind of bug in the way Chrome for Android behaves, but I was able to completely turn off the 'touch' option for the modal menu instance of Fancybox. Swiping is not needed for the menu so that has fixed the issue, and it doesn't seem to have had any other adverse effects from what I can see so far. 🙂

Share this post


Link to post
Share on other sites

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.   Paste as plain text instead

  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.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...