Skip to content

K
KotGPT
Commit 9579e9d2 by Michael Pastushkov
Options

fix

parent 6cffcab4
Showing with 26 additions and 26 deletions
static/www/1.html
......@@ -31,7 +31,7 @@
padding-bottom:var(--bottom-pad); /* room for composer + fixed footer */
display:flex;
flex-direction:column;
scroll-behavior:smooth; /* nudge for smooth scrolling */
scroll-behavior:smooth; /* smooth scrolling nudged by CSS */
}
.composer{
......@@ -73,27 +73,29 @@
filter:drop-shadow(0 6px 16px rgba(0,0,0,.15)); opacity:.98;
}
/* Composer row with textarea + always-visible scroll button */
.scroll-row { display:flex; align-items:stretch; gap:.5rem; }
#inputText { flex:1 1 auto; }
/* Floating scroll-to-bottom button (inside main) */
#scrollDownBtn{
position:sticky; /* sticky inside scroll container */
bottom:calc(var(--footer-h) + 1rem); /* floats above footer/composer */
margin-left:auto; /* push to right */
align-self:flex-end; /* right align in flex column */
z-index:1050;
display:inline-flex;
align-items:center;
justify-content:center;
border:none;
border-radius:.5rem;
width:42px;
height:42px;
border-radius:50%;
width:48px;
height:48px;
background:rgba(13,110,253,.95);
color:#fff;
box-shadow:0 2px 8px rgba(0,0,0,.15);
box-shadow:0 4px 14px rgba(0,0,0,.22);
cursor:pointer;
transition:opacity .18s ease-in-out, transform .12s ease-in-out;
opacity:.96;
flex:0 0 auto;
}
#scrollDownBtn:hover{ opacity:1; transform:translateY(-1px); }
#scrollDownBtn svg{ width:22px; height:22px; pointer-events:none; }
#scrollDownBtn:hover{ opacity:1; transform:translateY(-2px); }
#scrollDownBtn svg{ width:24px; height:24px; pointer-events:none; }
</style>
</head>
<body>
......@@ -112,24 +114,22 @@
<div id="welcomeLogo">
<img id="welcomeImg" src="/static/images/ask-a-cat-en.png" alt="Ask a Cat">
</div>
<div id="thread"></div>
<!-- Floating button inside the scrollable area -->
<button id="scrollDownBtn" type="button" aria-label="Scroll down" title="Scroll down">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M12 16a1 1 0 0 1-.7-.29l-6-6a1 1 0 1 1 1.4-1.42L12 13.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-6 6A1 1 0 0 1 12 16z"/>
</svg>
</button>
</main>
<!-- Composer (sticks above fixed footer) -->
<div class="composer py-3">
<div class="container">
<form id="promptForm" class="d-flex flex-column gap-2">
<!-- Row: textarea + always-visible scroll-down button -->
<div class="scroll-row">
<textarea id="inputText" class="form-control" rows="1" placeholder=""></textarea>
<button id="scrollDownBtn" type="button" aria-label="Scroll down" title="Scroll down">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M12 16a1 1 0 0 1-.7-.29l-6-6a1 1 0 1 1 1.4-1.42L12 13.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-6 6A1 1 0 0 1 12 16z"/>
</svg>
</button>
</div>
<!-- Row: Go / Stop -->
<textarea id="inputText" class="form-control" rows="1" placeholder=""></textarea>
<div class="d-flex align-items-center gap-2">
<button id="goBtn" class="btn btn-primary" type="submit"></button>
<button id="stopBtn" class="btn btn-outline-danger" type="button" style="display:none"></button>
......@@ -200,13 +200,13 @@
// --- robust scrolling helpers ---
function isOverflowing(el){ return el && (el.scrollHeight - el.clientHeight) > 1; }
// Decide what is actually scrolling now
function getScrollEl(){
// Prefer mainScroll if it's the actual scroller
if (isOverflowing(mainScroll)) return mainScroll;
// Fallback to page scroller (rare with this layout)
return document.scrollingElement || document.documentElement;
}
// Scroll to bottom of the current scroller (with fallback)
function scrollToBottom(){
const el = getScrollEl();
const top = el.scrollHeight;
......@@ -217,7 +217,7 @@
el.scrollTo({ top, behavior:'smooth' });
}
// Fallback to ensure we actually reach the bottom
// Hard fallback to ensure we reach the bottom
requestAnimationFrame(() => {
const nearBottom = (el.scrollTop + el.clientHeight) >= (el.scrollHeight - 2);
if (!nearBottom) {
......@@ -332,7 +332,7 @@
});
document.getElementById('stopBtn').addEventListener('click', stop);
// scroll button action — robust scroll-to-bottom
// floating button action — robust scroll-to-bottom
scrollDownBtn.addEventListener('click', scrollToBottom);
// init
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment