Skip to content

Commit 653a740

Browse files
YidadaaYidadaa
committed
fix: styles and mobile ux
1 parent 5f7856c commit 653a740

File tree

5 files changed

+62
-53
lines changed

5 files changed

+62
-53
lines changed

‎.gitpod.yml

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

‎app/components/home.module.scss

+10-12
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
.tight-container {
2828
--window-width: 100vw;
2929
--window-height: 100vh;
30-
--window-content-width: calc(var(--window-width) - var(--sidebar-width));
30+
--window-content-width: calc(100% - var(--sidebar-width));
3131

3232
@include container();
3333

@@ -113,8 +113,7 @@
113113
overflow: auto;
114114
}
115115

116-
.chat-list {
117-
}
116+
.chat-list {}
118117

119118
.chat-item {
120119
padding: 10px 14px;
@@ -135,6 +134,7 @@
135134
opacity: 0;
136135
transform: translateY(20px);
137136
}
137+
138138
to {
139139
opacity: 1;
140140
transform: translateY(0px);
@@ -167,12 +167,12 @@
167167
opacity: 0;
168168
}
169169

170-
.chat-item:hover > .chat-item-delete {
170+
.chat-item:hover>.chat-item-delete {
171171
opacity: 0.5;
172172
right: 10px;
173173
}
174174

175-
.chat-item:hover > .chat-item-delete:hover {
175+
.chat-item:hover>.chat-item-delete:hover {
176176
opacity: 1;
177177
}
178178

@@ -184,11 +184,9 @@
184184
margin-top: 8px;
185185
}
186186

187-
.chat-item-count {
188-
}
187+
.chat-item-count {}
189188

190-
.chat-item-date {
191-
}
189+
.chat-item-date {}
192190

193191
.sidebar-tail {
194192
display: flex;
@@ -236,7 +234,7 @@
236234
animation: slide-in ease 0.3s;
237235
}
238236

239-
.chat-message-user > .chat-message-container {
237+
.chat-message-user>.chat-message-container {
240238
align-items: flex-end;
241239
}
242240

@@ -275,7 +273,7 @@
275273
border: var(--border-in-light);
276274
}
277275

278-
.chat-message-user > .chat-message-container > .chat-message-item {
276+
.chat-message-user>.chat-message-container>.chat-message-item {
279277
background-color: var(--second);
280278
}
281279

@@ -331,4 +329,4 @@
331329
position: absolute;
332330
right: 30px;
333331
bottom: 10px;
334-
}
332+
}

‎app/components/home.tsx

