diff --git a/public/js/chat.js b/public/js/chat.js
index 7de3109f..6544e2f0 100644
--- a/public/js/chat.js
+++ b/public/js/chat.js
@@ -161,4 +161,52 @@ document.addEventListener('DOMContentLoaded', () => {
});
}
+
+
+ // Resize chat box
+ const handle = document.querySelector('.resize-handle');
+ const leftCol = document.querySelector('.left-col');
+ const rightCol = document.querySelector('.right-col');
+ const editorRow = document.querySelector('.row.editor');
+ let isResizing = false;
+
+ handle.addEventListener('mousedown', function(e) {
+ e.preventDefault();
+ isResizing = true;
+ let startX = e.pageX;
+
+ function handleMouseMove(e) {
+ if (!isResizing) return;
+ const editorRowWidth = editorRow.offsetWidth; // Get the total width of the editor row
+ let moveX = e.pageX - startX;
+ let leftColWidth = leftCol.offsetWidth + moveX;
+
+ // Convert to percentage
+ let leftColPercentage = (leftColWidth / editorRowWidth) * 100;
+ let rightColPercentage = 100 - leftColPercentage;
+
+ // Check and enforce the minimum and maximum widths
+ if (rightColPercentage < 20) { // Minimum 20% for right column
+ rightColPercentage = 20;
+ leftColPercentage = 80;
+ } else if (rightColPercentage > 80) { // Maximum 80% for right column
+ rightColPercentage = 80;
+ leftColPercentage = 20;
+ }
+
+ // Apply the new widths
+ leftCol.style.width = `${leftColPercentage}%`;
+ rightCol.style.width = `${rightColPercentage}%`;
+ startX = e.pageX;
+ }
+
+ function handleMouseUp() {
+ window.removeEventListener('mousemove', handleMouseMove);
+ window.removeEventListener('mouseup', handleMouseUp);
+ isResizing = false;
+ }
+
+ window.addEventListener('mousemove', handleMouseMove);
+ window.addEventListener('mouseup', handleMouseUp);
+ });
});
\ No newline at end of file
diff --git a/sass/_project-sass/_project-Main.scss b/sass/_project-sass/_project-Main.scss
index 26f6bf61..6cbe1ae1 100644
--- a/sass/_project-sass/_project-Main.scss
+++ b/sass/_project-sass/_project-Main.scss
@@ -671,9 +671,6 @@
border: 0;
}
}
-.right-col {
- background: #FAF6F1;
-}
.content.misc-page .col-33 h3 {
font-size: 1.5em;
}
@@ -2284,16 +2281,10 @@ pre, code {
-
-
-
-
-
.chat-container {
display: flex;
flex-direction: column;
height: calc(100vh - 60px); /* Adjust the height as needed */
- background-color: #121212;
color: #e0e0e0;
border-left: 1px solid #373737;
font-family: Arial, sans-serif;
@@ -2402,6 +2393,24 @@ pre, code {
+
+.resize-handle {
+ position: absolute;
+ left: -5px; /* Adjust based on handle width to center it on the border */
+ top: 50%;
+ transform: translateY(-50%);
+ width: 10px; /* Handle width */
+ height: 40px; /* Handle height */
+ background-color: #666; /* Handle color */
+ cursor: ew-resize;
+ z-index: 10;
+}
+
+
+
+
+
+
.welcoming-cat {
width: 200px;
float: right;
diff --git a/views/site_files/text_editor.erb b/views/site_files/text_editor.erb
index 233b8dc9..e9b03182 100644
--- a/views/site_files/text_editor.erb
+++ b/views/site_files/text_editor.erb
@@ -90,7 +90,7 @@
Save
View
- '> Share
+ '> Share Penelope