Skip to content

Commit

Permalink
Add some basic styles to the workbench app
Browse files Browse the repository at this point in the history
  • Loading branch information
@tonysm
tonysm committed Sep 5, 2023
1 parent 91f4d8d commit 84e92c3
Show file tree
Hide file tree
Showing 11 changed files with 78 additions and 75 deletions.
2 changes: 1 addition & 1 deletion workbench/app/Http/Controllers/ArticlesController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ public function store(Request $request)
turbo_stream()->prepend('articles', view('articles._article_card', [
'article' => $article,
])),
turbo_stream()->replace('create_article', view('articles._create_article_link')),
turbo_stream()->replace('create_article_details', view('articles._create_article_link')),
]);
}

Expand Down
18 changes: 10 additions & 8 deletions workbench/resources/views/articles/_article.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
<x-turbo-frame :id="$article">
<h2>{{ $article->title }}</h2>
<x-turbo-frame :id="$article" class="contents">
<h2 class="text-4xl font-semibold">{{ $article->title }}</h2>

<p>{{ $article->content }}</p>
<p class="prose">{{ $article->content }}</p>

<h4>{{ __('Actions') }}</h4>
<div class="mt-4 border-t pt-2">
<h4 class="text-2xl">{{ __('Actions') }}</h4>

<ul>
<li><a href="{{ route('articles.edit', $article) }}">{{ __('Edit') }}</a></li>
<li><a href="{{ route('articles.delete', $article) }}">{{ __('Delete') }}</a></li>
</ul>
<ul class="flex items-center space-x-2">
<li><a class="underline text-indigo-600" href="{{ route('articles.edit', $article) }}">{{ __('Edit') }}</a></li>
<li><a class="underline text-red-600" href="{{ route('articles.delete', $article) }}">{{ __('Delete') }}</a></li>
</ul>
</div>
</x-turbo-frame>
8 changes: 6 additions & 2 deletions workbench/resources/views/articles/_article_card.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
<div id="@domid($article, 'card')">
<p>{{ $article->title }} - <a href="{{ route('articles.show', $article)}}">{{ __('View') }}</a></p>
<div id="@domid($article, 'card')" class="p-4">
<p class="mb-2 flex items-center justify-between">{{ $article->title }}</p>

<span class="pt-2 border-t text-sm">
<a class="underline text-indigo-500" href="{{ route('articles.show', $article)}}">{{ __('View') }}</a>
</span>
</div>
12 changes: 9 additions & 3 deletions workbench/resources/views/articles/_create_article_link.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
<x-turbo-frame id="create_article">
<a href="{{ route('articles.create') }}">{{ __('New Article') }}</a>
</x-turbo-frame>
<details id="create_article_details" class="open:bg-white dark:open:bg-slate-900 open:ring-1 open:ring-black/5 dark:open:ring-white/10 open:shadow-lg p-6">
<summary class="list-none cursor-pointer">
<span class="underline text-indigo-500">{{ __('New Article') }}</span>
</summary>

<x-turbo-frame class="mt-2" id="create_article" src="{{ route('articles.create') }}" loading="lazy">
<p class="text-gray-600">{{ __('Loading...') }}</p>
</x-turbo-frame>
</details>
29 changes: 29 additions & 0 deletions workbench/resources/views/articles/_form.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<form action="{{ ($article->exists ?? false) ? route('articles.update', $article) : route('articles.store') }}" method="post">
@if ($article->exists ?? false)
@method('PUT')
@endif

<div>
<label class="block font-medium text-sm text-gray-700 dark:text-gray-300" for="title">{{ __('Title') }}</label>
<input class="w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm" type="text" name="title" placeholder="{{ __('Title') }}" value="{{ old('title', $article?->title) }}" />
@error('title')
<span class="mt-1 block text-sm text-red-600 dark:text-red-400">{{ $message }}</span>
@enderror
</div>

<div class="mt-2">
<label class="block font-medium text-sm text-gray-700 dark:text-gray-300" for="content">{{ __('Content') }}</label>
<textarea class="w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm" name="content" id="content" cols="30" rows="10" placeholder="{{ __('Say something...') }}">{{ old('content', $article?->content) }}</textarea>
@error('content')
<span class="mt-1 block text-sm text-red-600 dark:text-red-400">{{ $message }}</span>
@enderror
</div>

<div class="mt-4 flex items-center space-x-2 justify-end">
@if ($article?->exists)
<a class="underline text-indigo-600" href="{{ route('articles.show', $article) }}">{{ __('Cancel') }}</a>
@endif

<button class="px-4 py-2 text-lg rounded bg-indigo-600 text-white" type="submit">{{ $article?->exists ? __('Save') : __('Create') }}</button>
</div>
</form>
28 changes: 4 additions & 24 deletions workbench/resources/views/articles/create.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,15 @@
<x-app-layout>
<x-slot name="title">{{ __('New Article') }}</x-slot>

<h1>{{ __('New Article') }}</h1>
<h1 class="mb-4 text-4xl font-semibold font-cursive">{{ __('New Article') }}</h1>

<div>
<a href="{{ route('articles.index') }}">{{ __('Back to Index') }}</a>
<div class="p-6">
<a class="underline text-indigo-600" href="{{ route('articles.index') }}">{{ __('Back to Index') }}</a>
</div>

<br>

<x-turbo-frame id="create_article">
<form action="{{ route('articles.store') }}" method="post">
<div>
<label for="title">{{ __('Title') }}</label>
<input type="text" name="title" />
@error('title')
<span>{{ $message }}</span>
@enderror
</div>

<div>
<label for="content">{{ __('Content') }}</label>
<textarea name="content" id="content" cols="30" rows="10"></textarea>
@error('content')
<span>{{ $message }}</span>
@enderror
</div>

<div>
<button type="submit">{{ __('Create') }}</button>
</div>
</form>
@include('articles._form', ['article' => null])
</x-turbo-frame>
</x-app-layout>
14 changes: 7 additions & 7 deletions workbench/resources/views/articles/delete.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<x-app-layout>
<x-slot name="title">{{ __('Delete Article') }}</x-slot>

<h1>{{ __('Delete Article') }}</h1>
<h1 class="mb-4 text-4xl font-semibold font-sans">{{ __('Delete Article') }}</h1>

<div>
<a href="{{ route('articles.show', $article) }}">{{ __('Back to Article') }}</a>
<div class="p-6">
<a class="underline text-indigo-600" href="{{ route('articles.show', $article) }}">{{ __('Back to Article') }}</a>

<p>{{ __('My cookie: :value.', ['value' => request()->cookie('my-cookie', 'no-cookie')]) }}</p>
<p>{{ __('Response cookie: :value.', ['value' => request()->cookie('response-cookie', 'no-cookie')]) }}</p>
Expand All @@ -14,12 +14,12 @@
<form action="{{ route('articles.destroy', $article) }}" method="post" data-turbo-frame="_top">
@method('DELETE')

<p>{{ __('Are you sure you wanna delete this article?') }}</p>
<p class="text-lg">{{ __('Are you sure you wanna delete this article?') }}</p>

<div>
<a href="{{ route('articles.show', $article) }}">{{ __('No, cancel.') }}</a>
<div class="mt-4 flex items-center justify-end space-x-2">
<a class="text-gray-600 underline" href="{{ route('articles.show', $article) }}">{{ __('No, cancel.') }}</a>

<button type="submit">{{ __('Yes, delete it.') }}</button>
<button class="px-4 py-2 border border-red-600 rounded bg-red-600 text-white" type="submit">{{ __('Yes, delete it.') }}</button>
</div>
</form>
</x-turbo-frame>
Expand Down
25 changes: 1 addition & 24 deletions workbench/resources/views/articles/edit.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,29 +14,6 @@
<br>

<x-turbo-frame :id="$article" target="_top">
<form action="{{ route('articles.update', $article) }}" method="post">
@method('PUT')

<div>
<label for="title">{{ __('Title') }}</label>
<input type="text" name="title" value="{{ old('title', $article->title) }}" />
@error('title')
<span>{{ $message }}</span>
@enderror
</div>

<div>
<label for="content">{{ __('Content') }}</label>
<textarea name="content" id="content" cols="30" rows="10">{{ old('content', $article->content) }}</textarea>
@error('content')
<span>{{ $message }}</span>
@enderror
</div>

<div>
<a href="{{ route('articles.show', $article) }}">{{ __('Cancel') }}</a>
<button type="submit">{{ __('Save') }}</button>
</div>
</form>
@include('articles._form', ['article' => $article])
</x-turbo-frame>
</x-app-layout>
4 changes: 2 additions & 2 deletions workbench/resources/views/articles/index.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<x-app-layout>
<x-slot name="title">{{ __('Articles') }}</x-slot>

<h1>{{ __('Articles Index') }}</h1>
<h1 class="mb-4 text-4xl font-semibold font-sans">{{ __('Articles Index') }}</h1>

@include('articles._create_article_link')

<div id="articles">
<div id="articles" class="mt-4 flex flex-col space-y-2 divide-y border rounded">
@each('articles._article_card', $articles, 'article')
</div>
</x-app-layout>
6 changes: 3 additions & 3 deletions workbench/resources/views/articles/show.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<x-app-layout>
<x-slot name="title">{{ $article->title }}</x-slot>

<h1>{{ __('View Article') }}</h1>
<h1 class="mb-4 text-4xl font-semibold font-cursive">{{ __('View Article') }}</h1>

<div>
<div class="p-6">
@unlessturbonative
<a href="{{ route('articles.index') }}">{{ __('Back to Index') }}</a>
<a class="underline text-indigo-600" href="{{ route('articles.index') }}">{{ __('Back to Index') }}</a>
@endturbonative

@turbonative
Expand Down
7 changes: 6 additions & 1 deletion workbench/resources/views/components/app.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,17 @@

{{ $head ?? null }}

{{-- Use Tailwind CDN --}}
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>

{{-- Install Turbo via CDN --}}
<script type="module">
import * as Turbo from 'https://cdn.skypack.dev/@hotwired/turbo';
</script>
</head>
<body>
{{ $slot }}
<main class="max-w-lg mx-auto">
{{ $slot }}
</main>
</body>
</html>

0 comments on commit 84e92c3

Please sign in to comment.