вторник, 29 августа 2017 г.

Laravel. Блог. Продолжаем с дизайном админки

Идем в 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')
@section('main-content')
@show
@include('admin.layouts.footer')
</div>
</body>
</html>

В home.blade.php пишем:
@extends('admin.layouts.app')

@section('main-content')
<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 -->
@endsection

Копируем форму из файла \Row files\admin\pages\forms\editors.html

@extends('admin.layouts.app')
@section('main-content')
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Text Editors
<small>Advanced form element</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li><a href="#">Forms</a></li>
<li class="active">Editors</li>
</ol>
</section>

<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-md-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Write Post Body
<small>Simple and fast</small>
</h3>
</div>
<!-- /.box-header -->
<div class="box-body pad">
<form>
<textarea class="textarea" placeholder="Place some text here"
style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
</form>
</div>
</div>
</div>
<!-- /.col-->
</div>
<!-- ./row -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
@endsection

Формируем маршрут в routes\web.php
Route::get('admin/post', function () {
return view('admin.post.post');
});

Идем в файл \Row files\admin\pages\forms\general.html и копируем оттуда форму для ввода заголовка.

Теперь файл post.blade.php выглядит так.
@extends('admin.layouts.app')
@section('main-content')
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Text Editors
<small>Advanced form element</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li><a href="#">Forms</a></li>
<li class="active">Editors</li>
</ol>
</section>

<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-md-12">
<!-- general form elements -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Titles</h3>
</div>
<!-- /.box-header -->
<!-- form start -->
<form role="form">
<div class="box-body">
<div class="col-lg-6">
<div class="form-group">
<label for="title">Post title</label>
<input type="text" class="form-control" id="title" name="title" placeholder="Title">
</div>
<div class="form-group">
<label for="subtitle">Post Sub Title</label>
<input type="text" class="form-control" id="subtitle" name="subtitle" placeholder="Sub Title">
</div>
<div class="form-group">
<label for="slug">Post Slug</label>
<input type="text" class="form-control" id="slug" name="slug" placeholder="Post Slug">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="image">File input</label>
<input type="file" name="image" id="image">
</div>
<br /><br />
<div class="checkbox">
<label>
<input type="checkbox" name="status"> Publish
</label>
</div>
</div>
</div>
<!-- /.box-body -->
<div class="box">
<div class="box-header">
<h3 class="box-title">Write Post Body
<small>Simple and fast</small>
</h3>
</div>
<!-- /.box-header -->
<div class="box-body pad">
<form>
<textarea class="textarea" placeholder="Place some text here" name="body"
style="width: 100%; height: 500px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
</form>
</div>
</div>

<div class="box-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<!-- /.box -->
</div>
<!-- /.col-->
</div>
<!-- ./row -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
@endsection

Делаем маршрут для тегов в routes\web.php
Route::get('admin/tag', function () {
return view('admin.tag.tag');
});


Создаем папку и файл \resources\views\admin\tag\tag.blade.php
@extends('admin.layouts.app')

@section('main-content')
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Text Editors
<small>Advanced form element</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li><a href="#">Forms</a></li>
<li class="active">Editors</li>
</ol>
</section>

<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-md-12">
<!-- general form elements -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Titles</h3>
</div>
<!-- /.box-header -->
<!-- form start -->
<form role="form">
<div class="box-body">
<div class="col-lg-offset-3 col-lg-6">
<div class="form-group">
<label for="name">Tag title</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Tag Title">
</div>
<div class="form-group">
<label for="slug">Tag Slug</label>
<input type="text" class="form-control" id="slug" name="slug" placeholder="Post Slug">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
<!-- /.box-body
</form>
<!-- /.box -->
</div>
<!-- /.col-->
</div>
<!-- ./row -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->

@endsection

Делаем маршрут для категории в routes\web.php
Route::get('admin/category', function () {
return view('admin.category.category');
});

Создаем папку и файл \resources\views\admin\category\category.blade.php

@extends('admin.layouts.app')

@section('main-content')
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Text Editors
<small>Advanced form element</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li><a href="#">Forms</a></li>
<li class="active">Editors</li>
</ol>
</section>

<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-md-12">
<!-- general form elements -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Titles</h3>
</div>
<!-- /.box-header -->
<!-- form start -->
<form role="form">
<div class="box-body">
<div class="col-lg-offset-3 col-lg-6">
<div class="form-group">
<label for="name">Category title</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Tag Title">
</div>
<div class="form-group">
<label for="slug">Category Slug</label>
<input type="text" class="form-control" id="slug" name="slug" placeholder="Post Slug">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
<!-- /.box-body
</form>
<!-- /.box -->
</div>
<!-- /.col-->
</div>
<!-- ./row -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->

@endsection


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

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

Materialize-css. Футер

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