Skip to content

Письменов Дмитрий Иванович / yourroomads

Go to a project
Commit 617459e6 by Jonathan Reinink Committed by GitHub
Options

Merge pull request #24 from inertiajs/pr/21 

Upgrade to tailwind v1.0 (continued work)
2 parents f4a3f0aa 21dff2d3
Expand all
Inline Side-by-side
Showing with 158 additions and 125 deletions
package.json
...@@ -11,22 +11,22 @@ ...@@ -11,22 +11,22 @@
}, },
"dependencies": { "dependencies": {
"@fullhuman/postcss-purgecss": "^1.3.0", "@fullhuman/postcss-purgecss": "^1.3.0",
"@inertiajs/inertia": "^0.1.0", "@inertiajs/inertia": "^0.1.7",
"@inertiajs/inertia-vue": "^0.1.0", "@inertiajs/inertia-vue": "^0.1.2",
"axios": "^0.18", "axios": "^0.18.1",
"cross-env": "^5.1", "cross-env": "^5.2.1",
"eslint": "^5.14.1", "eslint": "^5.16.0",
"eslint-plugin-vue": "^5.2.2", "eslint-plugin-vue": "^5.2.3",
"laravel-mix": "^4.0.7", "laravel-mix": "^5.0.1",
"lodash": "^4.17.5", "lodash": "^4.17.15",
"popper.js": "^1.12", "popper.js": "^1.16.0",
"portal-vue": "^1.5.1", "portal-vue": "^1.5.1",
"postcss-import": "^12.0.1", "postcss-import": "^12.0.1",
"postcss-nesting": "^7.0.0", "postcss-nesting": "^7.0.1",
"resolve-url-loader": "^2.3.1", "resolve-url-loader": "^2.3.2",
"tailwindcss": "^0.7.4", "tailwindcss": "^1.2.0-canary.5",
"vue": "^2.6.6", "vue": "^2.6.11",
"vue-meta": "^2.2.2", "vue-meta": "^2.3.1",
"vue-template-compiler": "^2.6.6" "vue-template-compiler": "^2.6.11"
} }
} }
resources/css/app.css
/* Reset */ /* Reset */
@import "tailwindcss/preflight"; @import "tailwindcss/base";
@import "reset"; @import "reset";
/* Components */ /* Components */
@import "tailwindcss/components";
@import "buttons"; @import "buttons";
@import "form"; @import "form";
@import "nprogress"; @import "nprogress";
......
resources/css/buttons.css
.btn-indigo { .btn-indigo {
@apply px-6 py-3 rounded bg-indigo-dark text-white text-sm font-bold whitespace-no-wrap; @apply px-6 py-3 rounded bg-indigo-600 text-white text-sm font-bold whitespace-no-wrap;
&:hover, &:focus { @apply bg-orange } &:hover, &:focus { @apply bg-orange-500 }
} }
.btn-spinner, .btn-spinner,
......
resources/css/form.css
.form-label { .form-label {
@apply .mb-2 .block .text-grey-darkest .select-none; @apply .mb-2 .block .text-gray-700 .select-none;
} }
.form-input, .form-input,
.form-textarea, .form-textarea,
.form-select { .form-select {
@apply .p-2 .leading-normal .block .w-full .border .text-grey-darkest .bg-white .font-sans .rounded .text-left .appearance-none .relative; @apply .p-2 .leading-normal .block .w-full .border .text-gray-700 .bg-white .font-sans .rounded .text-left .appearance-none .relative;
&:focus, &:focus,
&.focus { &.focus {
@apply .border-indigo; @apply .border-indigo-500;
box-shadow: 0 0 0 1px config('colors.indigo'); box-shadow: 0 0 0 1px theme('colors.indigo.500');
} }
&::placeholder { &::placeholder {
@apply .text-grey-dark .opacity-100; @apply .text-gray-500 .opacity-100;
} }
} }
...@@ -32,15 +32,15 @@ ...@@ -32,15 +32,15 @@
} }
.form-error { .form-error {
@apply .text-red .mt-2 .text-sm; @apply .text-red-700 .mt-2 .text-sm;
} }
.form-input.error, .form-input.error,
.form-textarea.error, .form-textarea.error,
.form-select.error { .form-select.error {
@apply .border-red-light; @apply .border-red-600;
&:focus { &:focus {
box-shadow: 0 0 0 1px config('colors.red'); box-shadow: 0 0 0 1px theme('colors.red.600');
} }
} }
resources/js/Pages/Auth/Login.vue
<template> <template>
<div class="p-6 bg-indigo-darker min-h-screen flex justify-center items-center"> <div class="p-6 bg-indigo-800 min-h-screen flex justify-center items-center">
<div class="w-full max-w-sm"> <div class="w-full max-w-md">
<logo class="block mx-auto w-full max-w-xs fill-white" height="50" /> <logo class="block mx-auto w-full max-w-xs fill-white" height="50" />
<form class="mt-8 bg-white rounded-lg shadow-lg overflow-hidden" @submit.prevent="submit"> <form class="mt-8 bg-white rounded-lg shadow-xl overflow-hidden" @submit.prevent="submit">
<div class="px-10 py-12"> <div class="px-10 py-12">
<h1 class="text-center font-bold text-3xl">Welcome Back!</h1> <h1 class="text-center font-bold text-3xl">Welcome Back!</h1>
<div class="mx-auto mt-6 w-24 border-b-2" /> <div class="mx-auto mt-6 w-24 border-b-2" />
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<span class="text-sm">Remember Me</span> <span class="text-sm">Remember Me</span>
</label> </label>
</div> </div>
<div class="px-10 py-4 bg-grey-lightest border-t border-grey-lighter flex justify-between items-center"> <div class="px-10 py-4 bg-gray-100 border-t border-gray-200 flex justify-between items-center">
<a class="hover:underline" tabindex="-1" href="#reset-password">Forget password?</a> <a class="hover:underline" tabindex="-1" href="#reset-password">Forget password?</a>
<loading-button :loading="sending" class="btn-indigo" type="submit">Login</loading-button> <loading-button :loading="sending" class="btn-indigo" type="submit">Login</loading-button>
</div> </div>
......
resources/js/Pages/Contacts/Create.vue
<template> <template>
<div> <div>
<h1 class="mb-8 font-bold text-3xl"> <h1 class="mb-8 font-bold text-3xl">
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('contacts')">Contacts</inertia-link> <inertia-link class="text-indigo-400 hover:text-indigo-600" :href="route('contacts')">Contacts</inertia-link>
<span class="text-indigo-light font-medium">/</span> Create <span class="text-indigo-400 font-medium">/</span> Create
</h1> </h1>
<div class="bg-white rounded shadow overflow-hidden max-w-lg"> <div class="bg-white rounded shadow overflow-hidden max-w-3xl">
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<div class="p-8 -mr-6 -mb-8 flex flex-wrap"> <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
<text-input v-model="form.first_name" :errors="$page.errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" /> <text-input v-model="form.first_name" :errors="$page.errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
</select-input> </select-input>
<text-input v-model="form.postal_code" :errors="$page.errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" /> <text-input v-model="form.postal_code" :errors="$page.errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
</div> </div>
<div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex justify-end items-center"> <div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex justify-end items-center">
<loading-button :loading="sending" class="btn-indigo" type="submit">Create Contact</loading-button> <loading-button :loading="sending" class="btn-indigo" type="submit">Create Contact</loading-button>
</div> </div>
</form> </form>
......
resources/js/Pages/Contacts/Edit.vue
<template> <template>
<div> <div>
<h1 class="mb-8 font-bold text-3xl"> <h1 class="mb-8 font-bold text-3xl">
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('contacts')">Contacts</inertia-link> <inertia-link class="text-indigo-400 hover:text-indigo-600" :href="route('contacts')">Contacts</inertia-link>
<span class="text-indigo-light font-medium">/</span> <span class="text-indigo-400 font-medium">/</span>
{{ form.first_name }} {{ form.last_name }} {{ form.first_name }} {{ form.last_name }}
</h1> </h1>
<trashed-message v-if="contact.deleted_at" class="mb-6" @restore="restore"> <trashed-message v-if="contact.deleted_at" class="mb-6" @restore="restore">
This contact has been deleted. This contact has been deleted.
</trashed-message> </trashed-message>
<div class="bg-white rounded shadow overflow-hidden max-w-lg"> <div class="bg-white rounded shadow overflow-hidden max-w-3xl">
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<div class="p-8 -mr-6 -mb-8 flex flex-wrap"> <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
<text-input v-model="form.first_name" :errors="$page.errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" /> <text-input v-model="form.first_name" :errors="$page.errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
...@@ -29,8 +29,8 @@ ...@@ -29,8 +29,8 @@
</select-input> </select-input>
<text-input v-model="form.postal_code" :errors="$page.errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" /> <text-input v-model="form.postal_code" :errors="$page.errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
</div> </div>
<div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex items-center"> <div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex items-center">
<button v-if="!contact.deleted_at" class="text-red hover:underline" tabindex="-1" type="button" @click="destroy">Delete Contact</button> <button v-if="!contact.deleted_at" class="text-red-600 hover:underline" tabindex="-1" type="button" @click="destroy">Delete Contact</button>
<loading-button :loading="sending" class="btn-indigo ml-auto" type="submit">Update Contact</loading-button> <loading-button :loading="sending" class="btn-indigo ml-auto" type="submit">Update Contact</loading-button>
</div> </div>
</form> </form>
......
resources/js/Pages/Contacts/Index.vue
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<div> <div>
<h1 class="mb-8 font-bold text-3xl">Contacts</h1> <h1 class="mb-8 font-bold text-3xl">Contacts</h1>
<div class="mb-6 flex justify-between items-center"> <div class="mb-6 flex justify-between items-center">
<search-filter v-model="form.search" class="w-full max-w-sm mr-4" @reset="reset"> <search-filter v-model="form.search" class="w-full max-w-md mr-4" @reset="reset">
<label class="block text-grey-darkest">Trashed:</label> <label class="block text-gray-700">Trashed:</label>
<select v-model="form.trashed" class="mt-1 w-full form-select"> <select v-model="form.trashed" class="mt-1 w-full form-select">
<option :value="null" /> <option :value="null" />
<option value="with">With Trashed</option> <option value="with">With Trashed</option>
...@@ -23,11 +23,11 @@ ...@@ -23,11 +23,11 @@
<th class="px-6 pt-6 pb-4">City</th> <th class="px-6 pt-6 pb-4">City</th>
<th class="px-6 pt-6 pb-4" colspan="2">Phone</th> <th class="px-6 pt-6 pb-4" colspan="2">Phone</th>
</tr> </tr>
<tr v-for="contact in contacts.data" :key="contact.id" class="hover:bg-grey-lightest focus-within:bg-grey-lightest"> <tr v-for="contact in contacts.data" :key="contact.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
<td class="border-t"> <td class="border-t">
<inertia-link class="px-6 py-4 flex items-center focus:text-indigo" :href="route('contacts.edit', contact.id)"> <inertia-link class="px-6 py-4 flex items-center focus:text-indigo-500" :href="route('contacts.edit', contact.id)">
{{ contact.name }} {{ contact.name }}
<icon v-if="contact.deleted_at" name="trash" class="flex-no-shrink w-3 h-3 fill-grey ml-2" /> <icon v-if="contact.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray-400 ml-2" />
</inertia-link> </inertia-link>
</td> </td>
<td class="border-t"> <td class="border-t">
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
</td> </td>
<td class="border-t w-px"> <td class="border-t w-px">
<inertia-link class="px-4 flex items-center" :href="route('contacts.edit', contact.id)" tabindex="-1"> <inertia-link class="px-4 flex items-center" :href="route('contacts.edit', contact.id)" tabindex="-1">
<icon name="cheveron-right" class="block w-6 h-6 fill-grey" /> <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
</inertia-link> </inertia-link>
</td> </td>
</tr> </tr>
......
resources/js/Pages/Dashboard/Index.vue
<template> <template>
<div> <div>
<h1 class="mb-8 font-bold text-3xl">Dashboard</h1> <h1 class="mb-8 font-bold text-3xl">Dashboard</h1>
<p class="mb-12 leading-normal">Hey there! Welcome to Ping CRM, a demo app designed to help illustrate how <a class="text-indigo underline hover:text-orange-dark" href="https://inertiajs.com">Inertia.js</a> works. </p> <p class="mb-12 leading-normal">Hey there! Welcome to Ping CRM, a demo app designed to help illustrate how <a class="text-indigo-500 underline hover:text-orange-600" href="https://github.com/inertiajs">Inertia.js</a> works.</p>
<div> <div>
<inertia-link class="btn-indigo" href="/500">500 error</inertia-link> <inertia-link class="btn-indigo" href="/500">500 error</inertia-link>
<inertia-link class="btn-indigo" href="/404">404 error</inertia-link> <inertia-link class="btn-indigo" href="/404">404 error</inertia-link>
......
resources/js/Pages/Organizations/Create.vue
<template> <template>
<div> <div>
<h1 class="mb-8 font-bold text-3xl"> <h1 class="mb-8 font-bold text-3xl">
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('organizations')">Organizations</inertia-link> <inertia-link class="text-indigo-400 hover:text-indigo-600" :href="route('organizations')">Organizations</inertia-link>
<span class="text-indigo-light font-medium">/</span> Create <span class="text-indigo-400 font-medium">/</span> Create
</h1> </h1>
<div class="bg-white rounded shadow overflow-hidden max-w-lg"> <div class="bg-white rounded shadow overflow-hidden max-w-3xl">
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<div class="p-8 -mr-6 -mb-8 flex flex-wrap"> <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
<text-input v-model="form.name" :errors="$page.errors.name" class="pr-6 pb-8 w-full lg:w-1/2" label="Name" /> <text-input v-model="form.name" :errors="$page.errors.name" class="pr-6 pb-8 w-full lg:w-1/2" label="Name" />
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
</select-input> </select-input>
<text-input v-model="form.postal_code" :errors="$page.errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" /> <text-input v-model="form.postal_code" :errors="$page.errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
</div> </div>
<div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex justify-end items-center"> <div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex justify-end items-center">
<loading-button :loading="sending" class="btn-indigo" type="submit">Create Organization</loading-button> <loading-button :loading="sending" class="btn-indigo" type="submit">Create Organization</loading-button>
</div> </div>
</form> </form>
......
resources/js/Pages/Organizations/Edit.vue
<template> <template>
<div> <div>
<h1 class="mb-8 font-bold text-3xl"> <h1 class="mb-8 font-bold text-3xl">
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('organizations')">Organizations</inertia-link> <inertia-link class="text-indigo-400 hover:text-indigo-600" :href="route('organizations')">Organizations</inertia-link>
<span class="text-indigo-light font-medium">/</span> <span class="text-indigo-400 font-medium">/</span>
{{ form.name }} {{ form.name }}
</h1> </h1>
<trashed-message v-if="organization.deleted_at" class="mb-6" @restore="restore"> <trashed-message v-if="organization.deleted_at" class="mb-6" @restore="restore">
This organization has been deleted. This organization has been deleted.
</trashed-message> </trashed-message>
<div class="bg-white rounded shadow overflow-hidden max-w-lg"> <div class="bg-white rounded shadow overflow-hidden max-w-3xl">
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<div class="p-8 -mr-6 -mb-8 flex flex-wrap"> <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
<text-input v-model="form.name" :errors="$page.errors.name" class="pr-6 pb-8 w-full lg:w-1/2" label="Name" /> <text-input v-model="form.name" :errors="$page.errors.name" class="pr-6 pb-8 w-full lg:w-1/2" label="Name" />
...@@ -24,8 +24,8 @@ ...@@ -24,8 +24,8 @@
</select-input> </select-input>
<text-input v-model="form.postal_code" :errors="$page.errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" /> <text-input v-model="form.postal_code" :errors="$page.errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
</div> </div>
<div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex items-center"> <div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex items-center">
<button v-if="!organization.deleted_at" class="text-red hover:underline" tabindex="-1" type="button" @click="destroy">Delete Organization</button> <button v-if="!organization.deleted_at" class="text-red-600 hover:underline" tabindex="-1" type="button" @click="destroy">Delete Organization</button>
<loading-button :loading="sending" class="btn-indigo ml-auto" type="submit">Update Organization</loading-button> <loading-button :loading="sending" class="btn-indigo ml-auto" type="submit">Update Organization</loading-button>
</div> </div>
</form> </form>
...@@ -38,11 +38,11 @@ ...@@ -38,11 +38,11 @@
<th class="px-6 pt-6 pb-4">City</th> <th class="px-6 pt-6 pb-4">City</th>
<th class="px-6 pt-6 pb-4" colspan="2">Phone</th> <th class="px-6 pt-6 pb-4" colspan="2">Phone</th>
</tr> </tr>
<tr v-for="contact in organization.contacts" :key="contact.id" class="hover:bg-grey-lightest focus-within:bg-grey-lightest"> <tr v-for="contact in organization.contacts" :key="contact.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
<td class="border-t"> <td class="border-t">
<inertia-link class="px-6 py-4 flex items-center focus:text-indigo" :href="route('contacts.edit', contact.id)"> <inertia-link class="px-6 py-4 flex items-center focus:text-indigo-500" :href="route('contacts.edit', contact.id)">
{{ contact.name }} {{ contact.name }}
<icon v-if="contact.deleted_at" name="trash" class="flex-no-shrink w-3 h-3 fill-grey ml-2" /> <icon v-if="contact.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray-400 ml-2" />
</inertia-link> </inertia-link>
</td> </td>
<td class="border-t"> <td class="border-t">
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
</td> </td>
<td class="border-t w-px"> <td class="border-t w-px">
<inertia-link class="px-4 flex items-center" :href="route('contacts.edit', contact.id)" tabindex="-1"> <inertia-link class="px-4 flex items-center" :href="route('contacts.edit', contact.id)" tabindex="-1">
<icon name="cheveron-right" class="block w-6 h-6 fill-grey" /> <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
</inertia-link> </inertia-link>
</td> </td>
</tr> </tr>
......
resources/js/Pages/Organizations/Index.vue
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<div> <div>
<h1 class="mb-8 font-bold text-3xl">Organizations</h1> <h1 class="mb-8 font-bold text-3xl">Organizations</h1>
<div class="mb-6 flex justify-between items-center"> <div class="mb-6 flex justify-between items-center">
<search-filter v-model="form.search" class="w-full max-w-sm mr-4" @reset="reset"> <search-filter v-model="form.search" class="w-full max-w-md mr-4" @reset="reset">
<label class="block text-grey-darkest">Trashed:</label> <label class="block text-gray-700">Trashed:</label>
<select v-model="form.trashed" class="mt-1 w-full form-select"> <select v-model="form.trashed" class="mt-1 w-full form-select">
<option :value="null" /> <option :value="null" />
<option value="with">With Trashed</option> <option value="with">With Trashed</option>
...@@ -22,11 +22,11 @@ ...@@ -22,11 +22,11 @@
<th class="px-6 pt-6 pb-4">City</th> <th class="px-6 pt-6 pb-4">City</th>
<th class="px-6 pt-6 pb-4" colspan="2">Phone</th> <th class="px-6 pt-6 pb-4" colspan="2">Phone</th>
</tr> </tr>
<tr v-for="organization in organizations.data" :key="organization.id" class="hover:bg-grey-lightest focus-within:bg-grey-lightest"> <tr v-for="organization in organizations.data" :key="organization.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
<td class="border-t"> <td class="border-t">
<inertia-link class="px-6 py-4 flex items-center focus:text-indigo" :href="route('organizations.edit', organization.id)"> <inertia-link class="px-6 py-4 flex items-center focus:text-indigo-500" :href="route('organizations.edit', organization.id)">
{{ organization.name }} {{ organization.name }}
<icon v-if="organization.deleted_at" name="trash" class="flex-no-shrink w-3 h-3 fill-grey ml-2" /> <icon v-if="organization.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray-400 ml-2" />
</inertia-link> </inertia-link>
</td> </td>
<td class="border-t"> <td class="border-t">
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
</td> </td>
<td class="border-t w-px"> <td class="border-t w-px">
<inertia-link class="px-4 flex items-center" :href="route('organizations.edit', organization.id)" tabindex="-1"> <inertia-link class="px-4 flex items-center" :href="route('organizations.edit', organization.id)" tabindex="-1">
<icon name="cheveron-right" class="block w-6 h-6 fill-grey" /> <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
</inertia-link> </inertia-link>
</td> </td>
</tr> </tr>
......
resources/js/Pages/Users/Create.vue
<template> <template>
<div> <div>
<h1 class="mb-8 font-bold text-3xl"> <h1 class="mb-8 font-bold text-3xl">
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('users')">Users</inertia-link> <inertia-link class="text-indigo-400 hover:text-indigo-600" :href="route('users')">Users</inertia-link>
<span class="text-indigo-light font-medium">/</span> Create <span class="text-indigo-400 font-medium">/</span> Create
</h1> </h1>
<div class="bg-white rounded shadow overflow-hidden max-w-lg"> <div class="bg-white rounded shadow overflow-hidden max-w-3xl">
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<div class="p-8 -mr-6 -mb-8 flex flex-wrap"> <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
<text-input v-model="form.first_name" :errors="$page.errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" /> <text-input v-model="form.first_name" :errors="$page.errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
</select-input> </select-input>
<file-input v-model="form.photo" :errors="$page.errors.photo" class="pr-6 pb-8 w-full lg:w-1/2" type="file" accept="image/*" label="Photo" /> <file-input v-model="form.photo" :errors="$page.errors.photo" class="pr-6 pb-8 w-full lg:w-1/2" type="file" accept="image/*" label="Photo" />
</div> </div>
<div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex justify-end items-center"> <div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex justify-end items-center">
<loading-button :loading="sending" class="btn-indigo" type="submit">Create User</loading-button> <loading-button :loading="sending" class="btn-indigo" type="submit">Create User</loading-button>
</div> </div>
</form> </form>
......
resources/js/Pages/Users/Edit.vue
<template> <template>
<div> <div>
<div class="mb-8 flex justify-start max-w-lg"> <div class="mb-8 flex justify-start max-w-3xl">
<h1 class="font-bold text-3xl"> <h1 class="font-bold text-3xl">
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('users')">Users</inertia-link> <inertia-link class="text-indigo-400 hover:text-indigo-600" :href="route('users')">Users</inertia-link>
<span class="text-indigo-light font-medium">/</span> <span class="text-indigo-400 font-medium">/</span>
{{ form.first_name }} {{ form.last_name }} {{ form.first_name }} {{ form.last_name }}
</h1> </h1>
<img v-if="user.photo" class="block w-8 h-8 rounded-full ml-4" :src="user.photo"> <img v-if="user.photo" class="block w-8 h-8 rounded-full ml-4" :src="user.photo">
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<trashed-message v-if="user.deleted_at" class="mb-6" @restore="restore"> <trashed-message v-if="user.deleted_at" class="mb-6" @restore="restore">
This user has been deleted. This user has been deleted.
</trashed-message> </trashed-message>
<div class="bg-white rounded shadow overflow-hidden max-w-lg"> <div class="bg-white rounded shadow overflow-hidden max-w-3xl">
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<div class="p-8 -mr-6 -mb-8 flex flex-wrap"> <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
<text-input v-model="form.first_name" :errors="$page.errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" /> <text-input v-model="form.first_name" :errors="$page.errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
...@@ -24,8 +24,8 @@ ...@@ -24,8 +24,8 @@
</select-input> </select-input>
<file-input v-model="form.photo" :errors="$page.errors.photo" class="pr-6 pb-8 w-full lg:w-1/2" type="file" accept="image/*" label="Photo" /> <file-input v-model="form.photo" :errors="$page.errors.photo" class="pr-6 pb-8 w-full lg:w-1/2" type="file" accept="image/*" label="Photo" />
</div> </div>
<div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex items-center"> <div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex items-center">
<button v-if="!user.deleted_at" class="text-red hover:underline" tabindex="-1" type="button" @click="destroy">Delete User</button> <button v-if="!user.deleted_at" class="text-red-600 hover:underline" tabindex="-1" type="button" @click="destroy">Delete User</button>
<loading-button :loading="sending" class="btn-indigo ml-auto" type="submit">Update User</loading-button> <loading-button :loading="sending" class="btn-indigo ml-auto" type="submit">Update User</loading-button>
</div> </div>
</form> </form>
......
resources/js/Pages/Users/Index.vue
...@@ -2,14 +2,14 @@ ...@@ -2,14 +2,14 @@
<div> <div>
<h1 class="mb-8 font-bold text-3xl">Users</h1> <h1 class="mb-8 font-bold text-3xl">Users</h1>
<div class="mb-6 flex justify-between items-center"> <div class="mb-6 flex justify-between items-center">
<search-filter v-model="form.search" class="w-full max-w-sm mr-4" @reset="reset"> <search-filter v-model="form.search" class="w-full max-w-md mr-4" @reset="reset">
<label class="block text-grey-darkest">Role:</label> <label class="block text-gray-700">Role:</label>
<select v-model="form.role" class="mt-1 w-full form-select"> <select v-model="form.role" class="mt-1 w-full form-select">
<option :value="null" /> <option :value="null" />
<option value="user">User</option> <option value="user">User</option>
<option value="owner">Owner</option> <option value="owner">Owner</option>
</select> </select>
<label class="mt-4 block text-grey-darkest">Trashed:</label> <label class="mt-4 block text-gray-700">Trashed:</label>
<select v-model="form.trashed" class="mt-1 w-full form-select"> <select v-model="form.trashed" class="mt-1 w-full form-select">
<option :value="null" /> <option :value="null" />
<option value="with">With Trashed</option> <option value="with">With Trashed</option>
...@@ -28,12 +28,12 @@ ...@@ -28,12 +28,12 @@
<th class="px-6 pt-6 pb-4">Email</th> <th class="px-6 pt-6 pb-4">Email</th>
<th class="px-6 pt-6 pb-4" colspan="2">Role</th> <th class="px-6 pt-6 pb-4" colspan="2">Role</th>
</tr> </tr>
<tr v-for="user in users" :key="user.id" class="hover:bg-grey-lightest focus-within:bg-grey-lightest"> <tr v-for="user in users" :key="user.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
<td class="border-t"> <td class="border-t">
<inertia-link class="px-6 py-4 flex items-center focus:text-indigo" :href="route('users.edit', user.id)"> <inertia-link class="px-6 py-4 flex items-center focus:text-indigo-500" :href="route('users.edit', user.id)">
<img v-if="user.photo" class="block w-5 h-5 rounded-full mr-2 -my-2" :src="user.photo"> <img v-if="user.photo" class="block w-5 h-5 rounded-full mr-2 -my-2" :src="user.photo">
{{ user.name }} {{ user.name }}
<icon v-if="user.deleted_at" name="trash" class="flex-no-shrink w-3 h-3 fill-grey ml-2" /> <icon v-if="user.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray-400 ml-2" />
</inertia-link> </inertia-link>
</td> </td>
<td class="border-t"> <td class="border-t">
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
</td> </td>
<td class="border-t w-px"> <td class="border-t w-px">
<inertia-link class="px-4 flex items-center" :href="route('users.edit', user.id)" tabindex="-1"> <inertia-link class="px-4 flex items-center" :href="route('users.edit', user.id)" tabindex="-1">
<icon name="cheveron-right" class="block w-6 h-6 fill-grey" /> <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
</inertia-link> </inertia-link>
</td> </td>
</tr> </tr>
......
resources/js/Shared/FileInput.vue
...@@ -4,13 +4,13 @@ ...@@ -4,13 +4,13 @@
<div class="form-input p-0" :class="{ error: errors.length }"> <div class="form-input p-0" :class="{ error: errors.length }">
<input ref="file" type="file" :accept="accept" class="hidden" @change="change"> <input ref="file" type="file" :accept="accept" class="hidden" @change="change">
<div v-if="!value" class="p-2"> <div v-if="!value" class="p-2">
<button type="button" class="px-4 py-1 bg-grey-dark hover:bg-grey-darker rounded-sm text-xs font-medium text-white" @click="browse"> <button type="button" class="px-4 py-1 bg-gray-500 hover:bg-gray-700 rounded-sm text-xs font-medium text-white" @click="browse">
Browse Browse
</button> </button>
</div> </div>
<div v-else class="flex items-center justify-between p-2"> <div v-else class="flex items-center justify-between p-2">
<div class="flex-1 pr-1">{{ value.name }} <span class="text-grey-dark text-xs">({{ filesize(value.size) }})</span></div> <div class="flex-1 pr-1">{{ value.name }} <span class="text-gray-500 text-xs">({{ filesize(value.size) }})</span></div>
<button type="button" class="px-4 py-1 bg-grey-dark hover:bg-grey-darker rounded-sm text-xs font-medium text-white" @click="remove"> <button type="button" class="px-4 py-1 bg-gray-500 hover:bg-gray-700 rounded-sm text-xs font-medium text-white" @click="remove">
Remove Remove
</button> </button>
</div> </div>
......
resources/js/Shared/FlashMessages.vue
<template> <template>
<div> <div>
<div v-if="$page.flash.success && show" class="mb-8 flex items-center justify-between bg-green rounded max-w-lg"> <div v-if="$page.flash.success && show" class="mb-8 flex items-center justify-between bg-green-500 rounded max-w-3xl">
<div class="flex items-center"> <div class="flex items-center">
<svg class="ml-4 mr-2 flex-no-shrink w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polygon points="0 11 2 9 7 14 18 3 20 5 7 18" /></svg> <svg class="ml-4 mr-2 flex-shrink-0 w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polygon points="0 11 2 9 7 14 18 3 20 5 7 18" /></svg>
<div class="py-4 text-white text-sm font-medium">{{ $page.flash.success }}</div> <div class="py-4 text-white text-sm font-medium">{{ $page.flash.success }}</div>
</div> </div>
<button type="button" class="group mr-2 p-2" @click="show = false"> <button type="button" class="group mr-2 p-2" @click="show = false">
<svg class="block w-2 h-2 fill-green-dark group-hover:fill-green-darker" xmlns="http://www.w3.org/2000/svg" width="235.908" height="235.908" viewBox="278.046 126.846 235.908 235.908"><path d="M506.784 134.017c-9.56-9.56-25.06-9.56-34.62 0L396 210.18l-76.164-76.164c-9.56-9.56-25.06-9.56-34.62 0-9.56 9.56-9.56 25.06 0 34.62L361.38 244.8l-76.164 76.165c-9.56 9.56-9.56 25.06 0 34.62 9.56 9.56 25.06 9.56 34.62 0L396 279.42l76.164 76.165c9.56 9.56 25.06 9.56 34.62 0 9.56-9.56 9.56-25.06 0-34.62L430.62 244.8l76.164-76.163c9.56-9.56 9.56-25.06 0-34.62z" /></svg> <svg class="block w-2 h-2 fill-green-800 group-hover:fill-white" xmlns="http://www.w3.org/2000/svg" width="235.908" height="235.908" viewBox="278.046 126.846 235.908 235.908"><path d="M506.784 134.017c-9.56-9.56-25.06-9.56-34.62 0L396 210.18l-76.164-76.164c-9.56-9.56-25.06-9.56-34.62 0-9.56 9.56-9.56 25.06 0 34.62L361.38 244.8l-76.164 76.165c-9.56 9.56-9.56 25.06 0 34.62 9.56 9.56 25.06 9.56 34.62 0L396 279.42l76.164 76.165c9.56 9.56 25.06 9.56 34.62 0 9.56-9.56 9.56-25.06 0-34.62L430.62 244.8l76.164-76.163c9.56-9.56 9.56-25.06 0-34.62z" /></svg>
</button> </button>
</div> </div>
<div v-if="($page.flash.error || Object.keys($page.errors).length > 0) && show" class="mb-8 flex items-center justify-between bg-red-light rounded max-w-lg"> <div v-if="($page.flash.error || Object.keys($page.errors).length > 0) && show" class="mb-8 flex items-center justify-between bg-red-500 rounded max-w-3xl">
<div class="flex items-center"> <div class="flex items-center">
<svg class="ml-4 mr-2 flex-no-shrink w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm1.41-1.41A8 8 0 1 0 15.66 4.34 8 8 0 0 0 4.34 15.66zm9.9-8.49L11.41 10l2.83 2.83-1.41 1.41L10 11.41l-2.83 2.83-1.41-1.41L8.59 10 5.76 7.17l1.41-1.41L10 8.59l2.83-2.83 1.41 1.41z" /></svg> <svg class="ml-4 mr-2 flex-shrink-0 w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm1.41-1.41A8 8 0 1 0 15.66 4.34 8 8 0 0 0 4.34 15.66zm9.9-8.49L11.41 10l2.83 2.83-1.41 1.41L10 11.41l-2.83 2.83-1.41-1.41L8.59 10 5.76 7.17l1.41-1.41L10 8.59l2.83-2.83 1.41 1.41z" /></svg>
<div v-if="$page.flash.error" class="py-4 text-white text-sm font-medium">{{ $page.flash.error }}</div> <div v-if="$page.flash.error" class="py-4 text-white text-sm font-medium">{{ $page.flash.error }}</div>
<div v-else class="py-4 text-white text-sm font-medium"> <div v-else class="py-4 text-white text-sm font-medium">
<span v-if="Object.keys($page.errors).length === 1">There is one form error.</span> <span v-if="Object.keys($page.errors).length === 1">There is one form error.</span>
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
</div> </div>
</div> </div>
<button type="button" class="group mr-2 p-2" @click="show = false"> <button type="button" class="group mr-2 p-2" @click="show = false">
<svg class="block w-2 h-2 fill-red-dark group-hover:fill-red-darker" xmlns="http://www.w3.org/2000/svg" width="235.908" height="235.908" viewBox="278.046 126.846 235.908 235.908"><path d="M506.784 134.017c-9.56-9.56-25.06-9.56-34.62 0L396 210.18l-76.164-76.164c-9.56-9.56-25.06-9.56-34.62 0-9.56 9.56-9.56 25.06 0 34.62L361.38 244.8l-76.164 76.165c-9.56 9.56-9.56 25.06 0 34.62 9.56 9.56 25.06 9.56 34.62 0L396 279.42l76.164 76.165c9.56 9.56 25.06 9.56 34.62 0 9.56-9.56 9.56-25.06 0-34.62L430.62 244.8l76.164-76.163c9.56-9.56 9.56-25.06 0-34.62z" /></svg> <svg class="block w-2 h-2 fill-red-800 group-hover:fill-white" xmlns="http://www.w3.org/2000/svg" width="235.908" height="235.908" viewBox="278.046 126.846 235.908 235.908"><path d="M506.784 134.017c-9.56-9.56-25.06-9.56-34.62 0L396 210.18l-76.164-76.164c-9.56-9.56-25.06-9.56-34.62 0-9.56 9.56-9.56 25.06 0 34.62L361.38 244.8l-76.164 76.165c-9.56 9.56-9.56 25.06 0 34.62 9.56 9.56 25.06 9.56 34.62 0L396 279.42l76.164 76.165c9.56 9.56 25.06 9.56 34.62 0 9.56-9.56 9.56-25.06 0-34.62L430.62 244.8l76.164-76.163c9.56-9.56 9.56-25.06 0-34.62z" /></svg>
</button> </button>
</div> </div>
</div> </div>
......
resources/js/Shared/Layout.vue
...@@ -4,38 +4,38 @@ ...@@ -4,38 +4,38 @@
<div class="flex flex-col"> <div class="flex flex-col">
<div class="h-screen flex flex-col" @click="hideDropdownMenus"> <div class="h-screen flex flex-col" @click="hideDropdownMenus">
<div class="md:flex"> <div class="md:flex">
<div class="bg-indigo-darkest md:flex-no-shrink md:w-56 px-6 py-4 flex items-center justify-between md:justify-center"> <div class="bg-indigo-900 md:flex-shrink-0 md:w-56 px-6 py-4 flex items-center justify-between md:justify-center">
<inertia-link class="mt-1" href="/"> <inertia-link class="mt-1" href="/">
<logo class="fill-white" width="120" height="28" /> <logo class="fill-white" width="120" height="28" />
</inertia-link> </inertia-link>
<dropdown class="md:hidden" placement="bottom-end"> <dropdown class="md:hidden" placement="bottom-end">
<svg class="fill-white w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /></svg> <svg class="fill-white w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /></svg>
<div slot="dropdown" class="mt-2 px-8 py-4 shadow-lg bg-indigo-darker rounded"> <div slot="dropdown" class="mt-2 px-8 py-4 shadow-lg bg-indigo-800 rounded">
<main-menu :url="url()" /> <main-menu :url="url()" />
</div> </div>
</dropdown> </dropdown>
</div> </div>
<div class="bg-white border-b w-full p-4 md:py-0 md:px-12 text-sm md:text-base flex justify-between items-center"> <div class="bg-white border-b w-full p-4 md:py-0 md:px-12 text-sm md:text-md flex justify-between items-center">
<div class="mt-1 mr-4">{{ $page.auth.user.account.name }}</div> <div class="mt-1 mr-4">{{ $page.auth.user.account.name }}</div>
<dropdown class="mt-1" placement="bottom-end"> <dropdown class="mt-1" placement="bottom-end">
<div class="flex items-center cursor-pointer select-none group"> <div class="flex items-center cursor-pointer select-none group">
<div class="text-grey-darkest group-hover:text-indigo-dark focus:text-indigo-dark mr-1 whitespace-no-wrap"> <div class="text-gray-700 group-hover:text-indigo-600 focus:text-indigo-600 mr-1 whitespace-no-wrap">
<span>{{ $page.auth.user.first_name }}</span> <span>{{ $page.auth.user.first_name }}</span>
<span class="hidden md:inline">{{ $page.auth.user.last_name }}</span> <span class="hidden md:inline">{{ $page.auth.user.last_name }}</span>
</div> </div>
<icon class="w-5 h-5 group-hover:fill-indigo-dark fill-grey-darkest focus:fill-indigo-dark" name="cheveron-down" /> <icon class="w-5 h-5 group-hover:fill-indigo-600 fill-gray-700 focus:fill-indigo-600" name="cheveron-down" />
</div> </div>
<div slot="dropdown" class="mt-2 py-2 shadow-lg bg-white rounded text-sm"> <div slot="dropdown" class="mt-2 py-2 shadow-xl bg-white rounded text-sm">
<inertia-link class="block px-6 py-2 hover:bg-indigo hover:text-white" :href="route('users.edit', $page.auth.user.id)">My Profile</inertia-link> <inertia-link class="block px-6 py-2 hover:bg-indigo-500 hover:text-white" :href="route('users.edit', $page.auth.user.id)">My Profile</inertia-link>
<inertia-link class="block px-6 py-2 hover:bg-indigo hover:text-white" :href="route('users')">Manage Users</inertia-link> <inertia-link class="block px-6 py-2 hover:bg-indigo-500 hover:text-white" :href="route('users')">Manage Users</inertia-link>
<inertia-link class="block px-6 py-2 hover:bg-indigo hover:text-white" :href="route('logout')" method="post">Logout</inertia-link> <inertia-link class="block px-6 py-2 hover:bg-indigo-500 hover:text-white" :href="route('logout')" method="post">Logout</inertia-link>
</div> </div>
</dropdown> </dropdown>
</div> </div>
</div> </div>
<div class="flex flex-grow overflow-hidden"> <div class="flex flex-grow overflow-hidden">
<main-menu :url="url()" class="bg-indigo-darker flex-no-shrink w-56 p-12 hidden md:block overflow-y-auto" /> <main-menu :url="url()" class="bg-indigo-800 flex-shrink-0 w-56 p-12 hidden md:block overflow-y-auto" />
<div class="w-full overflow-hidden px-4 py-8 md:p-12 overflow-y-auto" scroll-region> <div class="flex-1 overflow-hidden px-4 py-8 md:p-12 overflow-y-auto" scroll-region>
<flash-messages /> <flash-messages />
<slot /> <slot />
</div> </div>
......
resources/js/Shared/MainMenu.vue
...@@ -2,26 +2,26 @@ ...@@ -2,26 +2,26 @@
<div> <div>
<div class="mb-4"> <div class="mb-4">
<inertia-link class="flex items-center group py-3" :href="route('dashboard')"> <inertia-link class="flex items-center group py-3" :href="route('dashboard')">
<icon name="dashboard" class="w-4 h-4 mr-2" :class="isUrl('') ? 'fill-white' : 'fill-indigo-light group-hover:fill-white'" /> <icon name="dashboard" class="w-4 h-4 mr-2" :class="isUrl('') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
<div :class="isUrl('') ? 'text-white' : 'text-indigo-lighter group-hover:text-white'">Dashboard</div> <div :class="isUrl('') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Dashboard</div>
</inertia-link> </inertia-link>
</div> </div>
<div class="mb-4"> <div class="mb-4">
<inertia-link class="flex items-center group py-3" :href="route('organizations')"> <inertia-link class="flex items-center group py-3" :href="route('organizations')">
<icon name="office" class="w-4 h-4 mr-2" :class="isUrl('organizations') ? 'fill-white' : 'fill-indigo-light group-hover:fill-white'" /> <icon name="office" class="w-4 h-4 mr-2" :class="isUrl('organizations') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
<div :class="isUrl('organizations') ? 'text-white' : 'text-indigo-lighter group-hover:text-white'">Organizations</div> <div :class="isUrl('organizations') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Organizations</div>
</inertia-link> </inertia-link>
</div> </div>
<div class="mb-4"> <div class="mb-4">
<inertia-link class="flex items-center group py-3" :href="route('contacts')"> <inertia-link class="flex items-center group py-3" :href="route('contacts')">
<icon name="users" class="w-4 h-4 mr-2" :class="isUrl('contacts') ? 'fill-white' : 'fill-indigo-light group-hover:fill-white'" /> <icon name="users" class="w-4 h-4 mr-2" :class="isUrl('contacts') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
<div :class="isUrl('contacts') ? 'text-white' : 'text-indigo-lighter group-hover:text-white'">Contacts</div> <div :class="isUrl('contacts') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Contacts</div>
</inertia-link> </inertia-link>
</div> </div>
<div class="mb-4"> <div class="mb-4">
<inertia-link class="flex items-center group py-3" :href="route('reports')"> <inertia-link class="flex items-center group py-3" :href="route('reports')">
<icon name="printer" class="w-4 h-4 mr-2" :class="isUrl('reports') ? 'fill-white' : 'fill-indigo-light group-hover:fill-white'" /> <icon name="printer" class="w-4 h-4 mr-2" :class="isUrl('reports') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
<div :class="isUrl('reports') ? 'text-white' : 'text-indigo-lighter group-hover:text-white'">Reports</div> <div :class="isUrl('reports') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Reports</div>
</inertia-link> </inertia-link>
</div> </div>
</div> </div>
......
resources/js/Shared/Pagination.vue
<template> <template>
<div class="mt-6 -mb-1 flex flex-wrap"> <div class="mt-6 -mb-1 flex flex-wrap">
<template v-for="(link, key) in links"> <template v-for="(link, key) in links">
<div v-if="link.url === null" :key="key" class="mr-1 mb-1 px-4 py-3 text-sm border rounded text-grey" :class="{ 'ml-auto': link.label === 'Next' }">{{ link.label }}</div> <div v-if="link.url === null" :key="key" class="mr-1 mb-1 px-4 py-3 text-sm border rounded text-gray-400" :class="{ 'ml-auto': link.label === 'Next' }">{{ link.label }}</div>
<inertia-link v-else :key="key" class="mr-1 mb-1 px-4 py-3 text-sm border rounded hover:bg-white focus:border-indigo focus:text-indigo" :class="{ 'bg-white': link.active, 'ml-auto': link.label === 'Next' }" :href="link.url">{{ link.label }}</inertia-link> <inertia-link v-else :key="key" class="mr-1 mb-1 px-4 py-3 text-sm border rounded hover:bg-white focus:border-indigo-500 focus:text-indigo-500" :class="{ 'bg-white': link.active, 'ml-auto': link.label === 'Next' }" :href="link.url">{{ link.label }}</inertia-link>
</template> </template>
</div> </div>
</template> </template>
......
resources/js/Shared/SearchFilter.vue
<template> <template>
<div class="flex items-center"> <div class="flex items-center">
<div class="flex w-full bg-white shadow rounded"> <div class="flex w-full bg-white shadow rounded">
<dropdown :auto-close="false" class="px-4 md:px-6 rounded-l border-r hover:bg-grey-lightest focus:border-white focus:shadow-outline focus:z-10" placement="bottom-start"> <dropdown :auto-close="false" class="px-4 md:px-6 rounded-l border-r hover:bg-gray-100 focus:border-white focus:shadow-outline focus:z-10" placement="bottom-start">
<div class="flex items-baseline"> <div class="flex items-baseline">
<span class="text-grey-darkest hidden md:inline">Filter</span> <span class="text-gray-700 hidden md:inline">Filter</span>
<svg class="w-2 h-2 fill-grey-darker md:ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 961.243 599.998"> <svg class="w-2 h-2 fill-gray-700 md:ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 961.243 599.998">
<path d="M239.998 239.999L0 0h961.243L721.246 240c-131.999 132-240.28 240-240.624 239.999-.345-.001-108.625-108.001-240.624-240z" /> <path d="M239.998 239.999L0 0h961.243L721.246 240c-131.999 132-240.28 240-240.624 239.999-.345-.001-108.625-108.001-240.624-240z" />
</svg> </svg>
</div> </div>
<div slot="dropdown" class="mt-2 px-4 py-6 w-screen shadow-lg bg-white rounded" :style="{ maxWidth: `${maxWidth}px` }"> <div slot="dropdown" class="mt-2 px-4 py-6 w-screen shadow-xl bg-white rounded" :style="{ maxWidth: `${maxWidth}px` }">
<slot /> <slot />
</div> </div>
</dropdown> </dropdown>
<input class="relative w-full px-6 py-3 rounded-r focus:shadow-outline" autocomplete="off" type="text" name="search" placeholder="Search…" :value="value" @input="$emit('input', $event.target.value)"> <input class="relative w-full px-6 py-3 rounded-r focus:shadow-outline" autocomplete="off" type="text" name="search" placeholder="Search…" :value="value" @input="$emit('input', $event.target.value)">
</div> </div>
<button class="ml-3 text-sm text-grey-dark hover:text-grey-darker focus:text-indigo" type="button" @click="$emit('reset')">Reset</button> <button class="ml-3 text-sm text-gray-500 hover:text-gray-700 focus:text-indigo-500" type="button" @click="$emit('reset')">Reset</button>
</div> </div>
</template> </template>
......
resources/js/Shared/TrashedMessage.vue
<template> <template>
<div class="p-4 bg-yellow-light rounded border border-yellow-dark flex items-center justify-between"> <div class="p-4 bg-yellow-400 rounded flex items-center justify-between max-w-3xl">
<div class="flex items-center"> <div class="flex items-center">
<icon name="trash" class="flex-no-shrink w-4 h-4 fill-yellow-darker mr-2" /> <icon name="trash" class="flex-shrink-0 w-4 h-4 fill-yellow-800 mr-2" />
<div class="text-yellow-darker"> <div class="text-sm font-medium text-yellow-800">
<slot /> <slot />
</div> </div>
</div> </div>
<button class="text-yellow-darker hover:underline" tabindex="-1" type="button" @click="$emit('restore')">Restore</button> <button class="text-sm text-yellow-800 hover:underline" tabindex="-1" type="button" @click="$emit('restore')">Restore</button>
</div> </div>
</template> </template>
......
resources/views/app.blade.php
<!DOCTYPE html> <!DOCTYPE html>
<html class="h-full bg-grey-lighter"> <html class="h-full bg-gray-200">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<script src="{{ mix('/js/app.js') }}" defer></script> <script src="{{ mix('/js/app.js') }}" defer></script>
@routes @routes
</head> </head>
<body class="font-sans leading-none text-grey-darkest antialiased"> <body class="font-sans leading-none text-gray-700 antialiased">
@inertia @inertia
......
tailwind.config.js 0 → 100644
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Cerebri Sans', ...defaultTheme.fontFamily.sans],
},
colors: {
indigo: {
'900': '#191e38',
'800': '#2f365f',
'600': '#5661b3',
'500': '#6574cd',
'400': '#7886d7',
'300': '#b2b7ff',
'100': '#e6e8ff',
},
},
boxShadow: theme => ({
outline: '0 0 0 2px ' + theme('colors.indigo.500'),
}),
fill: theme => theme('colors'),
},
},
variants: {
fill: ['responsive', 'hover', 'focus', 'group-hover'],
textColor: ['responsive', 'hover', 'focus', 'group-hover'],
zIndex: ['responsive', 'focus'],
},
plugins: [],
}
webpack.mix.js
...@@ -22,7 +22,7 @@ mix.js('resources/js/app.js', 'public/js') ...@@ -22,7 +22,7 @@ mix.js('resources/js/app.js', 'public/js')
postCss: [ postCss: [
cssImport(), cssImport(),
cssNesting(), cssNesting(),
tailwindcss('tailwind.js'), tailwindcss('tailwind.config.js'),
...mix.inProduction() ? [ ...mix.inProduction() ? [
purgecss({ purgecss({
content: ['./resources/views/**/*.blade.php', './resources/js/**/*.vue'], content: ['./resources/views/**/*.blade.php', './resources/js/**/*.vue'],
...@@ -36,7 +36,7 @@ mix.js('resources/js/app.js', 'public/js') ...@@ -36,7 +36,7 @@ mix.js('resources/js/app.js', 'public/js')
output: { chunkFilename: 'js/[name].js?id=[chunkhash]' }, output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
resolve: { resolve: {
alias: { alias: {
'vue$': 'vue/dist/vue.runtime.esm.js', vue$: 'vue/dist/vue.runtime.esm.js',
'@': path.resolve('resources/js'), '@': path.resolve('resources/js'),
}, },
}, },
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!