zydronium/neocities
1
0
Fork 0
mirror of https://github.com/neocities/neocities.git synced 2025-04-24 17:22:35 +02:00
Code Issues Projects Releases Packages Wiki Activity

chat: adjust column size of chat, add top control button

Browse source
This commit is contained in:
Kyle Drake 2024-03-27 14:26:40 -05:00
parent 1892072128
commit e732c3ad8b
3 changed files with 70 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
public/js/chat.js
View file

@ -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);
});
});

27
sass/_project-sass/_project-Main.scss
View file

@ -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;

7
views/site_files/text_editor.erb
View file

@ -90,7 +90,7 @@
<a id="saveButton" class="btn-Action" href="#" onclick="saveTextFile(false); return false" style="opacity: 0.5"><span class="hide-on-mobile"><i class="fa fa-save"></i></span>Save</a>
<span class="hide-on-mobile">
<a class="btn-Action" href="<%= current_site.uri %>/<%= @filename == 'index.html' ? '' : @filename %>" target="_blank"><i class="fa fa-globe"></i> View</a>
<a href="#" id="shareButton" class="btn-Action" data-container="body" data-toggle="popover" data-placement="bottom" data-content='<%== erb :'_share', layout: false, locals: {site: current_site, page_uri: "#{current_site.uri}/#{@filename}"} %>'><i class="fa fa-share-alt"></i> Share</a>
<a href="#" id="shareButton" class="btn-Action" data-container="body" data-toggle="popover" data-placement="bottom" data-content='<%== erb :'_share', layout: false, locals: {site: current_site, page_uri: "#{current_site.uri}/#{@filename}"} %>'><i class="fa fa-share-alt"></i> Share</a> <a href="#" class="btn-Action" data-container="body" data-toggle="popover" data-placement="bottom"><i class="fa fa-comments"></i> Penelope</a>
</span>
<!-- <a id="saveAndExitButton" class="btn-Action" href="#" onclick="saveTextFile(true); return false" style="opacity: 0.5"><i class="fa fa-save"></i>&nbsp;&nbsp;Save and Exit</a> -->
<div id="editorUpdates" class="tooltip fade bottom in hidden" style="top: 90px;right: 12.5em;">
@ -109,10 +109,11 @@
<script src="/js/chat.js"></script>
<div class="row editor">
<div class="col col-66">
<div class="col left-col" style="width: 66%;">
<div id="editor"><h3>Loading...</h3></div>
</div>
<div class="col col-33 chat-col">
<div class="col right-col" style="width: 33%;">
<div class="resize-handle"></div>
<div class="chat-container">
<div id="chat-box" class="chat-box">
<div class="bot-message message">