fix: styles and mobile ux

This commit is contained in:
Yifei Zhang 2023-03-15 03:54:14 +00:00
parent 5f7856cc31
commit 653a740f0f
5 changed files with 62 additions and 53 deletions

11
.gitpod.yml Normal file
View File

@ -0,0 +1,11 @@
# This configuration file was automatically generated by Gitpod.
# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
# and commit this file to your remote git repository to share the goodness with others.
# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
tasks:
- init: yarn install && yarn run dev
command: yarn run dev

View File

@ -27,7 +27,7 @@
.tight-container {
--window-width: 100vw;
--window-height: 100vh;
--window-content-width: calc(var(--window-width) - var(--sidebar-width));
--window-content-width: calc(100% - var(--sidebar-width));
@include container();
@ -113,8 +113,7 @@
overflow: auto;
}
.chat-list {
}
.chat-list {}
.chat-item {
padding: 10px 14px;
@ -135,6 +134,7 @@
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0px);
@ -167,12 +167,12 @@
opacity: 0;
}
.chat-item:hover > .chat-item-delete {
.chat-item:hover>.chat-item-delete {
opacity: 0.5;
right: 10px;
}
.chat-item:hover > .chat-item-delete:hover {
.chat-item:hover>.chat-item-delete:hover {
opacity: 1;
}
@ -184,11 +184,9 @@
margin-top: 8px;
}
.chat-item-count {
}
.chat-item-count {}
.chat-item-date {
}
.chat-item-date {}
.sidebar-tail {
display: flex;
@ -236,7 +234,7 @@
animation: slide-in ease 0.3s;
}
.chat-message-user > .chat-message-container {
.chat-message-user>.chat-message-container {
align-items: flex-end;
}
@ -275,7 +273,7 @@
border: var(--border-in-light);
}
.chat-message-user > .chat-message-container > .chat-message-item {
.chat-message-user>.chat-message-container>.chat-message-item {
background-color: var(--second);
}
@ -331,4 +329,4 @@
position: absolute;
right: 30px;
bottom: 10px;
}
}

View File

@ -60,9 +60,8 @@ export function ChatItem(props: {
}) {
return (
<div
className={`${styles["chat-item"]} ${
props.selected && styles["chat-item-selected"]
}`}
className={`${styles["chat-item"]} ${props.selected && styles["chat-item-selected"]
}`}
onClick={props.onClick}
>
<div className={styles["chat-item-title"]}>{props.title}</div>
@ -152,25 +151,25 @@ export function Chat(props: { showSideBar?: () => void }) {
.concat(
isLoading
? [
{
role: "assistant",
content: "……",
date: new Date().toLocaleString(),
preview: true,
},
]
{
role: "assistant",
content: "……",
date: new Date().toLocaleString(),
preview: true,
},
]
: []
)
.concat(
userInput.length > 0
? [
{
role: "user",
content: userInput,
date: new Date().toLocaleString(),
preview: true,
},
]
{
role: "user",
content: userInput,
date: new Date().toLocaleString(),
preview: true,
},
]
: []
);
@ -236,7 +235,7 @@ export function Chat(props: { showSideBar?: () => void }) {
)}
<div className={styles["chat-message-item"]}>
{(message.preview || message.content.length === 0) &&
!isUser ? (
!isUser ? (
<LoadingIcon />
) : (
<div className="markdown-body">
@ -318,12 +317,12 @@ export function Home() {
return (
<div
className={`${
config.tightBorder ? styles["tight-container"] : styles.container
}`}
className={`${config.tightBorder ? styles["tight-container"] : styles.container
}`}
>
<div
className={styles.sidebar + ` ${showSideBar && styles["sidebar-show"]}`}
onClick={() => setShowSideBar(false)}
>
<div className={styles["sidebar-header"]}>
<div className={styles["sidebar-title"]}>ChatGPT Next</div>

View File

@ -45,7 +45,7 @@
--window-width: 90vw;
--window-height: 90vh;
--sidebar-width: 300px;
--window-content-width: calc(var(--window-width) - var(--sidebar-width));
--window-content-width: calc(100% - var(--sidebar-width));
--message-max-width: 80%;
}
@ -155,3 +155,7 @@ input[type="range"]::-webkit-slider-thumb:hover {
transform: scaleY(1.2);
width: 24px;
}
div.math {
overflow-x: auto;
}

View File

@ -319,7 +319,7 @@
cursor: pointer;
}
.markdown-body details:not([open]) > *:not(summary) {
.markdown-body details:not([open])>*:not(summary) {
display: none !important;
}
@ -415,7 +415,6 @@
.markdown-body p {
margin-top: 0;
margin-bottom: 10px;
overflow: auto;
}
.markdown-body blockquote {
@ -490,11 +489,11 @@
content: "";
}
.markdown-body > *:first-child {
.markdown-body>*:first-child {
margin-top: 0 !important;
}
.markdown-body > *:last-child {
.markdown-body>*:last-child {
margin-bottom: 0 !important;
}
@ -530,11 +529,11 @@
margin-bottom: 16px;
}
.markdown-body blockquote > :first-child {
.markdown-body blockquote> :first-child {
margin-top: 0;
}
.markdown-body blockquote > :last-child {
.markdown-body blockquote> :last-child {
margin-bottom: 0;
}
@ -633,7 +632,7 @@
list-style-type: decimal;
}
.markdown-body div > ol:not([type]) {
.markdown-body div>ol:not([type]) {
list-style-type: decimal;
}
@ -645,11 +644,11 @@
margin-bottom: 0;
}
.markdown-body li > p {
.markdown-body li>p {
margin-top: 16px;
}
.markdown-body li + li {
.markdown-body li+li {
margin-top: 0.25em;
}
@ -712,7 +711,7 @@
overflow: hidden;
}
.markdown-body span.frame > span {
.markdown-body span.frame>span {
display: block;
float: left;
width: auto;
@ -740,7 +739,7 @@
clear: both;
}
.markdown-body span.align-center > span {
.markdown-body span.align-center>span {
display: block;
margin: 13px auto 0;
overflow: hidden;
@ -758,7 +757,7 @@
clear: both;
}
.markdown-body span.align-right > span {
.markdown-body span.align-right>span {
display: block;
margin: 13px 0 0;
overflow: hidden;
@ -788,7 +787,7 @@
overflow: hidden;
}
.markdown-body span.float-right > span {
.markdown-body span.float-right>span {
display: block;
margin: 13px auto 0;
overflow: hidden;
@ -822,7 +821,7 @@
font-size: 100%;
}
.markdown-body pre > code {
.markdown-body pre>code {
padding: 0;
margin: 0;
word-break: normal;
@ -1086,7 +1085,7 @@
cursor: pointer;
}
.markdown-body .task-list-item + .task-list-item {
.markdown-body .task-list-item+.task-list-item {
margin-top: 4px;
}
@ -1108,9 +1107,7 @@
}
.markdown-body .contains-task-list:hover .task-list-item-convert-container,
.markdown-body
.contains-task-list:focus-within
.task-list-item-convert-container {
.markdown-body .contains-task-list:focus-within .task-list-item-convert-container {
display: block;
width: auto;
height: 24px;
@ -1120,4 +1117,4 @@
.markdown-body ::-webkit-calendar-picker-indicator {
filter: invert(50%);
}
}