优化小屏幕使用体验

This commit is contained in:
sijinhui 2024-02-16 17:12:40 +08:00
parent afa75796d7
commit 3abb503cec
3 changed files with 27 additions and 6 deletions

View File

@ -41,7 +41,7 @@
top: 0; top: 0;
width: var(--sidebar-width); width: var(--sidebar-width);
box-sizing: border-box; box-sizing: border-box;
padding: 20px; padding: 15px;
background-color: var(--second); background-color: var(--second);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -99,18 +99,18 @@
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 320px;
} }
.mobile { .mobile {
display: none; display: none;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 800px) {
.container { .container {
min-height: unset; min-height: unset;
min-width: unset; min-width: unset;
max-height: unset; max-height: unset;
min-width: unset;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
} }
@ -219,7 +219,7 @@
justify-content: space-between; justify-content: space-between;
color: rgb(166, 166, 166); color: rgb(166, 166, 166);
font-size: 12px; font-size: 12px;
margin-top: 8px; //margin-top: 8px;
animation: slide-in ease 0.3s; animation: slide-in ease 0.3s;
} }
@ -338,3 +338,13 @@
.rtl-screen { .rtl-screen {
direction: rtl; direction: rtl;
} }
.custom-sidebar-clear-button {
background-color: transparent !important;
display: flex;
align-items: flex-end;
border-radius: 0;
padding: 0;
height: 20px;
}

View File

@ -231,6 +231,7 @@ export function SideBar(props: { className?: string }) {
</Link> </Link>
</div> </div>
</div> </div>
<div> <div>
<IconButton <IconButton
icon={<AddIcon />} icon={<AddIcon />}
@ -247,6 +248,16 @@ export function SideBar(props: { className?: string }) {
/> />
</div> </div>
</div> </div>
<IconButton
text={Locale.Settings.Danger.Clear.Title}
onClick={async () => {
if (await showConfirm(Locale.Settings.Danger.Clear.Confirm)) {
chatStore.clearAllData();
}
}}
type="danger"
className={styles["custom-sidebar-clear-button"]}
/>
<div <div
className={styles["sidebar-drag"]} className={styles["sidebar-drag"]}

View File

@ -67,7 +67,7 @@
--full-height: 100%; --full-height: 100%;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 800px) {
:root { :root {
--window-width: 100vw; --window-width: 100vw;
--window-height: var(--full-height); --window-height: var(--full-height);
@ -389,4 +389,4 @@ pre {
url('https://cos.xiaosi.cc/fonts/noto-sans/noto-sans-regular.woff') format('woff'), /* Modern Browsers */ url('https://cos.xiaosi.cc/fonts/noto-sans/noto-sans-regular.woff') format('woff'), /* Modern Browsers */
url('https://cos.xiaosi.cc/fonts/noto-sans/noto-sans-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('https://cos.xiaosi.cc/fonts/noto-sans/noto-sans-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://cos.xiaosi.cc/fonts/noto-sans/noto-sans-regular.svg#NotoSans') format('svg'); /* Legacy iOS */ url('https://cos.xiaosi.cc/fonts/noto-sans/noto-sans-regular.svg#NotoSans') format('svg'); /* Legacy iOS */
} }