TDD 构建 Laravel 应用之设计项目页面

本系列文章为 laracasts.com 的系列视频教程 ——Build A Laravel App With TDD 的学习笔记,若喜欢该系列视频,可去该网站订阅后下载该系列视频, 支持正版

本小节都是前端优化界面的内容,大致记录下流程。

  • 提取卡片样式
1
2
3
4
5
6
...
.card {
@apply .bg-white .p-5 .rounded-lg .shadow;
}

@import "~tailwindcss/utilities";
  • 提取 card 布局放置 projects/card.blade.php
1
2
3
4
5
6
7
8
<div class="card" style="height: 200px">
<h3 class="font-normal text-xl py-4 -ml-5 mb-3 border-l-4 border-blue-300
pl-4">
<a href="{{ $project->path() }}" class="text-black no-underline">{{ $project->title }}</a>
</h3>

<div class="text-gray-500">{{ \Illuminate\Support\Str::limit($project->description, 100) }} </div>
</div>
  • 修改 projects/index.php
1
2
3
4
5
6
7
8
9
<main class="lg:flex lg:flex-wrap -mx-3">
@forelse($projects as $project)
<div class="lg:w-1/3 px-3 pb-6">
@include('projects.card')
</div>
@empty
<div>No project yet.</div>
@endforelse
</main>
  • 重构 projects/show.blade.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
@extends('layouts.app')

@section('content')

<header class="flex items-center mb-3 py-4">
<div class="flex justify-between items-end w-full">
<p class="text-gray-500 text-sm font-normal">
<a href="/projects" class="text-gray-500 text-sm font-normal no-underline hover:underline">My Projects</a> /
{{$project->title}}
</p>
<a href="/projects/create" class="button">New Project</a>
</div>
</header>

<main>
<div class="lg:flex -mx-3">
<div class="lg:w-3/4 px-3 mb-6">
<div class="mb-8">
<h2 class="text-lg text-gray-500 text-sm font-normal mb-3">Tasks</h2>
<div class="card mb-3">11111</div>
<div class="card mb-3">11111</div>
<div class="card mb-3">11111</div>
<div class="card mb-3">11111</div>
<div class="card">11111</div>
</div>

<div>
<h2 class="text-lg text-gray-500 text-sm font-normal mb-3">Note</h2>

<textarea class="card w-full" style="min-height: 200px">11111</textarea>
</div>
</div>

<div class="lg:w-1/4 px-3">
@include('projects.card')
</div>
</div>
</main>
@endsection