#23 - excluding mask images gradient in Tailwind purge (#38)

blumilksoftware · Sep 20, 2023 · abd9465 · abd9465
1 parent 2bbefb2
commit abd9465
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 16 deletions.
diff --git a/resources/js/Components/BackgroundGrid.vue b/resources/js/Components/BackgroundGrid.vue
@@ -1,18 +1,17 @@
 <script setup>
-import { computed } from 'vue'
-
-const props = defineProps({
+defineProps({
   maskDirection: {
     type: String,
     default: 'right',
   },
 })
-
-const maskImage = computed(() => '[mask-image:radial-gradient(100%_100%_at_top_' + props.maskDirection + ',white,transparent)]')
 </script>
 
 <template>
-  <svg class="absolute inset-0 -z-10 h-full w-full stroke-gray-200" :class="maskImage" aria-hidden="true">
+  <svg class="absolute inset-0 -z-10 h-full w-full stroke-gray-200"
+       :class="'[mask-image:radial-gradient(100%_100%_at_top_' + maskDirection + ',white,transparent)]'"
+       aria-hidden="true"
+  >
     <defs>
       <pattern id="83fd4e5a-9d52-42fc-97b6-718e5d7ee527" width="200" height="200" x="50%" y="-1"
                patternUnits="userSpaceOnUse"

diff --git a/resources/js/Layouts/DashboardLayout.vue b/resources/js/Layouts/DashboardLayout.vue
@@ -35,7 +35,7 @@ const navigation = [
   {
     title: 'Ogólne',
     elements: [
-      { name: 'Dashboard', href: '#', icon: HomeIcon, current: true },
+      { name: 'Dashboard', href: '/dashboard', icon: HomeIcon, current: true },
       { name: 'Ustawienia', href: '#', icon: Cog6ToothIcon, current: false },
       { name: 'Aktualności', href: '#', icon: NewspaperIcon, current: false },
       { name: 'FAQ', href: '#', icon: QuestionMarkCircleIcon, current: false },
@@ -45,7 +45,7 @@ const navigation = [
   {
     title: 'Uczelnia',
     elements: [
-      { name: 'Studenci', href: '#', icon: UsersIcon, current: false },
+      { name: 'Studenci', href: '/dashboard/students', icon: UsersIcon, current: false },
       { name: 'Kursy w semestrze', href: '#', icon: BookmarkSquareIcon, current: false },
     ],
   },
@@ -111,10 +111,10 @@ watch(() => props.flash, (flash) => {
                       </div>
                       <ul role="list" class="-mx-2 space-y-1">
                         <li v-for="item in section.elements" :key="item.name">
-                          <a :href="item.href" :class="[item.current ? 'bg-gray-50 text-sky-600' : 'text-gray-700 hover:bg-gray-50 hover:text-sky-600', 'group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6']">
+                          <InertiaLink :href="item.href" :class="[item.current ? 'bg-gray-50 text-sky-600' : 'text-gray-700 hover:bg-gray-50 hover:text-sky-600', 'group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6']">
                             <component :is="item.icon" :class="[item.current ? 'text-sky-600' : 'text-gray-400 group-hover:text-sky-600', 'h-6 w-6 shrink-0']" aria-hidden="true" />
                             {{ item.name }}
-                          </a>
+                          </InertiaLink>
                         </li>
                       </ul>
                     </li>
@@ -138,18 +138,22 @@ watch(() => props.flash, (flash) => {
               </div>
               <ul role="list" class="-mx-2 space-y-1">
                 <li v-for="item in section.elements" :key="item.name">
-                  <a :href="item.href" :class="[item.current ? 'bg-gray-50 text-sky-600' : 'text-gray-700 hover:bg-gray-50 hover:text-sky-600', 'group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6']">
+                  <InertiaLink :href="item.href" :class="[item.current ? 'bg-gray-50 text-sky-600' : 'text-gray-700 hover:bg-gray-50 hover:text-sky-600', 'group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6']">
                     <component :is="item.icon" :class="[item.current ? 'text-sky-600' : 'text-gray-400 group-hover:text-sky-600', 'h-6 w-6 shrink-0']" aria-hidden="true" />
                     {{ item.name }}
-                  </a>
+                  </InertiaLink>
                 </li>
               </ul>
             </li>
-            <li class="-mx-6 mt-auto">
-              <a href="#" class="flex items-center gap-x-4 px-6 py-3 text-sm font-semibold leading-6 text-gray-900 hover:bg-gray-50">
+            <li class="-mx-6 mb-3 mt-auto">
+              <InertiaLink href="/" class="flex items-center gap-x-4 px-6 py-3 text-sm font-semibold leading-6 text-gray-900 hover:bg-gray-50">
+                <HomeIcon class="h-6 w-6 text-gray-700" title="Strona główna" />
+                <span aria-hidden="true">Strona główna</span>
+              </InertiaLink>
+              <InertiaLink href="#" class="flex items-center gap-x-4 px-6 py-3 text-sm font-semibold leading-6 text-gray-900 hover:bg-gray-50">
                 <PowerIcon class="h-6 w-6 text-gray-700" title="Wyloguj się" />
                 <span aria-hidden="true">Wyloguj się</span>
-              </a>
+              </InertiaLink>
             </li>
           </ul>
         </nav>
@@ -164,6 +168,10 @@ watch(() => props.flash, (flash) => {
       <div class="flex-1 text-sm font-semibold leading-6 text-gray-900">
         Dashboard
       </div>
+      <InertiaLink href="/">
+        <span class="sr-only">Strona główna</span>
+        <HomeIcon class="h-6 w-6 text-gray-700" title="Strona główna" />
+      </InertiaLink>
       <a href="#">
         <span class="sr-only">Wyloguj się</span>
         <PowerIcon class="h-6 w-6 text-gray-700" title="Wyloguj się" />

diff --git a/resources/js/Shared/Components/Table/TableWrapper.vue b/resources/js/Shared/Components/Table/TableWrapper.vue
@@ -9,7 +9,7 @@ const slots = useSlots()
   <div class="mt-8 flow-root">
     <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
       <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
-        <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
+        <div class="ring-opacity/5 overflow-hidden shadow ring-1 ring-black sm:rounded-lg">
           <table class="min-w-full divide-y divide-gray-300">
             <thead v-if="slots.header" class="bg-gray-50">
               <TableRow>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -10,4 +10,8 @@ module.exports = {
     plugins: [
         require('@tailwindcss/forms'),
     ],
+    safelist: [
+        '[mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]',
+        '[mask-image:radial-gradient(100%_100%_at_top_left,white,transparent)]',
+    ],
 }