selfhostyourtech/reflector
2
0
Fork 0
mirror of https://github.com/Monadical-SAS/reflector.git synced 2025-12-20 20:29:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

better layout

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

14
www/app/[domain]/browse/page.tsx
View File

@@ -14,13 +14,7 @@ export default function TranscriptBrowser() {
const { loading, response } = useTranscriptList(page);
return (
<div>
{/*
<div className="flex flex-row gap-2">
<input className="text-sm p-2 w-80 ring-1 ring-slate-900/10 shadow-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 caret-blue-500" placeholder="Search" />
</div>
*/}
<div className="grid grid-rows-layout-topbar gap-2 lg:gap-4 h-full max-h-full">
<div className="flex flex-row gap-2 items-center">
<Title className="mb-5 mt-5 flex-1">Past transcripts</Title>
<Pagination
@@ -48,8 +42,8 @@ export default function TranscriptBrowser() {
&nbsp;to get started.
</div>
)}
<div /** center and max 900px wide */ className="mx-auto max-w-[900px]">
<div className="grid grid-cols-1 gap-2 lg:gap-4 h-full">
<div /** center and max 900px wide */ className="overflow-y-scroll">
<div className="grid grid-cols-1 gap-2 lg:gap-4 h-full mx-auto max-w-[900px]">
{response?.items.map((item: GetTranscript) => (
<div
key={item.id}
@@ -59,7 +53,7 @@ export default function TranscriptBrowser() {
<div className="flex flex-row gap-2 items-start">
<Link
href={`/transcripts/${item.id}`}
className="text-1xl font-semibold flex-1 pl-0 hover:underline focus-within:underline underline-offset-2 decoration-[.5px] font-light px-2"
className="text-1xl flex-1 pl-0 hover:underline focus-within:underline underline-offset-2 decoration-[.5px] font-light px-2"
>
{item.title || item.name}
</Link>

8
www/app/[domain]/layout.tsx
View File

@@ -77,7 +77,11 @@ export default async function RootLayout({ children, params }: LayoutProps) {
return (
<html lang="en">
<body className={poppins.className + " h-screen relative"}>
<body
className={
poppins.className + "h-[100svh] w-[100svw] overflow-hidden relative"
}
>
<FiefWrapper hasAuthCookie={hasAuthCookie}>
<DomainContextProvider config={config}>
<ErrorBoundary fallback={<p>"something went really wrong"</p>}>
@@ -85,7 +89,7 @@ export default async function RootLayout({ children, params }: LayoutProps) {
<ErrorMessage />
<div
id="container"
className="items-center h-[100svh] w-[100svw] p-2 md:p-4 grid grid-rows-layout gap-2 md:gap-4"
className="items-center h-[100svh] w-[100svw] p-2 md:p-4 grid grid-rows-layout-topbar max-h-full gap-2 md:gap-4"
>
<header className="flex justify-between items-center w-full">
{/* Logo on the left */}

6
www/app/[domain]/transcripts/[transcriptId]/page.tsx
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>
);
}

4
www/app/[domain]/transcripts/[transcriptId]/record/page.tsx
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>
);
};

5
www/app/[domain]/transcripts/new/page.tsx
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>
);
};

2
www/tailwind.config.js
View File

@@ -9,7 +9,7 @@ module.exports = {
theme: {
extend: {
gridTemplateRows: {
layout: "auto auto minmax(0, 1fr)",
"layout-topbar": "auto minmax(0,1fr)",
"mobile-inner": "minmax(0, 2fr) minmax(0, 1fr)",
"layout-one": "minmax(0, 1fr) auto",
},