WordPress.org
Get WordPress

Plugin Directory

Changeset 3441951


Ignore:
Timestamp:
01/18/2026 02:31:07 PM (3 months ago)
Author:
fahdi
Message:

Release v3.3.1 - Admin UX improvements with responsive layout and button handling

Location:
tablecrafter-wp-data-tables
Files:
15 deleted
4 edited
18 copied

Legend:

Unmodified
Added
Removed

  • tablecrafter-wp-data-tables/tags/3.3.1/assets/css/tablecrafter.css

    r3441608 r3441951  
    18551855}
    18561856
     1857/* === WordPress Admin Page Styles === */
     1858.tc-admin-layout {
     1859  display: flex !important;
     1860  gap: 20px !important;
     1861  margin-top: 20px !important;
     1862  align-items: flex-start !important;
     1863}
     1864
     1865.tc-sidebar {
     1866  flex: 0 0 380px !important;
     1867}
     1868
     1869.tc-sidebar .card {
     1870  margin: 0 0 20px 0 !important;
     1871  max-width: none !important;
     1872  padding: 20px !important;
     1873}
     1874
     1875.tc-sidebar .card h2 {
     1876  margin-top: 0 !important;
     1877  margin-bottom: 15px !important;
     1878  color: #23282d !important;
     1879  font-size: 16px !important;
     1880  font-weight: 600 !important;
     1881}
     1882
     1883.tc-sidebar .card p {
     1884  margin: 0 0 15px 0 !important;
     1885  line-height: 1.5 !important;
     1886}
     1887
     1888.tc-sidebar .card label {
     1889  font-weight: 600 !important;
     1890  display: block !important;
     1891  margin-bottom: 5px !important;
     1892  color: #23282d !important;
     1893}
     1894
     1895.tc-sidebar .card input.widefat,
     1896.tc-sidebar .card textarea.widefat {
     1897  margin-bottom: 8px !important;
     1898  padding: 8px 12px !important;
     1899  border: 1px solid #ddd !important;
     1900  border-radius: 4px !important;
     1901}
     1902
     1903.tc-sidebar .card .description {
     1904  margin-top: 5px !important;
     1905  margin-bottom: 15px !important;
     1906  font-size: 13px !important;
     1907  color: #666 !important;
     1908}
     1909
     1910.tc-sidebar .card .button {
     1911  margin: 0 5px 0 0 !important;
     1912  padding: 8px 16px !important;
     1913}
     1914
     1915.tc-sidebar .card .button-primary {
     1916  background: #0073aa !important;
     1917  border-color: #0073aa !important;
     1918}
     1919
     1920.tc-sidebar .card .button-secondary {
     1921  background: #f1f1f1 !important;
     1922  border-color: #ddd !important;
     1923  color: #555 !important;
     1924}
     1925
     1926.tc-preview-area {
     1927  flex: 1 1 auto !important;
     1928  min-width: 0 !important;
     1929  max-width: none !important;
     1930  width: 100% !important;
     1931}
     1932
     1933.tc-preview-area .card {
     1934  margin: 0 !important;
     1935  max-width: none !important;
     1936  width: 100% !important;
     1937  height: calc(100vh - 200px) !important;
     1938  min-height: 500px !important;
     1939  max-height: 800px !important;
     1940  display: flex !important;
     1941  flex-direction: column !important;
     1942  padding: 20px !important;
     1943  box-sizing: border-box !important;
     1944}
     1945
     1946.tc-preview-area .card h2 {
     1947  border-bottom: 1px solid #f0f0f1 !important;
     1948  padding-bottom: 15px !important;
     1949  margin-bottom: 15px !important;
     1950  margin-top: 0 !important;
     1951  color: #23282d !important;
     1952  font-size: 16px !important;
     1953  font-weight: 600 !important;
     1954}
     1955
     1956#tc-preview-wrap {
     1957  flex: 1 1 auto !important;
     1958  overflow: auto !important;
     1959  background: #fff !important;
     1960  padding: 15px !important;
     1961  border: 1px solid #ddd !important;
     1962  border-radius: 4px !important;
     1963  height: 100% !important;
     1964  max-height: none !important;
     1965}
     1966
     1967#tc-preview-container {
     1968  min-height: 400px !important;
     1969  height: 100% !important;
     1970  display: flex !important;
     1971  align-items: center !important;
     1972  justify-content: center !important;
     1973  color: #666 !important;
     1974}
     1975
     1976/* When table is loaded, change alignment */
     1977#tc-preview-container:has(.tablecrafter-container) {
     1978  align-items: stretch !important;
     1979  justify-content: stretch !important;
     1980}
     1981
     1982/* Fallback for browsers that don't support :has() */
     1983#tc-preview-container.tc-has-table {
     1984  align-items: stretch !important;
     1985  justify-content: stretch !important;
     1986}
     1987
     1988/* TableCrafter instance inside admin preview */
     1989#tc-preview-container .tablecrafter-container {
     1990  width: 100% !important;
     1991  height: 100% !important;
     1992  display: flex !important;
     1993  flex-direction: column !important;
     1994}
     1995
     1996#tc-preview-container .tc-wrapper {
     1997  width: 100% !important;
     1998  height: 100% !important;
     1999  display: flex !important;
     2000  flex-direction: column !important;
     2001}
     2002
     2003#tc-preview-container .tc-table-container {
     2004  flex: 1 1 auto !important;
     2005  height: 100% !important;
     2006  max-height: none !important;
     2007  overflow: auto !important;
     2008}
     2009
     2010#tc-preview-container .tc-table {
     2011  width: 100% !important;
     2012  height: 100% !important;
     2013}
     2014
     2015/* Preview area table optimization */
     2016.tc-preview-area .tc-table th,
     2017.tc-preview-area .tc-table td {
     2018  min-width: 100px !important;
     2019  white-space: nowrap !important;
     2020  overflow: hidden !important;
     2021  text-overflow: ellipsis !important;
     2022  max-width: 200px !important;
     2023}
     2024
     2025.tc-preview-area .tc-table td {
     2026  white-space: normal !important;
     2027  word-wrap: break-word !important;
     2028  line-height: 1.4 !important;
     2029}
     2030
     2031.tc-demo-links {
     2032  margin: 0 !important;
     2033  padding: 0 !important;
     2034  list-style: none !important;
     2035}
     2036
     2037.tc-demo-links li {
     2038  margin-bottom: 8px !important;
     2039}
     2040
     2041.tc-demo-links .button {
     2042  width: 100% !important;
     2043  text-align: left !important;
     2044  background: white !important;
     2045  border: 2px solid #0073aa !important;
     2046  color: #0073aa !important;
     2047  font-weight: 600 !important;
     2048  transition: all 0.2s ease !important;
     2049  padding: 10px 15px !important;
     2050}
     2051
     2052.tc-demo-links .button:hover {
     2053  background: #0073aa !important;
     2054  color: white !important;
     2055  border-color: #0073aa !important;
     2056}
     2057
     2058/* Admin form field containers */
     2059.tc-admin-layout .card .form-field {
     2060  margin-bottom: 15px !important;
     2061}
     2062
     2063.tc-admin-layout .card .form-row {
     2064  display: flex !important;
     2065  gap: 20px !important;
     2066  margin-bottom: 15px !important;
     2067}
     2068
     2069.tc-admin-layout .card .form-row > div {
     2070  flex: 1 !important;
     2071}
     2072
     2073.tc-admin-layout .card .checkbox-group {
     2074  display: flex !important;
     2075  flex-wrap: wrap !important;
     2076  gap: 15px !important;
     2077  margin-bottom: 15px !important;
     2078}
     2079
     2080.tc-admin-layout .card .checkbox-group label {
     2081  font-weight: 600 !important;
     2082  display: flex !important;
     2083  align-items: center !important;
     2084  gap: 8px !important;
     2085  cursor: pointer !important;
     2086  margin-bottom: 0 !important;
     2087}
     2088
     2089.tc-admin-layout .card .button-group {
     2090  display: flex !important;
     2091  flex-wrap: wrap !important;
     2092  gap: 10px !important;
     2093  margin-top: 15px !important;
     2094}
     2095
     2096.tc-admin-layout .card .button-group .button {
     2097  flex: 1 1 auto !important;
     2098  min-width: 180px !important;
     2099  margin: 0 !important;
     2100}
     2101
     2102/* Shortcode display */
     2103#tc-shortcode-display {
     2104  display: block !important;
     2105  padding: 15px !important;
     2106  background: #f1f1f1 !important;
     2107  margin: 15px 0 !important;
     2108  word-break: break-all !important;
     2109  border: 1px solid #ddd !important;
     2110  border-radius: 4px !important;
     2111  font-family: Consolas, Monaco, monospace !important;
     2112  font-size: 13px !important;
     2113  line-height: 1.4 !important;
     2114}
     2115
     2116/* Two-column layout for screens above 800px */
     2117@media (min-width: 801px) {
     2118  body.wp-admin .tc-admin-layout {
     2119    display: flex !important;
     2120    flex-direction: row !important;
     2121    gap: 20px !important;
     2122    margin-top: 20px !important;
     2123    align-items: flex-start !important;
     2124  }
     2125 
     2126  body.wp-admin .tc-sidebar {
     2127    flex: 0 0 300px !important;
     2128    min-width: 300px !important;
     2129    max-width: 300px !important;
     2130    width: 300px !important;
     2131  }
     2132 
     2133  /* Button responsiveness in constrained sidebar */
     2134  body.wp-admin .tc-sidebar .button-group .button {
     2135    min-width: 120px !important;
     2136    flex: 1 1 calc(50% - 5px) !important;
     2137  }
     2138 
     2139  /* When buttons would be too narrow, stack them */
     2140  @media (max-width: 1200px) {
     2141    body.wp-admin .tc-sidebar .button-group {
     2142      flex-direction: column !important;
     2143    }
     2144   
     2145    body.wp-admin .tc-sidebar .button-group .button {
     2146      width: 100% !important;
     2147      flex: none !important;
     2148    }
     2149  }
     2150 
     2151  body.wp-admin .tc-preview-area {
     2152    flex: 1 1 auto !important;
     2153    min-width: 0 !important;
     2154    max-width: none !important;
     2155    width: auto !important;
     2156  }
     2157 
     2158  body.wp-admin .tc-preview-area .card {
     2159    height: calc(100vh - 200px) !important;
     2160    min-height: 500px !important;
     2161    max-height: 800px !important;
     2162  }
     2163}
     2164
     2165/* Responsive admin layout */
     2166@media (max-width: 800px) {
     2167  .tc-admin-layout {
     2168    flex-direction: column !important;
     2169  }
     2170 
     2171  .tc-sidebar {
     2172    flex: none !important;
     2173    max-width: none !important;
     2174    width: 100% !important;
     2175  }
     2176 
     2177  .tc-preview-area {
     2178    min-width: auto !important;
     2179    width: 100% !important;
     2180  }
     2181 
     2182  .tc-preview-area .card {
     2183    height: calc(100vh - 300px) !important;
     2184    min-height: 400px !important;
     2185    max-height: 600px !important;
     2186  }
     2187}
     2188
     2189@media (max-width: 768px) {
     2190  .tc-admin-layout {
     2191    gap: 15px !important;
     2192  }
     2193 
     2194  .tc-preview-area .card {
     2195    height: calc(100vh - 250px) !important;
     2196    min-height: 350px !important;
     2197    max-height: 500px !important;
     2198  }
     2199 
     2200  .tc-sidebar .card .form-row {
     2201    flex-direction: column !important;
     2202    gap: 10px !important;
     2203  }
     2204 
     2205  .tc-sidebar .card .checkbox-group {
     2206    flex-direction: column !important;
     2207    gap: 10px !important;
     2208  }
     2209 
     2210  .tc-sidebar .card .button-group {
     2211    flex-direction: column !important;
     2212  }
     2213 
     2214  .tc-sidebar .card .button-group .button {
     2215    width: 100% !important;
     2216  }
     2217}
     2218
    18572219/* === Rich Data Presentation === */
    18582220.tc-badge {

  • tablecrafter-wp-data-tables/tags/3.3.1/assets/js/admin.js

    r3441591 r3441951  
    185185        container.innerHTML = '';
    186186        container.style.display = 'block';
     187       
     188        // Add class for table layout styling
     189        container.classList.add('tc-has-table');
    187190
    188191        if (typeof TableCrafter !== 'undefined') {

  • tablecrafter-wp-data-tables/tags/3.3.1/readme.txt

    r3441762 r3441951  
    44Requires at least: 5.0
    55Tested up to: 6.9
    6 Stable tag: 3.3.0
     6Stable tag: 3.3.1
    77Requires PHP: 7.4
    88License: GPLv2 or later
    … …  
    282282
    283283== Changelog ==
     284= 3.3.1 =
     285* 🎨 **ADMIN UX IMPROVEMENTS: Responsive Layout & Button Handling**
     286* **Enhanced:** Admin page layout with proper WordPress styling and standard padding/margins
     287* **Fixed:** Sidebar width now properly constrained to 300px maximum above 800px screen width
     288* **Improved:** Responsive button layout - buttons wrap to new lines or stack vertically when space is constrained
     289* **Enhanced:** Two-column layout above 800px with flexible preview area using maximum available space
     290* **Fixed:** Removed conflicting inline styles that prevented CSS layout rules from applying
     291* **Optimized:** Preview table container now uses full height and width of available space
     292
    284293= 3.3.0 =
    285294* 🔧 **MAJOR BUG FIXES: Email Rendering & Elementor Integration**

  • tablecrafter-wp-data-tables/tags/3.3.1/tablecrafter.php

    r3441762 r3441951  
    44 * Plugin URI: https://github.com/TableCrafter/wp-data-tables
    55 * Description: Transform any data source into responsive WordPress tables. WCAG 2.1 compliant, advanced export (Excel/PDF), keyboard navigation, screen readers.
    6  * Version: 3.3.0
     6 * Version: 3.3.1
    77 * Author: TableCrafter Team
    88 * Author URI: https://github.com/fahdi
    … …  
    1919 * Global Constants
    2020 */
    21 define('TABLECRAFTER_VERSION', '3.3.0');
     21define('TABLECRAFTER_VERSION', '3.3.1');
    2222define('TABLECRAFTER_URL', plugin_dir_url(__FILE__));
    2323define('TABLECRAFTER_PATH', plugin_dir_path(__FILE__));
    … …  
    189189            <hr class="wp-header-end">
    190190
    191             <div class="tc-admin-layout" style="display: flex; gap: 20px; margin-top: 20px; align-items: flex-start;">
    192 
    193                 <div class="tc-sidebar" style="flex: 0 0 380px;">
     191            <div class="tc-admin-layout">
     192
     193                <div class="tc-sidebar">
    194194                    <div class="card" style="margin: 0 0 20px 0; max-width: none; background: linear-gradient(135deg, #e0f7fa 0%, #f0f9ff 100%); border-left: 4px solid #0891b2;">
    195195                        <h2 style="color: #0e7490; margin-top: 0; display: flex; align-items: center; gap: 8px;">
    … …  
    236236                            </div>
    237237
    238                             <div style="display: flex; gap: 5px;">
    239                                 <button id="tc-upload-csv-btn" class="button button-secondary" type="button" style="flex: 1;">
     238                            <div class="button-group">
     239                                <button id="tc-upload-csv-btn" class="button button-secondary" type="button">
    240240                                    <span class="dashicons dashicons-upload"
    241241                                        style="margin-right: 4px; vertical-align: middle;"></span>
    242242                                    <?php esc_html_e('Upload File (CSV/JSON)', 'tablecrafter-wp-data-tables'); ?>
    243243                                </button>
    244                                 <button id="tc-google-sheet-btn" class="button button-secondary" type="button" style="flex: 1;"
     244                                <button id="tc-google-sheet-btn" class="button button-secondary" type="button"
    245245                                    title="<?php esc_attr_e('Paste a Google Sheet URL', 'tablecrafter-wp-data-tables'); ?>">
    246246                                    <span class="dashicons dashicons-media-spreadsheet"
    … …  
    264264                        </div>
    265265
    266                         <div style="margin-bottom: 15px; display: flex; gap: 20px;">
    267                             <div style="flex: 1;">
     266                        <div class="form-row">
     267                            <div>
    268268                                <label for="tc-per-page"
    269269                                    style="font-weight: 600; display: block; margin-bottom: 5px;"><?php esc_html_e('Rows Per Page', 'tablecrafter-wp-data-tables'); ?></label>
    … …  
    290290                        </div>
    291291
    292                         <div style="margin-bottom: 15px; display: flex; flex-wrap: wrap; gap: 15px;">
     292                        <div class="checkbox-group">
    293293                            <label style="font-weight: 600; display: flex; align-items: center; gap: 8px; cursor: pointer;">
    294294                                <input type="checkbox" id="tc-enable-search" checked>
    … …  
    305305                        </div>
    306306
    307                         <div style="display: flex; gap: 10px; margin-top: 15px;">
    308                             <button id="tc-preview-btn" class="button button-primary button-large"
    309                                 style="flex: 1;"><?php esc_html_e('Preview Table', 'tablecrafter-wp-data-tables'); ?></button>
     307                        <div class="button-group">
     308                            <button id="tc-preview-btn" class="button button-primary button-large"><?php esc_html_e('Preview Table', 'tablecrafter-wp-data-tables'); ?></button>
    310309                        </div>
    311310                    </div>
    … …  
    322321                </div>
    323322
    324                 <div class="tc-preview-area" style="flex: 1; min-width: 600px; max-width: none;">
     323                <div class="tc-preview-area">
    325324                    <div class="card"
    326325                        style="margin: 0; max-width: none; min-height: 500px; display: flex; flex-direction: column;">

  • tablecrafter-wp-data-tables/trunk/assets/css/tablecrafter.css

    r3441608 r3441951  
    18551855}
    18561856
     1857/* === WordPress Admin Page Styles === */
     1858.tc-admin-layout {
     1859  display: flex !important;
     1860  gap: 20px !important;
     1861  margin-top: 20px !important;
     1862  align-items: flex-start !important;
     1863}
     1864
     1865.tc-sidebar {
     1866  flex: 0 0 380px !important;
     1867}
     1868
     1869.tc-sidebar .card {
     1870  margin: 0 0 20px 0 !important;
     1871  max-width: none !important;
     1872  padding: 20px !important;
     1873}
     1874
     1875.tc-sidebar .card h2 {
     1876  margin-top: 0 !important;
     1877  margin-bottom: 15px !important;
     1878  color: #23282d !important;
     1879  font-size: 16px !important;
     1880  font-weight: 600 !important;
     1881}
     1882
     1883.tc-sidebar .card p {
     1884  margin: 0 0 15px 0 !important;
     1885  line-height: 1.5 !important;
     1886}
     1887
     1888.tc-sidebar .card label {
     1889  font-weight: 600 !important;
     1890  display: block !important;
     1891  margin-bottom: 5px !important;
     1892  color: #23282d !important;
     1893}
     1894
     1895.tc-sidebar .card input.widefat,
     1896.tc-sidebar .card textarea.widefat {
     1897  margin-bottom: 8px !important;
     1898  padding: 8px 12px !important;
     1899  border: 1px solid #ddd !important;
     1900  border-radius: 4px !important;
     1901}
     1902
     1903.tc-sidebar .card .description {
     1904  margin-top: 5px !important;
     1905  margin-bottom: 15px !important;
     1906  font-size: 13px !important;
     1907  color: #666 !important;
     1908}
     1909
     1910.tc-sidebar .card .button {
     1911  margin: 0 5px 0 0 !important;
     1912  padding: 8px 16px !important;
     1913}
     1914
     1915.tc-sidebar .card .button-primary {
     1916  background: #0073aa !important;
     1917  border-color: #0073aa !important;
     1918}
     1919
     1920.tc-sidebar .card .button-secondary {
     1921  background: #f1f1f1 !important;
     1922  border-color: #ddd !important;
     1923  color: #555 !important;
     1924}
     1925
     1926.tc-preview-area {
     1927  flex: 1 1 auto !important;
     1928  min-width: 0 !important;
     1929  max-width: none !important;
     1930  width: 100% !important;
     1931}
     1932
     1933.tc-preview-area .card {
     1934  margin: 0 !important;
     1935  max-width: none !important;
     1936  width: 100% !important;
     1937  height: calc(100vh - 200px) !important;
     1938  min-height: 500px !important;
     1939  max-height: 800px !important;
     1940  display: flex !important;
     1941  flex-direction: column !important;
     1942  padding: 20px !important;
     1943  box-sizing: border-box !important;
     1944}
     1945
     1946.tc-preview-area .card h2 {
     1947  border-bottom: 1px solid #f0f0f1 !important;
     1948  padding-bottom: 15px !important;
     1949  margin-bottom: 15px !important;
     1950  margin-top: 0 !important;
     1951  color: #23282d !important;
     1952  font-size: 16px !important;
     1953  font-weight: 600 !important;
     1954}
     1955
     1956#tc-preview-wrap {
     1957  flex: 1 1 auto !important;
     1958  overflow: auto !important;
     1959  background: #fff !important;
     1960  padding: 15px !important;
     1961  border: 1px solid #ddd !important;
     1962  border-radius: 4px !important;
     1963  height: 100% !important;
     1964  max-height: none !important;
     1965}
     1966
     1967#tc-preview-container {
     1968  min-height: 400px !important;
     1969  height: 100% !important;
     1970  display: flex !important;
     1971  align-items: center !important;
     1972  justify-content: center !important;
     1973  color: #666 !important;
     1974}
     1975
     1976/* When table is loaded, change alignment */
     1977#tc-preview-container:has(.tablecrafter-container) {
     1978  align-items: stretch !important;
     1979  justify-content: stretch !important;
     1980}
     1981
     1982/* Fallback for browsers that don't support :has() */
     1983#tc-preview-container.tc-has-table {
     1984  align-items: stretch !important;
     1985  justify-content: stretch !important;
     1986}
     1987
     1988/* TableCrafter instance inside admin preview */
     1989#tc-preview-container .tablecrafter-container {
     1990  width: 100% !important;
     1991  height: 100% !important;
     1992  display: flex !important;
     1993  flex-direction: column !important;
     1994}
     1995
     1996#tc-preview-container .tc-wrapper {
     1997  width: 100% !important;
     1998  height: 100% !important;
     1999  display: flex !important;
     2000  flex-direction: column !important;
     2001}
     2002
     2003#tc-preview-container .tc-table-container {
     2004  flex: 1 1 auto !important;
     2005  height: 100% !important;
     2006  max-height: none !important;
     2007  overflow: auto !important;
     2008}
     2009
     2010#tc-preview-container .tc-table {
     2011  width: 100% !important;
     2012  height: 100% !important;
     2013}
     2014
     2015/* Preview area table optimization */
     2016.tc-preview-area .tc-table th,
     2017.tc-preview-area .tc-table td {
     2018  min-width: 100px !important;
     2019  white-space: nowrap !important;
     2020  overflow: hidden !important;
     2021  text-overflow: ellipsis !important;
     2022  max-width: 200px !important;
     2023}
     2024
     2025.tc-preview-area .tc-table td {
     2026  white-space: normal !important;
     2027  word-wrap: break-word !important;
     2028  line-height: 1.4 !important;
     2029}
     2030
     2031.tc-demo-links {
     2032  margin: 0 !important;
     2033  padding: 0 !important;
     2034  list-style: none !important;
     2035}
     2036
     2037.tc-demo-links li {
     2038  margin-bottom: 8px !important;
     2039}
     2040
     2041.tc-demo-links .button {
     2042  width: 100% !important;
     2043  text-align: left !important;
     2044  background: white !important;
     2045  border: 2px solid #0073aa !important;
     2046  color: #0073aa !important;
     2047  font-weight: 600 !important;
     2048  transition: all 0.2s ease !important;
     2049  padding: 10px 15px !important;
     2050}
     2051
     2052.tc-demo-links .button:hover {
     2053  background: #0073aa !important;
     2054  color: white !important;
     2055  border-color: #0073aa !important;
     2056}
     2057
     2058/* Admin form field containers */
     2059.tc-admin-layout .card .form-field {
     2060  margin-bottom: 15px !important;
     2061}
     2062
     2063.tc-admin-layout .card .form-row {
     2064  display: flex !important;
     2065  gap: 20px !important;
     2066  margin-bottom: 15px !important;
     2067}
     2068
     2069.tc-admin-layout .card .form-row > div {
     2070  flex: 1 !important;
     2071}
     2072
     2073.tc-admin-layout .card .checkbox-group {
     2074  display: flex !important;
     2075  flex-wrap: wrap !important;
     2076  gap: 15px !important;
     2077  margin-bottom: 15px !important;
     2078}
     2079
     2080.tc-admin-layout .card .checkbox-group label {
     2081  font-weight: 600 !important;
     2082  display: flex !important;
     2083  align-items: center !important;
     2084  gap: 8px !important;
     2085  cursor: pointer !important;
     2086  margin-bottom: 0 !important;
     2087}
     2088
     2089.tc-admin-layout .card .button-group {
     2090  display: flex !important;
     2091  flex-wrap: wrap !important;
     2092  gap: 10px !important;
     2093  margin-top: 15px !important;
     2094}
     2095
     2096.tc-admin-layout .card .button-group .button {
     2097  flex: 1 1 auto !important;
     2098  min-width: 180px !important;
     2099  margin: 0 !important;
     2100}
     2101
     2102/* Shortcode display */
     2103#tc-shortcode-display {
     2104  display: block !important;
     2105  padding: 15px !important;
     2106  background: #f1f1f1 !important;
     2107  margin: 15px 0 !important;
     2108  word-break: break-all !important;
     2109  border: 1px solid #ddd !important;
     2110  border-radius: 4px !important;
     2111  font-family: Consolas, Monaco, monospace !important;
     2112  font-size: 13px !important;
     2113  line-height: 1.4 !important;
     2114}
     2115
     2116/* Two-column layout for screens above 800px */
     2117@media (min-width: 801px) {
     2118  body.wp-admin .tc-admin-layout {
     2119    display: flex !important;
     2120    flex-direction: row !important;
     2121    gap: 20px !important;
     2122    margin-top: 20px !important;
     2123    align-items: flex-start !important;
     2124  }
     2125 
     2126  body.wp-admin .tc-sidebar {
     2127    flex: 0 0 300px !important;
     2128    min-width: 300px !important;
     2129    max-width: 300px !important;
     2130    width: 300px !important;
     2131  }
     2132 
     2133  /* Button responsiveness in constrained sidebar */
     2134  body.wp-admin .tc-sidebar .button-group .button {
     2135    min-width: 120px !important;
     2136    flex: 1 1 calc(50% - 5px) !important;
     2137  }
     2138 
     2139  /* When buttons would be too narrow, stack them */
     2140  @media (max-width: 1200px) {
     2141    body.wp-admin .tc-sidebar .button-group {
     2142      flex-direction: column !important;
     2143    }
     2144   
     2145    body.wp-admin .tc-sidebar .button-group .button {
     2146      width: 100% !important;
     2147      flex: none !important;
     2148    }
     2149  }
     2150 
     2151  body.wp-admin .tc-preview-area {
     2152    flex: 1 1 auto !important;
     2153    min-width: 0 !important;
     2154    max-width: none !important;
     2155    width: auto !important;
     2156  }
     2157 
     2158  body.wp-admin .tc-preview-area .card {
     2159    height: calc(100vh - 200px) !important;
     2160    min-height: 500px !important;
     2161    max-height: 800px !important;
     2162  }
     2163}
     2164
     2165/* Responsive admin layout */
     2166@media (max-width: 800px) {
     2167  .tc-admin-layout {
     2168    flex-direction: column !important;
     2169  }
     2170 
     2171  .tc-sidebar {
     2172    flex: none !important;
     2173    max-width: none !important;
     2174    width: 100% !important;
     2175  }
     2176 
     2177  .tc-preview-area {
     2178    min-width: auto !important;
     2179    width: 100% !important;
     2180  }
     2181 
     2182  .tc-preview-area .card {
     2183    height: calc(100vh - 300px) !important;
     2184    min-height: 400px !important;
     2185    max-height: 600px !important;
     2186  }
     2187}
     2188
     2189@media (max-width: 768px) {
     2190  .tc-admin-layout {
     2191    gap: 15px !important;
     2192  }
     2193 
     2194  .tc-preview-area .card {
     2195    height: calc(100vh - 250px) !important;
     2196    min-height: 350px !important;
     2197    max-height: 500px !important;
     2198  }
     2199 
     2200  .tc-sidebar .card .form-row {
     2201    flex-direction: column !important;
     2202    gap: 10px !important;
     2203  }
     2204 
     2205  .tc-sidebar .card .checkbox-group {
     2206    flex-direction: column !important;
     2207    gap: 10px !important;
     2208  }
     2209 
     2210  .tc-sidebar .card .button-group {
     2211    flex-direction: column !important;
     2212  }
     2213 
     2214  .tc-sidebar .card .button-group .button {
     2215    width: 100% !important;
     2216  }
     2217}
     2218
    18572219/* === Rich Data Presentation === */
    18582220.tc-badge {

  • tablecrafter-wp-data-tables/trunk/assets/js/admin.js

    r3441591 r3441951  
    185185        container.innerHTML = '';
    186186        container.style.display = 'block';
     187       
     188        // Add class for table layout styling
     189        container.classList.add('tc-has-table');
    187190
    188191        if (typeof TableCrafter !== 'undefined') {

  • tablecrafter-wp-data-tables/trunk/readme.txt

    r3441762 r3441951  
    44Requires at least: 5.0
    55Tested up to: 6.9
    6 Stable tag: 3.3.0
     6Stable tag: 3.3.1
    77Requires PHP: 7.4
    88License: GPLv2 or later
    … …  
    282282
    283283== Changelog ==
     284= 3.3.1 =
     285* 🎨 **ADMIN UX IMPROVEMENTS: Responsive Layout & Button Handling**
     286* **Enhanced:** Admin page layout with proper WordPress styling and standard padding/margins
     287* **Fixed:** Sidebar width now properly constrained to 300px maximum above 800px screen width
     288* **Improved:** Responsive button layout - buttons wrap to new lines or stack vertically when space is constrained
     289* **Enhanced:** Two-column layout above 800px with flexible preview area using maximum available space
     290* **Fixed:** Removed conflicting inline styles that prevented CSS layout rules from applying
     291* **Optimized:** Preview table container now uses full height and width of available space
     292
    284293= 3.3.0 =
    285294* 🔧 **MAJOR BUG FIXES: Email Rendering & Elementor Integration**

  • tablecrafter-wp-data-tables/trunk/tablecrafter.php

    r3441762 r3441951  
    44 * Plugin URI: https://github.com/TableCrafter/wp-data-tables
    55 * Description: Transform any data source into responsive WordPress tables. WCAG 2.1 compliant, advanced export (Excel/PDF), keyboard navigation, screen readers.
    6  * Version: 3.3.0
     6 * Version: 3.3.1
    77 * Author: TableCrafter Team
    88 * Author URI: https://github.com/fahdi
    … …  
    1919 * Global Constants
    2020 */
    21 define('TABLECRAFTER_VERSION', '3.3.0');
     21define('TABLECRAFTER_VERSION', '3.3.1');
    2222define('TABLECRAFTER_URL', plugin_dir_url(__FILE__));
    2323define('TABLECRAFTER_PATH', plugin_dir_path(__FILE__));
    … …  
    189189            <hr class="wp-header-end">
    190190
    191             <div class="tc-admin-layout" style="display: flex; gap: 20px; margin-top: 20px; align-items: flex-start;">
    192 
    193                 <div class="tc-sidebar" style="flex: 0 0 380px;">
     191            <div class="tc-admin-layout">
     192
     193                <div class="tc-sidebar">
    194194                    <div class="card" style="margin: 0 0 20px 0; max-width: none; background: linear-gradient(135deg, #e0f7fa 0%, #f0f9ff 100%); border-left: 4px solid #0891b2;">
    195195                        <h2 style="color: #0e7490; margin-top: 0; display: flex; align-items: center; gap: 8px;">
    … …  
    236236                            </div>
    237237
    238                             <div style="display: flex; gap: 5px;">
    239                                 <button id="tc-upload-csv-btn" class="button button-secondary" type="button" style="flex: 1;">
     238                            <div class="button-group">
     239                                <button id="tc-upload-csv-btn" class="button button-secondary" type="button">
    240240                                    <span class="dashicons dashicons-upload"
    241241                                        style="margin-right: 4px; vertical-align: middle;"></span>
    242242                                    <?php esc_html_e('Upload File (CSV/JSON)', 'tablecrafter-wp-data-tables'); ?>
    243243                                </button>
    244                                 <button id="tc-google-sheet-btn" class="button button-secondary" type="button" style="flex: 1;"
     244                                <button id="tc-google-sheet-btn" class="button button-secondary" type="button"
    245245                                    title="<?php esc_attr_e('Paste a Google Sheet URL', 'tablecrafter-wp-data-tables'); ?>">
    246246                                    <span class="dashicons dashicons-media-spreadsheet"
    … …  
    264264                        </div>
    265265
    266                         <div style="margin-bottom: 15px; display: flex; gap: 20px;">
    267                             <div style="flex: 1;">
     266                        <div class="form-row">
     267                            <div>
    268268                                <label for="tc-per-page"
    269269                                    style="font-weight: 600; display: block; margin-bottom: 5px;"><?php esc_html_e('Rows Per Page', 'tablecrafter-wp-data-tables'); ?></label>
    … …  
    290290                        </div>
    291291
    292                         <div style="margin-bottom: 15px; display: flex; flex-wrap: wrap; gap: 15px;">
     292                        <div class="checkbox-group">
    293293                            <label style="font-weight: 600; display: flex; align-items: center; gap: 8px; cursor: pointer;">
    294294                                <input type="checkbox" id="tc-enable-search" checked>
    … …  
    305305                        </div>
    306306
    307                         <div style="display: flex; gap: 10px; margin-top: 15px;">
    308                             <button id="tc-preview-btn" class="button button-primary button-large"
    309                                 style="flex: 1;"><?php esc_html_e('Preview Table', 'tablecrafter-wp-data-tables'); ?></button>
     307                        <div class="button-group">
     308                            <button id="tc-preview-btn" class="button button-primary button-large"><?php esc_html_e('Preview Table', 'tablecrafter-wp-data-tables'); ?></button>
    310309                        </div>
    311310                    </div>
    … …  
    322321                </div>
    323322
    324                 <div class="tc-preview-area" style="flex: 1; min-width: 600px; max-width: none;">
     323                <div class="tc-preview-area">
    325324                    <div class="card"
    326325                        style="margin: 0; max-width: none; min-height: 500px; display: flex; flex-direction: column;">
Note: See TracChangeset for help on using the changeset viewer.