Skip to content

Instantly share code, notes, and snippets.

@hovsep

hovsep/app.blade.php

Created April 18, 2017 15:11
Show Gist options
  • Save hovsep/bd396e7f9c7b7a69e4b37143f1faf293 to your computer and use it in GitHub Desktop.
Save hovsep/bd396e7f9c7b7a69e4b37143f1faf293 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap 3 markup example with Blade template
Raw
app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
@section('head')
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>@section('title') {{ config('app.name', 'Laravel') }} @show</title>
<!-- Workaround for FA-CORS restrictions!-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js" type="text/javascript"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js" type="text/javascript"></script>
<![endif]-->
<script type="text/javascript">
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]) !!};
</script>
<!-- App styles !-->
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<!-- App scripts -->
<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/vendor/jquery/are-you-sure/are-you-sure.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/vendor/bootbox/bootbox.js') }}" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//Close alerts automatically
$(".alert-autoclose").fadeTo(2000, 500).fadeOut(10000, function(){
$(".alert-info").alert('close');
});
//Are you sure forms
$('form.are-you-sure').areYouSure({'addRemoveFieldsMarksDirty':true});
});
</script>
@show
</head>
<body>
@include('partials.nav')
<div class="container-fluid">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="page-header">
<h2>@section('page_header')@show</h2>
</div>
</div>
<div class="row">
@if (Session::has('message'))
<div class="alert alert-info alert-dismissible alert-autoclose" role="alert">
{!! Form::button('<span aria-hidden="true">&times;</span>', ['class' => 'close', 'data-dismiss' => 'alert', 'aria-label' => 'Close']) !!}
{!! Session::get('message') !!}
</div>
@endif
@if (Session::has('error'))
<div class="alert alert-danger alert-dismissible alert-autoclose" role="alert">
{!! Form::button('<span aria-hidden="true">&times;</span>', ['class' => 'close', 'data-dismiss' => 'alert', 'aria-label' => 'Close']) !!}
{!! Session::get('error') !!}
</div>
@endif
</div>
@yield('content')
</div>
</div>
<!-- HIDDEN_START !-->
<div class="modal" id="pleaseWaitDialog" tabindex="-1" role="dialog" aria-labelledby="pleaseWaitDialogLabel" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center" id="pleaseWaitDialogLabel">Please wait</h4>
</div>
<div class="modal-body">
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100"
aria-valuemin="0" aria-valuemax="100" style="width: 100%">
</div>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<!-- HIDDEN_END !-->
</body>
</html>
Raw
create.blade.php
@extends('layouts/app')
@section('head') @parent
<script src="{{ asset('js/app/templates/create.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/vendor/codemirror/editor.js') }}" type="text/javascript"></script>
<link rel="stylesheet" href="{{ asset('css/vendor/codemirror/editor.css') }}">
<!-- Load jQuery UI (we need resizabale plugin for editor resize emulation) !-->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js" type="text/javascript"></script>
@include('php2js.variable_field')
@stop
@section('title') @parent - Create Template @stop
@section('page_header')
Create template
@stop
@section('content')
{!! Form::model($template, ['route' => ['templates.store'], 'id' => 'createTemplateForm', 'class' => 'are-you-sure']) !!}
<div class="row">
<div class="form-group @if ($errors->has('name')) has-error @endif">
{!! Form::label('name', 'Name') !!}
{!! Form::text('name', null, ['class' => 'form-control', 'placeholder' => 'My_template']) !!}
<span id="helpBlock" class="help-block">
Please use only alpha-numeric, dash and underscore. No spaces please
</span>
@if ($errors->has('name'))
<span class="label label-danger">{{ $errors->first('name') }}</span>
@endif
</div>
<div class="form-group @if ($errors->has('description')) has-error @endif">
{!! Form::label('description', 'Description(optional):') !!}<br>
{!! Form::textarea('description', null, ['class' => 'form-control', 'rows' => 7,'style' => 'resize:vertical']) !!}
<span id="helpBlock" class="help-block">
Use {{ '<br>' }} tag for multiline description
</span>
@if ($errors->has('description'))
<span class="label label-danger">{{ $errors->first('description') }}</span>
@endif
</div>
<div class="form-group @if ($errors->has('group_id')) has-error @endif">
{!! Form::label('group_id', 'Group (optional)') !!}
{!! Form::select('group_id', $groupsOptions, $groupId, ['class' => 'form-control input-sm']) !!}
<span id="helpBlock" class="help-block">
Use groups to organize your templates
</span>
@if ($errors->has('group_id'))
<span class="label label-danger">{{ $errors->first('group_id') }}</span>
@endif
</div>
</div>
<div class="row">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#edit_body" aria-controls="edit_body" role="tab" data-toggle="tab">Edit body</a>
</li>
<li role="presentation">
<a href="#live_preview" aria-controls="live_preview" role="tab" data-toggle="tab">Live preview</a>
</li>
<li role="presentation">
<a href="#used_vars" aria-controls="used_vars" role="tab" data-toggle="tab">Used PHP variables</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="edit_body" role="tabpanel">
<div class="col-md-9" style="padding-left: 0">
<div class="form-group @if ($errors->has('body')) has-error @endif">
{!! Form::label('body', 'Template source:') !!}<br>
{!! Form::textarea('body', null, ['class' => 'form-control', 'rows' => 25,'style' => 'resize:vertical']) !!}
<span id="helpBlock" class="help-block">
<a class="text-info" href="https://laravel.com/docs/5.2/blade" target="_blank">Blade</a> syntax is allowed. Please use it very careful.
</span>
@if ($errors->has('body'))
<span style="display: block" class="label label-danger" title="{{ $errors->first('body') }}">{{ $errors->first('body') }}</span>
@endif
</div>
<div class="form-group">
{!! Form::checkbox('prepareBeforeSave',true, true) !!}
{!! Form::label('prepareBeforeSave', 'Need to prepare') !!}
<span id="helpBlock" class="help-block">
(Optimize HTML, inline styles, replace images to our server)
</span>
</div>
<div class="row">
{!! Form::button('<span class="glyphicon glyphicon-ok"></span>&nbsp;Save', ['type' => 'submit', 'class' => 'btn btn-success','data-toggle' => 'modal', 'data-target' => '#pleaseWaitDialog']) !!}
<a href="/templates">
{!! Form::button('Cancel', ['id' => 'cancelCreate', 'class' => 'btn btn-default']) !!}
</a>
</div>
</div>
<div class="row">
<div class="col-md-3" style="padding-right: 0">
<div class="form-group">
{!! Form::label('context', 'Show available variables:') !!}<br>
{!! Form::select('context', $contextOptions, 'no_context', ['class' => 'form-control input-sm', 'data-ays-ignore' => 'true']) !!}
<br>
<ul class="list-group varList" id="contextVars"></ul>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="live_preview" role="tabpanel">
<div class="form-group">
{!! Form::label('preview_frame', 'How it looks:') !!}<br>
<iframe id="preview_frame" height="500px" width="100%"></iframe>
<span id="helpBlock" class="help-block">
Blade is not actually rendered here. Use this to check HTML look & feel.
</span>
</div>
</div>
<div class="tab-pane" id="used_vars" role="tabpanel">
<div class="form-group">
{!! Form::textarea('usedVars', 'No vars found', ['id' => 'usedVars', 'class' => 'form-control', 'rows' => 20, 'style' => 'resize:vertical', 'readonly' => 'readonly']) !!}
<span id="helpBlock" class="help-block">
Parsed from editor
</span>
</div>
</div>
</div>
</div>
{!! Form::close() !!}
@endsection
Raw
list.blade.php
@extends('layouts/app')
@section('head')
@parent
<script src="{{ asset('js/app/templates/list.js') }}" type="text/javascript"></script>
@stop
@section('title') @parent - All Templates @stop
@section('page_header')
Templates
@stop
@section('content')
<div class="row">
<div class="form-group">
<a href="/templates/create">
{!! Form::button('<span class="glyphicon glyphicon-plus"></span>&nbsp;Create', ['class' => 'btn btn-success']) !!}
</a>
<a href="/templates/import">
{!! Form::button('<span class="glyphicon glyphicon glyphicon-import"></span>&nbsp;Import', ['class' => 'btn btn-success']) !!}
</a>
</div>
<div class="form-group">
{!! Form::open(['action' => 'TemplatesController@index', 'method' => 'get', 'class' => 'form-inline text-center']) !!}
{!! Form::label('group_id', 'Filter by group') !!}
{!! Form::select('group_id', $groupsOptions, $groupId, ['class' => 'form-control input-sm']) !!}
{!! Form::button('Update', ['id' => 'updateFilters', 'class' => 'btn btn-success btn-sm', 'type' => 'submit']) !!}
{!! Form::close() !!}
</div>
</div>
<div class="row">
@if (!empty($templates) && (count($templates) > 0))
<table class="table table-bordered table-condensed table-hover longtext">
<tr>
<th class="text-right col-md-1">Id</th>
<th class="text-left col-md-2">Name</th>
<th class="text-left">Description</th>
<th class="text-right col-md-2">Actions</th>
</tr>
@foreach($templates as $template)
<tr>
<td class="text-right">
{{ $template->id }}
</td>
<td class="text-left">
<a class="text-info" href="{{ route('templates.show', [$template->id]) }}" title="Click to view a template" target="_blank"> {{ $template->name }}</a>
</td>
<td class="text-left">
<samp>
{!! strip_tags($template->description, '<br>') !!}
</samp>
</td>
<td class="text-right">
<a href="{{ route('templates.export', [$template->id]) }}">
{!! Form::button('<span class="glyphicon glyphicon glyphicon-export"></span>', ['title' => 'Export', 'id' => 'export_' . $template->id, 'class' => 'btn btn-info']) !!}
</a>
<a href="{{ route('templates.edit', [$template->id]) }}">
{!! Form::button('<span class="glyphicon glyphicon-pencil"></span>', ['title' => 'Edit', 'id' => 'edit_' . $template->id, 'class' => 'btn btn-default']) !!}
</a>
{!! Form::open(['route' => ['templates.destroy', $template->id], 'method' => 'delete', 'style' => 'display: inline;']) !!}
{!! Form::button('<span class="glyphicon glyphicon-remove"></span>', ['title' => 'Delete', 'class' => 'btn btn-danger confirm-submit']) !!}
{!! Form::close() !!}
</td>
</tr>
@endforeach
</table>
@else
<div class="jumbotron">
<h4>Templates not found</h4>
<p>Try to change filtering</p>
</div>
@endif
<a href="/templates/create">
{!! Form::button('<span class="glyphicon glyphicon-plus"></span>&nbsp;Create', ['class' => 'btn btn-success']) !!}
</a>
<a href="/templates/import">
{!! Form::button('<span class="glyphicon glyphicon glyphicon glyphicon-import"></span>&nbsp;Import', ['class' => 'btn btn-success']) !!}
</a>
</div>
{!! $templates->appends(['group_id' => $groupId])->links() !!}
@endsection
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment