Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit 7a6ab434 authored by Scott Main's avatar Scott Main
Browse files

update wear header template to support sticky nav.

moved the search and menu markup for the header into a method call.
also update the styles and script so that when a page does not belong
to a primary horizontal-nav link, the header logo is used for the breadcrumb's
first link and text.

Change-Id: I14129fe7657924e2037c103674e09322c4c31db8
parent e21bed28
Loading
Loading
Loading
Loading
+3 −3
Original line number Diff line number Diff line
@@ -4156,7 +4156,6 @@ EndColorStr='#ececec');
}

.logo a {
  width:123px;
  float:left;
}

@@ -4169,12 +4168,13 @@ EndColorStr='#ececec');
}


#header-wrap .logo-wear {
#header-wrap .logo.wear-logo {
  width:220px;
  margin:0;
  padding:0;
  margin-bottom:22px;
}
#header-wrap .logo-wear img {
#header-wrap .logo.wear-logo img {
  padding:0 0 0 10px;
}

+6 −0
Original line number Diff line number Diff line
@@ -564,6 +564,12 @@ function buildBreadcrumbs() {
  }
  // Add the primary horizontal nav
  var $selectedFirstNav = $("div#header-wrap ul.nav-x a.selected").clone().removeClass("selected");
  // If there's no header nav item, use the logo link and title from alt text
  if ($selectedFirstNav.length < 1) {
    $selectedFirstNav = $("<a>")
        .attr('href', $("div#header .logo a").attr('href'))
        .text($("div#header .logo img").attr('alt'));
  }
  $breadcrumbUl.prepend($("<li>").append($selectedFirstNav));
}

+147 −342
Original line number Diff line number Diff line
@@ -4,7 +4,8 @@
<?cs else ?>
<a name="top"></a>
<?cs if:!devsite ?><?cs # leave out the global header for devsite; it is in devsite template ?>
    <!-- Header --><div id="header-wrapper">
  <!-- Header -->
  <div id="header-wrapper">
    <div id="header">
      <div class="wrap" id="header-wrap">
        <div class="col-3 logo">
@@ -47,102 +48,9 @@
              >Distribute</a></li>
        </ul>

            <!-- New Search -->
            <div class="menu-container">
            <div class="moremenu">
    <div id="more-btn"></div>
  </div>
  <div class="morehover" id="moremenu">
    <div class="top"></div>
    <div class="mid">
      <div class="header">Links</div>
      <ul>
        <li><a href="https://play.google.com/apps/publish/" target="_googleplay">Google Play Developer Console</a></li>
        <li><a href="http://android-developers.blogspot.com/">Android Developers Blog</a></li>
        <li><a href="<?cs var:toroot ?>about/index.html">About Android</a></li>
      </ul>
      <div class="header">Android Sites</div>
      <ul>
        <li><a href="http://www.android.com">Android.com</a></li>
        <li class="active"><a>Android Developers</a></li>
        <li><a href="http://source.android.com">Android Open Source Project</a></li>
      </ul>
      
      <?cs # Include language switcher only in online docs ?>
      <?cs if:android.whichdoc == "online" ?>
        <div class="header">Language</div>
          <div id="language" class="locales">
            <select name="language" onChange="changeLangPref(this.value, true)">
                <option value="en">English</option>
                <option value="es">Español</option>
                <option value="ja">日本語</option>
                <option value="ko">한국어</option>
                <option value="ru">Русский</option>
                <option value="zh-cn">中文 (中国)</option>
                <option value="zh-tw">中文 (台灣)</option>
            </select>
          </div>
        <script type="text/javascript">
          <!--
          loadLangPref();
            //-->
        </script>
      <?cs /if ?>
      <?cs # End of lang switcher ?>


      <br class="clearfix" />
    </div>
    <div class="bottom"></div>
  </div>
  <div class="search" id="search-container">
    <div class="search-inner">
      <div id="search-btn"></div>
      <div class="left"></div>
      <form onsubmit="return submit_search()">
        <input id="search_autocomplete" type="text" value="" autocomplete="off" name="q"
onfocus="search_focus_changed(this, true)" onblur="search_focus_changed(this, false)"
onkeydown="return search_changed(event, true, '<?cs var:toroot ?>')" 
onkeyup="return search_changed(event, false, '<?cs var:toroot ?>')" />
      </form>
      <div class="right"></div>
        <a class="close hide">close</a>
        <div class="left"></div>
        <div class="right"></div>
    </div>
  </div>

  <div class="search_filtered_wrapper reference">
    <div class="suggest-card reference no-display">
      <ul class="search_filtered">
      </ul>
    </div>
  </div>

  <div class="search_filtered_wrapper docs">
    <div class="suggest-card dummy no-display">&nbsp;</div>
    <div class="suggest-card develop no-display">
      <ul class="search_filtered">
      </ul>
      <div class="child-card guides no-display">
      </div>
      <div class="child-card training no-display">
      </div>
      <div class="child-card samples no-display">
      </div>
    </div>
    <div class="suggest-card design no-display">
      <ul class="search_filtered">
      </ul>
    </div>
    <div class="suggest-card distribute no-display">
      <ul class="search_filtered">
      </ul>
    </div>
  </div>

  </div>
  <!-- /New Search>
        <?cs # ADD SEARCH AND MENU ?>
        <?cs call:header_search_widget() ?>


        <!-- Expanded quicknav -->
