Fix some layout issues
This commit is contained in:
Webifi
parent
427663167a
commit
2c4faa6944
|
|
@ -35,19 +35,19 @@
|
|||
|
||||
|
||||
<Navbar />
|
||||
<section class="section root-section">
|
||||
<div class="container is-fullhd">
|
||||
<div class="columns">
|
||||
<div class="column is-one-fifth side-bar-column">
|
||||
<!-- <section class="section root-section"> -->
|
||||
<!-- <div class="container is-fullhd"> -->
|
||||
<!-- <div class="columns"> -->
|
||||
<div class="side-bar-column">
|
||||
<Sidebar />
|
||||
</div>
|
||||
<div class="column is-four-fifths main-content-column" id="content">
|
||||
<div class="main-content-column" id="content">
|
||||
{#key $location}
|
||||
<Router {routes} on:conditionsFailed={() => replace('/')}/>
|
||||
{/key}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- </div> -->
|
||||
<!-- </div> -->
|
||||
<!-- </section> -->
|
||||
|
||||
<!-- <Footer /> -->
|
||||
|
|
|
|||
47
src/app.scss
47
src/app.scss
|
|
@ -30,7 +30,7 @@ html {
|
|||
--chatInputPaddingBottom: 10px;
|
||||
--chatInputPaddingLeft: 60px;
|
||||
|
||||
--BgColor: var(-BgColorLight) /* leave this */
|
||||
--BgColor: var(-BgColorLight);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
|
|
@ -69,6 +69,7 @@ html {
|
|||
--sidebarWidth: max(300px, 20%);
|
||||
--mainContentWidth: calc(100%);
|
||||
--sidebarTop: 56px;
|
||||
--sectionPaddingTop: 56px;
|
||||
--chatInputPaddingRight: 20px;
|
||||
--chatInputPaddingLeft: 20px;
|
||||
}
|
||||
|
|
@ -99,10 +100,6 @@ html {
|
|||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
min-height: 100vh;
|
||||
|
||||
section.section.root-section {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.is-disabled {
|
||||
|
|
@ -202,8 +199,6 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Support for copy code button */
|
||||
.code-block>button {
|
||||
position: absolute;
|
||||
|
|
@ -297,17 +292,16 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
|
|||
|
||||
/* Overrides for main layout */
|
||||
|
||||
.column.side-bar-column {
|
||||
.side-bar-column {
|
||||
width: var(--sidebarWidth);
|
||||
}
|
||||
|
||||
.column.main-content-column {
|
||||
width: var(--mainContentWidth)
|
||||
}
|
||||
|
||||
section.section.root-section {
|
||||
padding: 0px;
|
||||
.main-content-column {
|
||||
margin-left: auto;
|
||||
margin-right: 0px;
|
||||
width: var(--mainContentWidth);
|
||||
padding-top: var(--sectionPaddingTop);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
aside.menu.main-menu {
|
||||
|
|
@ -352,6 +346,14 @@ aside.menu.main-menu .menu-expanse {
|
|||
background-image: linear-gradient(180deg,hsla(0,0%,100%,0) 13.94%, var(--BgColorLight) 54.73%);
|
||||
}
|
||||
|
||||
.lower-mask2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lower-mask2.strong-mask {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.default-text {
|
||||
|
|
@ -365,6 +367,8 @@ aside.menu.main-menu .menu-expanse {
|
|||
box-shadow: 5px 0px 0px var(--BgColorSidebarDark);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
width: 11px;
|
||||
}
|
||||
|
|
@ -389,13 +393,14 @@ aside.menu.main-menu .menu-expanse {
|
|||
var(--chatContentPaddingLeft) ;
|
||||
}
|
||||
|
||||
.chat-focus-point {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
/* Bulma does something strange where scrolling to the end of the body
|
||||
or html doesn't actually scroll to the bottom of the page
|
||||
this -.75rem, then scroll to the bottom of this works, but I don't like it.*/
|
||||
margin-bottom: -.75rem;
|
||||
.section:has(+ .pin-footer) {
|
||||
padding-bottom: var(--chatContentPaddingBottom);
|
||||
}
|
||||
|
||||
.pin-footer {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
width: var(--mainContentWidth);
|
||||
}
|
||||
|
||||
.prompt-input-container {
|
||||
|
|
|
|||
|
|
@ -34,14 +34,12 @@
|
|||
faMicrophone,
|
||||
faLightbulb
|
||||
} from '@fortawesome/free-solid-svg-icons/index'
|
||||
import {
|
||||
faGithub
|
||||
} from '@fortawesome/free-brands-svg-icons/index'
|
||||
// import { encode } from 'gpt-tokenizer'
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
import { countPromptTokens, getMaxModelPrompt, getPrice } from './Stats.svelte'
|
||||
import { autoGrowInputOnEvent, sizeTextElements } from './Util.svelte'
|
||||
import ChatSettingsModal from './ChatSettingsModal.svelte'
|
||||
import Footer from './Footer.svelte'
|
||||
|
||||
// This makes it possible to override the OpenAI API base URL in the .env file
|
||||
const apiBase = import.meta.env.VITE_API_BASE || 'https://api.openai.com'
|
||||
|
|
@ -143,7 +141,7 @@
|
|||
// Scroll to the bottom of the chat on update
|
||||
const focusInput = () => {
|
||||
input.focus()
|
||||
setTimeout(() => document.querySelector('.chat-focus-point')?.scrollIntoView({ behavior: 'smooth', block: 'end' }), 0)
|
||||
setTimeout(() => document.querySelector('body')?.scrollIntoView({ behavior: 'smooth', block: 'end' }), 0)
|
||||
}
|
||||
|
||||
// Send API request
|
||||
|
|
@ -520,10 +518,7 @@
|
|||
<Prompts bind:input />
|
||||
{/if}
|
||||
</div>
|
||||
<div class="lower-mask"/>
|
||||
<div class="lower-mask2"/>
|
||||
<div class="chat-focus-point"></div>
|
||||
<div class="prompt-input-container">
|
||||
<Footer class="prompt-input-container" strongMask={true}>
|
||||
<form class="field has-addons has-addons-right is-align-items-flex-end" on:submit|preventDefault={() => submitForm()}>
|
||||
<p class="control is-expanded">
|
||||
<textarea
|
||||
|
|
@ -565,16 +560,7 @@
|
|||
</p>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="content has-text-centered credit-footer">
|
||||
<p>
|
||||
<strong>ChatGPT-web</strong>
|
||||
by
|
||||
<a target="_blank" href="https://niekvandermaas.nl/">Niek van der Maas</a>
|
||||
<a target="_blank"class="ml-4" href="https://github.com/Niek/chatgpt-web"><span style="position:absolute" class="icon default-text"><Fa size="2x" icon="{faGithub}"/></span></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Footer>
|
||||
|
||||
|
||||
<ChatSettingsModal chatId={chatId} bind:show={showSettingsModal} />
|
||||
|
|
|
|||
|
|
@ -1,12 +1,26 @@
|
|||
<footer class="footer">
|
||||
<div class="content has-text-centered">
|
||||
<script lang="ts">
|
||||
import Fa from 'svelte-fa/src/fa.svelte'
|
||||
import {
|
||||
faGithub
|
||||
} from '@fortawesome/free-brands-svg-icons/index'
|
||||
|
||||
let classes = ''
|
||||
export { classes as class }
|
||||
export let pin: boolean = false
|
||||
export let strongMask: boolean = false
|
||||
</script>
|
||||
|
||||
<div class="lower-mask section-footer-mask" class:pin-footer={pin}/>
|
||||
<div class="lower-mask2" class:strong-mask={strongMask} />
|
||||
<div class="section-footer {classes}" class:pin-footer={pin}>
|
||||
<slot />
|
||||
<div class="content has-text-centered credit-footer">
|
||||
<p>
|
||||
<strong>ChatGPT-web</strong>
|
||||
by
|
||||
<a href="https://niekvandermaas.nl/">Niek van der Maas</a>
|
||||
— see
|
||||
<a href="https://github.com/Niek/chatgpt-web">GitHub</a>
|
||||
for source code.
|
||||
<a target="_blank" href="https://niekvandermaas.nl/">Niek van der Maas</a>
|
||||
<a target="_blank"class="ml-4" href="https://github.com/Niek/chatgpt-web"><span style="position:absolute" class="icon default-text"><Fa size="2x" icon="{faGithub}"/></span></a>
|
||||
<span style="display:inline-block;width:30px;height:20px;"></span>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,63 +1,65 @@
|
|||
<script lang="ts">
|
||||
import { apiKeyStorage } from './Storage.svelte'
|
||||
import { apiKeyStorage } from './Storage.svelte'
|
||||
import Footer from './Footer.svelte'
|
||||
|
||||
$: apiKey = $apiKeyStorage
|
||||
|
||||
</script>
|
||||
|
||||
<section class="section">
|
||||
<article class="message">
|
||||
<div class="message-body">
|
||||
<strong><a href="https://github.com/Niek/chatgpt-web">ChatGPT-web</a></strong>
|
||||
is a simple one-page web interface to the OpenAI ChatGPT API. To use it, you need to register for
|
||||
<a href="https://platform.openai.com/account/api-keys" target="_blank" rel="noreferrer">an OpenAI API key</a>
|
||||
first. OpenAI bills per token (usage-based), which means it is a lot cheaper than
|
||||
<a href="https://openai.com/blog/chatgpt-plus" target="_blank" rel="noreferrer">ChatGPT Plus</a>, unless you use
|
||||
more than 10 million tokens per month. All messages are stored in your browser's local storage, so everything is
|
||||
<strong>private</strong>. You can also close the browser tab and come back later to continue the conversation.
|
||||
</div>
|
||||
</article>
|
||||
<article class="message" class:is-danger={!apiKey} class:is-warning={apiKey}>
|
||||
<div class="message-body">
|
||||
Set your OpenAI API key below:
|
||||
|
||||
<form
|
||||
class="field has-addons has-addons-right"
|
||||
on:submit|preventDefault={(event) => {
|
||||
if (event.target && event.target[0].value) {
|
||||
apiKeyStorage.set(event.target[0].value)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<p class="control is-expanded">
|
||||
<input
|
||||
aria-label="OpenAI API key"
|
||||
type="password"
|
||||
autocomplete="off"
|
||||
class="input"
|
||||
class:is-danger={!apiKey}
|
||||
value={apiKey}
|
||||
/>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button is-info" type="submit">Save</button>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
{#if !apiKey}
|
||||
<p class="help is-danger">
|
||||
Please enter your <a href="https://platform.openai.com/account/api-keys">OpenAI API key</a> above to use ChatGPT-web.
|
||||
It is required to use ChatGPT-web.
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
</article>
|
||||
{#if apiKey}
|
||||
<article class="message is-info">
|
||||
<article class="message">
|
||||
<div class="message-body">
|
||||
Select an existing chat on the sidebar, or
|
||||
<a href={'#/chat/new'}>create a new chat</a>
|
||||
<strong><a href="https://github.com/Niek/chatgpt-web">ChatGPT-web</a></strong>
|
||||
is a simple one-page web interface to the OpenAI ChatGPT API. To use it, you need to register for
|
||||
<a href="https://platform.openai.com/account/api-keys" target="_blank" rel="noreferrer">an OpenAI API key</a>
|
||||
first. OpenAI bills per token (usage-based), which means it is a lot cheaper than
|
||||
<a href="https://openai.com/blog/chatgpt-plus" target="_blank" rel="noreferrer">ChatGPT Plus</a>, unless you use
|
||||
more than 10 million tokens per month. All messages are stored in your browser's local storage, so everything is
|
||||
<strong>private</strong>. You can also close the browser tab and come back later to continue the conversation.
|
||||
</div>
|
||||
</article>
|
||||
{/if}
|
||||
<article class="message" class:is-danger={!apiKey} class:is-warning={apiKey}>
|
||||
<div class="message-body">
|
||||
Set your OpenAI API key below:
|
||||
|
||||
<form
|
||||
class="field has-addons has-addons-right"
|
||||
on:submit|preventDefault={(event) => {
|
||||
if (event.target && event.target[0].value) {
|
||||
apiKeyStorage.set(event.target[0].value)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<p class="control is-expanded">
|
||||
<input
|
||||
aria-label="OpenAI API key"
|
||||
type="password"
|
||||
autocomplete="off"
|
||||
class="input"
|
||||
class:is-danger={!apiKey}
|
||||
value={apiKey}
|
||||
/>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button is-info" type="submit">Save</button>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
{#if !apiKey}
|
||||
<p class="help is-danger">
|
||||
Please enter your <a href="https://platform.openai.com/account/api-keys">OpenAI API key</a> above to use ChatGPT-web.
|
||||
It is required to use ChatGPT-web.
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
</article>
|
||||
{#if apiKey}
|
||||
<article class="message is-info">
|
||||
<div class="message-body">
|
||||
Select an existing chat on the sidebar, or
|
||||
<a href={'#/chat/new'}>create a new chat</a>
|
||||
</div>
|
||||
</article>
|
||||
{/if}
|
||||
</section>
|
||||
<Footer pin={true} />
|
||||
Loading…
Reference in New Issue