Skip to content

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

Go to a project
Commit adc0db7c by Jonathan Reinink
Options

Upgrade to Tailwind 2.0 and Laravel Mix 6

1 parent 5dab72d8
Inline Side-by-side
Showing with 109 additions and 106 deletions
package-lock.json
This diff could not be displayed because it is too large.
package.json
...@@ -2,31 +2,31 @@ ...@@ -2,31 +2,31 @@
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "npm run development", "dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "development": "mix",
"watch": "npm run development -- --watch", "watch": "mix watch",
"watch-poll": "npm run watch -- --watch-poll", "watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "hot": "mix watch --hot",
"prod": "npm run production", "prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" "production": "mix --production"
}, },
"dependencies": { "dependencies": {
"@fullhuman/postcss-purgecss": "^1.3.0",
"@inertiajs/inertia": "^0.8.5", "@inertiajs/inertia": "^0.8.5",
"@inertiajs/inertia-vue": "^0.5.5", "@inertiajs/inertia-vue": "^0.5.5",
"@inertiajs/progress": "^0.2.4", "@inertiajs/progress": "^0.2.4",
"cross-env": "^5.2.1", "autoprefixer": "^10.2.4",
"eslint": "^6.8.0", "eslint": "^6.8.0",
"eslint-plugin-vue": "^7.5.0", "eslint-plugin-vue": "^7.5.0",
"laravel-mix": "^5.0.9", "laravel-mix": "^6.0.6",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"popper.js": "^1.16.0", "popper.js": "^1.16.0",
"portal-vue": "^1.5.1", "portal-vue": "^1.5.1",
"postcss": "^8.2.6",
"postcss-import": "^12.0.1", "postcss-import": "^12.0.1",
"postcss-nesting": "^7.0.1", "postcss-nesting": "^7.0.1",
"resolve-url-loader": "^2.3.2", "tailwindcss": "^2.0.3",
"tailwindcss": "^1.9.6",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-loader": "^15.9.6",
"vue-meta": "^2.3.1", "vue-meta": "^2.3.1",
"vue-template-compiler": "^2.6.11" "vue-template-compiler": "^2.6.12"
} }
} }
resources/css/app.css
/* Reset */ /* Reset */
@import "tailwindcss/base"; @import 'tailwindcss/base';
@import "reset"; @import 'reset';
/* Components */ /* Components */
@import "tailwindcss/components"; @import 'tailwindcss/components';
@import "buttons"; @import 'buttons';
@import "form"; @import 'form';
/* Utilities */ /* Utilities */
@import "tailwindcss/utilities"; @import 'tailwindcss/utilities';
resources/css/buttons.css
.btn-indigo { .btn-indigo {
@apply px-6 py-3 rounded bg-indigo-600 text-white text-sm font-bold whitespace-no-wrap; @apply px-6 py-3 rounded bg-indigo-600 text-white text-sm leading-4 font-bold whitespace-nowrap hover:bg-orange-400 focus:bg-orange-400;
&:hover, &:focus { @apply bg-orange-500 }
} }
.btn-spinner, .btn-spinner,
...@@ -15,15 +13,19 @@ ...@@ -15,15 +13,19 @@
font-size: 10px; font-size: 10px;
position: relative; position: relative;
text-indent: -9999em; text-indent: -9999em;
border-top: .2em solid white; border-top: 0.2em solid white;
border-right: .2em solid white; border-right: 0.2em solid white;
border-bottom: .2em solid white; border-bottom: 0.2em solid white;
border-left: .2em solid transparent; border-left: 0.2em solid transparent;
transform: translateZ(0); transform: translateZ(0);
animation: spinning 1s infinite linear; animation: spinning 1s infinite linear;
} }
@keyframes spinning { @keyframes spinning {
0% { transform: rotate(0deg) } 0% {
100% { transform: rotate(360deg) } transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} }
resources/css/form.css
.form-label { .form-label {
@apply .mb-2 .block .text-gray-700 .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-gray-700 .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:border-indigo-400 focus:ring;
&:focus,
&.focus {
@apply .border-indigo-500;
box-shadow: 0 0 0 1px theme('colors.indigo.500');
}
&::placeholder { &::placeholder {
@apply .text-gray-500 .opacity-100; @apply text-gray-500 opacity-100;
} }
} }
.form-select { .form-select {
@apply .pr-6; @apply pr-6;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAQCAYAAAAMJL+VAAAABGdBTUEAALGPC/xhBQAAAQtJREFUOBG1lEEOgjAQRalbGj2OG9caOACn4ALGtfEuHACiazceR1PWOH/CNA3aMiTaBDpt/7zPdBKy7M/DCL9pGkvxxVp7KsvyJftL5rZt1865M+Ucq6pyyF3hNcI7Cuu+728QYn/JQA5yKaempxuZmQngOwEaYx55nu+1lQh8GIatMGi+01NwBcEmhxBqK4nAPZJ78K0KKFAJmR3oPp8+Iwgob0Oa6+TLoeCvRx+mTUYf/FVBGTPRwDkfLxnaSrRwcH0FWhNOmrkWYbE2XEicqgSa1J0LQ+aPCuQgZiLnwewbGuz5MGoAhcIkCQcjaTBjMgtXGURMVHC1wcQEy0J+Zlj8bKAnY1/UzDe2dbAVqfXn6wAAAABJRU5ErkJggg=='); background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAQCAYAAAAMJL+VAAAABGdBTUEAALGPC/xhBQAAAQtJREFUOBG1lEEOgjAQRalbGj2OG9caOACn4ALGtfEuHACiazceR1PWOH/CNA3aMiTaBDpt/7zPdBKy7M/DCL9pGkvxxVp7KsvyJftL5rZt1865M+Ucq6pyyF3hNcI7Cuu+728QYn/JQA5yKaempxuZmQngOwEaYx55nu+1lQh8GIatMGi+01NwBcEmhxBqK4nAPZJ78K0KKFAJmR3oPp8+Iwgob0Oa6+TLoeCvRx+mTUYf/FVBGTPRwDkfLxnaSrRwcH0FWhNOmrkWYbE2XEicqgSa1J0LQ+aPCuQgZiLnwewbGuz5MGoAhcIkCQcjaTBjMgtXGURMVHC1wcQEy0J+Zlj8bKAnY1/UzDe2dbAVqfXn6wAAAABJRU5ErkJggg==');
background-size: 0.7rem; background-size: 0.7rem;
...@@ -27,20 +21,16 @@ ...@@ -27,20 +21,16 @@
background-position: right 0.7rem center; background-position: right 0.7rem center;
&::-ms-expand { &::-ms-expand {
@apply .opacity-0; @apply opacity-0;
} }
} }
.form-error {
@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-600; @apply border-red-500 focus:ring focus:ring-red-200;
}
&:focus { .form-error {
box-shadow: 0 0 0 1px theme('colors.red.600'); @apply text-red-700 mt-2 text-sm;
}
} }
resources/js/Pages/Auth/Login.vue
...@@ -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-gray-100 border-t border-gray-200 flex justify-between items-center"> <div class="px-10 py-4 bg-gray-100 border-t border-gray-100 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="form.processing" class="btn-indigo" type="submit">Login</loading-button> <loading-button :loading="form.processing" class="btn-indigo" type="submit">Login</loading-button>
</div> </div>
......
resources/js/Pages/Contacts/Create.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<inertia-link class="text-indigo-400 hover:text-indigo-600" :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-400 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-3xl"> <div class="bg-white rounded-md shadow overflow-hidden max-w-3xl">
<form @submit.prevent="store"> <form @submit.prevent="store">
<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" :error="form.errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" /> <text-input v-model="form.first_name" :error="form.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" :error="form.errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" /> <text-input v-model="form.postal_code" :error="form.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-gray-100 border-t border-gray-200 flex justify-end items-center"> <div class="px-8 py-4 bg-gray-50 border-t border-gray-100 flex justify-end items-center">
<loading-button :loading="form.processing" class="btn-indigo" type="submit">Create Contact</loading-button> <loading-button :loading="form.processing" class="btn-indigo" type="submit">Create Contact</loading-button>
</div> </div>
</form> </form>
......
resources/js/Pages/Contacts/Edit.vue
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<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-3xl"> <div class="bg-white rounded-md shadow overflow-hidden max-w-3xl">
<form @submit.prevent="update"> <form @submit.prevent="update">
<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" :error="form.errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" /> <text-input v-model="form.first_name" :error="form.errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
</select-input> </select-input>
<text-input v-model="form.postal_code" :error="form.errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" /> <text-input v-model="form.postal_code" :error="form.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-gray-100 border-t border-gray-200 flex items-center"> <div class="px-8 py-4 bg-gray-50 border-t border-gray-100 flex items-center">
<button v-if="!contact.deleted_at" class="text-red-600 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="form.processing" class="btn-indigo ml-auto" type="submit">Update Contact</loading-button> <loading-button :loading="form.processing" class="btn-indigo ml-auto" type="submit">Update Contact</loading-button>
</div> </div>
......
resources/js/Pages/Contacts/Index.vue
...@@ -15,8 +15,8 @@ ...@@ -15,8 +15,8 @@
<span class="hidden md:inline">Contact</span> <span class="hidden md:inline">Contact</span>
</inertia-link> </inertia-link>
</div> </div>
<div class="bg-white rounded shadow overflow-x-auto"> <div class="bg-white rounded-md shadow overflow-x-auto">
<table class="w-full whitespace-no-wrap"> <table class="w-full whitespace-nowrap">
<tr class="text-left font-bold"> <tr class="text-left font-bold">
<th class="px-6 pt-6 pb-4">Name</th> <th class="px-6 pt-6 pb-4">Name</th>
<th class="px-6 pt-6 pb-4">Organization</th> <th class="px-6 pt-6 pb-4">Organization</th>
......
resources/js/Pages/Organizations/Create.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<inertia-link class="text-indigo-400 hover:text-indigo-600" :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-400 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-3xl"> <div class="bg-white rounded-md shadow overflow-hidden max-w-3xl">
<form @submit.prevent="store"> <form @submit.prevent="store">
<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" :error="form.errors.name" class="pr-6 pb-8 w-full lg:w-1/2" label="Name" /> <text-input v-model="form.name" :error="form.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" :error="form.errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" /> <text-input v-model="form.postal_code" :error="form.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-gray-100 border-t border-gray-200 flex justify-end items-center"> <div class="px-8 py-4 bg-gray-50 border-t border-gray-100 flex justify-end items-center">
<loading-button :loading="form.processing" class="btn-indigo" type="submit">Create Organization</loading-button> <loading-button :loading="form.processing" class="btn-indigo" type="submit">Create Organization</loading-button>
</div> </div>
</form> </form>
......
resources/js/Pages/Organizations/Edit.vue
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<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-3xl"> <div class="bg-white rounded-md shadow overflow-hidden max-w-3xl">
<form @submit.prevent="update"> <form @submit.prevent="update">
<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" :error="form.errors.name" class="pr-6 pb-8 w-full lg:w-1/2" label="Name" /> <text-input v-model="form.name" :error="form.errors.name" class="pr-6 pb-8 w-full lg:w-1/2" label="Name" />
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</select-input> </select-input>
<text-input v-model="form.postal_code" :error="form.errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" /> <text-input v-model="form.postal_code" :error="form.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-gray-100 border-t border-gray-200 flex items-center"> <div class="px-8 py-4 bg-gray-50 border-t border-gray-100 flex items-center">
<button v-if="!organization.deleted_at" class="text-red-600 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="form.processing" class="btn-indigo ml-auto" type="submit">Update Organization</loading-button> <loading-button :loading="form.processing" class="btn-indigo ml-auto" type="submit">Update Organization</loading-button>
</div> </div>
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
</div> </div>
<h2 class="mt-12 font-bold text-2xl">Contacts</h2> <h2 class="mt-12 font-bold text-2xl">Contacts</h2>
<div class="mt-6 bg-white rounded shadow overflow-x-auto"> <div class="mt-6 bg-white rounded shadow overflow-x-auto">
<table class="w-full whitespace-no-wrap"> <table class="w-full whitespace-nowrap">
<tr class="text-left font-bold"> <tr class="text-left font-bold">
<th class="px-6 pt-6 pb-4">Name</th> <th class="px-6 pt-6 pb-4">Name</th>
<th class="px-6 pt-6 pb-4">City</th> <th class="px-6 pt-6 pb-4">City</th>
......
resources/js/Pages/Organizations/Index.vue
...@@ -15,8 +15,8 @@ ...@@ -15,8 +15,8 @@
<span class="hidden md:inline">Organization</span> <span class="hidden md:inline">Organization</span>
</inertia-link> </inertia-link>
</div> </div>
<div class="bg-white rounded shadow overflow-x-auto"> <div class="bg-white rounded-md shadow overflow-x-auto">
<table class="w-full whitespace-no-wrap"> <table class="w-full whitespace-nowrap">
<tr class="text-left font-bold"> <tr class="text-left font-bold">
<th class="px-6 pt-6 pb-4">Name</th> <th class="px-6 pt-6 pb-4">Name</th>
<th class="px-6 pt-6 pb-4">City</th> <th class="px-6 pt-6 pb-4">City</th>
......
resources/js/Pages/Users/Create.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<inertia-link class="text-indigo-400 hover:text-indigo-600" :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-400 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-3xl"> <div class="bg-white rounded-md shadow overflow-hidden max-w-3xl">
<form @submit.prevent="store"> <form @submit.prevent="store">
<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" :error="form.errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" /> <text-input v-model="form.first_name" :error="form.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" :error="form.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" :error="form.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-gray-100 border-t border-gray-200 flex justify-end items-center"> <div class="px-8 py-4 bg-gray-50 border-t border-gray-100 flex justify-end items-center">
<loading-button :loading="form.processing" class="btn-indigo" type="submit">Create User</loading-button> <loading-button :loading="form.processing" class="btn-indigo" type="submit">Create User</loading-button>
</div> </div>
</form> </form>
......
resources/js/Pages/Users/Edit.vue
...@@ -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-3xl"> <div class="bg-white rounded-md shadow overflow-hidden max-w-3xl">
<form @submit.prevent="update"> <form @submit.prevent="update">
<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" :error="form.errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" /> <text-input v-model="form.first_name" :error="form.errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</select-input> </select-input>
<file-input v-model="form.photo" :error="form.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" :error="form.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-gray-100 border-t border-gray-200 flex items-center"> <div class="px-8 py-4 bg-gray-50 border-t border-gray-100 flex items-center">
<button v-if="!user.deleted_at" class="text-red-600 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="form.processing" class="btn-indigo ml-auto" type="submit">Update User</loading-button> <loading-button :loading="form.processing" class="btn-indigo ml-auto" type="submit">Update User</loading-button>
</div> </div>
......
resources/js/Pages/Users/Index.vue
...@@ -21,8 +21,8 @@ ...@@ -21,8 +21,8 @@
<span class="hidden md:inline">User</span> <span class="hidden md:inline">User</span>
</inertia-link> </inertia-link>
</div> </div>
<div class="bg-white rounded shadow overflow-x-auto"> <div class="bg-white rounded-md shadow overflow-x-auto">
<table class="w-full whitespace-no-wrap"> <table class="w-full whitespace-nowrap">
<tr class="text-left font-bold"> <tr class="text-left font-bold">
<th class="px-6 pt-6 pb-4">Name</th> <th class="px-6 pt-6 pb-4">Name</th>
<th class="px-6 pt-6 pb-4">Email</th> <th class="px-6 pt-6 pb-4">Email</th>
......
resources/js/Shared/FlashMessages.vue
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<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> <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.props.flash.error || Object.keys($page.props.errors).length > 0) && show" class="mb-8 flex items-center justify-between bg-red-500 rounded max-w-3xl"> <div v-if="($page.props.flash.error || Object.keys($page.props.errors).length > 0) && show" class="mb-8 flex items-center justify-between bg-red-400 rounded max-w-3xl">
<div class="flex items-center"> <div class="flex items-center">
<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> <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.props.flash.error" class="py-4 text-white text-sm font-medium">{{ $page.props.flash.error }}</div> <div v-if="$page.props.flash.error" class="py-4 text-white text-sm font-medium">{{ $page.props.flash.error }}</div>
......
resources/js/Shared/Layout.vue
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<div class="mt-1 mr-4">{{ $page.props.auth.user.account.name }}</div> <div class="mt-1 mr-4">{{ $page.props.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-gray-700 group-hover:text-indigo-600 focus:text-indigo-600 mr-1 whitespace-no-wrap"> <div class="text-gray-700 group-hover:text-indigo-600 focus:text-indigo-600 mr-1 whitespace-nowrap">
<span>{{ $page.props.auth.user.first_name }}</span> <span>{{ $page.props.auth.user.first_name }}</span>
<span class="hidden md:inline">{{ $page.props.auth.user.last_name }}</span> <span class="hidden md:inline">{{ $page.props.auth.user.last_name }}</span>
</div> </div>
......
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-gray-100 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:ring focus:z-10" placement="bottom-start">
<div class="flex items-baseline"> <div class="flex items-baseline">
<span class="text-gray-700 hidden md:inline">Filter</span> <span class="text-gray-700 hidden md:inline">Filter</span>
<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"> <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">
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<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:ring" 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-gray-500 hover:text-gray-700 focus:text-indigo-500" 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>
......
resources/js/Shared/TrashedMessage.vue
<template> <template>
<div class="p-4 bg-yellow-400 rounded flex items-center justify-between max-w-3xl"> <div class="p-4 bg-yellow-300 rounded flex items-center justify-between max-w-3xl">
<div class="flex items-center"> <div class="flex items-center">
<icon name="trash" class="flex-shrink-0 w-4 h-4 fill-yellow-800 mr-2" /> <icon name="trash" class="flex-shrink-0 w-4 h-4 fill-yellow-800 mr-2" />
<div class="text-sm font-medium text-yellow-800"> <div class="text-sm font-medium text-yellow-800">
......
resources/views/app.blade.php
<!DOCTYPE html> <!DOCTYPE html>
<html class="h-full bg-gray-200"> <html class="h-full bg-gray-100">
<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" />
<link href="{{ mix('/css/app.css') }}" rel="stylesheet"> <link href="{{ asset('css/app.css') }}" rel="stylesheet">
{{-- Inertia --}} {{-- Inertia --}}
<script src="https://polyfill.io/v3/polyfill.min.js?features=smoothscroll,NodeList.prototype.forEach,Promise,Object.values,Object.assign" defer></script> <script src="https://polyfill.io/v3/polyfill.min.js?features=smoothscroll,NodeList.prototype.forEach,Promise,Object.values,Object.assign" defer></script>
......
tailwind.config.js
const colors = require('tailwindcss/colors')
const defaultTheme = require('tailwindcss/defaultTheme') const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = { module.exports = {
purge: [
// prettier-ignore
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
darkMode: false, // or 'media' or 'class'
theme: { theme: {
extend: {
fontFamily: {
sans: ['Cerebri Sans', ...defaultTheme.fontFamily.sans],
},
colors: { colors: {
transparent: 'transparent',
current: 'currentColor',
black: colors.black,
white: colors.white,
red: colors.red,
orange: colors.orange,
yellow: colors.yellow,
green: colors.green,
gray: colors.blueGray,
indigo: { indigo: {
'900': '#191e38', 100: '#e6e8ff',
'800': '#2f365f', 300: '#b2b7ff',
'600': '#5661b3', 400: '#7886d7',
'500': '#6574cd', 500: '#6574cd',
'400': '#7886d7', 600: '#5661b3',
'300': '#b2b7ff', 800: '#2f365f',
'100': '#e6e8ff', 900: '#191e38',
}, },
}, },
extend: {
borderColor: theme => ({
DEFAULT: theme('colors.gray.200', 'currentColor'),
}),
fontFamily: {
sans: ['Cerebri Sans', ...defaultTheme.fontFamily.sans],
},
boxShadow: theme => ({ boxShadow: theme => ({
outline: '0 0 0 2px ' + theme('colors.indigo.500'), outline: '0 0 0 2px ' + theme('colors.indigo.500'),
}), }),
...@@ -24,9 +44,9 @@ module.exports = { ...@@ -24,9 +44,9 @@ module.exports = {
}, },
}, },
variants: { variants: {
fill: ['responsive', 'hover', 'focus', 'group-hover'], extend: {
textColor: ['responsive', 'hover', 'focus', 'group-hover'], fill: ['focus', 'group-hover'],
zIndex: ['responsive', 'focus'], },
}, },
plugins: [], plugins: [],
} }
webpack.mix.js
const path = require('path')
const mix = require('laravel-mix')
const cssImport = require('postcss-import') const cssImport = require('postcss-import')
const cssNesting = require('postcss-nesting') const cssNesting = require('postcss-nesting')
const mix = require('laravel-mix')
const path = require('path')
const purgecss = require('@fullhuman/postcss-purgecss')
const tailwindcss = require('tailwindcss')
/* /*
|-------------------------------------------------------------------------- |--------------------------------------------------------------------------
...@@ -16,22 +14,15 @@ const tailwindcss = require('tailwindcss') ...@@ -16,22 +14,15 @@ const tailwindcss = require('tailwindcss')
| |
*/ */
mix.js('resources/js/app.js', 'public/js') mix
.postCss('resources/css/app.css', 'public/css/app.css') .js('resources/js/app.js', 'public/js')
.options({ .vue()
postCss: [ .postCss('resources/css/app.css', 'public/css', [
// prettier-ignore
cssImport(), cssImport(),
cssNesting(), cssNesting(),
tailwindcss('tailwind.config.js'), require('tailwindcss'),
...mix.inProduction() ? [ ])
purgecss({
content: ['./resources/views/**/*.blade.php', './resources/js/**/*.vue'],
defaultExtractor: content => content.match(/[\w-/:.]+(?<!:)/g) || [],
whitelistPatternsChildren: [/nprogress/],
}),
] : [],
],
})
.webpackConfig({ .webpackConfig({
output: { chunkFilename: 'js/[name].js?id=[chunkhash]' }, output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
resolve: { resolve: {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!