понедельник, 28 августа 2017 г.

Laravel. Блог. Делаем дизайн админ-зоны

Идем в папку \resources\views и создаем там папку admin и в ней файл home.blade.php и папку layouts.

В layouts создаем файл head.blade.php и header.blade.php, footer.blade.php. Туда копируем куски html-шаблона.
Создаем файл app.blade.php и подключаем к нему части шаблона
<!DOCTYPE HTML>
<html lang="en-US">
<head>
@include('admin.layouts.head')
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
@include('admin.layouts.header')
@include('admin.layouts.footer')
</div>
</body>
</html>

В файле home.blade.php пишем
@extends('admin.layouts.app')

Открываем \routes\web.php и проприсываем маршрут.
Route::get('admin/home', function () {
return view('admin.home');
})->name('post');

В папке public создаем папку admin. В нее копируем папку с bootstrap, а из rowfiles папки dist, plugins.
В папке \resources\views\admin\layouts создаем файл sidebar.blade.php и копируем туда код сайд-бара.
Идем в app.blade.php и подключаем там сайд-бар.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
@include('admin.layouts.head')
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
@include('admin.layouts.header')
@include('admin.layouts.sidebar')
@include('admin.layouts.footer')
</div>
</body>
</html>

Открываем \Row files\admin\pages\examples\blank.html и копируем из него div с контентом. Идем в app.blade.php и вставляем.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
@include('admin.layouts.head')
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
@include('admin.layouts.header')
@include('admin.layouts.sidebar')
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Blank page
<small>it all starts here</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li><a href="#">Examples</a></li>
<li class="active">Blank page</li>
</ol>
</section>

<!-- Main content -->
<section class="content">

<!-- Default box -->
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">Title</h3>

<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip"
title="Collapse">
<i class="fa fa-minus"></i></button>
<button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
<i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
Start creating your amazing application!
</div>
<!-- /.box-body -->
<div class="box-footer">
Footer
</div>
<!-- /.box-footer-->
</div>
<!-- /.box -->

</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
@include('admin.layouts.footer')
</div>
</body>
</html>

Идем в sidebar.blade.php и сокращаем его.
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>Alexander Pierce</p>
<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
</div>
</div>
<!-- search form -->
<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: : style can be found in sidebar.less -->
<ul class="sidebar-menu" data-widget="tree">
<li class="header">MAIN NAVIGATION</li>
<li class="active treeview">
<li class=""><a href="index.html"><i class="fa fa-circle-o"></i> Posts</a></li>
<li class=""><a href="index.html"><i class="fa fa-circle-o"></i> Categories</a></li>
<li class=""><a href="index.html"><i class="fa fa-circle-o"></i> Tags</a></li>
<li class=""><a href="index.html"><i class="fa fa-circle-o"></i> Users</a></li>
</li>
</ul>
</section>
<!-- /.sidebar -->
</aside>

Идем в файл header.blade.php и меняем заголовок файла:
<span class="logo-lg"><b>BitFumes</b> Blog</span>


Идем в файл sidebar.blade.php и пишем там свое имя.

Комментариев нет:

Отправить комментарий

Materialize-css. Футер

Сделаем футер и прижмем к низу страницы. Документация: https://materializecss.com/footer.html