From 4c685e1a1ed317bf1146bed50e280db0e1f59f37 Mon Sep 17 00:00:00 2001 From: Webifi Date: Wed, 31 May 2023 07:51:03 -0500 Subject: [PATCH] Add mobile support --- package-lock.json | 28 +++++++ package.json | 2 + src/App.svelte | 6 +- src/app.scss | 154 ++++++++++++++++++++++++++++------ src/lib/ChatOptionMenu.svelte | 2 +- src/lib/Navbar.svelte | 41 ++++++--- src/lib/Sidebar.svelte | 11 +-- src/lib/Storage.svelte | 1 + 8 files changed, 198 insertions(+), 47 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9534d3e..3b15cb1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,8 @@ "name": "chatgpt-web", "version": "0.0.0", "devDependencies": { + "@fortawesome/free-brands-svg-icons": "^6.4.0", + "@fortawesome/free-regular-svg-icons": "^6.4.0", "@fortawesome/free-solid-svg-icons": "^6.4.0", "@fullhuman/postcss-purgecss": "^5.0.0", "@microsoft/fetch-event-source": "^2.0.1", @@ -462,6 +464,32 @@ "node": ">=6" } }, + "node_modules/@fortawesome/free-brands-svg-icons": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.0.tgz", + "integrity": "sha512-qvxTCo0FQ5k2N+VCXb/PZQ+QMhqRVM4OORiO6MXdG6bKolIojGU/srQ1ptvKk0JTbRgaJOfL2qMqGvBEZG7Z6g==", + "dev": true, + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.4.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-regular-svg-icons": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz", + "integrity": "sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==", + "dev": true, + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.4.0" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/@fortawesome/free-solid-svg-icons": { "version": "6.4.0", "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz", diff --git a/package.json b/package.json index 0f57e1e..f65ad40 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,8 @@ "lint": "eslint . --fix" }, "devDependencies": { + "@fortawesome/free-brands-svg-icons": "^6.4.0", + "@fortawesome/free-regular-svg-icons": "^6.4.0", "@fortawesome/free-solid-svg-icons": "^6.4.0", "@fullhuman/postcss-purgecss": "^5.0.0", "@microsoft/fetch-event-source": "^2.0.1", diff --git a/src/App.svelte b/src/App.svelte index 87f3965..7463ad1 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -34,14 +34,14 @@ - +
-
+
-
+
{#key $location} replace('/')}/> {/key} diff --git a/src/app.scss b/src/app.scss index b56616a..b69f35d 100644 --- a/src/app.scss +++ b/src/app.scss @@ -1,3 +1,81 @@ +html { + /* Scrollbar */ + --scrollbarBG: transparent; + --thumbBG: hsl(0, 0%, 60%); /* scollbar color light */ + /* Back-ground */ + --BgColorDark: hsl(228, 10%, 10%); + --BgColorLight: hsl(0, 0%, 100%); + // --BgColorSidebarDark: rgb(28, 30, 36); + --BgColorSidebarDark: rgb(16, 17, 22); + --BgColorSidebarLight: hsla(0, 0%, 93%, 0.354); + + /* Sizes */ + --sidebarTop: 0px; + --sidebarWidth: max(300px, 20%); + --mainContentWidth: calc(100% - var(--sidebarWidth)); + + --sectionPaddingTop: 0px; + + --chatContentPaddingTop: 20px; + --chatContentPaddingRight: 40px; + --chatContentPaddingBottom: 120px; + --chatContentPaddingLeft: 40px; + + --chatInputPaddingTop: 0px; + --chatInputPaddingRight: 60px; + --chatInputPaddingBottom: 10px; + --chatInputPaddingLeft: 60px; +} + +.navbar { + display: none !important; +} + +@media (prefers-color-scheme: dark) { + html { + --thumbBG: #3f3f3f; /* scrollbar color dark */ + } +} + +@media only screen and (max-width: 900px) { + html { + --sidebarWidth: max(250px, 20%); + + --chatContentPaddingTop: 50px; + --chatContentPaddingRight: 20px; + --chatContentPaddingLeft: 20px; + + --chatInputPaddingRight: 30px; + --chatInputPaddingLeft: 30px; + } + +} + +@media only screen and (max-width: 768px) { + .navbar { + display: block !important; + } + html { + --BgColorSidebarLight: hsl(210, 12%, 97%); + // --BgColorSidebarDark: rgb(22, 24, 30); + --sidebarWidth: max(300px, 20%); + --mainContentWidth: calc(100%); + --sidebarTop: 56px; + --chatInputPaddingRight: 20px; + --chatInputPaddingLeft: 20px; + } + .main-menu .gpt-logo { + display: none; + } + .main-menu .level-right { + display: flex; + } + .main-menu .level-item { + margin-bottom: inherit !important; + } +} + + @keyframes rotating { from { transform: rotate(0deg); @@ -155,8 +233,7 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t .dropdown.is-fullwidth { display: flex; - .dropdown-trigger, - .dropdown-menu { +.dropdown-trigger, .dropdown-menu { width: 100%; } } @@ -182,6 +259,18 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t overflow-y: auto; } +@media only screen and (max-width: 768px) { + .main-menu .dropdown-menu .dropdown-content { + max-height: calc(100vh - 112px); + } + .main-menu { + display: none; + } + .main-menu.pinned { + display: block; + } +} + .chat-menu-item { position: relative; } @@ -200,15 +289,25 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t /* Overrides for main layout */ +.column.side-bar-column { + width: var(--sidebarWidth); +} + +.column.main-content-column { + width: var(--mainContentWidth) +} + section.section { padding: 0px; + padding-top: var(--sectionPaddingTop); } aside.menu.main-menu { + z-index:1; position: fixed; - width: 20%; + width: var(--sidebarWidth); padding-right: 20px; - top: 0px; + top: var(--sidebarTop); bottom:0px; } @@ -216,8 +315,8 @@ aside.menu.main-menu .menu-expanse { display: flex; flex-flow: column; height: 100%; - background-color: hsla(0, 0%, 60%, 0.208); - box-shadow: 5px 0px 1px hsla(0, 0%, 60%, 0.208); + background-color: var(--BgColorSidebarLight); + box-shadow: 5px 0px 0px var(--BgColorSidebarLight); } .menu-expanse @@ -236,34 +335,26 @@ aside.menu.main-menu .menu-expanse { color: hsl(0, 0%, 21%) !important; } -html { - --scrollbarBG: $body-background-color; - --thumbBG: #999999; -} - .lower-mask { display: block; position: fixed; bottom: 0px; height: 100px; width: 100%; - background-image: linear-gradient(180deg,hsla(0,0%,100%,0) 13.94%,#fff 54.73%); + background-image: linear-gradient(180deg,hsla(0,0%,100%,0) 13.94%, var(--BgColorLight) 54.73%); } @media (prefers-color-scheme: dark) { - html { - --thumbBG: #3f3f3f; - } .default-text { color: rgb(181, 181, 181) !important; } .lower-mask { - background-image: linear-gradient(180deg,hsla(0,0%,100%,0) 13.94%,#17181c 54.73%); + background-image: linear-gradient(180deg,hsla(0,0%,100%,0) 13.94%, var(--BgColorDark) 54.73%); } aside.menu.main-menu .menu-expanse { - background-color: hsla(0, 0%, 19%, 0.371); - box-shadow: 5px 0px 1px hsla(0, 0%, 19%, 0.371); + background-color: var(--BgColorSidebarDark); + box-shadow: 5px 0px 0px var(--BgColorSidebarDark); } } *::-webkit-scrollbar { @@ -283,23 +374,32 @@ html { } .chat-content { - padding-left: 20px; - padding-top: 40px; - padding-right: 40px; - padding-bottom: 120px; + padding: + var(--chatContentPaddingTop) + var(--chatContentPaddingRight) + var(--chatContentPaddingBottom) + var(--chatContentPaddingLeft) ; } .chat-focus-point { - width:100%; + width: 100%; height: 1px; - margin-bottom: -.75rem;; + /* 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; } .prompt-input-container { position: fixed; bottom: 0px; - width: 80%; - padding: 0px 40px 10px 40px; + width: var(--mainContentWidth); + + padding: + var(--chatInputPaddingTop) + var(--chatInputPaddingRight) + var(--chatInputPaddingBottom) + var(--chatInputPaddingLeft); } .running-total-container { @@ -319,3 +419,5 @@ html { margin-left: 8px; } + + diff --git a/src/lib/ChatOptionMenu.svelte b/src/lib/ChatOptionMenu.svelte index 9cf13dd..1ee605c 100644 --- a/src/lib/ChatOptionMenu.svelte +++ b/src/lib/ChatOptionMenu.svelte @@ -131,7 +131,7 @@
- API Key + API Key
diff --git a/src/lib/Navbar.svelte b/src/lib/Navbar.svelte index 2814155..4ac3ad8 100644 --- a/src/lib/Navbar.svelte +++ b/src/lib/Navbar.svelte @@ -1,21 +1,38 @@ diff --git a/src/lib/Sidebar.svelte b/src/lib/Sidebar.svelte index 55ee78d..09b97b2 100644 --- a/src/lib/Sidebar.svelte +++ b/src/lib/Sidebar.svelte @@ -1,11 +1,12 @@ -