much better css for nav items

pull/26/head
Ondřej Hruška 6 years ago
parent 6557cbd0bc
commit 57911377ef
Signed by: MightyPork
GPG Key ID: 2C5FD5035250423D
  1. 6
      resources/assets/sass/_helpers.scss
  2. 18
      resources/assets/sass/bootstrap-customizations/_navbar.scss
  3. 31
      resources/views/layouts/main-nav.blade.php

@ -12,3 +12,9 @@
opacity: 0; opacity: 0;
} }
} }
@media (max-width:767px){
.mobile-only {
display: none;
}
}

@ -4,23 +4,13 @@
border-bottom: 1px solid $primary; border-bottom: 1px solid $primary;
box-shadow: 0 -3px 8px rgba(black, 1); box-shadow: 0 -3px 8px rgba(black, 1);
}
.page-navbar .container {
align-items: stretch;
}
.navbar-collapse { white-space: nowrap;
align-items: stretch;
} }
.navbar-nav { .nav-link {
align-items: stretch; padding: $sp1 $sp3;
display: inline-block;
li a {
display: inline-block;
padding: $sp1;
}
} }
.dropdown-menu { .dropdown-menu {

@ -35,7 +35,27 @@
</a> </a>
</li> </li>
@else @else
<li class="nav-item dropdown"> <li class="nav-item ml-1 d-md-none">
<a class="nav-link" href="{{ route('logout') }}"
onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
{{-- this is some hack against CSRF - logout only via POST --}}
<i class="fa-sign-out fa-pr"></i>{{ __('Logout') }}
</a>
</li>
<li class="nav-item ml-1 d-md-none">
<a class="nav-link" href="{{ route('user.edit') }}">
<i class="fa-sliders fa-pr"></i>{{ __('Settings') }}
</a>
</li>
<li class="nav-item ml-1 d-md-none">
<a class="nav-link" href="{{ route('user.manage-oauth') }}">
<i class="fa-key-modern fa-pr"></i>{{ __('Security') }}
</a>
</li>
<li class="nav-item dropdown mobile-only">
<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>
<i class="fa-user-circle-o fa-pr"></i>{{-- <i class="fa-user-circle-o fa-pr"></i>{{--
@ -43,14 +63,12 @@
</a> </a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="mainNavDropdown"> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="mainNavDropdown">
<a class="dropdown-item" href="{{ route('logout') }}" <a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault(); document.getElementById('logout-form').submit();"> onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
{{-- this is some hack against CSRF - logout only via POST --}} {{-- this is some hack against CSRF - logout only via POST --}}
<i class="fa-sign-out fa-pr"></i>{{ __('Logout') }} <i class="fa-sign-out fa-pr"></i>{{ __('Logout') }}
</a> </a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
<a class="dropdown-item" href="{{ route('user.edit') }}"> <a class="dropdown-item" href="{{ route('user.edit') }}">
<i class="fa-sliders fa-pr"></i>{{ __('Settings') }} <i class="fa-sliders fa-pr"></i>{{ __('Settings') }}
@ -59,7 +77,12 @@
<a class="dropdown-item" href="{{ route('user.manage-oauth') }}"> <a class="dropdown-item" href="{{ route('user.manage-oauth') }}">
<i class="fa-key-modern fa-pr"></i>{{ __('Security') }} <i class="fa-key-modern fa-pr"></i>{{ __('Security') }}
</a> </a>
</div> </div>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</li> </li>
@endif @endif
</ul> </ul>

Loading…
Cancel
Save