@@ -215,9 +123,8 @@ onkeyup="return search_changed(event, false, '<?cs var:toroot ?>')" />
            </li>
          </ul>
        </div><!-- /Expanded quicknav -->

        </div>
    </div><!-- /Header -->
      </div><!-- end header-wrap.wrap -->
    </div><!-- end header -->

  <?cs if:training || guide || reference || tools || develop || google || samples ?>
    <!-- Secondary x-nav -->
@@ -266,7 +173,6 @@ onkeyup="return search_changed(event, false, '<?cs var:toroot ?>')" />
                <?cs /if ?>
            </ul>
        </div>
        
    </div>
    <!-- /Sendondary x-nav -->

@@ -296,16 +202,13 @@ onkeyup="return search_changed(event, false, '<?cs var:toroot ?>')" />
            <a href="https://play.google.com/apps/publish/" class="developer-console-btn">Developer Console</a>
        </div> <!-- /Secondary distribute x-nav -->
    </div>

  <?cs /if ?>


    <div id="searchResults" class="wrap" style="display:none;">
      <h2 id="searchTitle">Results</h2>
      <div id="leftSearchControl" class="search-control">Loading...</div>
    </div>

</div> <!--end headerwrap -->
  </div> <!--end header-wrapper -->

  <div id="sticky-header">
    <div>
@@ -326,128 +229,30 @@ onkeyup="return search_changed(event, false, '<?cs var:toroot ?>')" />
<?cs def:wear_masthead() ?>
<a name="top"></a>

<!-- Header --><div id="header-wrapper">
<!-- Header -->
<div id="header-wrapper">
  <div id="header">
    <div class="wrap" id="header-wrap">
          <div class="col_3 logo-wear">
      <div class="col_3 logo wear-logo">
        <a href="<?cs var:toroot ?>wear/index.html">
          <img src="<?cs var:toroot ?>wear/images/android-wear.png" height="16" alt="Android Wear" />
        </a>
      </div>
        </div>

      <div class="col-8" style="margin:0"><h1 style="margin:1px 0 0 20px;padding:0;line-height:16px;
color:#666;font-weight:100;font-size:24px;">Developer Preview</h1></div>

          <!-- New Search -->
          <div class="menu-container">
            <div class="moremenu">
          <div id="more-btn"></div>
	    </div>
  <div class="morehover" id="moremenu">
    <div class="top"></div>
    <div class="mid">
      <div class="header">Links</div>
      <ul>
        <li><a href="https://play.google.com/apps/publish/">Google Play Developer Console</a></li>
        <li><a href="http://android-developers.blogspot.com/">Android Developers Blog</a></li>
        <li><a href="<?cs var:toroot ?>about/index.html">About Android</a></li>
      </ul>
      <div class="header">Android Sites</div>
      <ul>
        <li><a href="http://www.android.com">Android.com</a></li>
        <li class="active"><a>Android Developers</a></li>
        <li><a href="http://source.android.com">Android Open Source Project</a></li>
      </ul>

      <?cs # Include language switcher only in online docs ?>
      <?cs if:android.whichdoc == "online" ?>
        <div class="header">Language</div>
          <div id="language" class="locales">
            <select name="language" onChange="changeLangPref(this.value, true)">
                <option value="en">English</option>
                <option value="es">Español</option>
                <option value="ja">日本語</option>
                <option value="ko">한국어</option>
                <option value="ru">Русский</option>
                <option value="zh-cn">中文 (中国)</option>
                <option value="zh-tw">中文 (台灣)</option>
            </select>
          </div>
        <script type="text/javascript">
          <!--
          loadLangPref();
            //-->
        </script>
      <?cs /if ?>
      <?cs # End of lang switcher ?>


      <br class="clearfix" />
    </div><!-- end mid -->
    <div class="bottom"></div>
  </div><!-- end morehover -->

  <div class="search" id="search-container">
    <div class="search-inner">
      <div id="search-btn"></div>
      <div class="left"></div>
      <form onsubmit="return submit_search()">
        <input id="search_autocomplete" type="text" value="" autocomplete="off" name="q"
