More Layout Update

| Comments

I apologize for the inconvenience to refreshing your browser cache. For I randomly changing the site’s layout. Now I made the whole page a bit smaller, including the fonts. Also fixed mobile view for navigation bar. Which is hacky.

So it appears that this theme support mobile view (duh). That navigation bar above will shrink and turn into drop down menu if browsed from mobile device. And it happened that I broke this feature when I moved the search box to the sidebar.

Here be the aforementioned feature in javascript.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function getNav() {
  var mobileNav = $('nav[role=navigation] fieldset[role=search]').after('<fieldset class="mobile-nav"></fieldset>').next().append('<select></select>');
  mobileNav.children('select').append('<option value="">Navigate&hellip;</option>');
  $('ul[role=main-navigation]').addClass('main-navigation');
  $('ul.main-navigation a').each(function(link) {
    mobileNav.children('select').append('<option value="'+link.href+'">&raquo; '+link.text+'</option>');
  });
  $('ul.subscription a').each(function(link) {
    mobileNav.children('select').append('<option value="'+link.href+'">&raquo; '+link.text+'</option>');
  });
  mobileNav.children('select').bind('change', function(event) {
    if (event.target.value) { window.location.href = event.target.value; }
  });
}

Did I said it was hacky?
Since the navigation implemented in <ul><li>, the code above will iterates <li> as link, and put that link.href and link.text as drop down menu (inside <select><option> tag). Now here’s the problem, select is form element, and it was appended after the search box. But since I moved the search box to sidebar before, voila~ It is broken.

To fix this I should keep form tag inside nav. First, let see how the original nav content (from standard octopress theme) looks like.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 <ul class="subscription" data-subscription="rss{% if site.subscribe_email %} email{% endif %}">
  <li><a href="{{ site.subscribe_rss }}" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
  {% if site.subscribe_email %}
    <li><a href="{{ site.subscribe_email }}" rel="subscribe-email" title="subscribe via email">Email</a></li>
  {% endif %}
</ul>
  {% if site.simple_search %}
<form action="{{ site.simple_search }}" method="get">
  <fieldset role="search">
    <input type="hidden" name="q" value="site:{{ site.url | shorthand_url }}" />
    <input class="search" type="text" name="q" results="0" placeholder="Search"/>
  </fieldset>
</form>
  {% endif %}
{% include custom/navigation.html %} 

and this is my customized version

1
2
3
4
5
6
7
8
9
10
 <ul class="subscription" data-subscription="rss{% if site.subscribe_email %} email{% endif %}">
  <li><a id="bitbucket" href="https://bitbucket.org/{{ site.bitbucket_user }}"><div></div></a></li>
  <li><a id="github" href="https://github.com/{{ site.github_user }}"><div></div></a></li>
  <li><a id="twitter" href="https://twitter.com/{{ site.twitter_user }}"><div></div></a></li>
  <li><a href="{{ site.subscribe_rss }}" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
  {% if site.subscribe_email %}
    <li><a href="{{ site.subscribe_email }}" rel="subscribe-email" title="subscribe via email">Email</a></li>
  {% endif %}
</ul>
{% include custom/navigation.html %} 

So I put the form back but remove all fields inside fieldset, so it looks like this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 <ul class="subscription" data-subscription="rss{% if site.subscribe_email %} email{% endif %}">
  {% if site.links %}
  <li><a id="bitbucket" href="https://bitbucket.org/{{ site.bitbucket_user }}"><div></div></a></li>
  <li><a id="github" href="https://github.com/{{ site.github_user }}"><div></div></a></li>
  <li><a id="twitter" href="https://twitter.com/{{ site.twitter_user }}"><div></div></a></li>
  {% endif %}
  <li><a id="rss" href="{{ site.subscribe_rss }}" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
  {% if site.subscribe_email %}
    <li><a href="{{ site.subscribe_email }}" rel="subscribe-email" title="subscribe via email">Email</a></li>
  {% endif %}
</ul>
 {% if site.simple_search %}
 <form action="{{ site.simple_search }}" method="get">
   <fieldset role="search">
   </fieldset>
 </form>
 {% endif %}
{% include custom/navigation.html %} 

There’s another trick inside the nav bar. See that RSS anchor node? From that anchor tag alone, we expect it should only show RSS text with hyperlink to the site’s rss page. But apparently, if you’re using chrome you wont see the RSS text, instead you will see rss icon take place. There is this css property called mask-image which somehow only supported by chrome. But we still need that RSS text for labeling our menu item when viewed at mobile mode.

Unfortunately I can’t put any text into the other anchor items, since the icon implemented differently. So the trick is to add id to rss anchor tag and change link.text to link.id like this (inside getNav())

1
2
3
$('ul.subscription a').each(function(link) {
    mobileNav.children('select').append('<option value="'+link.href+'">&raquo; '+link.id+'</option>');
});

And all done. Here’s the screenshot:

From my phone:

And this is how it’s look like from google chrome:

Comments