Laravel 5.1 customizing the paginator styling - php

Is there a way to customize the paginator view in Laravel 5.1.
I want to add a first and last link in addition to the out of the box previous and next links.
I want to change the previous and next links to display icons instead of text but display text for screen readers.
I want to limit the number of page links to display only 5.
Below is what I'm trying to achieve.
<ul class="pagination no-margin pull-right">
<li class="disabled">
First
</li>
<li class="disabled">
<a href="#">
<span class="sr-only">Previous</span>
<i class="fa fa-caret-left" aria-hidden="true"></i>
</a>
</li>
<li class="active">
1
</li>
<li class="">
2
</li>
<li class="">
3
</li>
<li class="">
4
</li>
<li class="">
5
</li>
<li>
<a href="#">
<span class="sr-only">Next</span>
<i class="fa fa-caret-right" aria-hidden="true"></i>
</a>
</li>
<li >
Last
</li>
</ul>

In instead of
$users->render()
use
#include('pagination', ['paginator' => $users])
create pagination.blade in views directory
add this code in pagination file
#if ($paginator->lastPage() > 1)
<ul class="pagination">
<li class="{{ ($paginator->currentPage() == 1) ? ' disabled' : '' }}">
Previous
</li>
#for ($i = 1; $i <= $paginator->lastPage(); $i++)
<li class="{{ ($paginator->currentPage() == $i) ? ' active' : '' }}">
{{ $i }}
</li>
#endfor
<li class="{{ ($paginator->currentPage() == $paginator->lastPage()) ? ' disabled' : '' }}">
<a href="{{ $paginator->url($paginator->currentPage()+1) }}" >Next</a>
</li>
</ul>
#endif
you can add your style in this file
get the last page $paginator->lastPage() and first page is 1

You can modify this file for customizing the paginator styling
\vendor\laravel\framework\src\Illuminate\Pagination\BootstrapThreePresenter.php

Related

AdminLTE-3 activate a side navbar

I am trying to use AdminLTE3 as admin panel in laravel and I have nav-item links which doesn't activate when I click them. I don't know how to fix this. I used the starter.html from adminLTE3 and I have all the required assets for adminLTE3 but my nav-item links are not activated, How can I fix this, I would really appreciate for any help. my side bar code is :
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item has-treeview menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fa fa-tachometer-alt"></i>
<p>
Dashboard
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{route('home')}}" class="nav-link">
<i class="fab fa-elementor nav-icon"></i>
<p>Main</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-book"></i>
<p>
Posts
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{route('posts.index')}}" class="nav-link">
<i class="nav-icon fa fa-book"></i>
<p>All Posts</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-strikethrough"></i>
<p>
Services
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{route('services.index')}}" class="nav-link">
<i class="fa fa-asterisk nav-icon"></i>
<p>All Service</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="{{route('gallery.index')}}" class="nav-link">
<i class="nav-icon fa fa-th"></i>
<p>
Galleries
</p>
</a>
</li>
<li class="nav-item">
<a href="{{route('logout')}}" class="nav-link">
<i class="nav-icon fa fa-code"></i>
<p>
Logout
</p>
</a>
</li>
</ul>
</nav>
I tried the suggestion provided by kapitan
nav-link {{ Route::current()->getName() == 'posts.index' ? 'active' : '' }}
but problem is when I click any nav-item it hides like this
when I click the service drop down then it shows like this
For simplicity sake:
<a href="#" class="nav-link {{ Route::current()->getName() == 'my.route.name' ? 'active' : '' }}">
As you can see, this is a long cut method, you can improve this further. But this is a good starting point for you.
UPDATE:
Untested, but can you please try this:
<a href="#" class="nav-link {{ Request::is('my/url','my/url/*') ? 'active' : '' }}">
UPDATE 2 :
<li class="nav-item has-treeview {{ Request::is('my/url','my/url/*') ? 'active' : '' }}">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-strikethrough"></i>
<p>
Services
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview {{ Request::path() == 'my/url/here' ? 'menu-open' : '' }}">
<li class="nav-item">
<a href="{{route('services.index')}}" class="nav-link {{ Request::is('my/url/here') ? 'active' : '' }}">
<i class="fa fa-asterisk nav-icon"></i>
<p>All Service</p>
</a>
</li>
</ul>
</li>

laravel 5.5 blade throws broken html as output sometimes

Expected Output(show most of the time)
<li class="m-menu__item m-menu__item--active " aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="http://127.0.0.1:8000/invoices" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-clipboard"></i>
<span class="m-menu__link-text">
Invoices
</span>
</a>
</li>
Broken Html(sometimes throws output with broken tags)
<li class="m-menu__item m-menu__item--active " aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="http://127.0.0.1:8000/invoices" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-clipboard"></i>
<s </span>
</a>
</li>
blade code
<li class="m-menu__item #if(isset($sidebar) && $sidebar == 'invoice') m-menu__item--active #endif" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="{{ asset('invoices') }}" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-clipboard"></i>
<span class="m-menu__link-text">
Invoices
</span>
</a>
</li>
tried enabling errors, logging disabling cache but still no luck
is there some error in blade rendering
Try to improve your code, but may not fix the bug.
<li class="m-menu__item {{ isset($sidebar) && $sidebar == 'invoice' ? 'm-menu__item--active' : '' }}" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="{{ url('/invoices') }}" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-clipboard"></i>
<span class="m-menu__link-text">
Invoices
</span>
</a>
</li>
use asset() function only to load asset files (JS, CSS, images)
use url('uri') on anchor or route('route-name') even better

Displays categories and sub categories (Laravel Blade)

