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); const { loading, response } = useTranscriptList(page);
return ( return (
<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">
<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="flex flex-row gap-2 items-center"> <div className="flex flex-row gap-2 items-center">
<Title className="mb-5 mt-5 flex-1">Past transcripts</Title> <Title className="mb-5 mt-5 flex-1">Past transcripts</Title>
<Pagination <Pagination
@@ -48,8 +42,8 @@ export default function TranscriptBrowser() {
&nbsp;to get started. &nbsp;to get started.
</div> </div>
)} )}
<div /** center and max 900px wide */ className="mx-auto max-w-[900px]"> <div /** center and max 900px wide */ className="overflow-y-scroll">
<div className="grid grid-cols-1 gap-2 lg:gap-4 h-full"> <div className="grid grid-cols-1 gap-2 lg:gap-4 h-full mx-auto max-w-[900px]">
{response?.items.map((item: GetTranscript) => ( {response?.items.map((item: GetTranscript) => (
<div <div
key={item.id} key={item.id}
@@ -59,7 +53,7 @@ export default function TranscriptBrowser() {
<div className="flex flex-row gap-2 items-start"> <div className="flex flex-row gap-2 items-start">
<Link <Link
href={`/transcripts/${item.id}`} 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} {item.title || item.name}
</Link> </Link>

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

@@ -77,7 +77,11 @@ export default async function RootLayout({ children, params }: LayoutProps) {
return ( return (
<html lang="en"> <html lang="en">
<body className={poppins.className + " h-screen relative"}> <body
className={
poppins.className + "h-[100svh] w-[100svw] overflow-hidden relative"
}
>
<FiefWrapper hasAuthCookie={hasAuthCookie}> <FiefWrapper hasAuthCookie={hasAuthCookie}>
<DomainContextProvider config={config}> <DomainContextProvider config={config}>
<ErrorBoundary fallback={<p>"something went really wrong"</p>}> <ErrorBoundary fallback={<p>"something went really wrong"</p>}>
@@ -85,7 +89,7 @@ export default async function RootLayout({ children, params }: LayoutProps) {
<ErrorMessage /> <ErrorMessage />
<div <div
id="container" 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"> <header className="flex justify-between items-center w-full">
{/* Logo on the left */} {/* 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 Player from "../player";
import WaveformLoading from "../waveformLoading"; import WaveformLoading from "../waveformLoading";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { faSpinner } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
type TranscriptDetails = { type TranscriptDetails = {
params: { params: {
@@ -67,7 +65,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
} }
return ( return (
<> <div className="grid grid-rows-layout-topbar h-full max-h-full gap-2 lg:gap-4">
<div className="flex flex-col"> <div className="flex flex-col">
{transcript?.response?.title && ( {transcript?.response?.title && (
<TranscriptTitle <TranscriptTitle
@@ -136,6 +134,6 @@ export default function TranscriptDetails(details: TranscriptDetails) {
</section> </section>
</div> </div>
</div> </div>
</> </div>
); );
} }

4
www/app/[domain]/transcripts/[transcriptId]/record/page.tsx
View File

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

5
www/app/[domain]/transcripts/new/page.tsx
View File

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

2
www/tailwind.config.js
View File

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