fix: styles and mobile ux
This commit is contained in:
Yifei Zhang
parent
5f7856cc31
commit
653a740f0f
|
|
@ -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
|
||||
|
||||
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue