Mirrors
/
riffusion-app
mirror of https://github.com/riffusion/riffusion-app.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

better responsiveness 

Still issue of chrome desktop between 724px and 750px. Chrome goes landscape at 724, while safari goes landscape at 750. Using safari as break due to iphone landscape
This commit is contained in:
Seth Forsgren 2022-12-09 09:08:19 -08:00
parent 4bdb9e5fd1
commit 765dacb52b
2 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/PromptPanel.tsx
View File

@ -123,7 +123,16 @@ export default function PromptPanel({
return promptEntryClassNames_6_1[index];
}
default:
console.log("UNHANDLED playingState: " + playingState)
// These states are reached if alpha is greater than 1 but the new inference is not ready
if (appState != AppState.TRANSITION) {
return promptEntryClassNames_5_0[index];
}
else if (playingState == PlayingState.SAME_PROMPT) {
return promptEntryClassNames_5_1[index];
}
else {
return promptEntryClassNames_6_1[index];
}
}
}
@ -131,7 +140,7 @@ export default function PromptPanel({
<>
<main className="z-10 fixed w-full md:static md:w-2/3 md:min-h-screen">
<div className="pl-10 pr-10 md:pl-20">
<div className="landscape:sm:h-[62vh] h-[78vh] md:h-[80vh] flex flex-col justify-around pt-[10vh] pr-5">
<div className="h-[78vh] landscape:sm:max-[750px]:h-[62vh] md:h-[80vh] flex flex-col justify-around pt-[10vh] pr-5">
{getDisplayPrompts().map((prompt, index) => (
<PromptEntry
prompt={prompt.prompt + " "}

4
components/SpectrogramViewer.tsx
View File

@ -53,8 +53,8 @@ export default function SpectrogramViewer({
// if window is between 768px and 1068px, this scales the image to fit using a scaler
const imageScaler = window.innerHeight / 3.40;
const boxScaler = window.innerHeight / 3.76;
const spectrogramImageScale = window.innerWidth > 768 && window.innerWidth < 1068 ? window.innerWidth / imageScaler : 5;
const spectrogramBoxScale = window.innerWidth > 768 && window.innerWidth < 1068 ? window.innerWidth / boxScaler : 5.5;
const spectrogramImageScale = window.innerWidth > 767 && window.innerWidth < 1300 ? window.innerWidth / imageScaler : 5;
const spectrogramBoxScale = window.innerWidth > 767 && window.innerWidth < 1300 ? window.innerWidth / boxScaler : 5.5;
return (
<group>