better layout

This commit is contained in:
Sara
2023-12-08 15:59:35 +01:00
parent f85c57bda1
commit 6e652f7795
6 changed files with 17 additions and 22 deletions

View File

@@ -15,8 +15,6 @@ import TranscriptTitle from "../transcriptTitle";
import Player from "../player";
import WaveformLoading from "../waveformLoading";
import { useRouter } from "next/navigation";
import { faSpinner } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
type TranscriptDetails = {
params: {
@@ -67,7 +65,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
}
return (
<>
<div className="grid grid-rows-layout-topbar h-full max-h-full gap-2 lg:gap-4">
<div className="flex flex-col">
{transcript?.response?.title && (
<TranscriptTitle
@@ -136,6 +134,6 @@ export default function TranscriptDetails(details: TranscriptDetails) {
</section>
</div>
</div>
</>
</div>
);
}

View File

@@ -88,7 +88,7 @@ const TranscriptRecord = (details: TranscriptDetails) => {
}, []);
return (
<>
<div className="grid grid-rows-layout-topbar gap-2 lg:gap-4 max-h-full h-full">
{webSockets.waveform && webSockets.duration && mp3?.media ? (
<Player
topics={webSockets.topics || []}
@@ -166,7 +166,7 @@ const TranscriptRecord = (details: TranscriptDetails) => {
</div>
{disconnected && <DisconnectedIndicator />}
</>
</div>
);
};

View File

@@ -51,8 +51,7 @@ const TranscriptCreate = () => {
useAudioDevice();
return (
<>
<div className="hidden lg:block"></div>
<div className="grid grid-rows-layout-topbar gap-2 lg:gap-4 max-h-full overflow-y-scroll">
<div className="lg:grid lg:grid-cols-2 lg:grid-rows-1 lg:gap-4 lg:h-full h-auto flex flex-col">
<section className="flex flex-col w-full lg:h-full items-center justify-evenly p-4 md:px-6 md:py-8">
<div className="flex flex-col max-w-xl items-center justify-center">
@@ -142,7 +141,7 @@ const TranscriptCreate = () => {
)}
</section>
</div>
</>
</div>
);
};