Зуев Егор / wiki.dev

Go to a project
Toggle navigation
Toggle navigation pinning
Dan Brown
ef77c10a 1 parent 2c95528d

Vastly improved design and cleaned text input

Inline Side-by-side
Showing 15 changed files with 204 additions and 138 deletions
...@@ -96,7 +96,9 @@ class PageController extends Controller ...@@ -96,7 +96,9 @@ class PageController extends Controller
96 $book = $this->bookRepo->getBySlug($bookSlug); 96 $book = $this->bookRepo->getBySlug($bookSlug);
97 $page = $this->pageRepo->getBySlug($pageSlug, $book->id); 97 $page = $this->pageRepo->getBySlug($pageSlug, $book->id);
98 $breadCrumbs = $this->pageRepo->getBreadCrumbs($page); 98 $breadCrumbs = $this->pageRepo->getBreadCrumbs($page);
99 - return view('pages/show', ['page' => $page, 'breadCrumbs' => $breadCrumbs, 'book' => $book]); 99 + $sidebarBookTree = $this->bookRepo->getTree($book, $page->id);
100 + //dd($sidebarBookTree);
101 + return view('pages/show', ['page' => $page, 'breadCrumbs' => $breadCrumbs, 'book' => $book, 'sidebarBookTree' => $sidebarBookTree]);
100 } 102 }
101 103
102 /** 104 /**
......
...@@ -53,10 +53,10 @@ class BookRepo ...@@ -53,10 +53,10 @@ class BookRepo
53 $book->delete(); 53 $book->delete();
54 } 54 }
55 55
56 - public function getTree($book) 56 + public function getTree($book, $currentPageId = false)
57 { 57 {
58 $tree = $book->toArray(); 58 $tree = $book->toArray();
59 - $tree['pages'] = $this->pageRepo->getTreeByBookId($book->id); 59 + $tree['pages'] = $this->pageRepo->getTreeByBookId($book->id, $currentPageId);
60 $tree['hasChildren'] = count($tree['pages']) > 0; 60 $tree['hasChildren'] = count($tree['pages']) > 0;
61 return $tree; 61 return $tree;
62 } 62 }
......
...@@ -102,7 +102,7 @@ class PageRepo ...@@ -102,7 +102,7 @@ class PageRepo
102 $cPage['current'] = ($currentPageId !== false && $cPage['id'] === $currentPageId); 102 $cPage['current'] = ($currentPageId !== false && $cPage['id'] === $currentPageId);
103 $cPage['pages'] = []; 103 $cPage['pages'] = [];
104 foreach($page->children as $key => $childPage) { 104 foreach($page->children as $key => $childPage) {
105 - $cPage['pages'][$key] = $this->toArrayTree($childPage); 105 + $cPage['pages'][$key] = $this->toArrayTree($childPage, $currentPageId);
106 } 106 }
107 $cPage['hasChildren'] = count($cPage['pages']) > 0; 107 $cPage['hasChildren'] = count($cPage['pages']) > 0;
108 return $cPage; 108 return $cPage;
......
...@@ -52,6 +52,10 @@ input[type="text"], input[type="number"], input[type="email"], input[type="searc ...@@ -52,6 +52,10 @@ input[type="text"], input[type="number"], input[type="email"], input[type="searc
52 padding: $-xs $-s; 52 padding: $-xs $-s;
53 } 53 }
54 54
55 +.title-input .input {
56 + width: 100%;
57 +}
58 +
55 .title-input label, .description-input label{ 59 .title-input label, .description-input label{
56 margin-top: $-m; 60 margin-top: $-m;
57 color: #666; 61 color: #666;
...@@ -61,6 +65,8 @@ input[type="text"], input[type="number"], input[type="email"], input[type="searc ...@@ -61,6 +65,8 @@ input[type="text"], input[type="number"], input[type="email"], input[type="searc
61 @extend h1; 65 @extend h1;
62 @extend .inline-input-style; 66 @extend .inline-input-style;
63 margin-top: 0; 67 margin-top: 0;
68 + padding-right: 0;
69 + width: 100%;
64 color: #444; 70 color: #444;
65 } 71 }
66 72
......
...@@ -6,7 +6,11 @@ h1 { ...@@ -6,7 +6,11 @@ h1 {
6 font-size: 3.625em; 6 font-size: 3.625em;
7 line-height: 1.22222222em; 7 line-height: 1.22222222em;
8 margin-top: 0.48888889em; 8 margin-top: 0.48888889em;
9 - margin-bottom: 0.24444444em; 9 + margin-bottom: 0.48888889em;
10 + padding-bottom: 0.3333em;
11 + border-bottom: 1px solid #EAEAEA;
12 + //margin-left: -$-xxl;
13 + //margin-right: -$-xxl;
10 } 14 }
11 h2 { 15 h2 {
12 font-size: 2.8275em; 16 font-size: 2.8275em;
...@@ -31,6 +35,7 @@ h1, h2, h3, h4 { ...@@ -31,6 +35,7 @@ h1, h2, h3, h4 {
31 font-weight: 500; 35 font-weight: 500;
32 position: relative; 36 position: relative;
33 display: block; 37 display: block;
38 + color: #555;
34 .subheader { 39 .subheader {
35 display: block; 40 display: block;
36 font-size: 0.5em; 41 font-size: 0.5em;
......
...@@ -10,52 +10,64 @@ ...@@ -10,52 +10,64 @@
10 @import "tinymce"; 10 @import "tinymce";
11 11
12 header { 12 header {
13 - background-color: #f8f8f8;
14 display: block; 13 display: block;
15 - width: 100%;
16 - position: fixed;
17 z-index: 2; 14 z-index: 2;
18 top: 0; 15 top: 0;
19 - border-bottom: 1px solid #DDD;
20 .padded { 16 .padded {
21 padding: $-m; 17 padding: $-m;
22 } 18 }
19 + //margin-bottom: $-l;
23 } 20 }
24 21
25 #sidebar { 22 #sidebar {
26 position: fixed; 23 position: fixed;
27 - background-color: #FFF; 24 + background-color: #444;
25 + color: #EEE;
28 height: 100%; 26 height: 100%;
29 top: 0; 27 top: 0;
30 z-index: 1; 28 z-index: 1;
31 - padding-top: 63px + $-m; 29 + //padding-top: $-m;
32 width: 300px; 30 width: 300px;
33 border-right: 1px solid #DDD; 31 border-right: 1px solid #DDD;
32 + h4, li, p, a {
33 + color: #CCC;
34 + }
34 } 35 }
35 36
36 #content { 37 #content {
37 - margin-top: 63px; 38 + //margin-top: 63px;
38 margin-left: 300px; 39 margin-left: 300px;
39 display: block; 40 display: block;
40 position: relative; 41 position: relative;
42 + padding: 0 16px;
41 } 43 }
42 44
43 .logo { 45 .logo {
44 - width: 180px; 46 + font-size: 2em;
45 - opacity: 0.8; 47 + padding: $-xl $-s;
48 + font-weight: bold;
49 + color: #CCC;
46 } 50 }
47 51
48 -header hr { 52 +.search-box {
49 - margin-top: 0; 53 + input {
54 + width: 100%;
55 + border-radius: 0;
56 + padding: $-s $-m;
57 + background-color: rgba(0, 0, 0, 0.1);
58 + border: none;
59 + border-top: 1px solid #333;
60 + border-bottom: 1px solid #333;
61 + }
50 } 62 }
51 63
52 -header .menu { 64 +ul.menu {
53 - margin-bottom: 0;
54 list-style: none; 65 list-style: none;
55 - margin-left: 0; 66 + margin: 0;
56 - li { 67 + li a {
57 - display: inline-block; 68 + padding: $-m;
58 - margin-right: $-m; 69 + display: block;
70 + border-bottom: 1px solid #333;
59 } 71 }
60 } 72 }
61 73
...@@ -87,9 +99,6 @@ header .menu { ...@@ -87,9 +99,6 @@ header .menu {
87 &.left { 99 &.left {
88 float: left; 100 float: left;
89 } 101 }
90 - h1 {
91 - margin-top: 0.2em;
92 - }
93 } 102 }
94 103
95 .page-list { 104 .page-list {
...@@ -103,22 +112,27 @@ header .menu { ...@@ -103,22 +112,27 @@ header .menu {
103 } 112 }
104 } 113 }
105 114
106 -.page-menu { 115 +.side-nav {
107 - opacity: 0.6; 116 + position: fixed;
108 - transition: opacity ease-in-out 120ms; 117 + padding-left: $-m;
109 - &:hover { 118 + opacity: 0.8;
110 - opacity: 1; 119 + margin-top: $-xxl;
111 - } 120 + margin-left: 0;
112 - .buttons a { 121 + max-width: 240px;
113 - display: block;
114 - }
115 } 122 }
116 123
117 .page-nav-list { 124 .page-nav-list {
118 $nav-indent: $-s; 125 $nav-indent: $-s;
126 + margin-left: 2px;
127 + list-style: none;
119 li { 128 li {
120 //border-left: 1px solid rgba(0, 0, 0, 0.1); 129 //border-left: 1px solid rgba(0, 0, 0, 0.1);
121 padding-left: $-xs; 130 padding-left: $-xs;
131 + border-left: 2px solid #888;
132 + margin-bottom: 4px;
133 + }
134 + li a {
135 + color: #555;
122 } 136 }
123 .nav-H2 { 137 .nav-H2 {
124 margin-left: $nav-indent; 138 margin-left: $nav-indent;
...@@ -229,10 +243,6 @@ h1, h2, h3, h4, h5, h6 { ...@@ -229,10 +243,6 @@ h1, h2, h3, h4, h5, h6 {
229 243
230 .breadcrumbs { 244 .breadcrumbs {
231 margin-top: $-s; 245 margin-top: $-s;
232 - a, span {
233 - color: #666;
234 - font-size: 0.9em;
235 - }
236 i { 246 i {
237 padding-right: 4px; 247 padding-right: 4px;
238 } 248 }
...@@ -242,6 +252,30 @@ h1, h2, h3, h4, h5, h6 { ...@@ -242,6 +252,30 @@ h1, h2, h3, h4, h5, h6 {
242 } 252 }
243 } 253 }
244 254
255 +.faded {
256 + opacity: 0.5;
257 + transition: opacity ease-in-out 120ms;
258 + &:hover {
259 + opacity: 1;
260 + }
261 +}
262 +
263 +.faded-small {
264 + color: #666;
265 + font-size: 0.9em;
266 + a, span {
267 + color: #666;
268 + }
269 +}
270 +
271 +.action-buttons {
272 + text-align: right;
273 + a {
274 + display: inline-block;
275 + padding: $-s;
276 + }
277 +}
278 +
245 279
246 .nested-page-list { 280 .nested-page-list {
247 list-style: none; 281 list-style: none;
...@@ -288,6 +322,25 @@ h1, h2, h3, h4, h5, h6 { ...@@ -288,6 +322,25 @@ h1, h2, h3, h4, h5, h6 {
288 } 322 }
289 } 323 }
290 324
325 +.book-tree h4 {
326 + padding: $-m $-s 0 $-s;
327 + i {
328 + padding-right: $-s;
329 + }
330 +}
331 +.book-tree .sidebar-page-list {
332 + list-style: none;
333 + margin: 0;
334 + li a {
335 + display: block;
336 + padding: $-s $-m;
337 + border-bottom: 2px dotted #333;
338 + }
339 + a.bold {
340 + color: #EEE !important;
341 + }
342 +}
343 +
291 .sortable-page-list, .sortable-page-list ul { 344 .sortable-page-list, .sortable-page-list ul {
292 list-style: none; 345 list-style: none;
293 //background-color: rgba(0, 0, 0, 0.04); 346 //background-color: rgba(0, 0, 0, 0.04);
......
...@@ -27,26 +27,23 @@ ...@@ -27,26 +27,23 @@
27 </head> 27 </head>
28 <body> 28 <body>
29 29
30 - <header> 30 + <section id="sidebar">
31 - <div class="padded row clearfix"> 31 + <header>
32 - <div class="col-md-3"> 32 + <div class="padded row clearfix">
33 - <div ><img class="logo float left" src="/bookstack.svg" alt="BookStack"></div> 33 + <div class="col-md-12">
34 - </div> 34 + {{--<div ><img class="logo float left" src="/bookstack.svg" alt="BookStack"></div>--}}
35 - <div class="col-md-9"> 35 + <div class="logo">BookStack</div>
36 - <ul class="menu float">
37 - <li><a href="/books"><i class="fa fa-book"></i>Books</a></li>
38 - </ul>
39 - <div class="search-box float right">
40 - <form action="/pages/search/all" id="search-form" method="GET">
41 - {!! csrf_field() !!}
42 - <input type="text" placeholder="Search all pages..." name="term" id="search-input">
43 - </form>
44 </div> 36 </div>
45 </div> 37 </div>
38 + </header>
39 + <div class="search-box">
40 + <form action="/pages/search/all" id="search-form" method="GET">
41 + <input type="text" placeholder="Search all pages..." name="term" id="search-input">
42 + </form>
46 </div> 43 </div>
47 - </header> 44 + <ul class="menu">
48 - 45 + <li><a href="/books"><i class="fa fa-book"></i>Books</a></li>
49 - <section id="sidebar" class="padded"> 46 + </ul>
50 @yield('sidebar') 47 @yield('sidebar')
51 </section> 48 </section>
52 49
......
...@@ -2,18 +2,11 @@ ...@@ -2,18 +2,11 @@
2 2
3 @section('content') 3 @section('content')
4 4
5 - <div class="row"> 5 +<div class="page-content">
6 - 6 + <h1>Create New Book</h1>
7 - <div class="col-md-3 page-menu"> 7 + <form action="/books" method="POST">
8 - <h4>You are creating a new book.</h4> 8 + @include('books/form')
9 - </div> 9 + </form>
10 - 10 +</div>
11 - <div class="col-md-9 page-content">
12 - <form action="/books" method="POST">
13 - @include('books/form')
14 - </form>
15 - </div>
16 -
17 - </div>
18 11
19 @stop 12 @stop
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,25 +2,18 @@ ...@@ -2,25 +2,18 @@
2 2
3 @section('content') 3 @section('content')
4 4
5 - 5 + <div class="page-content">
6 - <div class="row"> 6 + <h1>Edit Book</h1>
7 - 7 + <form action="/books/{{$book->slug}}" method="POST">
8 - <div class="col-md-3 page-menu"> 8 + <input type="hidden" name="_method" value="PUT">
9 - <h4>You are editing the details for the book '{{$book->name}}'.</h4> 9 + @include('books/form', ['model' => $book])
10 - <hr> 10 + </form>
11 - @include('form/delete-button', ['url' => '/books/' . $book->id . '/destroy', 'text' => 'Delete this book']) 11 + <hr class="margin-top large">
12 - </div> 12 + <div class="margin-top large shaded padded">
13 - 13 + <h2 class="margin-top">Delete this book</h2>
14 - <div class="col-md-9 page-content"> 14 + <p>This will delete this book and all it's pages.</p>
15 - <form action="/books/{{$book->slug}}" method="POST"> 15 + @include('form/delete-button', ['url' => '/books/' . $book->id . '/destroy', 'text' => 'Delete'])
16 - <input type="hidden" name="_method" value="PUT">
17 - @include('books/form', ['model' => $book])
18 - </form>
19 </div> 16 </div>
20 -
21 </div> 17 </div>
22 18
23 -
24 -
25 -
26 @stop 19 @stop
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -3,28 +3,27 @@ ...@@ -3,28 +3,27 @@
3 @section('content') 3 @section('content')
4 4
5 5
6 - <div class="row"> 6 +<div class="row faded-small">
7 - 7 + <div class="col-md-6"></div>
8 - <div class="col-md-3 page-menu"> 8 + <div class="col-md-6 faded">
9 - <h4>Books</h4> 9 + <div class="action-buttons">
10 <a href="/books/create">+ Add new book</a> 10 <a href="/books/create">+ Add new book</a>
11 </div> 11 </div>
12 + </div>
13 +</div>
12 14
13 - <div class="col-md-9">
14 -
15 - <div class="row">
16 - @foreach($books as $book)
17 - <div class="col-md-6">
18 - <div class="book page-style">
19 - <h3><a href="{{$book->getUrl()}}">{{$book->name}}</a></h3>
20 - <p class="text-muted">{{$book->description}}</p>
21 - </div>
22 - </div>
23 - @endforeach
24 - </div>
25 15
16 +<div class="page-content">
17 + <h1>Books</h1>
18 + @foreach($books as $book)
19 + <div class="book">
20 + <h3><a href="{{$book->getUrl()}}">{{$book->name}}</a></h3>
21 + <p class="text-muted">{{$book->description}}</p>
26 </div> 22 </div>
27 - </div> 23 + <hr>
24 + @endforeach
25 +</div>
26 +
28 27
29 28
30 29
......
...@@ -2,33 +2,30 @@ ...@@ -2,33 +2,30 @@
2 2
3 @section('content') 3 @section('content')
4 4
5 - 5 + <div class="row faded-small">
6 - <div class="row"> 6 + <div class="col-md-6"></div>
7 - 7 + <div class="col-md-6">
8 - <div class="col-md-3 page-menu"> 8 + <div class="action-buttons">
9 - <h4>Book Actions</h4>
10 - <div class="buttons">
11 <a href="{{$book->getEditUrl()}}"><i class="fa fa-pencil"></i>Edit Book</a> 9 <a href="{{$book->getEditUrl()}}"><i class="fa fa-pencil"></i>Edit Book</a>
12 <a href="{{ $book->getUrl() }}/sort"><i class="fa fa-sort"></i>Sort Pages</a> 10 <a href="{{ $book->getUrl() }}/sort"><i class="fa fa-sort"></i>Sort Pages</a>
13 </div> 11 </div>
14 </div> 12 </div>
13 + </div>
15 14
16 - <div class="page-content col-md-9 float left"> 15 + <div class="page-content">
17 - <h1>{{$book->name}}</h1> 16 + <h1>{{$book->name}}</h1>
18 - <p class="text-muted">{{$book->description}}</p> 17 + <p class="text-muted">{{$book->description}}</p>
19 -
20 - <div class="clearfix header-group">
21 - <h4 class="float">Pages</h4>
22 - <a href="{{$book->getUrl() . '/page/create'}}" class="text-pos float right">+ New Page</a>
23 - </div>
24 -
25 - @include('pages/page-tree-list', ['pageTree' => $pageTree])
26 18
19 + <div class="clearfix header-group">
20 + <h4 class="float">Pages</h4>
21 + <a href="{{$book->getUrl() . '/page/create'}}" class="text-pos float right">+ New Page</a>
27 </div> 22 </div>
28 23
24 + @include('pages/page-tree-list', ['pageTree' => $pageTree])
29 25
30 </div> 26 </div>
31 27
28 +
32 <script> 29 <script>
33 $(function() { 30 $(function() {
34 31
......
...@@ -4,16 +4,17 @@ ...@@ -4,16 +4,17 @@
4 <div class="page-style editor"> 4 <div class="page-style editor">
5 5
6 {{ csrf_field() }} 6 {{ csrf_field() }}
7 - <div class="title-input title-strip clearfix"> 7 + <div class="title-input page-title clearfix">
8 - <button type="submit" class="button pos float right">Save Page</button> 8 + <div class="input">
9 - <div class="float left">
10 @include('form/text', ['name' => 'name', 'placeholder' => 'Enter Page Title']) 9 @include('form/text', ['name' => 'name', 'placeholder' => 'Enter Page Title'])
11 </div> 10 </div>
12 </div> 11 </div>
13 <div class="edit-area"> 12 <div class="edit-area">
14 @include('form/textarea', ['name' => 'html']) 13 @include('form/textarea', ['name' => 'html'])
15 </div> 14 </div>
16 - 15 + <div class="margin-top large">
16 + <button type="submit" class="button pos">Save Page</button>
17 + </div>
17 </div> 18 </div>
18 19
19 20
...@@ -27,13 +28,13 @@ ...@@ -27,13 +28,13 @@
27 tinymce.init({ 28 tinymce.init({
28 selector: '.edit-area textarea', 29 selector: '.edit-area textarea',
29 content_css: '/css/app.css', 30 content_css: '/css/app.css',
30 - body_class: 'container', 31 + body_class: 'page-content',
31 relative_urls: false, 32 relative_urls: false,
32 statusbar: false, 33 statusbar: false,
33 height: 600, 34 height: 600,
34 plugins: "image table textcolor paste link imagetools", 35 plugins: "image table textcolor paste link imagetools",
35 toolbar: "undo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image link | fontsizeselect full", 36 toolbar: "undo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image link | fontsizeselect full",
36 - content_style: "body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important}", 37 + content_style: "body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}",
37 file_browser_callback: function(field_name, url, type, win) { 38 file_browser_callback: function(field_name, url, type, win) {
38 ImageManager.show('#image-manager', function(image) { 39 ImageManager.show('#image-manager', function(image) {
39 win.document.getElementById(field_name).value = image.url; 40 win.document.getElementById(field_name).value = image.url;
......
1 - 1 +{{--Requires an array of pages to be passed as $pageTree--}}
2 2
3 <ul class="nested-page-list"> 3 <ul class="nested-page-list">
4 @foreach($pageTree as $subPage) 4 @foreach($pageTree as $subPage)
......
1 @extends('base') 1 @extends('base')
2 2
3 @section('sidebar') 3 @section('sidebar')
4 - <div class="page-nav"> 4 + <div class="book-tree">
5 - <h4>Navigation</h4> 5 + <h4><a href="/books/{{$sidebarBookTree['slug']}}"><i class="fa fa-book"></i>{{$sidebarBookTree['name']}}</a></h4>
6 - <ul class="page-nav-list"></ul> 6 + @if($sidebarBookTree['hasChildren'])
7 - </div> 7 + @include('pages/sidebar-tree-list', ['pageTree' => $sidebarBookTree['pages']])
8 - <div class="page-actions"> 8 + @endif
9 - <h4>Actions</h4>
10 - <div class="list">
11 - <a href="{{$page->getUrl() . '/edit'}}" class="muted"><i class="fa fa-pencil"></i>Edit this page</a>
12 - <a href="{{$page->getUrl() . '/create'}}" class="muted"><i class="fa fa-file-o"></i>Create Sub-page</a>
13 - </div>
14 </div> 9 </div>
15 @stop 10 @stop
16 11
17 @section('content') 12 @section('content')
18 13
19 - <div class="row"> 14 + <div class="row faded-small">
20 - <div class="col-md-6"> 15 + <div class="col-md-6 faded">
21 <div class="breadcrumbs padded-horizontal"> 16 <div class="breadcrumbs padded-horizontal">
22 <a href="{{$book->getUrl()}}"><i class="fa fa-book"></i>{{ $book->name }}</a> 17 <a href="{{$book->getUrl()}}"><i class="fa fa-book"></i>{{ $book->name }}</a>
23 @if($breadCrumbs) 18 @if($breadCrumbs)
...@@ -28,8 +23,21 @@ ...@@ -28,8 +23,21 @@
28 @endif 23 @endif
29 </div> 24 </div>
30 </div> 25 </div>
26 + <div class="col-md-6 faded">
27 + <div class="action-buttons">
28 + <a href="{{$page->getUrl() . '/edit'}}" ><i class="fa fa-pencil"></i>Edit this page</a>
29 + <a href="{{$page->getUrl() . '/create'}}"><i class="fa fa-file-o"></i>Create Sub-page</a>
30 + </div>
31 + </div>
32 + </div>
33 +
34 + <div class="side-nav faded">
35 + <h4>Page Navigation</h4>
36 + <ul class="page-nav-list">
37 + </ul>
31 </div> 38 </div>
32 39
40 +
33 <div class="page-content"> 41 <div class="page-content">
34 <h1>{{$page->name}}</h1> 42 <h1>{{$page->name}}</h1>
35 @if(count($page->children) > 0) 43 @if(count($page->children) > 0)
......
1 +{{--Requires an array of pages to be passed as $pageTree--}}
2 +
3 +<ul class="sidebar-page-list">
4 + @foreach($pageTree as $subPage)
5 + <li @if($subPage['hasChildren'])class="has-children"@endif>
6 + <a href="{{$subPage['url']}}" @if($subPage['current'])class="bold"@endif>{{$subPage['name']}}</a>
7 + @if($subPage['hasChildren'])
8 + @include('pages/sidebar-tree-list', ['pageTree' => $subPage['pages']])
9 + @endif
10 + </li>
11 + @endforeach
12 +</ul>
...\ No newline at end of file ...\ No newline at end of file