theluyuan/RWKV-Runner
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve mobile view

Browse Source
This commit is contained in:
josc146 2023-11-09 12:21:01 +08:00
parent 07797537d1
commit f03c9cf25f
4 changed files with 61 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/App.tsx
View File

@ -51,10 +51,10 @@ const App: FC = observer(() => {
useEffect(() => setPath(location.pathname), [location]); useEffect(() => setPath(location.pathname), [location]);
return ( return (
<FluentProvider className="h-screen" <FluentProvider
theme={commonStore.settings.darkMode ? webDarkTheme : webLightTheme} theme={commonStore.settings.darkMode ? webDarkTheme : webLightTheme}
data-theme={commonStore.settings.darkMode ? 'dark' : 'light'}> data-theme={commonStore.settings.darkMode ? 'dark' : 'light'}>
<div className="flex h-full"> <div className="flex h-screen">
<div className="flex flex-col w-16 sm:w-48 p-2 justify-between"> <div className="flex flex-col w-16 sm:w-48 p-2 justify-between">
<TabList <TabList
size="large" size="large"

10
frontend/src/pages/Composition.tsx
View File

@ -19,11 +19,13 @@ import { defaultCompositionPrompt } from './defaultConfigs';
import { FileExists, OpenFileFolder, OpenSaveFileDialogBytes } from '../../wailsjs/go/backend_golang/App'; import { FileExists, OpenFileFolder, OpenSaveFileDialogBytes } from '../../wailsjs/go/backend_golang/App';
import { getServerRoot, toastWithButton } from '../utils'; import { getServerRoot, toastWithButton } from '../utils';
import { CompositionParams } from '../types/composition'; import { CompositionParams } from '../types/composition';
import { useMediaQuery } from 'usehooks-ts';
let compositionSseController: AbortController | null = null; let compositionSseController: AbortController | null = null;
const CompositionPanel: FC = observer(() => { const CompositionPanel: FC = observer(() => {
const { t } = useTranslation(); const { t } = useTranslation();
const mq = useMediaQuery('(min-width: 640px)');
const inputRef = useRef<HTMLTextAreaElement>(null); const inputRef = useRef<HTMLTextAreaElement>(null);
const port = commonStore.getCurrentModelConfig().apiParameters.apiPort; const port = commonStore.getCurrentModelConfig().apiParameters.apiPort;
const visualizerRef = useRef<VisualizerElement>(null); const visualizerRef = useRef<VisualizerElement>(null);
@ -204,7 +206,8 @@ const CompositionPanel: FC = observer(() => {
setPrompt(e.target.value); setPrompt(e.target.value);
}} }}
/> />
<div className="flex flex-col gap-1 max-h-48 sm:max-w-sm sm:max-h-full overflow-x-hidden overflow-y-auto p-1"> <div className="flex flex-col gap-1 max-h-48 sm:max-w-sm sm:max-h-full">
<div className="flex flex-col gap-1 grow overflow-x-hidden overflow-y-auto p-1">
<Labeled flex breakline label={t('Max Response Token')} <Labeled flex breakline label={t('Max Response Token')}
desc={t('By default, the maximum number of tokens that can be answered in a single response, it can be changed by the user by specifying API parameters.')} desc={t('By default, the maximum number of tokens that can be answered in a single response, it can be changed by the user by specifying API parameters.')}
content={ content={
@ -260,6 +263,7 @@ const CompositionPanel: FC = observer(() => {
autoPlay: data.checked as boolean autoPlay: data.checked as boolean
}); });
}} /> }} />
</div>
<div className="flex justify-between gap-2"> <div className="flex justify-between gap-2">
<ToolTipButton desc={t('Regenerate')} icon={<ArrowSync20Regular />} onClick={() => { <ToolTipButton desc={t('Regenerate')} icon={<ArrowSync20Regular />} onClick={() => {
compositionSseController?.abort(); compositionSseController?.abort();
@ -298,7 +302,7 @@ const CompositionPanel: FC = observer(() => {
ref={playerRef} ref={playerRef}
style={{ width: '100%' }} style={{ width: '100%' }}
/> />
<Button icon={<Save28Regular />} <Button icon={<Save28Regular />} size={mq ? 'large' : 'medium'} appearance={mq ? 'secondary' : 'subtle'}
onClick={() => { onClick={() => {
if (params.midi) { if (params.midi) {
OpenSaveFileDialogBytes('*.mid', 'music.mid', Array.from(new Uint8Array(params.midi))).then((path) => { OpenSaveFileDialogBytes('*.mid', 'music.mid', Array.from(new Uint8Array(params.midi))).then((path) => {
@ -314,7 +318,7 @@ const CompositionPanel: FC = observer(() => {
} }
}} }}
> >
{t('Save')} {mq ? t('Save') : ''}
</Button> </Button>
</div> </div>
</div> </div>

2
frontend/src/pages/Home.tsx
View File

@ -89,7 +89,7 @@ const Home: FC = observer(() => {
return commonStore.platform === 'web' ? return commonStore.platform === 'web' ?
( (
<div className="flex flex-col gap-2 h-full"> <div className="flex flex-col gap-2 h-full overflow-x-hidden overflow-y-auto">
<img className="rounded-xl select-none object-cover grow" <img className="rounded-xl select-none object-cover grow"
style={{ maxHeight: '40%' }} src={banner} /> style={{ maxHeight: '40%' }} src={banner} />
<div className="grow"></div> <div className="grow"></div>

1
frontend/src/style.scss
View File

@ -14,7 +14,6 @@
body { body {
margin: 0; margin: 0;
overflow: hidden;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }