Add an app layout and some styles

This commit is contained in:
Annika Backstrom 2024-05-25 13:47:48 +01:00
parent b439d6503f
commit bd3f0e7fcd
Signed by: annika
GPG Key ID: 3561F004DE1D9AFE
11 changed files with 1204 additions and 17 deletions

View File

@ -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,
]
);
}

View File

@ -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

File diff suppressed because it is too large Load Diff

View File

@ -8,6 +8,7 @@
"devDependencies": {
"axios": "^1.6.4",
"laravel-vite-plugin": "^1.0",
"sass": "^1.77.2",
"vite": "^5.0"
}
}

View File

32
resources/sass/app.scss Normal file
View 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;
}
}

View File

@ -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>

View File

@ -0,0 +1,5 @@
@foreach ($bookmarks as $bookmark)
@include('bookmarks.show')
@endforeach

View 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

View 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>

View File

@ -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,
},
});