ershisan99/md-preview-desktop
1
0
Fork 0
mirror of https://github.com/ershisan99/md-preview-desktop.git synced 2025-12-16 20:59:24 +00:00
Code Issues Packages Projects Releases 1 Wiki Activity

feat: add responsive design, update packages

Browse Source
This commit is contained in:
andres
2023-10-21 14:35:31 +02:00
parent ef9ed77552
commit 15705325b2
5 changed files with 34 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
package-lock.json generated
View File

@@ -12,8 +12,8 @@
"@electron-toolkit/preload": "^2.0.0",
"@electron-toolkit/utils": "^2.0.0",
"@fontsource/roboto": "^5.0.8",
"@it-incubator/md-bundler": "0.0.8",
"@it-incubator/mdx-components": "0.0.4",
"@it-incubator/md-bundler": "0.0.9",
"@it-incubator/mdx-components": "0.0.5",
"@it-incubator/ui-kit": "0.2.18",
"builtin-modules": "^3.3.0",
"chokidar": "^3.5.3",
@@ -1744,9 +1744,9 @@
}
},
"node_modules/@it-incubator/md-bundler": {
"version": "0.0.8",
"resolved": "https://registry.npmjs.org/@it-incubator/md-bundler/-/md-bundler-0.0.8.tgz",
"integrity": "sha512-c0nGqmfzdTuClnmp2Sp9IjNvNw7+nnIMcuv3U4pKWop6E01B1wRJ8UpYIpyVpbVQhpu3HCqVn9y38hP3GGtjZg==",
"version": "0.0.9",
"resolved": "https://registry.npmjs.org/@it-incubator/md-bundler/-/md-bundler-0.0.9.tgz",
"integrity": "sha512-wG5WdbJroLRBjtQ9otT5qFgewqirO+h2tOs6wi2VHVnX3/m9acGGwsB3OJhIKxEfGTBiBAhC1Hu6FpvDpXBLBA==",
"dependencies": {
"@mdx-js/mdx": "^2.3.0",
"esbuild": "^0.19.2",
@@ -1770,9 +1770,9 @@
}
},
"node_modules/@it-incubator/mdx-components": {
"version": "0.0.4",
"resolved": "https://registry.npmjs.org/@it-incubator/mdx-components/-/mdx-components-0.0.4.tgz",
"integrity": "sha512-GEqGlg/5u9Tu1xahabRMEKv2g/FxMEhWhMmdIYclJDCqTJfguUkmIWeYjKgJVgJFqxeuJQNpzd6D850RuviEJQ==",
"version": "0.0.5",
"resolved": "https://registry.npmjs.org/@it-incubator/mdx-components/-/mdx-components-0.0.5.tgz",
"integrity": "sha512-UGqkxo+m/Z49dZem/hPb+OyCLdV6p/f0nw9eTR0W6FWJ09SyuKlkEGH2iiBJ8fwtllJ5+K6/yQW+zjwWxh31DQ==",
"dependencies": {
"@radix-ui/react-scroll-area": "1.0.4",
"@radix-ui/react-tabs": "1.0.4",

4
package.json
View File

@@ -23,8 +23,8 @@
"@electron-toolkit/preload": "^2.0.0",
"@electron-toolkit/utils": "^2.0.0",
"@fontsource/roboto": "^5.0.8",
"@it-incubator/md-bundler": "0.0.8",
"@it-incubator/mdx-components": "0.0.4",
"@it-incubator/md-bundler": "0.0.9",
"@it-incubator/mdx-components": "0.0.5",
"@it-incubator/ui-kit": "0.2.18",
"builtin-modules": "^3.3.0",
"chokidar": "^3.5.3",

2
src/renderer/src/components/file-selector/file-selector.module.scss
View File

@@ -1,4 +1,6 @@
.container {
position: sticky;
top: 0;
> [class*='tree'] {
margin-top: 0;
> [class*='container'] {

20
src/renderer/src/components/view/view.module.scss
View File

@@ -33,3 +33,23 @@
overflow: auto;
padding: 31px 24px;
}
@media (max-width: 1020px) {
.container {
grid-template-columns: 200px minmax(65ch, 100%);
}
.tocContainer {
display: none;
}
}
@media (max-width: 830px) {
.container {
grid-template-columns: 1fr;
> :first-child {
border-right: none;
}
}
.fileSelectorContainer {
border-bottom: 1px solid var(--color-border-primary);
}
}

4
src/renderer/src/components/view/view.tsx
View File

@@ -62,7 +62,7 @@ export const View = () => {
<div className={s.page}>
<ImagePreview onClose={() => setSrcPreview('')} open={!!srcPreview} src={srcPreview} />
<div className={s.container}>
<div>
<div className={s.fileSelectorContainer}>
{directoryContents && (
<MdxFileSelector
data={directoryContents.data}
@@ -74,7 +74,7 @@ export const View = () => {
<Prose as={'article'} className={s.root}>
<MdxComponent code={code} onImageClick={setSrcPreview} />
</Prose>
<div>
<div className={s.tocContainer}>
<TableOfContents tocMap={toc?.map} />
</div>
</div>