i have problem with display category and subcategories , i made this
in my blade
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><b class="fa fa-home"></b> Начало</li>
#foreach ($categories as $cat)
#foreach($subcategories as $sub)
#if($sub->parent_id == $cat->id)
<li class="dropdown ">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
{{$cat->name}} <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu">
<li>{{ $sub->name }}</li>
</ul>
</li>
#endif
#endforeach
#endforeach
</ul>
</div>
</div>
</nav>
It show categories only when have one subcategory, i don't know why happend! Someone help me! (No bad votes please)
Here is my variables:
$categories = Category::where('parent_id', NULL)->get();
$subcategories = Category::where('parent_id','!=',NULL)->get();
The issue here is that you only create the list item within your foreach loop when there is a sub category aswell.
This example should do the trick for you.
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><b class="fa fa-home"></b> Начало</li>
#foreach ($categories as $cat)
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
{{$cat->name}} <i class="fa fa-caret-down"></i>
</a>
#foreach($subcategories as $sub)
#if($sub->parent_id == $cat->id)
<ul class="dropdown-menu">
<li>{{ $sub->name }}</li>
</ul>
#endif
#endforeach
</li>
#endforeach
</ul>
</div>
It is untested so let me know if it doesn't work.
I fixed it with little changes, but now work thanks #answered26
Here is my changes
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><b class="fa fa-home"></b> Начало</li>
#foreach ($categories as $cat)
<li class="{{ $cat->children->count() > 0 ? 'dropdown' : ''}}">
<a href="#" class="{{ $cat->children->count() > 0 ? 'dropdown-toggle' : '' }}" data-toggle="dropdown">
{{$cat->name}} {!! $cat->children->count() > 0 ? '<b class="fa fa-caret-down"></b>' : '' !!}
</a>
<ul class="dropdown-menu">
#foreach($subcategories as $sub)
#if($sub->parent_id == $cat->id)
<li>{{ $sub->name }}</li>
#endif
#endforeach
</ul>
</li>
#endforeach
</ul>
</div>
</div>

how to add class active in menu laravel if use treeview

I am having trouble to adding class "menu-open" and "active" if I use a Multi-level menu.
I succeeded in adding active class in single menu.
Single Menu
<li class="nav-item">
<a href="{{ route('listTemuan') }}" class="nav-link {{ Route::currentRouteNamed('listTemuan') ? 'active' : '' }}">
<i class="fa fa-table nav-icon"></i>
<p>
List Temuan
</p>
</a>
</li>
I don't understand how to make it in Multi-level menu.
This is for my Multi-level menu:
<li class="nav-item has-treeview"> //I want to add class menu-open in here
<a href="#" class="nav-link"> //I want to add class active in here
<i class="fa fa-gear nav-icon"></i>
<p>
Setting
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{ route('UserPekerja') }}" class="nav-link {{ Route::currentRouteNamed('UserPekerja') ? 'active' : '' }}">
<i class="fa fa-circle-o nav-icon"></i>
<p>User Pekerja</p>
</a>
</li>
</ul>
</li>
Use your route name to accomplish it like below code
#if(\Request::route()->getName() == 'route name')
class="nav-item has-treeview open"
#else class="nav-item has-treeview"
#endif
use same segment with appropriate checking
#if(\Request::route()->getName() == 'expected route name')
class="nav-link active"
#else class="nav-link"
#endif

Bootstrap prevent multiple collapsable elements from being open at the same time

I have the following html sidebar menu:
<li {{{ (Request::is('bookings/*') }}} data-toggle="collapse" data-target="#bookings">
<i class="fa fa-address-book" aria-hidden="true"></i> Bookings <i class="fa fa-chevron-down" aria-hidden="true"></i>
</li>
<ul class="sub-menu collapse" id="bookings">
<li class="collapsed">All Bookings</li>
<li class="collapsed" >Add New</li>
</ul>
<li {{{ (Request::is('bookings/*') || Request::is('bookings') ? 'class=active' : '') }}} data-toggle="collapse" data-target="#item2">
<i class="fa fa-address-book" aria-hidden="true"></i> Item 2 <i class="fa fa-chevron-down" aria-hidden="true"></i>
</li>
<ul class="sub-menu collapse" id="item2">
<li {{{ (Request::is('bookings') ? 'class=active' : 'collapsed') }}}>All Bookings</li>
<li {{{ (Request::is('bookings/create') ? 'class=active' : 'collapsed') }}} >Add New</li>
</ul>
This is a basic Bootstrap collapse menu that contains a sub menu which expands when the li element is clicked.
The problem I have is lets say I have 2 or 3 of these menu items that all have sub menus. There is a possibility that all of them could open at the same time, I don't like this because this forces a scroll overflow as the height increases which then shows a scrollbar for the side menu.
Is there a way I can prevent multiple elements from being expanded in Bootstrap?
I am using Laravel 5 if that helps.
I think this should help you, just play a little with it to adapt it to your needs:
<div class="row">
<div class="col">
<ul class="nav nav-stacked" id="accordion1">
<li class="panel"> <a data-toggle="collapse" data-parent="#accordion1" href="#firstLink">Test12</a>
<ul id="firstLink" class="collapse">
<li>SubTest1</li>
<li>SubTest1</li>
<li>SubTest1</li>
</ul>
</li>
<li class="panel"> <a data-toggle="collapse" data-parent="#accordion1" href="#secondLink">Test2</a>
<ul id="secondLink" class="collapse">
<li>SubTest2</li>
<li>SubTest2</li>
<li>SubTest2</li>
<li>SubTest2</li>
</ul>
</li>
</ul>
</div>
</div>
See it here
https://codepen.io/anon/pen/ZaMOxN

Categories