+20-21
Original file line numberDiff line numberDiff line change
@@ -60,9 +60,8 @@ export function ChatItem(props: {
6060
}) {
6161
return (
6262
<div
63-
className={`${styles["chat-item"]} ${
64-
props.selected && styles["chat-item-selected"]
65-
}`}
63+
className={`${styles["chat-item"]} ${props.selected && styles["chat-item-selected"]
64+
}`}
6665
onClick={props.onClick}
6766
>
6867
<div className={styles["chat-item-title"]}>{props.title}</div>
@@ -152,25 +151,25 @@ export function Chat(props: { showSideBar?: () => void }) {
152151
.concat(
153152
isLoading
154153
? [
155-
{
156-
role: "assistant",
157-
content: "……",
158-
date: new Date().toLocaleString(),
159-
preview: true,
160-
},
161-
]
154+
{
155+
role: "assistant",
156+
content: "……",
157+
date: new Date().toLocaleString(),
158+
preview: true,
159+
},
160+
]
162161
: []
163162
)
164163
.concat(
165164
userInput.length > 0
166165
? [
167-
{
168-
role: "user",
169-
content: userInput,
170-
date: new Date().toLocaleString(),
171-
preview: true,
172-
},
173-
]
166+
{
167+
role: "user",
168+
content: userInput,
169+
date: new Date().toLocaleString(),
170+
preview: true,
171+
},
172+
]
174173
: []
175174
);
176175

@@ -236,7 +235,7 @@ export function Chat(props: { showSideBar?: () => void }) {
236235
)}
237236
<div className={styles["chat-message-item"]}>
238237
{(message.preview || message.content.length === 0) &&
239-
!isUser ? (
238+
!isUser ? (
240239
<LoadingIcon />
241240
) : (
242241
<div className="markdown-body">
@@ -318,12 +317,12 @@ export function Home() {
318317

319318
return (
320319
<div
321-
className={`${
322-
config.tightBorder ? styles["tight-container"] : styles.container
323-
}`}
320+
className={`${config.tightBorder ? styles["tight-container"] : styles.container
321+
}`}
324322
>
325323
<div
326324
className={styles.sidebar + ` ${showSideBar && styles["sidebar-show"]}`}
325+
onClick={() => setShowSideBar(false)}
327326
>
328327
<div className={styles["sidebar-header"]}>
329328
<div className={styles["sidebar-title"]}>ChatGPT Next</div>

‎app/globals.scss

+5-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
--window-width: 90vw;
4646
--window-height: 90vh;
4747
--sidebar-width: 300px;
48-
--window-content-width: calc(var(--window-width) - var(--sidebar-width));
48+
--window-content-width: calc(100% - var(--sidebar-width));
4949
--message-max-width: 80%;
5050
}
5151

@@ -155,3 +155,7 @@ input[type="range"]::-webkit-slider-thumb:hover {
155155
transform: scaleY(1.2);
156156
width: 24px;
157157
}
158+
159+
div.math {
160+
overflow-x: auto;
161+
}

‎app/markdown.scss

+16-19
Original file line numberDiff line numberDiff line change
@@ -319,7 +319,7 @@
319319
cursor: pointer;
320320
}
321321

322-
.markdown-body details:not([open]) > *:not(summary) {
322+
.markdown-body details:not([open])>*:not(summary) {
323323
display: none !important;
324324
}
325325

@@ -415,7 +415,6 @@
415415
.markdown-body p {
416416
margin-top: 0;
417417
margin-bottom: 10px;
418-
overflow: auto;
419418
}
420419

421420
.markdown-body blockquote {
@@ -490,11 +489,11 @@
490489
content: "";
491490
}
492491

493-
.markdown-body > *:first-child {
492+
.markdown-body>*:first-child {
494493
margin-top: 0 !important;
495494
}
496495

497-
.markdown-body > *:last-child {
496+
.markdown-body>*:last-child {
498497
margin-bottom: 0 !important;
499498
}
500499

@@ -530,11 +529,11 @@
530529
margin-bottom: 16px;
531530
}
532531

533-
.markdown-body blockquote > :first-child {
532+
.markdown-body blockquote> :first-child {
534533
margin-top: 0;
535534
}
536535

537-
.markdown-body blockquote > :last-child {
536+
.markdown-body blockquote> :last-child {
538537
margin-bottom: 0;
539538
}
540539

@@ -633,7 +632,7 @@
633632
list-style-type: decimal;
634633
}
635634

636-
.markdown-body div > ol:not([type]) {
635+
.markdown-body div>ol:not([type]) {
637636
list-style-type: decimal;
638637
}
639638

@@ -645,11 +644,11 @@
645644
margin-bottom: 0;
646645
}
647646

648-
.markdown-body li > p {
647+
.markdown-body li>p {
649648
margin-top: 16px;
650649
}
651650

652-
.markdown-body li + li {
651+
.markdown-body li+li {
653652
margin-top: 0.25em;
654653
}
655654

@@ -712,7 +711,7 @@
712711
overflow: hidden;
713712
}
714713

715-
.markdown-body span.frame > span {
714+
.markdown-body span.frame>span {
716715
display: block;
717716
float: left;
718717
width: auto;
@@ -740,7 +739,7 @@
740739
clear: both;
741740
}
742741

743-
.markdown-body span.align-center > span {
742+
.markdown-body span.align-center>span {
744743
display: block;
745744
margin: 13px auto 0;
746745
overflow: hidden;
@@ -758,7 +757,7 @@
758757
clear: both;
759758
}
760759

761-
.markdown-body span.align-right > span {
760+
.markdown-body span.align-right>span {
762761
display: block;
763762
margin: 13px 0 0;
764763
overflow: hidden;
@@ -788,7 +787,7 @@
788787
overflow: hidden;
789788
}
790789

791-
.markdown-body span.float-right > span {
790+
.markdown-body span.float-right>span {
792791
display: block;
793792
margin: 13px auto 0;
794793
overflow: hidden;
@@ -822,7 +821,7 @@
822821
font-size: 100%;
823822
}
824823

825-
.markdown-body pre > code {
824+
.markdown-body pre>code {
826825
padding: 0;
827826
margin: 0;
828827
word-break: normal;
@@ -1086,7 +1085,7 @@
10861085
cursor: pointer;
10871086
}
10881087

1089-
.markdown-body .task-list-item + .task-list-item {
1088+
.markdown-body .task-list-item+.task-list-item {
10901089
margin-top: 4px;
10911090
}
10921091

@@ -1108,9 +1107,7 @@
11081107
}
11091108

11101109
.markdown-body .contains-task-list:hover .task-list-item-convert-container,
1111-
.markdown-body
1112-
.contains-task-list:focus-within
1113-
.task-list-item-convert-container {
1110+
.markdown-body .contains-task-list:focus-within .task-list-item-convert-container {
11141111
display: block;
11151112
width: auto;
11161113
height: 24px;
@@ -1120,4 +1117,4 @@
11201117

11211118
.markdown-body ::-webkit-calendar-picker-indicator {
11221119
filter: invert(50%);
1123-
}
1120+
}

0 commit comments

Comments
 (0)