village-hall
/
opnform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix safelist tailwind

This commit is contained in:
JhumanJ 2022-10-17 14:20:13 +02:00
parent d7ffb6233c
commit 11904cc42e
10 changed files with 35 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -5,7 +5,7 @@
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"hot": "mix watch --hot --https",
"prod": "mix --production",
"production": "mix --production",
"lint": "eslint --fix --ext .js,.vue resources/js"

10
resources/js/components/Navbar.vue
View File

@ -6,7 +6,7 @@
<router-link :to="{ name: user ? 'home' : 'welcome' }" class="flex-shrink-0 font-semibold flex items-center">
<img :src="asset('img/logo.svg')" alt="notion tools logo" class="w-10 h-10">
<span
class="ml-2 text-xl hidden sm:inline text-black dark:text-white"
class="ml-2 text-md hidden sm:inline text-black dark:text-white"
>
{{ appName }}</span><span
class="bg-gray-100 text-gray-600 font-semibold inline-block mb-4 ml-1 px-3 rounded-full text-black text-xs tracking-wider"
@ -27,7 +27,7 @@
Help
</a>
</div>
<div v-if="showAuth" class="hidden md:block pl-5 border-gray-300 border-r-2 h-5"></div>
<div v-if="showAuth" class="hidden md:block pl-5 border-gray-300 border-r h-5"></div>
<div v-if="showAuth" class="block">
<div class="flex items-center">
<div class="ml-3 mr-4 relative">
@ -35,7 +35,7 @@
<dropdown v-if="user" dusk="nav-dropdown">
<template #trigger="{toggle}">
<button id="dropdown-menu-button" type="button"
class="flex items-center justify-center w-full rounded-md px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-50 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-gray-500"
class="flex items-center justify-center w-full rounded-md px-4 py-2 text-sm text-gray-700 dark:text-gray-50 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-gray-500"
dusk="nav-dropdown-button" @click.prevent="toggle()"
>
<img :src="user.photo_url" class="rounded-full w-6 h-6">
@ -90,13 +90,13 @@
</dropdown>
<div v-else>
<router-link v-if="$route.name !== 'login'" :to="{ name: 'login' }"
class="text-gray-600 dark:text-white hover:text-gray-800 dark:hover:text-white px-0 sm:px-3 py-2 rounded-md text-sm font-medium"
class="text-gray-600 dark:text-white hover:text-gray-800 dark:hover:text-white px-0 sm:px-3 py-2 rounded-md text-sm"
active-class="text-gray-800 dark:text-white"
>
{{ $t('login') }}
</router-link>
<router-link :to="{ name: 'register' }"
class="hidden md:inline text-gray-600 dark:text-white hover:text-gray-800 dark:hover:text-white pl-3 py-2 rounded-md text-sm font-medium"
class="hidden md:inline text-gray-600 dark:text-white hover:text-gray-800 dark:hover:text-white pl-3 py-2 rounded-md text-sm"
active-class="text-gray-800 dark:text-white"
>
<v-button v-track.nav_create_form_click :arrow="true">

36
resources/js/components/common/Button.vue
View File

@ -3,12 +3,12 @@
bg-${color}-${colorShades['main']} hover:bg-${color}-${colorShades['hover']} focus:ring-${color}-${colorShades['ring']}
focus:ring-offset-${color}-${colorShades['ring-offset']} text-${colorShades['text']}
transition ease-in duration-200 text-center text-${sizes['font']} font-semibold focus:outline-none focus:ring-2
focus:ring-offset-2 border-2 border-${colorShades['border']} rounded-full `"
class="btn" @click="$emit('click',$event)"
focus:ring-offset-2 border-2 border-${colorShades['border']} rounded-lg`"
@click="$emit('click',$event)"
>
<template v-if="!loading">
<slot />
<svg v-if="arrow" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="float-right mt-1 ml-2 w-4 h-4">
<svg v-if="arrow" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="float-right mt-1 ml-2 w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
</svg>
</template>
@ -23,7 +23,7 @@ export default {
props: {
color: {
type: String,
default: 'normal'
default: 'blue'
},
shade: {
@ -38,7 +38,7 @@ export default {
nativeType: {
type: String,
default: 'submit'
default: null
},
loading: {
@ -54,26 +54,6 @@ export default {
computed: {
colorShades () {
if (this.color === 'nt-blue') {
return {
main: 'default',
hover: 'light',
ring: 'light',
'ring-offset': 'lighter',
text: 'white',
border: 'nt-blue'
}
}
if (['red','green','blue'].indexOf(this.color) >= 0) {
return {
main: '600',
hover: 'light',
ring: 'light',
'ring-offset': 'lighter',
text: 'white',
border: 'white'
}
}
if (this.shade === 'lighter') {
return {
main: '200',
@ -81,7 +61,7 @@ export default {
ring: '100',
'ring-offset': '50',
text: 'gray-900',
border: 'nt-blue'
border: 'blue'
}
}
if (this.shade === 'light') {
@ -99,8 +79,8 @@ export default {
hover: '700',
ring: '500',
'ring-offset': '200',
text: 'nt-blue',
border: 'nt-blue'
text: 'white',
border: 'blue'
}
},
sizes () {

26
resources/js/pages/welcome.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<div class="flex flex-col bg-gray-50 dark:bg-notion-dark">
<div class="w-full ">
<div class="w-full bg-gradient-to-b from-white to-gray-50">
<div class="w-full md:mx-auto flex flex-wrap mb-10 md:-mb-64 md:pt-10 relative max-w-5xl">
<div
class="flex flex-col justify-center w-full text-center lg:pr-10 p-6 lg:p-10 relative z-10"
@ -9,7 +9,7 @@
<h1 dusk="title" class="text-4xl lg:text-5xl">
The open-source <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-blue-600">form builder</span><br>
</h1>
<h3 class="mt-6 text-xl text-gray-500 dark:text-gray-400 max-w-xl mx-auto">
<h3 class="mt-6 text-xl text-gray-600 dark:text-gray-400 max-w-xl mx-auto">
Create beautiful forms and share them anywhere. It takes seconds, you don't need to know how to code
and <span
class="font-semibold"
@ -17,32 +17,34 @@
</h3>
<div class="mt-6 flex justify-center">
<router-link class="mr-1" :to="{ name: 'register' }">
<v-button v-track.welcome_create_form_click :arrow="true" class="py-4" color="nt-blue">
<v-button v-track.welcome_create_form_click :arrow="true" class="py-4" color="blue">
Create a form for FREE
</v-button>
</router-link>
</div>
<div class="justify-center flex mt-10">
<div class="flex text-gray-400 mr-4">
<div class="justify-center flex gap-2 mt-10">
<div class="flex items-center text-gray-400 text-sm">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4 mt-1 mr-1">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
Unlimited forms
<span>Unlimited forms</span>
</div>
<div class="flex text-gray-400 mr-4">
<div class="flex items-center text-gray-400 text-sm">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4 mt-1 mr-1">
stroke="currentColor" class="w-4 h-4 mr-1">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
Unlimited fields
<span>
Unlimited fields
</span>
</div>
<div class="flex text-gray-400">
<div class="flex text-gray-400 text-sm">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4 mt-1 mr-1">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
Unlimited responses
<span>Unlimited responses</span>
</div>
</div>
</div>
@ -78,7 +80,7 @@
<p class="text-gray-300 my-8">No trial. Generous, unlimited free plan.</p>
<div class="mt-6 flex justify-center">
<router-link class="mr-1" :to="{ name: 'register' }">
<v-button v-track.welcome_create_form_click :arrow="true" class="py-4" color="nt-blue">
<v-button v-track.welcome_create_form_click :arrow="true" class="py-4" color="blue">
Create a form for FREE
</v-button>
</router-link>

1
resources/sass/app.scss vendored
View File

@ -2,7 +2,6 @@
@tailwind components;
@tailwind utilities;
@import 'elements/transitions';
@import 'fonts';
body.dark * {

25
resources/sass/elements/_buttons.scss vendored
View File

@ -1,25 +0,0 @@
.btn-loading {
position: relative;
pointer-events: none;
color: transparent !important;
&:after {
animation: spinAround 500ms infinite linear;
border: 2px solid #dbdbdb;
border-radius: 50%;
border-right-color: transparent;
border-top-color: transparent;
content: "";
display: block;
height: 1em;
width: 1em;
position: absolute;
left: calc(50% - (1em / 2));
top: calc(50% - (1em / 2));
}
}
@keyframes spinAround {
from { transform: rotate(0deg); }
to { transform: rotate(359deg); }
}

3
resources/sass/elements/_card.scss vendored
View File

@ -1,3 +0,0 @@
.card {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

19
resources/sass/elements/_navbar.scss vendored
View File

@ -1,19 +0,0 @@
.navbar {
font-weight: 600;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.nav-item {
.dropdown-menu {
border: none;
margin-top: .5rem;
border-top: 1px solid #f2f2f2 !important;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08);
}
}
.nav-link {
.svg-inline--fa {
font-size: 1.4rem;
}
}

17
resources/sass/elements/_transitions.scss vendored
View File

@ -1,17 +0,0 @@
.page-enter-active,
.page-leave-active {
transition: opacity .2s;
}
.page-enter,
.page-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity .15s
}
.fade-enter,
.fade-leave-to {
opacity: 0
}

17
tailwind.config.js vendored
View File

@ -1,19 +1,17 @@
const colors = require('tailwindcss/colors')
module.exports = {
mode: 'jit',
important: true,
content: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue'
],
options: {
safelist: [
/.*bg-(nt-blue|blue|gray|red|yellow|green).*/, // Buttons
...['green', 'red', 'blue', 'yellow'].map((color) => ['bg-' + color + '-100', 'border-' + color + '-500']).flat() // Alerts
]
},
safelist: [
{
pattern: /.*bg-(blue|gray|red|yellow|green).*/,
},
...['green', 'red', 'blue', 'yellow'].map((color) => ['bg-' + color + '-100', 'border-' + color + '-500']).flat() // Alerts
],
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {
@ -69,6 +67,5 @@ module.exports = {
spacing: 'margin, padding'
}
}
},
plugins: []
}
}