Sha256: 2bb794c7230e2670edc95407354c21431c9a37025d94174bc66f7a8213164bad
Contents?: true
Size: 1.33 KB
Versions: 12
Compression:
Stored size: 1.33 KB
Contents
<header id="header-is_fixed">
<%= render partial: "forever_style_guide/sections/components/navigation/marketing_signed_in" %>
</header>
<div class="container l-section">
<div class="card l-section-far l-padded-thick" style="min-height: 800px;">
<h1>Fixed Navigation - Signed In User</h1>
<p>To implement:</p>
<ol>
<li>Add the account popover triggers markup for mobile and desktop w/ in your conditional check against the logged in state.</li>
<li>Immediately following the triggers include the popover content markup</li>
<li>Be sure to include the (empty) account popover containers for desktop and mobile immediately after the closing <nav> tag.</li>
<li>Include the account-popover.js snippet</li>
</ol>
<p>How it works:</p>
<ul>
<li>On the desktop the avatar and name expose a popover inlined into the header the same way we do in the app, albeit with slightly modified contextual styling.</li>
<li>In mobile contexts, the popover behaves like an additional dropdown item and we must check against viewport height in the same manner we do for the <%= link_to "basic fixed header nav", demo_link('navigation-fixed') %> in mobile contexts. </li>
<li>Reference: <a href='http://getbootstrap.com/javascript/#dropdowns-methods'>Bootstrap Popovers</a></li>
</ul>
</div>
</div>
Version data entries
12 entries across 12 versions & 1 rubygems