fix: improve close button alignment and slideshow dots appearance

- Fix close button "x" centering in round buttons using flexbox and vertical transform
- Move close button inside title div for proper alignment when title is present
- Add specific positioning for different close button types in title bar
- Remove border from slideshow dots to prevent squashing appearance
- Update webpack config to output CSS as jAlert.min.css instead of jAlert.css.min.css
- Update close button markup to wrap "x" in span for better styling control

Author: HTMLGuyLLC

.gitignore

@@ -1,9 +1,6 @@
 # Ignore Mac system files
 .DS_Store
 
-# Ignore build output
-/dist/
-
 # Ignore IDE files
 .idea/
 

CHANGELOG.md

@@ -2,6 +2,45 @@
 
 All notable changes to jAlert will be documented in this file.
 
+## [5.0.2] - 2024-01-XX
+
+### 🐛 Bug Fixes
+
+- **Close Button Alignment**: Fixed "x" centering in round close buttons using flexbox and vertical transform
+- **Title Bar Positioning**: Moved close button inside title div for proper alignment when title is present
+- **Button Type Specifics**: Added specific positioning for different close button types (round, alt) in title bar
+- **Slideshow Dots**: Removed border from slideshow dots to prevent squashing appearance
+- **Build Output**: Updated webpack config to output CSS as `jAlert.min.css` instead of `jAlert.css.min.css`
+
+### 🔧 Technical Improvements
+
+- Enhanced close button markup with wrapped "x" span for better styling control
+- Improved visual consistency across different close button styles
+- Better CSS organization and specificity for button positioning
+
+---
+
+## [5.0.1] - 2024-01-XX
+
+### ✨ New Features
+
+- **Accessibility Improvements**: Added ARIA attributes and enhanced keyboard navigation
+- **Touch Support**: Added swipe gestures for mobile devices
+- **Enhanced Navigation**: Improved slideshow controls and user experience
+
+### 🐛 Bug Fixes
+
+- Fixed slideshow navigation controls positioning
+- Improved responsive design for mobile devices
+- Enhanced error handling and validation
+
+### 📦 Dependencies
+
+- Updated to latest jQuery compatibility
+- Improved build process and optimization
+
+---
+
 ## [5.0.0] - 2024-01-XX
 
 ### 🚀 Major Release - Complete Modernization

dist/jAlert.css.min.js

@@ -139,12 +139,23 @@ body.ja_blur > *:not(.ja_wrap) {
     border-radius: 50%;
     background: #e0e0e0;
     color: #232323;
-    padding: 5px 7px;
+    padding: 0;
     right: 10px;
     top: 6px;
     border: 0;
-    line-height: 13px;
+    width: 30px;
+    height: 30px;
     font-size: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+}
+
+.ja_close_x {
+    display: inline-block;
+    transform: translateY(-1px);
+    font-weight: bold;
 }
 
 .ja_default .ja_close_round, .ja_default .ja_close_round_white {
@@ -159,7 +170,12 @@ body.ja_blur > *:not(.ja_wrap) {
     top: -16px;
     right: -18px;
     border: 1px solid rgb(55, 55, 55);
-    padding: 3px 8px 1px 7px;
+    padding: 0;
+    width: 25px;
+    height: 25px;
+    text-align: center;
+    line-height: 23px;
+    font-size: 14px;
 }
 
 .ja_close:hover {
@@ -220,6 +236,19 @@ body.ja_blur > *:not(.ja_wrap) {
     padding: 10px 20px 10px 20px;
 }
 
+.ja_title > .ja_close_round, .ja_title > .ja_close_round_white {
+    top: 4px !important;
+}
+
+.ja_title > .closejAlert {
+    top: 10px;
+}
+
+.ja_title > .ja_close_alt {
+    top: -12px;
+    right: -12px;
+}
+
 /*
 	 THEMES
 */
@@ -3565,6 +3594,7 @@ body.ja_blur > *:not(.ja_wrap) {
     padding: 0;
     text-align: center;
     min-height: 200px;
+    overflow: visible;
 }
 
 .ja_slideshow_slide {
@@ -3666,6 +3696,12 @@ body.ja_blur > *:not(.ja_wrap) {
     display: flex;
     gap: 8px;
     z-index: 10;
+    flex-shrink: 0;
+    pointer-events: auto;
+    width: auto;
+    height: auto;
+    min-width: 0;
+    min-height: 0;
 }
 
 .ja_slideshow_dot {
@@ -3675,6 +3711,13 @@ body.ja_blur > *:not(.ja_wrap) {
     background: rgba(255, 255, 255, 0.5);
     cursor: pointer;
     transition: all 0.3s ease;
+    flex-shrink: 0;
+    flex-grow: 0;
+    min-width: 12px;
+    min-height: 12px;
+    max-width: 12px;
+    max-height: 12px;
+    border: none;
 }
 
 .ja_slideshow_dot:hover {

dist/jAlert.min.css

@@ -680,8 +680,22 @@
                 '<div class="jAlert ' + classes.join(' ') + '" style="' + styles.join(' ') + '" id="' + alert.id + '" tabindex="-1">' +
                 '<div>';
 
-            // Close button
-            if (alert.closeBtn) {
+            // Title and close button
+            if (alert.title) {
+                html += "<div class='ja_title' id='" + alert.id + "_title'>";
+                if (alert.closeBtn) {
+                    html += "<button type='button' class='closejAlert ja_close";
+                    if (alert.closeBtnAlt) {
+                        html += ' ja_close_alt';
+                    } else if (alert.closeBtnRoundWhite) {
+                        html += ' ja_close_round_white';
+                    } else if (alert.closeBtnRound) {
+                        html += ' ja_close_round';
+                    }
+                    html += "' aria-label='Close dialog'><span class='ja_close_x'>&times;</span></button>";
+                }
+                html += "<div>" + alert.title + "</div></div>";
+            } else if (alert.closeBtn) {
                 html += "<button type='button' class='closejAlert ja_close";
                 if (alert.closeBtnAlt) {
                     html += ' ja_close_alt';
@@ -690,12 +704,7 @@
                 } else if (alert.closeBtnRound) {
                     html += ' ja_close_round';
                 }
-                html += "' aria-label='Close dialog'>&times;</button>";
-            }
-
-            // Title
-            if (alert.title) {
-                html += "<div class='ja_title' id='" + alert.id + "_title'><div>" + alert.title + "</div></div>";
+                html += "' aria-label='Close dialog'><span class='ja_close_x'>&times;</span></button>";
             }
 
             // Body

dist/jAlert.min.js

@@ -75,7 +75,12 @@ export default (env, argv) => {
     },
     plugins: [
       new MiniCssExtractPlugin({
-        filename: isProduction ? '[name].min.css' : '[name].css'
+        filename: (pathData) => {
+          if (pathData.chunk.name === 'jAlert.css') {
+            return 'jAlert.min.css';
+          }
+          return isProduction ? '[name].min.css' : '[name].css';
+        }
       })
     ],
     optimization: {