UI Updates

gmfennema · Dec 9, 2024 · 0d70fd6 · 0d70fd6
1 parent c5065d7
commit 0d70fd6
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -5,15 +5,75 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Tableau CSV Exporter</title>
     <script type="module" src="https://cdn.jsdelivr.net/gh/tableau/extensions-api/lib/tableau.extensions.1.latest.js"></script>
-</head>
-<body>
-    <h1>Select a Worksheet to Export</h1>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            background: #f4f4f9;
+            margin: 0;
+            padding: 20px;
+        }
+
+        .container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            justify-content: center;
+            align-items: center;
+        }
+
+        select, button {
+            font-size: 16px;
+            padding: 10px 20px;
+            border-radius: 5px;
+            border: 1px solid #ccc;
+            transition: all 0.3s ease;
+            min-width: 200px;
+        }
+
+        select {
+            background: white;
+            color: #333;
+            outline: none;
+            cursor: pointer;
+        }
 
-    <label for="worksheetSelect">Choose Worksheet:</label>
-    <select id="worksheetSelect"></select>
-
-    <button id="exportBtn" disabled>EXPORT to CSV</button>
+        select:focus {
+            border-color: #007bff;
+            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+        }
 
+        button {
+            background: #007bff;
+            color: white;
+            border: none;
+            cursor: pointer;
+        }
+
+        button:disabled {
+            background: #b0c4de;
+            cursor: not-allowed;
+        }
+
+        button:hover:not(:disabled) {
+            background: #0056b3;
+        }
+
+        button:active {
+            transform: scale(0.98);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <select id="worksheetSelect">
+            <option value="" disabled selected>Select Worksheet</option>
+        </select>
+        <button id="exportBtn" disabled>Export to CSV</button>
+    </div>
     <script src="script.js"></script>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -51,7 +51,7 @@ async function exportToCSV() {
 
         // Use summary data instead of underlying data
         const options = {
-            maxRows: 10000, // Increase limit as needed
+            maxRows: 1000000, // Increase limit as needed
             ignoreSelection: true
         };
         const dataTable = await worksheet.getSummaryDataAsync(options);