Skip to content

Instantly share code, notes, and snippets.

@marksparrish

marksparrish/Admin Tracker Mobile View Port Spillage

Created August 13, 2022 16:50
Show Gist options
  • Save marksparrish/c7b3cf772cb06114e57a3ea8d5c7505e to your computer and use it in GitHub Desktop.
Save marksparrish/c7b3cf772cb06114e57a3ea8d5c7505e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Admin Tracker Mobile View Port Spillage
<html lang="en"><head><style type="text/css" data-tag-name="trix-editor">trix-editor {
display: block;
}
trix-editor:empty:not(:focus)::before {
content: attr(placeholder);
color: graytext;
cursor: text;
}
trix-editor a[contenteditable=false] {
cursor: text;
}
trix-editor img {
max-width: 100%;
height: auto;
}
trix-editor [data-trix-attachment] figcaption textarea {
resize: none;
}
trix-editor [data-trix-attachment] figcaption textarea.trix-autoresize-clone {
position: absolute;
left: -9999px;
max-height: 0px;
}
trix-editor [data-trix-attachment] figcaption[data-trix-placeholder]:empty::before {
content: attr(data-trix-placeholder);
color: graytext;
}
trix-editor [data-trix-cursor-target] {
display: inline-block !important;
width: 1px !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
}
trix-editor [data-trix-cursor-target=left] {
vertical-align: top !important;
margin-left: -1px !important;
}
trix-editor [data-trix-cursor-target=right] {
vertical-align: bottom !important;
margin-right: -1px !important;
}</style><style type="text/css" data-tag-name="trix-toolbar">trix-toolbar {
display: block;
}
trix-toolbar {
white-space: nowrap;
}
trix-toolbar [data-trix-dialog] {
display: none;
}
trix-toolbar [data-trix-dialog][data-trix-active] {
display: block;
}
trix-toolbar [data-trix-dialog] [data-trix-validate]:invalid {
background-color: #ffdddd;
}</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="kH3bcRw7Pu926frO60jwCDhC25MjFoMRNs9HBBpe">
<title>Admin Tracker</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&amp;display=swap">
<!-- Styles -->
<link href="http://localhost/css/app.css" rel="stylesheet">
<!-- Scripts -->
<script src="http://localhost/js/app.js" defer=""></script>
<!-- Livewire Styles -->
<style>
[wire\:loading], [wire\:loading\.delay], [wire\:loading\.inline-block], [wire\:loading\.inline], [wire\:loading\.block], [wire\:loading\.flex], [wire\:loading\.table], [wire\:loading\.grid], [wire\:loading\.inline-flex] {
display: none;
}
[wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short], [wire\:loading\.delay\.long], [wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest] {
display:none;
}
[wire\:offline] {
display: none;
}
[wire\:dirty]:not(textarea):not(input):not(select) {
display: none;
}
input:-webkit-autofill, select:-webkit-autofill, textarea:-webkit-autofill {
animation-duration: 50000s;
animation-name: livewireautofill;
}
@keyframes livewireautofill { from {} }
</style>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/trix@1.2.3/dist/trix.css">
</head>
<body class="font-sans antialiased">
<div class="mx-auto min-h-screen bg-white">
<div class="hidden sm:block mx-4">
<div class="navbar bg-base-100 justify-between space-x-6 mr-2">
<div class="flex-initial">
<a href="http://localhost/dashboard" class="btn btn-ghost normal-case text-xl">
<img class="h-10" src="/images/small-logo.png"><span class="hidden sm:block ml-2">Admin Tracker</span>
</a>
</div>
<div class="hidden sm:block flex-1 w-full">
<div class="form-control w-full">
<div class="input-group">
<input type="text" placeholder="Search…" class="input input-bordered w-full">
<button class="btn btn-square">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="flex-none gap-2">
<div class="dropdown dropdown-end">
<label tabindex="0" class="btn btn-ghost btn-circle avatar">
<img class="h-10" src="data:image/png;base64,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">
</label>
<ul tabindex="0" class="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-32">
<li><a href="http://localhost/profile">Profile</a></li>
<li><a href="http://localhost/admin">Admin</a></li>
<li><!-- Authentication -->
<form method="POST" action="http://localhost/logout">
<input type="hidden" name="_token" value="kH3bcRw7Pu926frO60jwCDhC25MjFoMRNs9HBBpe"> <a href="route('logout')" onclick="event.preventDefault(); this.closest('form').submit();">
Log Out
</a>
</form>
</li>
</ul>
</div>
</div>
</div>
<div class="sm:hidden flex-1 w-full">
<div class="form-control w-full">
<div class="input-group">
<input type="text" placeholder="Search…" class="input input-bordered w-full">
<button class="btn btn-square">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="sm:hidden">
<div class="navbar bg-base-100 justify-between">
<div class="flex-initial">
<a href="http://localhost/dashboard" class="btn btn-ghost normal-case text-xl">
<img class="h-10" src="/images/small-logo.png">
</a>
</div>
<div class="hidden sm:block flex-1 w-full">
<div class="form-control w-full">
<div class="input-group">
<input type="text" placeholder="Search…" class="input input-bordered w-full">
<button class="btn btn-square">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="flex-none gap-2">
<div class="dropdown dropdown-end">
<label tabindex="0" class="btn btn-ghost btn-circle avatar">
<img src="data:image/png;base64,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">
</label>
<ul tabindex="0" class="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-32">
<li><a href="http://localhost/profile">Profile</a></li>
<li><a href="http://localhost/admin">Admin</a></li>
<li><!-- Authentication -->
<form method="POST" action="http://localhost/logout">
<input type="hidden" name="_token" value="kH3bcRw7Pu926frO60jwCDhC25MjFoMRNs9HBBpe"> <a href="route('logout')" onclick="event.preventDefault(); this.closest('form').submit();">
Log Out
</a>
</form>
</li>
</ul>
</div>
</div>
</div>
<div class="form-control w-full">
<div class="input-group">
<input type="text" placeholder="Search…" class="input input-bordered w-full">
<button class="btn btn-square">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- Page Navigaton -->
<div class="hidden sm:block">
<div class="navbar rounded-md text-primary-content space-x-2">
<a href="http://localhost/admin" class="btn btn-sm btn-outline">Admin Home</a>
<a href="http://localhost/admin/users" class="btn btn-sm btn-active">Users</a>
<a href="http://localhost/admin/organizations" class="btn btn-sm btn-outline">Organizations</a>
<a href="http://localhost/admin/projects" class="btn btn-sm btn-outline">Projects</a>
</div>
</div>
<!-- mobile nav -->
<div class="sm:hidden">
<div class="btm-nav">
<a href="http://localhost/admin" role="button" class="flex-none w-1/4 ">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
</svg>
<span class="btm-nav-label">Home</span>
</a>
<a href="http://localhost/admin/users" role="button" class="flex-none w-1/4 active ">
<!-- Heroicon name: cash -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
<span class="btm-nav-label">Users</span>
</a>
<a href="http://localhost/admin/organizations" role="button" class="flex-none w-1/4 ">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
</svg>
<span class="btm-nav-label">Orgs</span>
</a>
<a href="http://localhost/admin/projects" role="button" class="flex-none w-1/4 ">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
</svg>
<span class="btm-nav-label">Projects</span>
</a>
</div>
</div>
<!-- Page Content -->
<main>
<div class="px-4 sm:px-6 lg:px-8 bg-white">
<div wire:id="WnV6lZrjyQI1vReVu2JN">
<!-- Top Bar -->
<div class="mt-2 sm:mt-0 flex sm:space-x-3">
<div class="form-control grow">
<label class="input-group">
<span>Search</span>
<input wire:model="search" type="text" placeholder="User Name or Email" class="w-full input input-bordered">
</label>
</div>
<div class="space-x-2 flex items-center">
<div class="hidden sm:block grow form-control">
<label class="input-group input-group-md">
<span>Per Page</span>
<select wire:model="perPage" id="perPage" class="select select-bordered" "="">
<option value=" 10">10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
</label>
</div>
<button wire:click="create" class="btn btn-success">
<svg class="inline-block w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
<span class="hidden sm:block"> New</span>
</button>
</div>
</div>
<table class="table w-full">
<!-- head -->
<thead>
<tr>
<th>User</th>
<th class="hidden sm:table-cell">Email</th>
<th class="hidden sm:table-cell">Joined</th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="hover">
<td>
Gwen Jakubowski
</td>
<td class="hidden sm:table-cell">
admin@example.com
</td>
<td class="hidden sm:table-cell">
2022-08-10 14:45:07
</td>
<td>
<span>Super User</span>
</td>
</tr>
<tr class="hover">
<td>
Natalie Lang
</td>
<td class="hidden sm:table-cell">
normal@example.com
</td>
<td class="hidden sm:table-cell">
2022-08-10 14:45:07
</td>
<td>
<div>
<a href="/admin/users/2">
<div class="tooltip" data-tip="Edit Natalie Lang">
<button class="btn btn-xs btn-outline">
<svg class="inline-block w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
</svg>
</button>
</div>
</a>
<div class="tooltip" data-tip="Send Password Reset Link">
<button wire:click="sendPasswordLink(2)" class="btn btn-xs btn-outline">
<svg class="inline-block w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</button>
</div>
<div class="tooltip" data-tip="Delete Natalie Lang">
<button type="button" wire:click="confirmDelete(2)" class="btn btn-xs btn-outline">
<svg class="inline-block w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</td>
</tr>
<tr class="hover">
<td>
Johnson Jacobson
</td>
<td class="hidden sm:table-cell">
bad@example.com
</td>
<td class="hidden sm:table-cell">
2022-08-10 14:45:07
</td>
<td>
<div>
<a href="/admin/users/3">
<div class="tooltip" data-tip="Edit Johnson Jacobson">
<button class="btn btn-xs btn-outline">
<svg class="inline-block w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
</svg>
</button>
</div>
</a>
<div class="tooltip" data-tip="Send Password Reset Link">
<button wire:click="sendPasswordLink(3)" class="btn btn-xs btn-outline">
<svg class="inline-block w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</button>
</div>
<div class="tooltip" data-tip="Delete Johnson Jacobson">
<button type="button" wire:click="confirmDelete(3)" class="btn btn-xs btn-outline">
<svg class="inline-block w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</td>
</tr>
<tr class="hover">
<td>
Jerome Rutherford
</td>
<td class="hidden sm:table-cell">
lamar.jakubowski@example.net
</td>
<td class="hidden sm:table-cell">
2022-08-10 14:45:07
</td>
<td>
<div>
<a href="/admin/users/4">
<div class="tooltip" data-tip="Edit Jerome Rutherford">
<button class="btn btn-xs btn-outline">
<svg class="inline-block w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
</svg>
</button>
</div>
</a>
<div class="tooltip" data-tip="Send Password Reset Link">
<button wire:click="sendPasswordLink(4)" class="btn btn-xs btn-outline">
<svg class="inline-block w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</button>
</div>
<div class="tooltip" data-tip="Delete Jerome Rutherford">
<button type="button" wire:click="confirmDelete(4)" class="btn btn-xs btn-outline">
<svg class="inline-block w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</td>
</tr>
<tr class="hover">
<td>
Verner Mante
</td>
<td class="hidden sm:table-cell">
phyllis.lynch@example.net
</td>
<td class="hidden sm:table-cell">
2022-08-10 14:45:07
</td>
<td>
<div>
<a href="/admin/users/5">
<div class="tooltip" data-tip="Edit Verner Mante">
<button class="btn btn-xs btn-outline">
<svg class="inline-block w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
</svg>
</button>
</div>
</a>
<div class="tooltip" data-tip="Send Password Reset Link">
<button wire:click="sendPasswordLink(5)" class="btn btn-xs btn-outline">
<svg class="inline-block w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</button>
</div>
<div class="tooltip" data-tip="Delete Verner Mante">
<button type="button" wire:click="confirmDelete(5)" class="btn btn-xs btn-outline">
<svg class="inline-block w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</td>
</tr>
<tr class="hover">
<td>
Buster White
</td>
<td class="hidden sm:table-cell">
danny.harris@example.com
</td>
<td class="hidden sm:table-cell">
2022-08-10 14:45:07
</td>
<td>
<div>
<a href="/admin/users/6">
<div class="tooltip" data-tip="Edit Buster White">
<button class="btn btn-xs btn-outline">
<svg class="inline-block w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
</svg>
</button>
</div>
</a>
<div class="tooltip" data-tip="Send Password Reset Link">
<button wire:click="sendPasswordLink(6)" class="btn btn-xs btn-outline">
<svg class="inline-block w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</button>
</div>
<div class="tooltip" data-tip="Delete Buster White">
<button type="button" wire:click="confirmDelete(6)" class="btn btn-xs btn-outline">
<svg class="inline-block w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</td>
</tr>
<tr class="hover">
<td>
Isabell Renner
</td>
<td class="hidden sm:table-cell">
xsmitham@example.net
</td>
<td class="hidden sm:table-cell">
2022-08-10 14:45:07
</td>
<td>
<div>
<a href="/admin/users/7">
<div class="tooltip" data-tip="Edit Isabell Renner">
<button class="btn btn-xs btn-outline">
<svg class="inline-block w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
</svg>
</button>
</div>
</a>
<div class="tooltip" data-tip="Send Password Reset Link">
<button wire:click="sendPasswordLink(7)" class="btn btn-xs btn-outline">
<svg class="inline-block w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</button>
</div>
<div class="tooltip" data-tip="Delete Isabell Renner">
<button type="button" wire:click="confirmDelete(7)" class="btn btn-xs btn-outline">
<svg class="inline-block w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</td>
</tr>
<tr class="hover">
<td>
Jamey Monahan
</td>
<td class="hidden sm:table-cell">
joannie50@example.com
</td>
<td class="hidden sm:table-cell">
2022-08-10 14:45:07
</td>
<td>
<div>
<a href="/admin/users/9">
<div class="tooltip" data-tip="Edit Jamey Monahan">
<button class="btn btn-xs btn-outline">
<svg class="inline-block w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
</svg>
</button>
</div>
</a>
<div class="tooltip" data-tip="Send Password Reset Link">
<button wire:click="sendPasswordLink(9)" class="btn btn-xs btn-outline">
<svg class="inline-block w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</button>
</div>
<div class="tooltip" data-tip="Delete Jamey Monahan">
<button type="button" wire:click="confirmDelete(9)" class="btn btn-xs btn-outline">
<svg class="inline-block w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</td>
</tr>
<tr class="hover">
<td>
Stephan Goldner
</td>
<td class="hidden sm:table-cell">
weissnat.hollie@example.net
</td>
<td class="hidden sm:table-cell">
2022-08-10 14:45:07
</td>
<td>
<div>
<a href="/admin/users/10">
<div class="tooltip" data-tip="Edit Stephan Goldner">
<button class="btn btn-xs btn-outline">
<svg class="inline-block w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
</svg>
</button>
</div>
</a>
<div class="tooltip" data-tip="Send Password Reset Link">
<button wire:click="sendPasswordLink(10)" class="btn btn-xs btn-outline">
<svg class="inline-block w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</button>
</div>
<div class="tooltip" data-tip="Delete Stephan Goldner">
<button type="button" wire:click="confirmDelete(10)" class="btn btn-xs btn-outline">
<svg class="inline-block w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</td>
</tr>
<tr class="hover">
<td>
Jesus Harris
</td>
<td class="hidden sm:table-cell">
augusta.kling@example.org
</td>
<td class="hidden sm:table-cell">
2022-08-10 14:45:07
</td>
<td>
<div>
<a href="/admin/users/11">
<div class="tooltip" data-tip="Edit Jesus Harris">
<button class="btn btn-xs btn-outline">
<svg class="inline-block w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
</svg>
</button>
</div>
</a>
<div class="tooltip" data-tip="Send Password Reset Link">
<button wire:click="sendPasswordLink(11)" class="btn btn-xs btn-outline">
<svg class="inline-block w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</button>
</div>
<div class="tooltip" data-tip="Delete Jesus Harris">
<button type="button" wire:click="confirmDelete(11)" class="btn btn-xs btn-outline">
<svg class="inline-block w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div>
<div>
<nav role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between">
<div class="flex justify-between flex-1 sm:hidden">
<span>
<span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md select-none">
« Previous
</span>
</span>
<span>
<button wire:click="nextPage('page')" wire:loading.attr="disabled" dusk="nextPage.before" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
Next »
</button>
</span>
</div>
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div>
<p class="text-sm text-gray-700 leading-5">
<span>Showing</span>
<span class="font-medium">1</span>
<span>to</span>
<span class="font-medium">10</span>
<span>of</span>
<span class="font-medium">27</span>
<span>results</span>
</p>
</div>
<div>
<span class="relative z-0 inline-flex rounded-md shadow-sm">
<span>
<span aria-disabled="true" aria-label="&amp;laquo; Previous">
<span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5" aria-hidden="true">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
</span>
</span>
</span>
<span wire:key="paginator-page-1-page1">
<span aria-current="page">
<span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 select-none">1</span>
</span>
</span>
<span wire:key="paginator-page-1-page2">
<button wire:click="gotoPage(2, 'page')" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="Go to page 2">
2
</button>
</span>
<span wire:key="paginator-page-1-page3">
<button wire:click="gotoPage(3, 'page')" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="Go to page 3">
3
</button>
</span>
<span>
<button wire:click="nextPage('page')" dusk="nextPage.after" rel="next" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="Next &amp;raquo;">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg>
</button>
</span>
</span>
</div>
</div>
</nav>
</div>
</div>
<form wire:submit.prevent="save">
<div x-data="{
show: window.Livewire.find('WnV6lZrjyQI1vReVu2JN').entangle('showCreateModal').defer.defer,
focusables() {
// All focusable element types...
let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
return [...$el.querySelectorAll(selector)]
// All non-disabled elements...
.filter(el => ! el.hasAttribute('disabled'))
},
firstFocusable() { return this.focusables()[0] },
lastFocusable() { return this.focusables().slice(-1)[0] },
nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() },
prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() },
nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 },
}" x-init="$watch('show', value => {
if (value) {
document.body.classList.add('overflow-y-hidden');
} else {
document.body.classList.remove('overflow-y-hidden');
}
})" x-on:close.stop="show = false" x-on:keydown.escape.window="show = false" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" id="6aeddd64bded03037d17b45a6a6441ee" class="jetstream-modal fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50" style="display: none;">
<div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" style="display: none;">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<div x-show="show" class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:max-w-2xl sm:mx-auto" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" style="display: none;">
<div class="px-6 py-4">
<div class="text-lg">
Add User
</div>
<div class="mt-4">
<div class="flex flex-col space-y-2">
<div class="form-control">
<label class="input-group">
<span class="hidden sm:flex w-32">First Name</span>
<input wire:model="editing.first_name" type="text" placeholder="First Name" class="rounded-md input input-bordered flex-grow">
</label>
</div>
<div class="form-control">
<label class="input-group">
<span class="hidden sm:flex w-32">Last Name</span>
<input wire:model="editing.last_name" type="text" placeholder="Last Name" class="rounded-md input input-bordered flex-grow">
</label>
</div>
<div class="form-control">
<label class="input-group">
<span class="hidden sm:flex w-32">Email</span>
<input wire:model="editing.email" type="text" placeholder="Email Address" class="rounded-md input input-bordered flex-grow">
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-row justify-end px-6 py-4 bg-gray-100 text-right">
<button type="button" wire:click="$set('showCreateModal', false)" class="btn btn-error">Cancel</button>
<button type="submit" class="btn btn-success">Add User</button>
</div>
</div>
</div>
</form>
<form wire:submit.prevent="delete">
<div x-data="{
show: window.Livewire.find('WnV6lZrjyQI1vReVu2JN').entangle('showDeleteCofirmationModal').defer.defer,
focusables() {
// All focusable element types...
let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
return [...$el.querySelectorAll(selector)]
// All non-disabled elements...
.filter(el => ! el.hasAttribute('disabled'))
},
firstFocusable() { return this.focusables()[0] },
lastFocusable() { return this.focusables().slice(-1)[0] },
nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() },
prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() },
nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 },
}" x-init="$watch('show', value => {
if (value) {
document.body.classList.add('overflow-y-hidden');
} else {
document.body.classList.remove('overflow-y-hidden');
}
})" x-on:close.stop="show = false" x-on:keydown.escape.window="show = false" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="show" id="ef75f1a933796318fee9a3c46b89460a" class="jetstream-modal fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50" style="display: none;">
<div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" style="display: none;">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<div x-show="show" class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:max-w-2xl sm:mx-auto" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" style="display: none;">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mx-auto shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<svg class="h-6 w-6 text-red-600" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
</svg>
</div>
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-lg">
Deleting User
</h3>
<div class="mt-2">
<div class="py-8 text-cool-gray-700">Are you sure you? This action is irreversible.</div>
</div>
</div>
</div>
</div>
<div class="flex flex-row justify-end px-6 py-4 bg-gray-100 text-right">
<button type="button" wire:click="$set('showDeleteCofirmationModal', false)" class="btn btn-error">Cancel</button>
<button type="submit" class="btn btn-success">Confirm Delete</button>
</div>
</div>
</div>
</form>
</div>
<!-- Livewire Component wire-end:WnV6lZrjyQI1vReVu2JN -->
</div>
</main>
</div>
<!-- Livewire Scripts -->
<script src="/livewire/livewire.js?id=c69d0f2801c01fcf8166" data-turbo-eval="false" data-turbolinks-eval="false"></script>
<script data-turbo-eval="false" data-turbolinks-eval="false">
if (window.livewire) {
console.warn('Livewire: It looks like Livewire\'s @livewireScripts JavaScript assets have already been loaded. Make sure you aren\'t loading them twice.')
}
window.livewire = new Livewire();
window.livewire.devTools(true);
window.Livewire = window.livewire;
window.livewire_app_url = '';
window.livewire_token = 'kH3bcRw7Pu926frO60jwCDhC25MjFoMRNs9HBBpe';
/* Make sure Livewire loads first. */
if (window.Alpine) {
/* Defer showing the warning so it doesn't get buried under downstream errors. */
document.addEventListener("DOMContentLoaded", function () {
setTimeout(function() {
console.warn("Livewire: It looks like AlpineJS has already been loaded. Make sure Livewire\'s scripts are loaded before Alpine.\\n\\n Reference docs for more info: http://laravel-livewire.com/docs/alpine-js")
})
});
}
/* Make Alpine wait until Livewire is finished rendering to do its thing. */
window.deferLoadingAlpine = function (callback) {
window.addEventListener('livewire:load', function () {
callback();
});
};
let started = false;
window.addEventListener('alpine:initializing', function () {
if (! started) {
window.livewire.start();
started = true;
}
});
document.addEventListener("DOMContentLoaded", function () {
if (! started) {
window.livewire.start();
started = true;
}
});
</script>
<script src="https://unpkg.com/moment"></script>
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<script src="https://unpkg.com/trix@1.2.3/dist/trix.js"></script>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment