Update layout to match avh.chah.org.au

[nickdos]

@nielsklazenga has updated the CHAH site and now the AVH Hub has a slightly different menu bar layout, etc.

• [x] update links and layout of menus in menu bar
• [x] update CSS for font styling
• [x] change home link to an icon
• [x] change FB icon
• [x] change footer contact use link & text
• [x] fix mobile view where hamburger icon is not visible and menu is "lost"

[nickdos]

https://github.com/AtlasOfLivingAustralia/avh-hub/pull/104

[nielsklazenga]

I can do this @nickdos .

[nickdos]

Thanks @nielsklazenga - go ahead 👍

[nickdos]

Only needed to make minor tweaks for #106, thanks @nielsklazenga.

[nielsklazenga]

Looks good to me in avh-test @nickdos.

[nielsklazenga]

Hi @nickdos , not all changes have come through in avh.ala.org.au.

[nielsklazenga]

And on the phone the top navigation has disappeared.

[nickdos]

And on the phone the top navigation has disappeared

It does that on prod as well - so not a bug introduced for this issue.

[nickdos]

Hi @nickdos , not all changes have come through in avh.ala.org.au.

Did you mean avh-test? We've not deployed to prod yet.

[nielsklazenga]

Well, that explains it 😄 . For some reason I thought that the broken links had been fixed, but I clicked on just the that was always working.

[nickdos]

I added another item to complete at top of issue for the mobile view issue.

[nielsklazenga]

The top nav expand button is on the right hand side of the screen, while in avh.chah.org.au it is on the left hand side. I like it better on the right, so I will change it in avh.chah.org.au.

[nickdos]

PR showed the icon but it seems to be missing the actual icon (just a grey square) and is visible on all screen sizes. Looks like associated CSS was removed as well.

[nielsklazenga]

How does it look on the small screen. This is what I see:

I only looked at the small screen and forgot the big screen. We just need a media statement in CSS to hide it for the bigger screen sizes. I would have expected that was already in Bootstrap. There might be an attribute missing. Will check it out.

[nielsklazenga]

Should have checked the button before I uncommented it. There was a reason it was commented out. New PR coming soon.

[nickdos]

Looks same on small screen but menu disappears.

FYI here's what i see in FF (no hamburger) in test:

[nickdos]

PR running in local env shows:

Also clicking on icon does not show hidden menus either.

[nielsklazenga]

That's weird, as it looks fine in avh-test when I just do it in the inspector tool:

This is the HTML for the nav. bar:

<div class="navbar-inner">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>               
  <div class="navbar-collapse collapse in" aria-expanded="true" style="">
    <ul class="nav navbar-nav">
      <li><a href="https://avh.chah.org.au"><i class="fa fa-home"></i></a></li>
      <li><a href="https://avh-test.ala.org.au/search/#tab_simpleSearch">Search</a></li>
      <li><a href="https://avh.chah.org.au/about/">About AVH</a></li>
      <li class="dropdown font-xsmall">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Help<span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="https://avh.chah.org.au/using-avh">Using AVH</a></li>
          <li><a href="https://avh.chah.org.au/data/">Data</a></li>
          <li><a href="/fields">Download fields</a></li>
        </ul>
      </li>
      <li><a href="https://avh.chah.org.au/news">News</a></li>
    </ul>
    <ul class="nav navbar-nav pull-right">
      <li><a href="https://www.facebook.com/AustVirtHerb"><i class="fa fa-facebook-square"></i></a></li>
    </ul>
  </div>
</div>

GSP file looks the same to me:

<div class="navbar-inner">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" 
                data-toggle="collapse" data-target=".navbar-collapse" 
                aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="${avhHome}"><i class="fa fa-home"></i></a></li>
            <li><a href="${serverName}/search/#tab_simpleSearch">Search</a></li>
            <li><a href="${avhHome}/about/">About ${orgNameShort}</a></li>
            <li class="dropdown font-xsmall">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Help<span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="${avhHome}/using-avh">Using ${orgNameShort}</a></li>
                    <li><a href="${avhHome}/data/">Data</a></li>
                    <li><a href="${request.contextPath}/fields">Download fields</a></li>
                </ul>
            </li>
            <li><a href="${avhHome}/news">News</a></li>
        </ul>
        <ul class="nav navbar-nav pull-right">
            <li><a href="https://www.facebook.com/AustVirtHerb"><i class="fa fa-facebook-square"></i></a></li>
        </ul>
    </div>
</div><!-- /.navbar-inner -->

Can you see a difference?

[nickdos]

I think the CSS is missing or corrupt for it in FF - HTML element can be in source but CSS can cause it to be hidden, offset off the side of the page or be behind another element, etc.

[nielsklazenga]

But the image I sent is from avh-test.ala.org.au. What is FF?

[nickdos]

What is FF?

Sorry - Firefox browser

And using Chrome, I see the same thing (On a Mac)

[nielsklazenga]

Actually, I should have known that. Will try it out.

[nickdos]

Success (running locally)!

[nielsklazenga]

So, what happened?

[nickdos]

Last PR from you fixed it!

I've updated https://avh-test.ala.org.au with changes - you must've got the new version

[nielsklazenga]

That took a long time to get through (I did it from VS Code). So we were talking about different things.

My screenshots were taken after I entered the button manually in the inspector (using the 'Edit as HTML' option).

Nobody can say we did not test it thoroughly.