Skip to content

Instantly share code, notes, and snippets.

@jenky

jenky/app.blade.php

Last active March 28, 2016 01:44
Show Gist options
  • Save jenky/8e6dd687087b9606d7c0 to your computer and use it in GitHub Desktop.
Save jenky/8e6dd687087b9606d7c0 to your computer and use it in GitHub Desktop.
Download ZIP
Laravel Admin LTE
Raw
app.blade.php
@extends('layouts.base')
@section('css')
{!! Html::style(cache_buster('css/vendor.css')) !!}
{!! Html::style(cache_buster('css/app.css')) !!}
@endsection
@section('js')
{!! Html::script(cache_buster('js/vendor.js')) !!}
{!! Html::script(cache_buster('js/app.js')) !!}
@endsection
@section('bodyClass')
hold-transition skin-blue sidebar-mini
@endsection
@section('body')
<div class="wrapper">
<!-- Header -->
@include('partials.admin.header')
<!-- Sidebar -->
@include('partials.admin.sidebar')
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
{{ $pageTitle or null }}
<small>{{ $pageDescription or null }}</small>
</h1>
<ol class="breadcrumb">
@yield('breadcrumb')
</ol>
</section>
<!-- Main content -->
<section class="content">
<!-- Your Page Content Here -->
@yield('content')
</section><!-- /.content -->
</div><!-- /.content-wrapper -->
<!-- Footer -->
@include('partials.admin.footer')
</div>
@endsection
Raw
gulpfile.js
var elixir = require('laravel-elixir');
var gulp = require('gulp');
var config = elixir.config;
var bowerDir = './bower_components';
function rootPath(path) {
return '../../../' + path;
}
function bowerPath(path) {
return rootPath(bowerDir + '/' + path);
}
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
/*
|--------------------------------------------------------------------------
| Config
|--------------------------------------------------------------------------
*/
elixir.config.versioning.buildFolder = 'assets';
/*
|--------------------------------------------------------------------------
| Paths
|--------------------------------------------------------------------------
*/
var paths = {
bower: {
bootstrap: bowerDir + '/bootstrap',
fontAwesome: bowerDir + '/font-awesome'
},
// build all files in this folder and use this as filename
prefix: '' //
};
/*
|--------------------------------------------------------------------------
| Fonts
|--------------------------------------------------------------------------
*/
gulp.task('fonts', function () {
gulp.src([
paths.bower.bootstrap + '/fonts/*.*',
paths.bower.fontAwesome + '/fonts/*-webfont.*'
])
.pipe(gulp.dest(config.get('public.versioning.buildFolder') + '/fonts'));
});
/*
|--------------------------------------------------------------------------
| BUILD
|--------------------------------------------------------------------------
*/
elixir(function(mix) {
var jsName = paths.prefix || 'app',
cssName = paths.prefix || 'app';
jsName += '.js';
cssName += '.css';
mix
/*
|--------------------------------------------------------------------------
| LESS
|--------------------------------------------------------------------------
*/
// .less([
// 'app.less'
// ], 'resources/assets/css')
/*
|--------------------------------------------------------------------------
| SASS
|--------------------------------------------------------------------------
*/
// .sass([
// 'app.scss'
// ], 'resources/assets/css')
/*
|--------------------------------------------------------------------------
| JS
|--------------------------------------------------------------------------
*/
// Vendor
.scripts([
bowerPath('jquery/dist/jquery.js'),
bowerPath('bootstrap/dist/js/bootstrap.js'),
bowerPath('bootbox/bootbox.js'),
'vendor/**/*.js'
], config.get('public.js.outputFolder') + '/vendor.js')
.scripts([
bowerPath('AdminLTE/dist/js/app.js'),
], config.get('assets.js.folder') + '/app/all.js')
.scriptsIn(config.get('assets.js.folder') + '/app', config.get('public.js.outputFolder') + '/app.js')
/*
|--------------------------------------------------------------------------
| CSS
|--------------------------------------------------------------------------
*/
// Vendor
.styles([
bowerPath('bootstrap/dist/css/bootstrap.css'),
bowerPath('font-awesome/css/font-awesome.css'),
'vendor/**/*.css'
], config.get('public.css.outputFolder') + '/vendor.css')
.styles([
bowerPath('AdminLTE/dist/css/AdminLTE.css'),
bowerPath('AdminLTE/dist/css/skins/skin-blue.css'),
], config.get('assets.css.folder') + '/app/theme.css')
.stylesIn(config.get('assets.css.folder') + '/app', config.get('public.css.outputFolder') + '/app.css')
/*
|--------------------------------------------------------------------------
| Versioning / Cache Busting
|--------------------------------------------------------------------------
*/
.version([
// JS
config.get('public.js.outputFolder'),
// CSS
config.get('public.css.outputFolder')
])
/*
|--------------------------------------------------------------------------
| BrowserSync
|--------------------------------------------------------------------------
*/
// .browserSync({
// proxy: 'laravel.dev'
// })
/*
|--------------------------------------------------------------------------
| Task
|--------------------------------------------------------------------------
*/
.task('fonts');
});
Raw
header.blade.php
<!-- Main Header -->
<header class="main-header">
<!-- Logo -->
<a href="index2.html" class="logo"><b>Admin</b>LTE</a>
<!-- Header Navbar -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<li class="dropdown messages-menu">
<!-- Menu toggle button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i>
<span class="label label-success">4</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 4 messages</li>
<li>
<!-- inner menu: contains the messages -->
<ul class="menu">
<li><!-- start message -->
<a href="#">
<div class="pull-left">
<!-- User Image -->
<img src="{{ asset("/bower_components/admin-lte/dist/img/user2-160x160.jpg") }}" class="img-circle" alt="User Image"/>
</div>
<!-- Message title and timestamp -->
<h4>
Support Team
<small><i class="fa fa-clock-o"></i> 5 mins</small>
</h4>
<!-- The message -->
<p>Why not buy a new awesome theme?</p>
</a>
</li><!-- end message -->
</ul><!-- /.menu -->
</li>
<li class="footer"><a href="#">See All Messages</a></li>
</ul>
</li><!-- /.messages-menu -->
<!-- Notifications Menu -->
<li class="dropdown notifications-menu">
<!-- Menu toggle button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span class="label label-warning">10</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 10 notifications</li>
<li>
<!-- Inner Menu: contains the notifications -->
<ul class="menu">
<li><!-- start notification -->
<a href="#">
<i class="fa fa-users text-aqua"></i> 5 new members joined today
</a>
</li><!-- end notification -->
</ul>
</li>
<li class="footer"><a href="#">View all</a></li>
</ul>
</li>
<!-- Tasks Menu -->
<li class="dropdown tasks-menu">
<!-- Menu Toggle Button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-flag-o"></i>
<span class="label label-danger">9</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 9 tasks</li>
<li>
<!-- Inner menu: contains the tasks -->
<ul class="menu">
<li><!-- Task item -->
<a href="#">
<!-- Task title and progress text -->
<h3>
Design some buttons
<small class="pull-right">20%</small>
</h3>
<!-- The progress bar -->
<div class="progress xs">
<!-- Change the css width attribute to simulate progress -->
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Complete</span>
</div>
</div>
</a>
</li><!-- end task item -->
</ul>
</li>
<li class="footer">
<a href="#">View all tasks</a>
</li>
</ul>
</li>
<!-- User Account Menu -->
<li class="dropdown user user-menu">
<!-- Menu Toggle Button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<!-- The user image in the navbar-->
<img src="{{ asset("/bower_components/admin-lte/dist/img/user2-160x160.jpg") }}" class="user-image" alt="User Image"/>
<!-- hidden-xs hides the username on small devices so only the image appears. -->
<span class="hidden-xs">Alexander Pierce</span>
</a>
<ul class="dropdown-menu">
<!-- The user image in the menu -->
<li class="user-header">
<img src="{{ asset("/bower_components/admin-lte/dist/img/user2-160x160.jpg") }}" class="img-circle" alt="User Image" />
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2012</small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="col-xs-4 text-center">
<a href="#">Followers</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Sales</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Friends</a>
</div>
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">Profile</a>
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat">Sign out</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
Raw
sidebar.blade.php
<!-- Left side column. contains the sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- search form (Optional) -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search..."/>
<span class="input-group-btn">
<button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
</span>
</div>
</form>
<!-- /.search form -->
<!-- Sidebar Menu -->
<ul class="sidebar-menu">
<li class="header">HEADER</li>
<!-- Optionally, you can add icons to the links -->
<li class="active"><a href="#"><span>Link</span></a></li>
<li><a href="#"><span>Another Link</span></a></li>
<li class="treeview">
<a href="#"><span>Multilevel</span> <i class="fa fa-angle-left pull-right"></i></a>
<ul class="treeview-menu">
<li><a href="#">Link in level 2</a></li>
<li><a href="#">Link in level 2</a></li>
</ul>
</li>
</ul><!-- /.sidebar-menu -->
</section>
<!-- /.sidebar -->
</aside>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment