layouts
This commit is contained in:
parent
fbc8bf9de4
commit
7971abee3d
GPG key ID:
B3C5488E9A1A7CA6
17 changed files with 251 additions and 239 deletions
|
|
@ -73,6 +73,10 @@ @layer components {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.window:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.window hr {
|
||||
height: 1px;
|
||||
border-top: 1px solid var(--button-shadow);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<x-layout>
|
||||
<x-slot:title>Admin</x-slot>
|
||||
<x-layout title="Admin">
|
||||
<x-window>
|
||||
<p>You're logged in!</p>
|
||||
|
||||
<p>You're logged in!</p>
|
||||
|
||||
<a href="{{ route('categories.index') }}">Categories</a>
|
||||
<a href="{{ route('categories.index') }}">Categories</a>
|
||||
</x-window>
|
||||
</x-layout>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<x-layout>
|
||||
<x-slot:title>Confirm Password</x-slot>
|
||||
|
||||
<x-window title="Confirm Password">
|
||||
<x-layout title="Confirm Password">
|
||||
<x-window>
|
||||
<div>
|
||||
This is a secure area of the application. Please confirm your password
|
||||
before continuing.
|
||||
|
|
|
|||
|
|
@ -1,31 +1,31 @@
|
|||
<x-guest-layout>
|
||||
<x-slot:title>Forgot Password</x-slot>
|
||||
|
||||
<div>
|
||||
Forgot your password? No problem. Just let us know your email address and we
|
||||
will email you a password reset link that will allow you to choose a new
|
||||
one.
|
||||
</div>
|
||||
|
||||
<!-- Session Status -->
|
||||
<x-auth-session-status :status="session('status')" />
|
||||
|
||||
<form method="POST" action="{{ route('password.email') }}">
|
||||
@csrf
|
||||
|
||||
<div class="field-row">
|
||||
<label for="email">Email</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
name="email"
|
||||
value="{{ old('email') }}"
|
||||
required
|
||||
autofocus
|
||||
/>
|
||||
<x-input-error :messages="$errors->get('email')" />
|
||||
<x-layout title="Forgot Password">
|
||||
<x-window>
|
||||
<div>
|
||||
Forgot your password? No problem. Just let us know your email address and
|
||||
we will email you a password reset link that will allow you to choose a
|
||||
new one.
|
||||
</div>
|
||||
|
||||
<button type="submit">Email Password Reset Link</button>
|
||||
</form>
|
||||
</x-guest-layout>
|
||||
<!-- Session Status -->
|
||||
<x-auth-session-status :status="session('status')" />
|
||||
|
||||
<form method="POST" action="{{ route('password.email') }}">
|
||||
@csrf
|
||||
|
||||
<div class="field-row">
|
||||
<label for="email">Email</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
name="email"
|
||||
value="{{ old('email') }}"
|
||||
required
|
||||
autofocus
|
||||
/>
|
||||
<x-input-error :messages="$errors->get('email')" />
|
||||
</div>
|
||||
|
||||
<button type="submit">Email Password Reset Link</button>
|
||||
</form>
|
||||
</x-window>
|
||||
</x-layout>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<x-layout>
|
||||
<x-slot:title>Login</x-slot>
|
||||
|
||||
<x-window title="Login">
|
||||
<x-layout title="Login">
|
||||
<x-window>
|
||||
<!-- Session Status -->
|
||||
<x-auth-session-status :status="session('status')" />
|
||||
|
||||
|
|
|
|||
|
|
@ -1,72 +1,72 @@
|
|||
<x-guest-layout>
|
||||
<x-slot:title>Register</x-slot>
|
||||
<x-layout title="Register">
|
||||
<x-window>
|
||||
<form method="POST" action="{{ route('register') }}">
|
||||
@csrf
|
||||
|
||||
<form method="POST" action="{{ route('register') }}">
|
||||
@csrf
|
||||
<!-- Name -->
|
||||
<div class="field-row">
|
||||
<label for="name">Name</label>
|
||||
<input
|
||||
id="name"
|
||||
type="text"
|
||||
name="name"
|
||||
value="{{ old('name') }}"
|
||||
required
|
||||
autofocus
|
||||
autocomplete="name"
|
||||
/>
|
||||
<x-input-error :messages="$errors->get('name')" />
|
||||
</div>
|
||||
|
||||
<!-- Name -->
|
||||
<div class="field-row">
|
||||
<label for="name">Name</label>
|
||||
<input
|
||||
id="name"
|
||||
type="text"
|
||||
name="name"
|
||||
value="{{ old('name') }}"
|
||||
required
|
||||
autofocus
|
||||
autocomplete="name"
|
||||
/>
|
||||
<x-input-error :messages="$errors->get('name')" />
|
||||
</div>
|
||||
<!-- Email Address -->
|
||||
<div class="field-row">
|
||||
<label for="email">Email</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
name="email"
|
||||
value="{{ old('email') }}"
|
||||
required
|
||||
autocomplete="username"
|
||||
/>
|
||||
<x-input-error :messages="$errors->get('email')" />
|
||||
</div>
|
||||
|
||||
<!-- Email Address -->
|
||||
<div class="field-row">
|
||||
<label for="email">Email</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
name="email"
|
||||
value="{{ old('email') }}"
|
||||
required
|
||||
autocomplete="username"
|
||||
/>
|
||||
<x-input-error :messages="$errors->get('email')" />
|
||||
</div>
|
||||
<!-- Password -->
|
||||
<div class="field-row">
|
||||
<label for="password">Password</label>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="field-row">
|
||||
<label for="password">Password</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
name="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
name="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
<x-input-error :messages="$errors->get('password')" />
|
||||
</div>
|
||||
|
||||
<x-input-error :messages="$errors->get('password')" />
|
||||
</div>
|
||||
<!-- Confirm Password -->
|
||||
<div class="field-row">
|
||||
<label for="password_confirmation">Confirm Password</label>
|
||||
|
||||
<!-- Confirm Password -->
|
||||
<div class="field-row">
|
||||
<label for="password_confirmation">Confirm Password</label>
|
||||
<input
|
||||
id="password_confirmation"
|
||||
type="password"
|
||||
name="password_confirmation"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
|
||||
<input
|
||||
id="password_confirmation"
|
||||
type="password"
|
||||
name="password_confirmation"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
<x-input-error :messages="$errors->get('password_confirmation')" />
|
||||
</div>
|
||||
|
||||
<x-input-error :messages="$errors->get('password_confirmation')" />
|
||||
</div>
|
||||
<div>
|
||||
<a href="{{ route('login') }}">Already registered?</a>
|
||||
|
||||
<div>
|
||||
<a href="{{ route('login') }}">Already registered?</a>
|
||||
|
||||
<button type="submit">Register</button>
|
||||
</div>
|
||||
</form>
|
||||
</x-guest-layout>
|
||||
<button type="submit">Register</button>
|
||||
</div>
|
||||
</form>
|
||||
</x-window>
|
||||
</x-layout>
|
||||
|
|
|
|||
|
|
@ -1,55 +1,59 @@
|
|||
<x-guest-layout>
|
||||
<x-slot:title>Reset Password</x-slot>
|
||||
<x-layout title="Reset Password">
|
||||
<x-window>
|
||||
<form method="POST" action="{{ route('password.store') }}">
|
||||
@csrf
|
||||
|
||||
<form method="POST" action="{{ route('password.store') }}">
|
||||
@csrf
|
||||
|
||||
<!-- Password Reset Token -->
|
||||
<input type="hidden" name="token" value="{{ $request->route('token') }}" />
|
||||
|
||||
<!-- Email Address -->
|
||||
<div class="field-row">
|
||||
<label for="email">Email</label>
|
||||
<!-- Password Reset Token -->
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
name="email"
|
||||
value="{{ old('email', $request->email) }}"
|
||||
required
|
||||
autofocus
|
||||
autocomplete="username"
|
||||
/>
|
||||
<x-input-error :messages="$errors->get('email')" />
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="field-row">
|
||||
<label for="password">Password</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
name="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
<x-input-error :messages="$errors->get('password')" />
|
||||
</div>
|
||||
|
||||
<!-- Confirm Password -->
|
||||
<div class="field-row">
|
||||
<label for="password_confirmation">Confirm Password</label>
|
||||
|
||||
<input
|
||||
id="password_confirmation"
|
||||
type="password"
|
||||
name="password_confirmation"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
type="hidden"
|
||||
name="token"
|
||||
value="{{ $request->route('token') }}"
|
||||
/>
|
||||
|
||||
<x-input-error :messages="$errors->get('password_confirmation')" />
|
||||
</div>
|
||||
<!-- Email Address -->
|
||||
<div class="field-row">
|
||||
<label for="email">Email</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
name="email"
|
||||
value="{{ old('email', $request->email) }}"
|
||||
required
|
||||
autofocus
|
||||
autocomplete="username"
|
||||
/>
|
||||
<x-input-error :messages="$errors->get('email')" />
|
||||
</div>
|
||||
|
||||
<button type="submit">Reset Password</button>
|
||||
</form>
|
||||
</x-guest-layout>
|
||||
<!-- Password -->
|
||||
<div class="field-row">
|
||||
<label for="password">Password</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
name="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
<x-input-error :messages="$errors->get('password')" />
|
||||
</div>
|
||||
|
||||
<!-- Confirm Password -->
|
||||
<div class="field-row">
|
||||
<label for="password_confirmation">Confirm Password</label>
|
||||
|
||||
<input
|
||||
id="password_confirmation"
|
||||
type="password"
|
||||
name="password_confirmation"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
|
||||
<x-input-error :messages="$errors->get('password_confirmation')" />
|
||||
</div>
|
||||
|
||||
<button type="submit">Reset Password</button>
|
||||
</form>
|
||||
</x-window>
|
||||
</x-layout>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,32 @@
|
|||
<x-guest-layout>
|
||||
<x-slot:title>Verify Email</x-slot>
|
||||
|
||||
<p>
|
||||
Thanks for signing up! Before getting started, could you verify your email
|
||||
address by clicking on the link we just emailed to you? If you didn't
|
||||
receive the email, we will gladly send you another.
|
||||
</p>
|
||||
|
||||
@if (session('status') == 'verification-link-sent')
|
||||
<x-layout title="Verify Email">
|
||||
<x-window>
|
||||
<p>
|
||||
A new verification link has been sent to the email address you provided
|
||||
during registration.
|
||||
Thanks for signing up! Before getting started, could you verify your email
|
||||
address by clicking on the link we just emailed to you? If you didn't
|
||||
receive the email, we will gladly send you another.
|
||||
</p>
|
||||
@endif
|
||||
|
||||
<div>
|
||||
<form method="POST" action="{{ route('verification.send') }}">
|
||||
@csrf
|
||||
@if (session('status') == 'verification-link-sent')
|
||||
<p>
|
||||
A new verification link has been sent to the email address you provided
|
||||
during registration.
|
||||
</p>
|
||||
@endif
|
||||
|
||||
<div>
|
||||
<button type="submit">Resend Verification Email</button>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<form method="POST" action="{{ route('verification.send') }}">
|
||||
@csrf
|
||||
|
||||
<form method="POST" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
<div>
|
||||
<button type="submit">Resend Verification Email</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<button type="submit">Log Out</button>
|
||||
</form>
|
||||
</div>
|
||||
</x-guest-layout>
|
||||
<form method="POST" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
|
||||
<button type="submit">Log Out</button>
|
||||
</form>
|
||||
</div>
|
||||
</x-window>
|
||||
</x-layout>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
<x-layout>
|
||||
<x-slot:title>New Category</x-slot>
|
||||
<x-layout title="New Category">
|
||||
<x-window>
|
||||
<form action="{{ route('categories.store') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<form action="{{ route('categories.store') }}" method="POST">
|
||||
@csrf
|
||||
<div class="field-row">
|
||||
<label for="name">Category Name</label>
|
||||
<input type="text" id="name" name="name" />
|
||||
<x-input-error :messages="$errors->get('name')" />
|
||||
</div>
|
||||
|
||||
<div class="field-row">
|
||||
<label for="name">Category Name</label>
|
||||
<input type="text" id="name" name="name" />
|
||||
<x-input-error :messages="$errors->get('name')" />
|
||||
</div>
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</x-window>
|
||||
</x-layout>
|
||||
|
|
|
|||
|
|
@ -1,30 +1,35 @@
|
|||
<x-layout>
|
||||
<x-slot:title>Categories</x-slot>
|
||||
|
||||
<div class="sunken-panel">
|
||||
<table class="interactive">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Category</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody x-data="{ hovered: null }" x-on:mouseleave="hovered = null">
|
||||
@foreach ($categories as $category)
|
||||
<tr
|
||||
id="{{ $category->id }}"
|
||||
x-on:mouseenter="hovered = $event.target.id"
|
||||
x-bind:class="{ 'highlighted': hovered === $el.id }"
|
||||
>
|
||||
<td>{{ $category->name }}</td>
|
||||
<td>
|
||||
<a href="{{ route('categories.show', $category->id) }}">View</a>
|
||||
</td>
|
||||
<x-layout title="Categories">
|
||||
<x-window>
|
||||
<div class="sunken-panel">
|
||||
<table class="interactive">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Category</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</thead>
|
||||
<tbody
|
||||
x-data="{ hovered: null }"
|
||||
x-on:mouseleave="hovered = null"
|
||||
>
|
||||
@foreach ($categories as $category)
|
||||
<tr
|
||||
id="{{ $category->id }}"
|
||||
x-on:mouseenter="hovered = $event.target.id"
|
||||
x-bind:class="{ 'highlighted': hovered === $el.id }"
|
||||
>
|
||||
<td>{{ $category->name }}</td>
|
||||
<td>
|
||||
<a href="{{ route('categories.show', $category->id) }}">
|
||||
View
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<a href="{{ route('categories.create') }}">New</a>
|
||||
<a href="{{ route('categories.create') }}" class="button">New</a>
|
||||
</x-window>
|
||||
</x-layout>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
<x-layout>
|
||||
<x-slot:title>
|
||||
Category: {{ $category->name }}
|
||||
</x-slot>
|
||||
|
||||
<h2>{{ $category->name }}</h2>
|
||||
<a href="{{ route('categories.index') }}">All</a>
|
||||
<x-layout :title="'Category: '. $category->name">
|
||||
<x-window>
|
||||
<a href="{{ route('categories.index') }}">All</a>
|
||||
</x-window>
|
||||
</x-layout>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
@props([
|
||||
'title',
|
||||
])
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@props([
|
||||
'title',
|
||||
'minimize' => true,
|
||||
'maximize' => false,
|
||||
'restore' => true,
|
||||
|
|
@ -7,6 +6,10 @@
|
|||
'close' => true,
|
||||
])
|
||||
|
||||
@aware([
|
||||
'title' => config('app.name', 'Laravel'),
|
||||
])
|
||||
|
||||
@php
|
||||
if ($restore) {
|
||||
$maximize = false;
|
||||
|
|
@ -15,9 +18,7 @@
|
|||
|
||||
<div {{ $attributes->merge(['class' => 'window']) }}>
|
||||
<div class="title-bar">
|
||||
@isset($title)
|
||||
<div class="title-bar-text">{{ $title }}</div>
|
||||
@endisset
|
||||
<div class="title-bar-text">{{ $title }}</div>
|
||||
|
||||
@if ($minimize || $maximize || $restore || $help || $close)
|
||||
<div class="title-bar-controls">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<x-layout>
|
||||
<x-slot:title>Profile</x-slot>
|
||||
<x-layout title="Profile">
|
||||
<x-window title="Profile Information">
|
||||
@include('profile.partials.update-profile-information-form')
|
||||
</x-window>
|
||||
|
||||
@include('profile.partials.update-profile-information-form')
|
||||
@include('profile.partials.update-password-form')
|
||||
<x-window title="Update Password">
|
||||
@include('profile.partials.update-password-form')
|
||||
</x-window>
|
||||
</x-layout>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
<p>Update Password</p>
|
||||
|
||||
<p>Ensure your account is using a long, random password to stay secure.</p>
|
||||
|
||||
<form method="post" action="{{ route('password.update') }}">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
<h2>Profile Information</h2>
|
||||
|
||||
<p>Update your account's profile information and email address.</p>
|
||||
|
||||
<form
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
<x-layout></x-layout>
|
||||
<x-layout>
|
||||
<x-window>Welcome!</x-window>
|
||||
</x-layout>
|
||||
|
|
|
|||
Loading…
Reference in a new issue