39c5bcd518
* remove IE6 XHR support IE7 and later support XMLHttpRequest natively, and most of the rest of the code base uses fetch() which may not work in any version of IE Drop the conditional here in the assumption that this would only be the first of many problems for a user with an unsupported browser.
113 lines
5.2 KiB
Text
113 lines
5.2 KiB
Text
<div class="navigation-progress" id="navigation-progress"></div>
|
|
<header class="crayons-header print-hidden">
|
|
<span id="route-change-target" tabindex="-1"></span>
|
|
<a href="#main-content" class="skip-content-link"><%= t("views.main.header.skip") %></a>
|
|
<div class="crayons-header__container">
|
|
<span class="inline-block m:hidden ">
|
|
<button class="c-btn c-btn--icon-alone js-hamburger-trigger mx-2">
|
|
<%= crayons_icon_tag(:hamburger, title: t("views.hamburger.icon")) %>
|
|
</button>
|
|
</span>
|
|
<%= render "layouts/logo" %>
|
|
|
|
<div class="crayons-header--search js-search-form" id="header-search">
|
|
<form accept-charset="UTF-8" method="get" action="<%= search_path %>" role="search">
|
|
<div class="crayons-fields crayons-fields--horizontal">
|
|
<div class="crayons-field flex-1 relative">
|
|
<input class="crayons-header--search-input crayons-textfield js-search-input" type="text" id="nav-search" name="q" placeholder="<%= t("views.search.placeholder") %>" autocomplete="off" />
|
|
<button type="submit" aria-label="<%= t("views.search.icon.aria_label") %>" class="c-btn c-btn--icon-alone absolute inset-px left-auto mt-0 py-0">
|
|
<%= crayons_icon_tag(:search, aria_hidden: true, title: t("views.search.icon.title")) %>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="flex items-center h-100 ml-auto">
|
|
<a class="c-link c-link--icon-alone c-link--block m:hidden <% unless user_signed_in? %>mx-1<% end %>" id="search-link" aria-label="<%= t("views.search.icon.aria_label") %>" href="<%= search_path %>">
|
|
<%= crayons_icon_tag(:search, title: t("views.search.icon.title")) %>
|
|
</a>
|
|
<% if user_signed_in? %>
|
|
<span class="hidden m:flex ml-auto">
|
|
<a href="<%= new_path %>" class="c-cta c-cta--branded mr-2 whitespace-nowrap"><%= t("views.main.create_post") %></a>
|
|
|
|
<span class="trusted-visible-block">
|
|
<a id="moderation-link" class="c-link c-link--icon-alone c-link--block mx-1" aria-label="<%= t("views.main.header.moderation.aria_label") %>" href="<%= mod_path %>">
|
|
<%= crayons_icon_tag(:mod, title: t("views.main.header.moderation.icon")) %>
|
|
</a>
|
|
</span>
|
|
</span>
|
|
|
|
<a href="<%= notifications_path %>" id="notifications-link" class="c-link c-link--icon-alone c-link--block mx-1" aria-label="<%= t("views.main.header.notifications.aria_label") %>">
|
|
<%= crayons_icon_tag(:bell, title: t("views.main.header.notifications.icon")) %>
|
|
<span class="c-indicator c-indicator--danger hidden" id="notifications-number"></span>
|
|
</a>
|
|
|
|
<div class="crayons-header__menu mx-1" id="crayons-header__menu">
|
|
<button type="button" class="c-btn c-btn--icon-alone radius-full p-1" id="member-menu-button" aria-label="<%= t("views.main.header.nav.aria_label") %>" aria-expanded="false">
|
|
<span class="crayons-avatar crayons-avatar--l"><img class="crayons-avatar__image" alt="" id="nav-profile-image" /></span>
|
|
</button>
|
|
<%= render "layouts/nav_menu" %>
|
|
</div>
|
|
<% else %>
|
|
<span class="hidden m:block">
|
|
<a href="<%= sign_up_path %>" class="c-link c-link--block mr-2 whitespace-nowrap ml-auto" data-no-instant>
|
|
<%= t("views.main.header.login") %>
|
|
</a>
|
|
</span>
|
|
|
|
<a href="<%= sign_up_path(state: "new-user") %>" class="c-cta c-cta--branded whitespace-nowrap mr-2" data-no-instant>
|
|
<%= t("views.main.header.create_account") %>
|
|
</a>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% if user_signed_in? %>
|
|
<script>
|
|
// Here we have some scripts we want to get working on before
|
|
// waiting for the page to stream in.
|
|
|
|
// Load the current user's pic as quickly as it's available
|
|
var currentUser = localStorage.getItem('current_user')
|
|
var navProfilePic = document.getElementById('nav-profile-image')
|
|
if (currentUser && navProfilePic) {
|
|
navProfilePic.src = JSON.parse(currentUser).profile_image_90;
|
|
}
|
|
|
|
// Load notifications count as quickly as it's available.
|
|
// Not if we're on the notifications page itself
|
|
if (
|
|
window.location.pathname !== '/notifications'
|
|
) {
|
|
var xmlhttp;
|
|
|
|
xmlhttp = new XMLHttpRequest();
|
|
xmlhttp.onreadystatechange = function() {
|
|
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
|
|
var count = xmlhttp.response;
|
|
if (isNaN(count)) {
|
|
document
|
|
.getElementById('notifications-number')
|
|
.classList.add('hidden');
|
|
} else if (count != '0' && count != undefined && count != '') {
|
|
document.getElementById('notifications-number').innerHTML =
|
|
xmlhttp.response;
|
|
document
|
|
.getElementById('notifications-number')
|
|
.classList.remove('hidden');
|
|
} else {
|
|
document
|
|
.getElementById('notifications-number')
|
|
.classList.add('hidden');
|
|
}
|
|
}
|
|
};
|
|
|
|
xmlhttp.open('GET', '/notifications/counts', true);
|
|
xmlhttp.send();
|
|
}
|
|
</script>
|
|
<% end %>
|
|
</header>
|
|
|
|
<%= render "shared/hamburger" %>
|