Theme: update to Tailwind v3 and update build scripts (#1856)

GibbonEdu · Sep 30, 2024 · a7462b2 · a7462b2
1 parent 2ea1820
commit a7462b2
Show file tree

Hide file tree

Showing 13 changed files with 30 additions and 35 deletions.
diff --git a/error.php b/error.php
@@ -38,7 +38,7 @@
         <link rel="stylesheet" href="./resources/assets/css/theme.min.css" type="text/css" media="all">
     </head>
 
-    <body class="h-screen flex flex-col font-sans body-gradient-purple m-0 p-0" style="background: radial-gradient(80% 1000px at 20% 500px, #ef99c7 0%, #794d95 100%) no-repeat fixed ;">
+    <body class="h-screen flex flex-col font-sans body-gradient-purple m-0 p-0" style="background: linear-gradient(to left top, #402568 2%, #935ee1 65%, #a871ec) no-repeat fixed;">
 
         <div class="px-4 sm:px-6 lg:px-12 pb-24">
             <div id="header" class="relative flex justify-between items-center">

diff --git a/index_fastFinder_ajax.php b/index_fastFinder_ajax.php
@@ -274,7 +274,7 @@
 
             $name = preg_replace('/'.$searchTerm.'/i', '<strong>$0</strong>', $name);
 
-            $output .= '<a href="'.($URL ?? '').'" class="block cursor-pointer px-4 py-2 text-sm text-gray-800 hover:bg-indigo-600 hover:text-white" role="menuitem" tabindex="-1" id="menu-item-0">'.htmlPrep(__($type)).' - '.$name.'</a>';
+            $output .= '<a href="'.($URL ?? '').'" class="block cursor-pointer px-4 py-2 text-sm text-gray-800 hover:bg-indigo-500 hover:text-white" role="menuitem" tabindex="-1" id="menu-item-0">'.htmlPrep(__($type)).' - '.$name.'</a>';
             $outputCount++;
 
         }

diff --git a/resources/assets/css/core.scss → resources/assets/css/core.css b/resources/assets/css/core.scss → resources/assets/css/core.css
@@ -22,15 +22,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
  * This injects all of Tailwind's utility classes, generated based on your
  * config file.
  */
+
  @tailwind utilities;
+ /* @tailwind components; */
 
 /*
  --------------------------------------------------------------------------
   Layout
  --------------------------------------------------------------------------
 */
 
