gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-01 04:54:25 +01:00
Code Issues Actions 13 Packages Projects Releases Wiki Activity

feat(revisions): improve layout on mobile

Browse Source
This commit is contained in:
Elian Doran 2025-11-30 21:13:07 +02:00
parent 7779acc7bc
commit 5ff77c16ab
No known key found for this signature in database
3 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
apps/client/src/widgets/dialogs/revisions.css
View File

@ -2,15 +2,31 @@ body.mobile .revisions-dialog {
.modal-dialog {
height: 95vh;
}
.modal-header {
display: flex;
flex-wrap: wrap;
gap: 0.25em;
font-size: 0.9em;
}
.modal-title {
flex-grow: 1;
width: 100%;
}
.modal-body {
height: 100% !important;
flex-direction: column;
padding: 0;
}
.modal-footer {
font-size: 0.9em;
}
.revision-list {
height: unset;
height: fit-content !important;
max-height: 20vh;
border-bottom: 1px solid var(--main-border-color) !important;
padding: 0 1em;
@ -18,6 +34,7 @@ body.mobile .revisions-dialog {
.modal-body > .revision-content-wrapper {
flex-grow: 1;
max-width: unset !important;
height: 100%;
overflow: auto;
margin: 0;
@ -33,6 +50,9 @@ body.mobile .revisions-dialog {
.revision-title-buttons {
text-align: center;
display: flex;
gap: 0.25em;
flex-wrap: wrap;
}
.revision-content {

2
apps/client/src/widgets/dialogs/revisions.tsx
View File

@ -138,7 +138,7 @@ export default function RevisionsDialog() {
function RevisionsList({ revisions, onSelect, currentRevision }: { revisions: RevisionItem[], onSelect: (val: string) => void, currentRevision?: RevisionItem }) {
return (
<FormList onSelect={onSelect} fullHeight>
<FormList onSelect={onSelect} fullHeight wrapperClassName="revision-list">
{revisions.map((item) =>
<FormListItem
value={item.revisionId}

6
apps/client/src/widgets/react/FormList.tsx
View File

@ -6,15 +6,17 @@ import "./FormList.css";
import { CommandNames } from "../../components/app_context";
import { useStaticTooltip } from "./hooks";
import { handleRightToLeftPlacement, isMobile } from "../../services/utils";
import clsx from "clsx";
interface FormListOpts {
children: ComponentChildren;
onSelect?: (value: string) => void;
style?: CSSProperties;
wrapperClassName?: string;
fullHeight?: boolean;
}
export default function FormList({ children, onSelect, style, fullHeight }: FormListOpts) {
export default function FormList({ children, onSelect, style, fullHeight, wrapperClassName }: FormListOpts) {
const wrapperRef = useRef<HTMLDivElement | null>(null);
const triggerRef = useRef<HTMLButtonElement | null>(null);
@ -43,7 +45,7 @@ export default function FormList({ children, onSelect, style, fullHeight }: Form
}, [ fullHeight ]);
return (
<div className="dropdownWrapper" ref={wrapperRef} style={builtinStyles}>
<div className={clsx("dropdownWrapper", wrapperClassName)} ref={wrapperRef} style={builtinStyles}>
<div className="dropdown" style={builtinStyles}>
<button
ref={triggerRef}