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", "development": "mix",
"watch": "mix watch", "watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000", "watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot", "hot": "mix watch --hot --https",
"prod": "mix --production", "prod": "mix --production",
"production": "mix --production", "production": "mix --production",
"lint": "eslint --fix --ext .js,.vue resources/js" "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"> <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"> <img :src="asset('img/logo.svg')" alt="notion tools logo" class="w-10 h-10">
<span <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 {{ 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" 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 Help
</a> </a>
</div> </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 v-if="showAuth" class="block">
<div class="flex items-center"> <div class="flex items-center">
<div class="ml-3 mr-4 relative"> <div class="ml-3 mr-4 relative">
@ -35,7 +35,7 @@
<dropdown v-if="user" dusk="nav-dropdown"> <dropdown v-if="user" dusk="nav-dropdown">
<template #trigger="{toggle}"> <template #trigger="{toggle}">
<button id="dropdown-menu-button" type="button" <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()" dusk="nav-dropdown-button" @click.prevent="toggle()"
> >
<img :src="user.photo_url" class="rounded-full w-6 h-6"> <img :src="user.photo_url" class="rounded-full w-6 h-6">
@ -90,13 +90,13 @@
</dropdown> </dropdown>
<div v-else> <div v-else>
<router-link v-if="$route.name !== 'login'" :to="{ name: 'login' }" <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" active-class="text-gray-800 dark:text-white"
> >
{{ $t('login') }} {{ $t('login') }}
</router-link> </router-link>
<router-link :to="{ name: 'register' }" <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" active-class="text-gray-800 dark:text-white"
> >
<v-button v-track.nav_create_form_click :arrow="true"> <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']} bg-${color}-${colorShades['main']} hover:bg-${color}-${colorShades['hover']} focus:ring-${color}-${colorShades['ring']}
focus:ring-offset-${color}-${colorShades['ring-offset']} text-${colorShades['text']} 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 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 `" focus:ring-offset-2 border-2 border-${colorShades['border']} rounded-lg`"
class="btn" @click="$emit('click',$event)" @click="$emit('click',$event)"
> >
<template v-if="!loading"> <template v-if="!loading">
<slot /> <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" /> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
</svg> </svg>
</template> </template>
@ -23,7 +23,7 @@ export default {
props: { props: {
color: { color: {
type: String, type: String,
default: 'normal' default: 'blue'
}, },
shade: { shade: {
@ -38,7 +38,7 @@ export default {
nativeType: { nativeType: {
type: String, type: String,
default: 'submit' default: null
}, },
loading: { loading: {
@ -54,26 +54,6 @@ export default {
computed: { computed: {
colorShades () { 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') { if (this.shade === 'lighter') {
return { return {
main: '200', main: '200',
@ -81,7 +61,7 @@ export default {
ring: '100', ring: '100',
'ring-offset': '50', 'ring-offset': '50',
text: 'gray-900', text: 'gray-900',
border: 'nt-blue' border: 'blue'
} }
} }
if (this.shade === 'light') { if (this.shade === 'light') {
@ -99,8 +79,8 @@ export default {
hover: '700', hover: '700',
ring: '500', ring: '500',
'ring-offset': '200', 'ring-offset': '200',
text: 'nt-blue', text: 'white',
border: 'nt-blue' border: 'blue'
} }
}, },
sizes () { sizes () {

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

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div class="flex flex-col bg-gray-50 dark:bg-notion-dark"> <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="w-full md:mx-auto flex flex-wrap mb-10 md:-mb-64 md:pt-10 relative max-w-5xl">
<div <div
class="flex flex-col justify-center w-full text-center lg:pr-10 p-6 lg:p-10 relative z-10" 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"> <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> 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> </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 Create beautiful forms and share them anywhere. It takes seconds, you don't need to know how to code
and <span and <span
class="font-semibold" class="font-semibold"
@ -17,32 +17,34 @@
</h3> </h3>
<div class="mt-6 flex justify-center"> <div class="mt-6 flex justify-center">
<router-link class="mr-1" :to="{ name: 'register' }"> <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 Create a form for FREE
</v-button> </v-button>
</router-link> </router-link>
</div> </div>
<div class="justify-center flex mt-10"> <div class="justify-center flex gap-2 mt-10">
<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" <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 mt-1 mr-1">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg> </svg>
Unlimited forms <span>Unlimited forms</span>
</div> </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" <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"/> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg> </svg>
<span>
Unlimited fields Unlimited fields
</span>
</div> </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" <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 mt-1 mr-1">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg> </svg>
Unlimited responses <span>Unlimited responses</span>
</div> </div>
</div> </div>
</div> </div>
@ -78,7 +80,7 @@
<p class="text-gray-300 my-8">No trial. Generous, unlimited free plan.</p> <p class="text-gray-300 my-8">No trial. Generous, unlimited free plan.</p>
<div class="mt-6 flex justify-center"> <div class="mt-6 flex justify-center">
<router-link class="mr-1" :to="{ name: 'register' }"> <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 Create a form for FREE
</v-button> </v-button>
</router-link> </router-link>

1
resources/sass/app.scss vendored
View File

@ -2,7 +2,6 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@import 'elements/transitions';
@import 'fonts'; @import 'fonts';
body.dark * { 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
}

13
tailwind.config.js vendored
View File

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