make navigation noscript friendly

editing
Ondřej Hruška 6 years ago
parent ace61f2a07
commit 78a586328b
Signed by: MightyPork
GPG Key ID: 2C5FD5035250423D
  1. 3
      resources/assets/js/app.js
  2. 4
      resources/assets/sass/_helpers.scss
  3. 2
      resources/assets/sass/bootstrap-customizations/_responsive.scss
  4. 4
      resources/views/layouts/app.blade.php
  5. 13
      resources/views/layouts/guest-buttons.blade.php
  6. 31
      resources/views/layouts/main-nav.blade.php
  7. 3
      resources/views/layouts/nav-buttons.blade.php

@ -7,9 +7,6 @@ require('./modules/form-autoalias')
require('./vue-init') require('./vue-init')
$(function () { $(function () {
// Remove all noscript from forms etc
$('noscript').remove();
// Bootstrap tooltips // Bootstrap tooltips
$('[data-toggle="tooltip"]').tooltip({ $('[data-toggle="tooltip"]').tooltip({
container: 'body' container: 'body'

@ -29,3 +29,7 @@
.pointer { .pointer {
cursor: pointer; cursor: pointer;
} }
.noscript-hide {
display: none;
}

@ -1,5 +1,5 @@
@media (max-width:767px) { @media (max-width:767px) {
.mobile-only { .no-mobile {
display: none; display: none;
} }

@ -16,6 +16,10 @@
function ready(fn) { function ready(fn) {
document.addEventListener('DOMContentLoaded', fn); document.addEventListener('DOMContentLoaded', fn);
} }
ready(function() {
$('noscript').remove();
$('.noscript-hide').removeClass('noscript-hide');
});
</script> </script>
@stack('scripts') @stack('scripts')

@ -0,0 +1,13 @@
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">
@icon(fa-sign-in pr-1)
{{ __('Login') }}
</a>
@if(config('app.allow_regs'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">
@icon(fa-user-plus pr-1)
{{ __('Register') }}
</a>
@endif

@ -7,36 +7,23 @@
--}}datatable.directory --}}datatable.directory
</a> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" <button class="navbar-toggler noscript-hide" type="button" data-toggle="collapse"
data-target="#mainNavContent" aria-controls="mainNavContent" data-target="#mainNavContent" aria-controls="mainNavContent"
aria-expanded="false" aria-label="{{ __('Toggle navigation') }}"> aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="mainNavContent"> <div class="collapse navbar-collapse noscript-hide" id="mainNavContent">
<ul class="navbar-nav ml-auto"> <ul class="navbar-nav ml-auto">
<!-- Authentication Links --> <!-- Authentication Links -->
@guest() @guest()
<li class="nav-item"> @include('layouts.guest-buttons')
<a class="nav-link" href="{{ route('login') }}">
@icon(fa-sign-in pr-1)
{{ __('Login') }}
</a>
@if(config('app.allow_regs'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">
@icon(fa-user-plus pr-1)
{{ __('Register') }}
</a>
@endif
@else @else
{{-- Logged in --}} {{-- Logged in --}}
@include('layouts.nav-buttons', ['dropdown' => false]) @include('layouts.nav-buttons', ['dropdown' => false])
<li class="nav-item dropdown mobile-only"> <li class="nav-item dropdown no-mobile">
<a id="mainNavDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" <a id="mainNavDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" v-pre> aria-haspopup="true" aria-expanded="false" v-pre>
@icon(fa-user-circle-o fa-pr){{-- @icon(fa-user-circle-o fa-pr){{--
@ -54,5 +41,15 @@
@endif @endif
</ul> </ul>
</div> </div>
<noscript>
<ul class="navbar-nav ml-auto">
@guest
@include('layouts.guest-buttons')
@else
@include('layouts.nav-buttons', ['dropdown' => false, 'noscript' => true])
@endif
</ul>
</noscript>
</div> </div>
</nav> </nav>

@ -1,6 +1,7 @@
@php @php
$li = $dropdown ? '' : '<li class="nav-item ml-1 d-md-none">'; $dmdhide = isset($noscript)?'':'d-md-none';
$li = $dropdown ? '' : "<li class=\"nav-item ml-1 $dmdhide\">";
$aclass = $dropdown ? 'dropdown-item' : 'nav-link'; $aclass = $dropdown ? 'dropdown-item' : 'nav-link';
@endphp @endphp

Loading…
Cancel
Save