Fix some layout issues

This commit is contained in:
Webifi 2023-06-01 08:02:35 -05:00
parent 427663167a
commit 2c4faa6944
5 changed files with 113 additions and 106 deletions

View File

@ -35,19 +35,19 @@
<Navbar /> <Navbar />
<section class="section root-section"> <!-- <section class="section root-section"> -->
<div class="container is-fullhd"> <!-- <div class="container is-fullhd"> -->
<div class="columns"> <!-- <div class="columns"> -->
<div class="column is-one-fifth side-bar-column"> <div class="side-bar-column">
<Sidebar /> <Sidebar />
</div> </div>
<div class="column is-four-fifths main-content-column" id="content"> <div class="main-content-column" id="content">
{#key $location} {#key $location}
<Router {routes} on:conditionsFailed={() => replace('/')}/> <Router {routes} on:conditionsFailed={() => replace('/')}/>
{/key} {/key}
</div> </div>
</div> <!-- </div> -->
</div> <!-- </div> -->
</section> <!-- </section> -->
<!-- <Footer /> --> <!-- <Footer /> -->

View File

@ -30,7 +30,7 @@ html {
--chatInputPaddingBottom: 10px; --chatInputPaddingBottom: 10px;
--chatInputPaddingLeft: 60px; --chatInputPaddingLeft: 60px;
--BgColor: var(-BgColorLight) /* leave this */ --BgColor: var(-BgColorLight);
} }
.navbar { .navbar {
@ -69,6 +69,7 @@ html {
--sidebarWidth: max(300px, 20%); --sidebarWidth: max(300px, 20%);
--mainContentWidth: calc(100%); --mainContentWidth: calc(100%);
--sidebarTop: 56px; --sidebarTop: 56px;
--sectionPaddingTop: 56px;
--chatInputPaddingRight: 20px; --chatInputPaddingRight: 20px;
--chatInputPaddingLeft: 20px; --chatInputPaddingLeft: 20px;
} }
@ -99,10 +100,6 @@ html {
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
min-height: 100vh; min-height: 100vh;
section.section.root-section {
flex-grow: 1;
}
} }
.is-disabled { .is-disabled {
@ -202,8 +199,6 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
} }
} }
/* Support for copy code button */ /* Support for copy code button */
.code-block>button { .code-block>button {
position: absolute; position: absolute;
@ -297,17 +292,16 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
/* Overrides for main layout */ /* Overrides for main layout */
.column.side-bar-column { .side-bar-column {
width: var(--sidebarWidth); width: var(--sidebarWidth);
} }
.column.main-content-column { .main-content-column {
width: var(--mainContentWidth) margin-left: auto;
} margin-right: 0px;
width: var(--mainContentWidth);
section.section.root-section {
padding: 0px;
padding-top: var(--sectionPaddingTop); padding-top: var(--sectionPaddingTop);
position: relative;
} }
aside.menu.main-menu { 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%); 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) { @media (prefers-color-scheme: dark) {
.default-text { .default-text {
@ -365,6 +367,8 @@ aside.menu.main-menu .menu-expanse {
box-shadow: 5px 0px 0px var(--BgColorSidebarDark); box-shadow: 5px 0px 0px var(--BgColorSidebarDark);
} }
} }
*::-webkit-scrollbar { *::-webkit-scrollbar {
width: 11px; width: 11px;
} }
@ -389,13 +393,14 @@ aside.menu.main-menu .menu-expanse {
var(--chatContentPaddingLeft) ; var(--chatContentPaddingLeft) ;
} }
.chat-focus-point { .section:has(+ .pin-footer) {
width: 100%; padding-bottom: var(--chatContentPaddingBottom);
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 .pin-footer {
this -.75rem, then scroll to the bottom of this works, but I don't like it.*/ position: fixed;
margin-bottom: -.75rem; bottom: 0px;
width: var(--mainContentWidth);
} }
.prompt-input-container { .prompt-input-container {

View File

@ -34,14 +34,12 @@
faMicrophone, faMicrophone,
faLightbulb faLightbulb
} from '@fortawesome/free-solid-svg-icons/index' } from '@fortawesome/free-solid-svg-icons/index'
import {
faGithub
} from '@fortawesome/free-brands-svg-icons/index'
// import { encode } from 'gpt-tokenizer' // import { encode } from 'gpt-tokenizer'
import { v4 as uuidv4 } from 'uuid' import { v4 as uuidv4 } from 'uuid'
import { countPromptTokens, getMaxModelPrompt, getPrice } from './Stats.svelte' import { countPromptTokens, getMaxModelPrompt, getPrice } from './Stats.svelte'
import { autoGrowInputOnEvent, sizeTextElements } from './Util.svelte' import { autoGrowInputOnEvent, sizeTextElements } from './Util.svelte'
import ChatSettingsModal from './ChatSettingsModal.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 // 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' 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 // Scroll to the bottom of the chat on update
const focusInput = () => { const focusInput = () => {
input.focus() 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 // Send API request
@ -520,10 +518,7 @@
<Prompts bind:input /> <Prompts bind:input />
{/if} {/if}
</div> </div>
<div class="lower-mask"/> <Footer class="prompt-input-container" strongMask={true}>
<div class="lower-mask2"/>
<div class="chat-focus-point"></div>
<div class="prompt-input-container">
<form class="field has-addons has-addons-right is-align-items-flex-end" on:submit|preventDefault={() => submitForm()}> <form class="field has-addons has-addons-right is-align-items-flex-end" on:submit|preventDefault={() => submitForm()}>
<p class="control is-expanded"> <p class="control is-expanded">
<textarea <textarea
@ -565,16 +560,7 @@
</p> </p>
{/each} {/each}
</div> </div>
<div class="content has-text-centered credit-footer"> </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>
<ChatSettingsModal chatId={chatId} bind:show={showSettingsModal} /> <ChatSettingsModal chatId={chatId} bind:show={showSettingsModal} />

View File

@ -1,12 +1,26 @@
<footer class="footer"> <script lang="ts">
<div class="content has-text-centered"> 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> <p>
<strong>ChatGPT-web</strong> <strong>ChatGPT-web</strong>
by by
<a href="https://niekvandermaas.nl/">Niek van der Maas</a> <a target="_blank" href="https://niekvandermaas.nl/">Niek van der Maas</a>
&mdash; see <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>
<a href="https://github.com/Niek/chatgpt-web">GitHub</a> <span style="display:inline-block;width:30px;height:20px;"></span>
for source code.
</p> </p>
</div> </div>
</footer> </div>

View File

@ -1,12 +1,13 @@
<script lang="ts"> <script lang="ts">
import { apiKeyStorage } from './Storage.svelte' import { apiKeyStorage } from './Storage.svelte'
import Footer from './Footer.svelte'
$: apiKey = $apiKeyStorage $: apiKey = $apiKeyStorage
</script> </script>
<section class="section"> <section class="section">
<article class="message"> <article class="message">
<div class="message-body"> <div class="message-body">
<strong><a href="https://github.com/Niek/chatgpt-web">ChatGPT-web</a></strong> <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 is a simple one-page web interface to the OpenAI ChatGPT API. To use it, you need to register for
@ -16,8 +17,8 @@ $: apiKey = $apiKeyStorage
more than 10 million tokens per month. All messages are stored in your browser's local storage, so everything is 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. <strong>private</strong>. You can also close the browser tab and come back later to continue the conversation.
</div> </div>
</article> </article>
<article class="message" class:is-danger={!apiKey} class:is-warning={apiKey}> <article class="message" class:is-danger={!apiKey} class:is-warning={apiKey}>
<div class="message-body"> <div class="message-body">
Set your OpenAI API key below: Set your OpenAI API key below:
@ -51,13 +52,14 @@ $: apiKey = $apiKeyStorage
</p> </p>
{/if} {/if}
</div> </div>
</article> </article>
{#if apiKey} {#if apiKey}
<article class="message is-info"> <article class="message is-info">
<div class="message-body"> <div class="message-body">
Select an existing chat on the sidebar, or Select an existing chat on the sidebar, or
<a href={'#/chat/new'}>create a new chat</a> <a href={'#/chat/new'}>create a new chat</a>
</div> </div>
</article> </article>
{/if} {/if}
</section> </section>
<Footer pin={true} />