-@responsive {
+@layer utilities {
     .column-1 {
         column-count: 1;
         column-gap: 1.5rem;
@@ -64,7 +66,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
  --------------------------------------------------------------------------
 */
 
-@responsive {
+@layer utilities {
     .text-xxs {
         font-size: 0.65rem;
     }
@@ -102,7 +104,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     min-height: 50vh;
 }
 
-@responsive {
+@layer utilities {
     .w-content {
         width: 72%;
     }
@@ -111,13 +113,3 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         width: 28%;
     }
 }
-
-/*
- --------------------------------------------------------------------------
-  Effects
- --------------------------------------------------------------------------
-*/
-
-.shadow-container {
-    box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
-}
diff --git a/resources/assets/css/core.min.css b/resources/assets/css/core.min.css
diff --git a/resources/assets/css/theme.scss → resources/assets/css/theme.css b/resources/assets/css/theme.scss → resources/assets/css/theme.css
@@ -18,7 +18,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-// @tailwind base;
+@tailwind base;
 
 *,
 :after,
@@ -63,7 +63,7 @@ hr {
  --------------------------------------------------------------------------
 */
 .alert {
-    @apply shadow border-l-6 p-3 my-3 text-xs;
+    @apply shadow border-l-8 p-3 my-3 text-xs;
     @apply bg-gray-100 border-gray-600 text-gray-600;
 }
 
@@ -77,7 +77,7 @@ hr {
 }
 
 .warning {
-    @apply bg-orange-300 border-orange-700 text-orange-700;
+    @apply bg-orange-200 border-orange-700 text-orange-700;
 }
 
 .past,
@@ -94,11 +94,11 @@ hr {
 }
 
 .selected {
-    @apply bg-purple-200 border-purple-700 text-purple-700;
+    @apply bg-purple-200 border-purple-800 text-purple-800;
 }
 
 div.message, div.success, div.warning, div.error, div.exception, div.dull {
-    @apply shadow border-l-6 p-3 my-3 text-xs;
+    @apply shadow border-l-8 p-3 my-3 text-xs;
 }
 
 div.message a, div.success a, div.warning a, div.error a, div.exception a, div.dull a {
@@ -130,7 +130,7 @@ div.message a, div.success a, div.warning a, div.error a, div.exception a, div.d
 */
 
 .LV_validation_message {
-    @apply absolute right-0 px-1 mt-2 mr-1 text-xs font-bold leading-relaxed bg-white z-10 pointer-events-none whitespace-no-wrap;
+    @apply absolute right-0 px-1 mt-2 mr-1 text-xs font-bold leading-relaxed bg-white z-10 pointer-events-none whitespace-nowrap;
 }
 
 select + .LV_validation_message {
@@ -177,7 +177,7 @@ input, select, textarea {
 }
 
 input:focus, select:focus, textarea:focus {
-    @apply shadow-outline border-blue-500;
+    @apply outline-none ring border-blue-500;
 
 }
 

diff --git a/resources/assets/css/theme.min.css b/resources/assets/css/theme.min.css
diff --git a/resources/assets/js/core.js b/resources/assets/js/core.js
@@ -937,4 +937,4 @@ function gibbonFormSubmitQuiet(form, url) {
     }
 
     __GIBBON_URL_DEBOUNCE_MAP[url](submitData);
-}
+}
diff --git a/resources/assets/js/core.min.js b/resources/assets/js/core.min.js
diff --git a/resources/assets/mix-manifest.json b/resources/assets/mix-manifest.json
@@ -1,5 +1,5 @@
 {
-    "/css/core.min.css": "/css/core.min.css",
     "/css/theme.min.css": "/css/theme.min.css",
+    "/css/core.min.css": "/css/core.min.css",
     "/js/core.min.js": "/js/core.min.js"
 }
diff --git a/resources/build b/resources/build
diff --git a/resources/templates/finder.twig.html b/resources/templates/finder.twig.html
@@ -74,7 +74,7 @@
 
     <div id="search-wrap" 
         x-show="open"
-        class="absolute top-0 left-0 mt-10 w-full origin-top-right rounded-sm bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1" style="display:none; z-index: 45;">
+        class="absolute top-0 left-0 mt-10 w-full origin-top-right rounded-sm bg-white shadow-lg focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1" style="display:none; z-index: 45;">
 
         <div class="htmx-indicator absolute top-0 left-0 h-10 w-full block px-4 py-2 text-sm italic text-gray-800 pointer-events-none"> 
             {{ __('Searching...') }} 

diff --git a/resources/templates/index.twig.html b/resources/templates/index.twig.html
@@ -18,8 +18,7 @@
         {% endblock head %}
     </head>
     <body x-data="{ modalOpen: false, modalType: 'none' }"
-        class="h-full flex flex-col font-sans {{ bodyBackground  ? '' : 'body-gradient-' ~ themeColour|lower }}" 
-        style="{{ bodyBackground  ? bodyBackground : '' }} {{ themeColour is empty ? 'background: radial-gradient(80% 1000px at 20% 500px, #ef99c7 0%, #794d95 100%) no-repeat fixed ;' : '' }}">
+        class="h-full flex flex-col font-sans {{ bodyBackground  ? '' : 'body-gradient-' ~ themeColour|lower }}" style="{{ bodyBackground  ? bodyBackground : '' }} {{ themeColour is empty ? 'background: linear-gradient(to left top, #402568 2%, #935ee1 65%, #a871ec) no-repeat fixed' : '' }}">
         <a id="top"></a>
         {% set sidebarPos = isLoggedIn ? 'left' : 'right' %}
 

diff --git a/themes/Default/css/main.css b/themes/Default/css/main.css
@@ -746,12 +746,12 @@ span.ttSchoolCalendar {
     color: #fff;
     font-weight: bold;
     margin: 0px -2px 0px 5px;
-    background-color: rgb(51, 153, 0);
+    background-color: rgb(18, 138, 0);
     padding: 5px 7px;
     border: 1px solid #555;
 }
 div.ttSchoolCalendar {
-    background-color: rgb(51, 153, 0);
+    background-color: rgb(18, 138, 0);
     color: #fff;
     font-weight: bold;
 }
@@ -772,12 +772,12 @@ span.ttSpaceBookingCalendar {
     color: #fff;
     font-weight: bold;
     margin: 0px -2px 0px 5px;
-    background-color: #e5760d;
+    background-color: #f0851f;
     padding: 5px 7px;
     border: 1px solid #555;
 }
 div.ttSpaceBookingCalendar {
-    background-color: #e5760d;
+    background-color: #f0851f;
     color: #fff;
     font-weight: bold;
 }
@@ -1332,6 +1332,10 @@ table.smallIntBorder td.noPadding {
 }
 
 .body-gradient-purple {
+    background: linear-gradient(to left top, #402568 2%, #935ee1 65%, #a871ec) no-repeat fixed;
+}
+
+.body-gradient-fuchsia {
     background: radial-gradient(80% 1000px at 20% 500px, #ef99c7 0%, #794d95 100%) no-repeat fixed ;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -937,4 +937,4 @@ function gibbonFormSubmitQuiet(form, url) { @@
         }
         __GIBBON_URL_DEBOUNCE_MAP[url](submitData);
-    }
+    }
+9,579 −8,008		package-lock.json
+22 −16		package.json
+69 −0		tailwind.config.js
+11 −11		tailwind.js
+3 −4		webpack.mix.js