Adding fixes for mobile
This commit is contained in:
Tony Lea
parent
8ffe38437f
commit
b8817f046e
@ -117,7 +117,7 @@
|
|||||||
"textarea-auto-resize" : "w-full py-10 px-48 box-border flex items-center justify-center",
|
"textarea-auto-resize" : "w-full py-10 px-48 box-border flex items-center justify-center",
|
||||||
"text-animation" : "w-full py-10 box-border flex items-center justify-center",
|
"text-animation" : "w-full py-10 box-border flex items-center justify-center",
|
||||||
"text-input" : "w-full py-10 px-48 box-border flex items-center justify-center",
|
"text-input" : "w-full py-10 px-48 box-border flex items-center justify-center",
|
||||||
"toast" : "w-full sm:p-10 p-4 box-border flex items-center justify-center",
|
"toast" : "w-full sm:p-10 p-4 box-border flex items-center overflow-scroll justify-center",
|
||||||
"tooltip" : "w-full sm:p-10 p-4 box-border flex items-center justify-center",
|
"tooltip" : "w-full sm:p-10 p-4 box-border flex items-center justify-center",
|
||||||
"typing-effect" : "w-full sm:p-10 p-4 flex items-center justify-center",
|
"typing-effect" : "w-full sm:p-10 p-4 flex items-center justify-center",
|
||||||
"video" : "py-10 w-[640px] mx-auto box-border flex items-center justify-center"
|
"video" : "py-10 w-[640px] mx-auto box-border flex items-center justify-center"
|
||||||
|
|||||||
@ -48,26 +48,26 @@
|
|||||||
<div class="relative flex space-x-5">
|
<div class="relative flex space-x-5">
|
||||||
<button @click="title='Default Toast Notification'; type='default'; description=''; popToast()"
|
<button @click="title='Default Toast Notification'; type='default'; description=''; popToast()"
|
||||||
:class="{ 'ring-2 ring-neutral-200/60' : type=='default' && description=='' }"
|
:class="{ 'ring-2 ring-neutral-200/60' : type=='default' && description=='' }"
|
||||||
class="inline-flex items-center justify-center px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Default</button>
|
class="inline-flex items-center justify-center flex-shrink-0 px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Default</button>
|
||||||
<button @click="title='Toast Notification'; type='default'; description='This is an example toast notification'; popToast()"
|
<button @click="title='Toast Notification'; type='default'; description='This is an example toast notification'; popToast()"
|
||||||
:class="{ 'ring-2 ring-neutral-200/60' : type=='default' && description!='' }"
|
:class="{ 'ring-2 ring-neutral-200/60' : type=='default' && description!='' }"
|
||||||
class="inline-flex items-center justify-center px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">With Description</button>
|
class="inline-flex items-center justify-center flex-shrink-0 px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">With Description</button>
|
||||||
<button @click="title='Success Notification'; type='success'; popToast()"
|
<button @click="title='Success Notification'; type='success'; popToast()"
|
||||||
:class="{ 'ring-2 ring-neutral-200/60' : type=='success' }"
|
:class="{ 'ring-2 ring-neutral-200/60' : type=='success' }"
|
||||||
class="inline-flex items-center justify-center px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Success</button>
|
class="inline-flex items-center justify-center flex-shrink-0 px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Success</button>
|
||||||
<button @click="title='Info Notification'; type='info'; popToast()"
|
<button @click="title='Info Notification'; type='info'; popToast()"
|
||||||
:class="{ 'ring-2 ring-neutral-200/60' : type=='info' }"
|
:class="{ 'ring-2 ring-neutral-200/60' : type=='info' }"
|
||||||
class="inline-flex items-center justify-center px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Info</button>
|
class="inline-flex items-center justify-center flex-shrink-0 px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Info</button>
|
||||||
<button @click="title='Warning Notification'; type='warning'; popToast()"
|
<button @click="title='Warning Notification'; type='warning'; popToast()"
|
||||||
:class="{ 'ring-2 ring-neutral-200/60' : type=='warning' }"
|
:class="{ 'ring-2 ring-neutral-200/60' : type=='warning' }"
|
||||||
class="inline-flex items-center justify-center px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Warning</button>
|
class="inline-flex items-center justify-center flex-shrink-0 px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Warning</button>
|
||||||
<button @click="title='Danger Notification'; type='danger'; popToast()"
|
<button @click="title='Danger Notification'; type='danger'; popToast()"
|
||||||
:class="{ 'ring-2 ring-neutral-200/60' : type=='danger' }"
|
:class="{ 'ring-2 ring-neutral-200/60' : type=='danger' }"
|
||||||
class="inline-flex items-center justify-center px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Danger</button>
|
class="inline-flex items-center justify-center flex-shrink-0 px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Danger</button>
|
||||||
|
|
||||||
<button @click="popToast(customToastHTML)"
|
<button @click="popToast(customToastHTML)"
|
||||||
:class="{ 'ring-2 ring-neutral-200/60' : type=='success' }"
|
:class="{ 'ring-2 ring-neutral-200/60' : type=='success' }"
|
||||||
class="inline-flex items-center justify-center px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Custom</button>
|
class="inline-flex items-center justify-center flex-shrink-0 px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Custom</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
@ -76,22 +76,22 @@
|
|||||||
|
|
||||||
<button @click="position='top-left'; popToast()"
|
<button @click="position='top-left'; popToast()"
|
||||||
:class="{ 'ring-2 ring-neutral-200/60' : position=='top-left' }"
|
:class="{ 'ring-2 ring-neutral-200/60' : position=='top-left' }"
|
||||||
class="inline-flex items-center justify-center px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Top Left</button>
|
class="inline-flex items-center justify-center flex-shrink-0 px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Top Left</button>
|
||||||
<button @click="position='top-center'; popToast()"
|
<button @click="position='top-center'; popToast()"
|
||||||
:class="{ 'ring-2 ring-neutral-200/60' : position=='top-center' }"
|
:class="{ 'ring-2 ring-neutral-200/60' : position=='top-center' }"
|
||||||
class="inline-flex items-center justify-center px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Top Center</button>
|
class="inline-flex items-center justify-center flex-shrink-0 px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Top Center</button>
|
||||||
<button @click="position='top-right'; popToast()"
|
<button @click="position='top-right'; popToast()"
|
||||||
:class="{ 'ring-2 ring-neutral-200/60' : position=='top-right' }"
|
:class="{ 'ring-2 ring-neutral-200/60' : position=='top-right' }"
|
||||||
class="inline-flex items-center justify-center px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Top Right</button>
|
class="inline-flex items-center justify-center flex-shrink-0 px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Top Right</button>
|
||||||
<button @click="position='bottom-right'; popToast()"
|
<button @click="position='bottom-right'; popToast()"
|
||||||
:class="{ 'ring-2 ring-neutral-200/60' : position=='bottom-right' }"
|
:class="{ 'ring-2 ring-neutral-200/60' : position=='bottom-right' }"
|
||||||
class="inline-flex items-center justify-center px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Bottom Right</button>
|
class="inline-flex items-center justify-center flex-shrink-0 px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Bottom Right</button>
|
||||||
<button @click="position='bottom-center'; popToast()"
|
<button @click="position='bottom-center'; popToast()"
|
||||||
:class="{ 'ring-2 ring-neutral-200/60' : position=='bottom-center' }"
|
:class="{ 'ring-2 ring-neutral-200/60' : position=='bottom-center' }"
|
||||||
class="inline-flex items-center justify-center px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Bottom Center</button>
|
class="inline-flex items-center justify-center flex-shrink-0 px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Bottom Center</button>
|
||||||
<button @click="position='bottom-left'; popToast()"
|
<button @click="position='bottom-left'; popToast()"
|
||||||
:class="{ 'ring-2 ring-neutral-200/60' : position=='bottom-left' }"
|
:class="{ 'ring-2 ring-neutral-200/60' : position=='bottom-left' }"
|
||||||
class="inline-flex items-center justify-center px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Bottom Left</button>
|
class="inline-flex items-center justify-center flex-shrink-0 px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Bottom Left</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
@ -99,10 +99,10 @@
|
|||||||
<div class="relative flex space-x-5">
|
<div class="relative flex space-x-5">
|
||||||
<button @click="expanded=false; window.dispatchEvent(new CustomEvent('set-toasts-layout', { detail: { layout: 'default' }}));"
|
<button @click="expanded=false; window.dispatchEvent(new CustomEvent('set-toasts-layout', { detail: { layout: 'default' }}));"
|
||||||
:class="{ 'ring-2 ring-neutral-200/60' : !expanded }"
|
:class="{ 'ring-2 ring-neutral-200/60' : !expanded }"
|
||||||
class="inline-flex items-center justify-center px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Default</button>
|
class="inline-flex items-center justify-center flex-shrink-0 px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Default</button>
|
||||||
<button @click="expanded=true; window.dispatchEvent(new CustomEvent('set-toasts-layout', { detail: { layout: 'expanded' }}));"
|
<button @click="expanded=true; window.dispatchEvent(new CustomEvent('set-toasts-layout', { detail: { layout: 'expanded' }}));"
|
||||||
:class="{ 'ring-2 ring-neutral-200/60' : expanded }"
|
:class="{ 'ring-2 ring-neutral-200/60' : expanded }"
|
||||||
class="inline-flex items-center justify-center px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Expanded</button>
|
class="inline-flex items-center justify-center flex-shrink-0 px-3 py-1 text-xs font-medium transition-colors border rounded-md h-9 hover:bg-gray-50 active:bg-white focus:bg-white focus:outline-none">Expanded</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -402,7 +402,7 @@
|
|||||||
});
|
});
|
||||||
"
|
"
|
||||||
class="fixed block w-full group z-[99] sm:max-w-xs"
|
class="fixed block w-full group z-[99] sm:max-w-xs"
|
||||||
:class="{ 'right-0 top-0 mt-6 mr-6': position=='top-right', 'left-0 top-0 mt-6 ml-6': position=='top-left', 'left-1/2 -translate-x-1/2 top-0 mt-6': position=='top-center', 'right-0 bottom-0 mr-6 mb-6': position=='bottom-right', 'left-0 bottom-0 ml-6 mb-6': position=='bottom-left', 'left-1/2 -translate-x-1/2 bottom-0 mb-6': position=='bottom-center' }"
|
:class="{ 'right-0 top-0 sm:mt-6 sm:mr-6': position=='top-right', 'left-0 top-0 sm:mt-6 sm:ml-6': position=='top-left', 'left-1/2 -translate-x-1/2 top-0 sm:mt-6': position=='top-center', 'right-0 bottom-0 sm:mr-6 sm:mb-6': position=='bottom-right', 'left-0 bottom-0 sm:ml-6 sm:mb-6': position=='bottom-left', 'left-1/2 -translate-x-1/2 bottom-0 sm:mb-6': position=='bottom-center' }"
|
||||||
x-cloak>
|
x-cloak>
|
||||||
|
|
||||||
<template x-for="(toast, index) in toasts" :key="toast.id">
|
<template x-for="(toast, index) in toasts" :key="toast.id">
|
||||||
@ -455,7 +455,7 @@
|
|||||||
:class="{ 'toast-no-description': !toast.description }"
|
:class="{ 'toast-no-description': !toast.description }"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="relative flex flex-col items-start shadow-[0_5px_15px_-3px_rgb(0_0_0_/_0.08)] w-full transition-all duration-300 ease-out bg-white border border-gray-100 rounded-md sm:max-w-xs group"
|
class="relative flex flex-col items-start shadow-[0_5px_15px_-3px_rgb(0_0_0_/_0.08)] w-full transition-all duration-300 ease-out bg-white border border-gray-100 sm:rounded-md sm:max-w-xs group"
|
||||||
:class="{ 'p-4' : !toast.html, 'p-0' : toast.html }"
|
:class="{ 'p-4' : !toast.html, 'p-0' : toast.html }"
|
||||||
>
|
>
|
||||||
<template x-if="!toast.html">
|
<template x-if="!toast.html">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user