onfocus="search_focus_changed(this, true)" onblur="search_focus_changed(this, false)"
onkeydown="return search_changed(event, true, '<?cs var:toroot ?>')"
onkeyup="return search_changed(event, false, '<?cs var:toroot ?>')" />
      </form>
      <div class="right"></div>
        <a class="close hide">close</a>
        <div class="left"></div>
        <div class="right"></div>
    </div>
  </div><!--  end search -->

  <div class="search_filtered_wrapper reference">
    <div class="suggest-card reference no-display">
      <ul class="search_filtered">
      </ul>
    </div>
  </div>

  <div class="search_filtered_wrapper docs">
    <div class="suggest-card dummy no-display">&nbsp;</div>
    <div class="suggest-card develop no-display">
      <ul class="search_filtered">
      </ul>
      <div class="child-card guides no-display">
      </div>
      <div class="child-card training no-display">
      </div>
      <div class="child-card samples no-display">
      </div>
    </div>
    <div class="suggest-card design no-display">
      <ul class="search_filtered">
      </ul>
    </div>
    <div class="suggest-card distribute no-display">
      <ul class="search_filtered">
      </ul>
    </div>
  </div><!-- end search_filtered_wrapper -->

  </div>
  <!-- end menu_container -->

      <?cs # ADD SEARCH AND MENU ?>
      <?cs call:header_search_widget() ?>

    </div><!-- end header-wrap -->
    </div>
    <!-- /Header -->
  </div><!-- /Header -->


  <div id="searchResults" class="wrap" style="display:none;">
          <h2 id="searchTitle">Results</h2>
          <div id="leftSearchControl" class="search-control">Loading...</div>
  </div>

</div> <!--end headerwrap -->
</div> <!--end header-wrapper -->

<div id="sticky-header">
  <div>
+99 −0
Original line number Diff line number Diff line
@@ -398,6 +398,105 @@ def:default_left_nav() ?>
    <?cs 
/def ?>


<?cs
def:header_search_widget() ?>
<div class="menu-container">
  <div class="moremenu">
    <div id="more-btn"></div>
  </div>
  <div class="morehover" id="moremenu">
    <div class="top"></div>
    <div class="mid">
      <div class="header">Links</div>
      <ul>
        <li><a href="https://play.google.com/apps/publish/" target="_googleplay">Google Play Developer Console</a></li>
        <li><a href="http://android-developers.blogspot.com/">Android Developers Blog</a></li>
        <li><a href="<?cs var:toroot ?>about/index.html">About Android</a></li>
      </ul>
      <div class="header">Android Sites</div>
      <ul>
        <li><a href="http://www.android.com">Android.com</a></li>
        <li class="active"><a>Android Developers</a></li>
        <li><a href="http://source.android.com">Android Open Source Project</a></li>
      </ul>

      <?cs # Include language switcher only in online docs ?>
      <?cs if:android.whichdoc == "online" ?>
        <div class="header">Language</div>
          <div id="language" class="locales">
            <select name="language" onChange="changeLangPref(this.value, true)">
                <option value="en">English</option>
                <option value="es">Español</option>
                <option value="ja">日本語</option>
                <option value="ko">한국어</option>
                <option value="ru">Русский</option>
                <option value="zh-cn">中文 (中国)</option>
                <option value="zh-tw">中文 (台灣)</option>
            </select>
          </div>
        <script type="text/javascript">
          <!--
          loadLangPref();
            //-->
        </script>
      <?cs /if ?>
      <?cs # End of lang switcher ?>
      <br class="clearfix" />
    </div><!-- end 'mid' -->
    <div class="bottom"></div>
  </div><!-- end 'moremenu' -->

  <div class="search" id="search-container">
    <div class="search-inner">
      <div id="search-btn"></div>
      <div class="left"></div>
      <form onsubmit="return submit_search()">
        <input id="search_autocomplete" type="text" value="" autocomplete="off" name="q"
          onfocus="search_focus_changed(this, true)" onblur="search_focus_changed(this, false)"
          onkeydown="return search_changed(event, true, '<?cs var:toroot ?>')"
          onkeyup="return search_changed(event, false, '<?cs var:toroot ?>')" />
      </form>
      <div class="right"></div>
      <a class="close hide">close</a>
      <div class="left"></div>
      <div class="right"></div>
    </div><!-- end search-inner -->
  </div><!-- end search-container -->

  <div class="search_filtered_wrapper reference">
    <div class="suggest-card reference no-display">
      <ul class="search_filtered">
      </ul>
    </div>
  </div>

  <div class="search_filtered_wrapper docs">
    <div class="suggest-card dummy no-display">&nbsp;</div>
    <div class="suggest-card develop no-display">
      <ul class="search_filtered">
      </ul>
      <div class="child-card guides no-display">
      </div>
      <div class="child-card training no-display">
      </div>
      <div class="child-card samples no-display">
      </div>
    </div>
    <div class="suggest-card design no-display">
      <ul class="search_filtered">
      </ul>
    </div>
    <div class="suggest-card distribute no-display">
      <ul class="search_filtered">
      </ul>
    </div>
  </div>
</div><!-- end menu-container (search and menu widget) -->
<?cs /def ?>



<?cs 
def:custom_left_nav() ?><?cs
  if:fullpage ?><?cs
+1 −1
Original line number Diff line number Diff line
@@ -36,7 +36,7 @@ if:android.whichdoc != 'online' ?>http:<?cs
/if ?>//fonts.googleapis.com/css?family=Roboto+Condensed">
<link rel="stylesheet" href="<?cs
if:android.whichdoc != 'online' ?>http:<?cs
/if ?>//fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic,bold"
/if ?>//fonts.googleapis.com/css?family=Roboto:light,regular,medium,thin,italic,mediumitalic,bold"
  title="roboto">
<link href="<?cs var:toroot ?>assets/css/default.css" rel="stylesheet" type="text/css">