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 @@ ...@@ -31,7 +31,7 @@
padding-bottom:var(--bottom-pad); /* room for composer + fixed footer */ padding-bottom:var(--bottom-pad); /* room for composer + fixed footer */
display:flex; display:flex;
flex-direction:column; flex-direction:column;
scroll-behavior:smooth; /* nudge for smooth scrolling */ scroll-behavior:smooth; /* smooth scrolling nudged by CSS */
} }
.composer{ .composer{
...@@ -73,27 +73,29 @@ ...@@ -73,27 +73,29 @@
filter:drop-shadow(0 6px 16px rgba(0,0,0,.15)); opacity:.98; filter:drop-shadow(0 6px 16px rgba(0,0,0,.15)); opacity:.98;
} }
/* Composer row with textarea + always-visible scroll button */ /* Floating scroll-to-bottom button (inside main) */
.scroll-row { display:flex; align-items:stretch; gap:.5rem; }
#inputText { flex:1 1 auto; }
#scrollDownBtn{ #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; display:inline-flex;
align-items:center; align-items:center;
justify-content:center; justify-content:center;
border:none; border:none;
border-radius:.5rem; border-radius:50%;
width:42px; width:48px;
height:42px; height:48px;
background:rgba(13,110,253,.95); background:rgba(13,110,253,.95);
color:#fff; color:#fff;
box-shadow:0 2px 8px rgba(0,0,0,.15); box-shadow:0 4px 14px rgba(0,0,0,.22);
cursor:pointer; cursor:pointer;
transition:opacity .18s ease-in-out, transform .12s ease-in-out; transition:opacity .18s ease-in-out, transform .12s ease-in-out;
opacity:.96; opacity:.96;
flex:0 0 auto;
} }
#scrollDownBtn:hover{ opacity:1; transform:translateY(-1px); } #scrollDownBtn:hover{ opacity:1; transform:translateY(-2px); }
#scrollDownBtn svg{ width:22px; height:22px; pointer-events:none; } #scrollDownBtn svg{ width:24px; height:24px; pointer-events:none; }
</style> </style>
</head> </head>
<body> <body>
...@@ -112,24 +114,22 @@ ...@@ -112,24 +114,22 @@
<div id="welcomeLogo"> <div id="welcomeLogo">
<img id="welcomeImg" src="/static/images/ask-a-cat-en.png" alt="Ask a Cat"> <img id="welcomeImg" src="/static/images/ask-a-cat-en.png" alt="Ask a Cat">
</div> </div>
<div id="thread"></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> </main>
<!-- Composer (sticks above fixed footer) --> <!-- Composer (sticks above fixed footer) -->
<div class="composer py-3"> <div class="composer py-3">
<div class="container"> <div class="container">
<form id="promptForm" class="d-flex flex-column gap-2"> <form id="promptForm" class="d-flex flex-column gap-2">
<!-- Row: textarea + always-visible scroll-down button --> <textarea id="inputText" class="form-control" rows="1" placeholder=""></textarea>
<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 -->
<div class="d-flex align-items-center gap-2"> <div class="d-flex align-items-center gap-2">
<button id="goBtn" class="btn btn-primary" type="submit"></button> <button id="goBtn" class="btn btn-primary" type="submit"></button>
<button id="stopBtn" class="btn btn-outline-danger" type="button" style="display:none"></button> <button id="stopBtn" class="btn btn-outline-danger" type="button" style="display:none"></button>
...@@ -200,13 +200,13 @@ ...@@ -200,13 +200,13 @@
// --- robust scrolling helpers --- // --- robust scrolling helpers ---
function isOverflowing(el){ return el && (el.scrollHeight - el.clientHeight) > 1; } function isOverflowing(el){ return el && (el.scrollHeight - el.clientHeight) > 1; }
// Decide what is actually scrolling now
function getScrollEl(){ function getScrollEl(){
// Prefer mainScroll if it's the actual scroller
if (isOverflowing(mainScroll)) return mainScroll; if (isOverflowing(mainScroll)) return mainScroll;
// Fallback to page scroller (rare with this layout)
return document.scrollingElement || document.documentElement; return document.scrollingElement || document.documentElement;
} }
// Scroll to bottom of the current scroller (with fallback)
function scrollToBottom(){ function scrollToBottom(){
const el = getScrollEl(); const el = getScrollEl();
const top = el.scrollHeight; const top = el.scrollHeight;
...@@ -217,7 +217,7 @@ ...@@ -217,7 +217,7 @@
el.scrollTo({ top, behavior:'smooth' }); el.scrollTo({ top, behavior:'smooth' });
} }
// Fallback to ensure we actually reach the bottom // Hard fallback to ensure we reach the bottom
requestAnimationFrame(() => { requestAnimationFrame(() => {
const nearBottom = (el.scrollTop + el.clientHeight) >= (el.scrollHeight - 2); const nearBottom = (el.scrollTop + el.clientHeight) >= (el.scrollHeight - 2);
if (!nearBottom) { if (!nearBottom) {
...@@ -332,7 +332,7 @@ ...@@ -332,7 +332,7 @@
}); });
document.getElementById('stopBtn').addEventListener('click', stop); document.getElementById('stopBtn').addEventListener('click', stop);
// scroll button action — robust scroll-to-bottom // floating button action — robust scroll-to-bottom
scrollDownBtn.addEventListener('click', scrollToBottom); scrollDownBtn.addEventListener('click', scrollToBottom);
// init // 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