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

stacking views on mobile

This commit is contained in:
Seth Forsgren 2022-12-08 14:20:55 -08:00
parent b51f969386
commit 808b32ee16
5 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/Info.tsx
View File

@ -20,9 +20,9 @@ export default function Info() {
var classNameCondition = ""
if (open) {
classNameCondition = "fixed z-90 top-44 right-4 md:top-48 md:right-8 top-48 right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
classNameCondition = "fixed z-20 top-44 right-4 md:top-48 md:right-8 top-48 right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
} else {
classNameCondition = "fixed z-90 top-44 right-4 md:top-48 md:right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
classNameCondition = "fixed z-20 top-44 right-4 md:top-48 md:right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
}
return (

4
components/Pause.tsx
View File

@ -22,9 +22,9 @@ export default function Pause({
var classNameCondition = ""
if (paused) {
classNameCondition="animate-pulse fixed z-90 top-4 right-4 md:top-8 md:right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 focus:ring-4 focus:outline-none focus:ring-sky-600 hover:drop-shadow-2xl"
classNameCondition="animate-pulse fixed z-20 top-4 right-4 md:top-8 md:right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 focus:ring-4 focus:outline-none focus:ring-sky-600 hover:drop-shadow-2xl"
} else {
classNameCondition="fixed z-90 top-4 right-4 md:top-8 md:right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
classNameCondition="fixed z-20 top-4 right-4 md:top-8 md:right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
}
return (

2
components/PromptPanel.tsx
View File

@ -129,7 +129,7 @@ export default function PromptPanel({
return (
<>
<main className="fixed md:static md:w-2/3 md:min-h-screen">
<main className="z-10 fixed md:static md:w-2/3 md:min-h-screen">
<div className="pl-10 pr-10 md:pl-20">
<div className="sm-landscape:h-[62vh] h-[78vh] md:h-[80vh] flex flex-col justify-around pt-[10vh] pr-5">
{getDisplayPrompts().map((prompt, index) => (

4
components/Share.tsx
View File

@ -30,9 +30,9 @@ export default function Share({
var classNameCondition = ""
if (open) {
classNameCondition = "fixed z-90 top-24 right-4 md:top-28 md:right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
classNameCondition = "fixed z-20 top-24 right-4 md:top-28 md:right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
} else {
classNameCondition = "fixed z-90 top-24 right-4 md:top-28 md:right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
classNameCondition = "fixed z-20 top-24 right-4 md:top-28 md:right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
}
// function to copy link to moment in song to the clipboard

2
pages/index.tsx
View File

@ -195,7 +195,7 @@ export default function Home() {
<PageHead />
<div className="bg-[#0A2342] flex flex-row min-h-screen text-white">
<div className="w-0 md:w-1/3 min-h-screen">
<div className="w-full z-0 md:w-1/3 min-h-screen">
<ThreeCanvas
paused={paused}
getTime={() => Tone.Transport.seconds}