Add an app layout and some styles
This commit is contained in:
parent
b439d6503f
commit
bd3f0e7fcd
@ -3,7 +3,6 @@
|
||||
namespace App\Http\Controllers;
|
||||
|
||||
use App\Models\Bookmark;
|
||||
use App\Models\BookmarkTag;
|
||||
use Illuminate\Http\Request;
|
||||
|
||||
class BookmarkController extends Controller
|
||||
@ -13,7 +12,11 @@ class BookmarkController extends Controller
|
||||
*/
|
||||
public function index()
|
||||
{
|
||||
//
|
||||
return view(
|
||||
'bookmarks.index', [
|
||||
'bookmarks' => Bookmark::paginate(20),
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -38,9 +41,8 @@ class BookmarkController extends Controller
|
||||
public function show(string $id)
|
||||
{
|
||||
return view(
|
||||
'bookmark', [
|
||||
'bookmarks.show', [
|
||||
'bookmark' => $bookmark = Bookmark::findOrFail($id),
|
||||
'tags' => $bookmark->children,
|
||||
]
|
||||
);
|
||||
}
|
||||
|
@ -4,6 +4,7 @@ namespace App\Models;
|
||||
|
||||
use Illuminate\Database\Eloquent\Factories\HasFactory;
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
use Illuminate\Database\Eloquent\Relations\HasMany;
|
||||
|
||||
class Bookmark extends Model
|
||||
{
|
||||
@ -11,7 +12,7 @@ class Bookmark extends Model
|
||||
|
||||
protected $table = 'bookmarks';
|
||||
|
||||
public function children()
|
||||
public function tags(): HasMany
|
||||
{
|
||||
return $this->hasMany(BookmarkTag::class, 'bookmark_id');
|
||||
}
|
||||
|
1123
package-lock.json
generated
Normal file
1123
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -8,6 +8,7 @@
|
||||
"devDependencies": {
|
||||
"axios": "^1.6.4",
|
||||
"laravel-vite-plugin": "^1.0",
|
||||
"sass": "^1.77.2",
|
||||
"vite": "^5.0"
|
||||
}
|
||||
}
|
||||
|
32
resources/sass/app.scss
Normal file
32
resources/sass/app.scss
Normal file
@ -0,0 +1,32 @@
|
||||
body {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
background-color: hsl(100, 50%, 90%);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 40rem;
|
||||
}
|
||||
|
||||
.bookmark {
|
||||
padding: 1ex;
|
||||
|
||||
&-title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&-tags {
|
||||
padding: 0;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
&-tag {
|
||||
display: inline-block;
|
||||
|
||||
padding: 0.5ex 0.8ex;
|
||||
margin: 0 0 0.2ex 0;
|
||||
|
||||
border-radius: 7px;
|
||||
background-color: hsl(230, 50%, 50%);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
@ -1,11 +0,0 @@
|
||||
<ul>
|
||||
<li><a href="{{ $bookmark->href }}">{{ $bookmark->href }}</a></li>
|
||||
<li>{{ $bookmark->title }}</li>
|
||||
<li>{{ $bookmark->description }}</li>
|
||||
<li>{{ $bookmark->created_at }}</li>
|
||||
<li>
|
||||
@foreach ($tags as $tag)
|
||||
{{ $tag->tag->name }}@if (!$loop->last),@endif
|
||||
@endforeach
|
||||
</li>
|
||||
</ul>
|
5
resources/views/bookmarks/index.blade.php
Normal file
5
resources/views/bookmarks/index.blade.php
Normal file
@ -0,0 +1,5 @@
|
||||
@foreach ($bookmarks as $bookmark)
|
||||
|
||||
@include('bookmarks.show')
|
||||
|
||||
@endforeach
|
19
resources/views/bookmarks/show.blade.php
Normal file
19
resources/views/bookmarks/show.blade.php
Normal file
@ -0,0 +1,19 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<div class="bookmark">
|
||||
<p class="bookmark-title">{{ $bookmark->title }}</p>
|
||||
<p class="bookmark-href"><a href="{{ $bookmark->href }}">{{ $bookmark->href }}</a></p>
|
||||
@if ($bookmark->description)
|
||||
<p class="bookmark-description">{{ $bookmark->description }}</p>
|
||||
@endif
|
||||
<p>{{ $bookmark->created_at }}</p>
|
||||
<ul class="bookmark-tags">
|
||||
@foreach ($bookmark->tags as $tag)
|
||||
<li class="bookmark-tag">
|
||||
{{ $tag->tag->name }}
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endsection
|
12
resources/views/layouts/app.blade.php
Normal file
12
resources/views/layouts/app.blade.php
Normal file
@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>urlslug</title>
|
||||
@vite(['resources/sass/app.scss'])
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
@yield('content')
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
@ -4,8 +4,11 @@ import laravel from 'laravel-vite-plugin';
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
laravel({
|
||||
input: ['resources/css/app.css', 'resources/js/app.js'],
|
||||
input: ['resources/sass/app.scss'],
|
||||
refresh: true,
|
||||
}),
|
||||
],
|
||||
css: {
|
||||
devSourcemap: true,
|
||||
},
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user