FIX: copy paste fixes, table formatting

CloudBytes-Academy · Sep 4, 2024 · 618b3a7 · 618b3a7
1 parent bf27178
commit 618b3a7
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 15 deletions.
diff --git a/design/alexis/static/css/style.css b/design/alexis/static/css/style.css
@@ -440,6 +440,34 @@ blockquote {
     margin-left: 0;
 }
 
+table {
+    border-collapse: collapse;
+    width: 100%;
+    max-width: 800px;
+    margin: 20px auto;
+    font-family: Arial, sans-serif;
+    color: #ecf0f1;
+  }
+
+  th, td {
+    padding: 12px;
+    text-align: left;
+    border-bottom: 1px solid #34495e;
+  }
+
+  th {
+    background-color: #34495e;
+    font-weight: bold;
+    text-transform: uppercase;
+  }
+
+  tr:hover {
+    background-color: #3a516e;
+  }
+
+
+
+
 .red {
     color: #ff3860;
 }

diff --git a/design/alexis/static/js/copy.js b/design/alexis/static/js/copy.js
@@ -7,9 +7,9 @@ const copyToClipboardSuccessText = {
     ariaLabel: "Copied to clipboard",
 };
 
-// Get all pre. But ignore line numbers section
+// Get all pre elements but ignore line numbers section
 document.querySelectorAll("div.highlight pre").forEach((snippet) => {
-    // create div.codecopy
+    // Create div.codecopy
     const wrapper = document.createElement("div");
     wrapper.classList.add("codecopy");
 
@@ -19,23 +19,21 @@ document.querySelectorAll("div.highlight pre").forEach((snippet) => {
     wrapper.appendChild(snippet);
 
     // Create button
-    const button = `
-              <button
-                  class="codecopy-btn"
-                  title=${copyToClipboardDefaultText.ariaLabel}
-                  aria-label=${copyToClipboardDefaultText.ariaLabel}
-              >${copyToClipboardDefaultText.innerText}
-              </button>`;
+    const button = document.createElement("button");
+    button.classList.add("codecopy-btn");
+    button.innerText = copyToClipboardDefaultText.innerText;
+    button.setAttribute("aria-label", copyToClipboardDefaultText.ariaLabel);
 
-    // Add button to div.codecopy
-    wrapper.insertAdjacentHTML("afterbegin", button);
+    // Add button to div.codecopy, before the snippet
+    wrapper.insertBefore(button, snippet);
 });
 
-// Add copy to clipboard functionality
+// Add copy to clipboard functionality with trimmed content
 const clipboard = new ClipboardJS(".codecopy-btn", {
-    target: (trigger) => {
-        return trigger.parentNode;
-    },
+    text: (trigger) => {
+        const codeSnippet = trigger.nextElementSibling.innerText;
+        return codeSnippet.trim(); // Trim leading and trailing newlines
+    }
 });
 
 // Show message on success