調整文章頁面樣式

app/Http/Controllers/PostController.php

@@ -12,6 +12,7 @@ class PostController extends Controller
 
     public function index(Request $request)
     {
+        app('SiteState')->bodyClasses[] = 'post-archive';
         $resource = $this->getResource($request);
         $modelClass = $this->getModelClass($resource);
         $repo = new PostRepository($modelClass);
@@ -24,6 +25,7 @@ class PostController extends Controller
 
     public function show(Request $request, $postId)
     {
+        app('SiteState')->bodyClasses[] = 'single-post';
         $resource = $this->getResource($request);
         $modelClass = $this->getModelClass($resource);
         $post = $modelClass::find($postId);

app/Presenters/BodyClassPresenter.php

@@ -14,10 +14,10 @@ class BodyClassPresenter
     public function print()
     {
         $classes =
-            [
+            array_merge([
                 $this->getRouteName(),
                 'lang-' . app()->getLocale()
-            ];
+            ], app('SiteState')->bodyClasses);
         return implode(' ', $classes);
     }
 }

app/Services/SiteStateService.php

@@ -52,6 +52,8 @@ class SiteStateService
      */
     public $defaultLanguage = '';
 
+    public $bodyClasses = [];
+
     /**
      * 取得所有變數
      *

resources/sass/app.scss

@@ -12,3 +12,32 @@
 .post-feature-image {
     max-width: 100%;
 }
+
+main {
+    padding: 20px;
+}
+
+body.post-archive {
+    .container {
+        display: flex;
+        flex-wrap: wrap;
+    }
+    article {
+        border: 1px solid lightgray;
+        text-align: center;
+        padding: 5px;
+        margin: 5px;
+        flex: 1;
+        flex-basis: calc(33.33% - 10px);
+    }
+}
+
+body.single-post {
+    .title {
+        font-weight: bold;
+    }
+    .post-content {
+        font-size: 16px;
+        padding: 20px 0;
+    }
+}

resources/views/admin/menu/posts/edit.blade.php

@@ -1,6 +1,9 @@
 @extends('admin.layouts.app')
 
 @section('admin-page-content')
+    @if($post)
+    <div class="view-page"><a href="{{ route($resource . '.show', [$post->id]) }}">檢視文章</a></div>
+    @endif
     <form action="{{ $post ? route($adminRouteNamePrefix . $resource . '.update', [$post->id]) : route($adminRouteNamePrefix . $resource . '.store') }}" method="POST">
         @if($post)
             @method('PUT')

resources/views/post/index.blade.php

@@ -5,17 +5,13 @@
         @foreach($posts as $post)
             <article>
                 <div class="row">
-                    <div class="col col-3">
+                    <div class="col">
                         <?php if($post->featureImage): ?>
                         <div class="img-wrapper">
                             <img src="{{ $post->featureImage->url }}" alt="{{ $post->featureImage->description }}" class="post-feature-image">
                         </div>
                         <?php endif; ?>
-                    </div>
-                    <div class="col col-9">
-                        <div class="title">
-                            <h2><a href="{{ route($resource . '.show', [$post->id]) }}">{{ $post->title }}</a></h2>
-                        </div>
+                        <h2 class="title"><a href="{{ route($resource . '.show', [$post->id]) }}">{{ $post->title }}</a></h2>
                         <div class="excerpt">{{ $post->excerpt }}</div>
                         <div class="date">{{ $post->created_at }}</div>
                     </div>

resources/views/post/single.blade.php

@@ -13,21 +13,21 @@
         </div>
         <div class="row">
             <div class="col">
-                <h1>{{ $post->title }}</h1>
+                <h1 class="title">{{ $post->title }}</h1>
             </div>
         </div>
         <div class="row">
             <div class="col">
-                {{ $post->author->email }}
-            </div>
-            <div class="col">
-                {{ $post->created_at }}
+                <div class="div">Author: {{ $post->author->email }}</div>
+                <div class="div">Created at: {{ $post->created_at }}</div>
             </div>
         </div>
         <div class="row">
             <div class="col">
+                <div class="post-content">
                     {{ $post->content }}
                 </div>
             </div>
         </div>
+    </div>
 @endsection