From e00b513acf43f5f109f191476e8a86464a711268 Mon Sep 17 00:00:00 2001 From: timea-solid <4144203+timea-solid@users.noreply.github.com> Date: Mon, 23 Mar 2026 11:50:37 +0100 Subject: [PATCH 01/18] added preparations for mobile --- README.md | 7 +++ src/databrowser.html | 5 +- src/index.ts | 115 ++++++++++++++++++++++++++++++++++++++-- src/styles/mash.css | 73 +++++++++++++++++++++++++ static/browse-test.html | 2 +- static/browse.html | 2 +- 6 files changed, 197 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 477f993c..1dbba86b 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,7 @@ A colorful dependency tree can be seen [here](https://github.com/solidos/solidos - [Developing mashlib](#developing-mashlib) - [Goals](#goals) - [Typical uses](#typical-uses) +- [Generative AI usage](#generative-ai-usage) ### Documentation @@ -151,3 +152,9 @@ The mashlib part of SolidOS Databrowser Frontend is *read-write;* that is, the u A major limitation of this data browser hack is that current web browsers are made to distrust any code loaded from one domain that uses data from another domain. This makes it hard, strangely complicated, and sometimes impossible to do some things. +## Generative AI usage +The SolidOS team is using GitHub Copilot integrated in Visual Studio Code. +We have added comments in the code to make it explicit which parts are 100% written by AI. + +### Prompt usage hitory: +* Auto model: Looking at these 2 files (databrowser.html and index.ts), I want to redesign mashlib and underlying panes. I have a design for web and one for mobile. How would I go about making sure I can also have a mobile version? \ No newline at end of file diff --git a/src/databrowser.html b/src/databrowser.html index 34b2fc37..066e9d44 100644 --- a/src/databrowser.html +++ b/src/databrowser.html @@ -2,6 +2,7 @@ + <%= htmlWebpackPlugin.options.title %> - + -
+
diff --git a/src/index.ts b/src/index.ts index b55c4a73..93964064 100644 --- a/src/index.ts +++ b/src/index.ts @@ -5,12 +5,18 @@ import versionInfo from './versionInfo' import './styles/mash.css' const global: any = window +const LAYOUT_STORAGE_KEY = 'mashlib-layout' +const MOBILE_BREAKPOINT_PX = 768 + +type ThemeMode = 'light' | 'dark' +type LayoutMode = 'desktop' | 'mobile' +type LayoutPreference = LayoutMode | 'auto' // Theme Management const initializeTheme = () => { const savedTheme = localStorage.getItem('mashlib-theme') const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches - const theme = savedTheme || (prefersDark ? 'dark' : 'light') + const theme = (savedTheme || (prefersDark ? 'dark' : 'light')) as ThemeMode if (theme === 'dark') { document.documentElement.setAttribute('data-theme', 'dark') @@ -19,7 +25,7 @@ const initializeTheme = () => { } } -const setTheme = (theme: 'light' | 'dark') => { +const setTheme = (theme: ThemeMode) => { if (theme === 'dark') { document.documentElement.setAttribute('data-theme', 'dark') } else { @@ -28,12 +34,109 @@ const setTheme = (theme: 'light' | 'dark') => { localStorage.setItem('mashlib-theme', theme) } -const getTheme = (): 'light' | 'dark' => { +const getTheme = (): ThemeMode => { return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light' } +/* Generated by AI */ +/* +* Prompt on auto model: +* Looking at these 2 files (databrowser.html and index.ts), +* I want to redesign mashlib and underlying panes. +* I have a design for web and one for mobile. +* How would I go about making sure I can also have a mobile version? +*/ + +const getStoredLayoutPreference = (): LayoutPreference => { + const storedLayout = localStorage.getItem(LAYOUT_STORAGE_KEY) + + if (storedLayout === 'mobile' || storedLayout === 'desktop' || storedLayout === 'auto') { + return storedLayout + } + + return 'auto' +} + +const resolveAutomaticLayout = (): LayoutMode => { + return window.innerWidth <= MOBILE_BREAKPOINT_PX ? 'mobile' : 'desktop' +} + +const applyLayoutAttributes = (layout: LayoutMode, preference: LayoutPreference) => { + const root = document.documentElement + const inputMode = window.matchMedia('(pointer: coarse)').matches ? 'touch' : 'pointer' + + root.setAttribute('data-layout', layout) + root.setAttribute('data-layout-preference', preference) + root.setAttribute('data-input-mode', inputMode) + root.style.setProperty('--app-height', `${window.innerHeight}px`) + + window.dispatchEvent(new CustomEvent('mashlib:layoutchange', { + detail: { + inputMode, + layout, + preference, + viewport: { + height: window.innerHeight, + width: window.innerWidth + } + } + })) +} + +const updateLayout = (preference: LayoutPreference = getStoredLayoutPreference()): LayoutMode => { + const layout = preference === 'auto' ? resolveAutomaticLayout() : preference + applyLayoutAttributes(layout, preference) + return layout +} + +const setLayoutPreference = (preference: LayoutPreference): LayoutMode => { + if (preference === 'auto') { + localStorage.removeItem(LAYOUT_STORAGE_KEY) + } else { + localStorage.setItem(LAYOUT_STORAGE_KEY, preference) + } + + return updateLayout(preference) +} + +const getLayoutPreference = (): LayoutPreference => { + return getStoredLayoutPreference() +} + +const getLayoutMode = (): LayoutMode => { + return (document.documentElement.getAttribute('data-layout') as LayoutMode) || resolveAutomaticLayout() +} + +const initializeLayout = () => { + let resizeFrame = 0 + const syncLayout = () => { + updateLayout() + } + + const onResize = () => { + if (resizeFrame) { + window.cancelAnimationFrame(resizeFrame) + } + + resizeFrame = window.requestAnimationFrame(() => { + resizeFrame = 0 + syncLayout() + }) + } + + syncLayout() + window.addEventListener('resize', onResize) + + window.matchMedia('(pointer: coarse)').addEventListener('change', syncLayout) + window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT_PX}px)`).addEventListener('change', syncLayout) +} + +/* END of Generated by AI */ + + // Initialize theme on load initializeTheme() +initializeLayout() global.$rdf = $rdf global.panes = panes @@ -45,6 +148,12 @@ global.SolidLogic = { } global.mashlib = { versionInfo, + layout: { + get: getLayoutMode, + getPreference: getLayoutPreference, + init: initializeLayout, + set: setLayoutPreference + }, theme: { set: setTheme, get: getTheme, diff --git a/src/styles/mash.css b/src/styles/mash.css index 4a331aaf..9f05294a 100644 --- a/src/styles/mash.css +++ b/src/styles/mash.css @@ -15,6 +15,7 @@ img[title="Hide details."] { html, body { margin: 0; padding: 0; + min-height: 100%; font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: var(--line-height-base); @@ -63,9 +64,19 @@ a:hover, a:focus { #PageBody { display: flex; flex-direction: column; + min-height: 100vh; + min-height: var(--app-height, 100dvh); +} +#MainContent { + flex: 1 1 auto; + min-width: 0; + min-height: 0; + overflow-x: auto; + overflow-y: auto; } #DummyUUID { flex: 1 0 auto; + min-width: 0; } #PageHeader { flex-shrink: 0; @@ -74,6 +85,17 @@ a:hover, a:focus { flex-shrink: 0; } +.TabulatorOutline { + width: 100%; + min-width: 0; +} + +#outline, +#GlobalDashboard { + width: 100%; + max-width: 100%; +} + .warning { color: var(--color-warning); } @@ -1408,3 +1430,54 @@ End of styles for tableViewPane -moz-box-shadow: $x-axis $y-axis $blur $color; -o-box-shadow: $x-axis $y-axis $blur $color; } + +/* Generated by AI */ +@media screen and (max-width: 768px) { + #PageHeader, + #PageFooter { + width: 100%; + } + + #MainContent { + padding-top: 0.75rem; + padding-right: max(0.75rem, env(safe-area-inset-right)); + padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); + padding-left: max(0.75rem, env(safe-area-inset-left)); + } + + .TabulatorOutline { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + + .TabulatorOutline table { + min-width: 100%; + } + + img.outlineImage, + img.pic, + img.foafPic { + height: auto; + max-width: 100%; + } + + div.description, + div.premises, + div.justification, + div.mildNotice { + box-sizing: border-box; + margin-left: 0; + margin-right: 0; + width: 100%; + } +} + +html[data-layout="mobile"] #PageBody { + min-height: var(--app-height, 100dvh); +} + +html[data-layout="mobile"] #MainContent { + overscroll-behavior-x: contain; +} + +/* END of Generated by AI */ \ No newline at end of file diff --git a/static/browse-test.html b/static/browse-test.html index 20c8938d..4dba3dae 100644 --- a/static/browse-test.html +++ b/static/browse-test.html @@ -102,7 +102,7 @@ -
+
Viewing diff --git a/static/browse.html b/static/browse.html index 20c8938d..4dba3dae 100644 --- a/static/browse.html +++ b/static/browse.html @@ -102,7 +102,7 @@ -
+
Viewing From 97728dfe9f389462dedd3df55c1e9369e4409c37 Mon Sep 17 00:00:00 2001 From: timea-solid <4144203+timea-solid@users.noreply.github.com> Date: Tue, 24 Mar 2026 10:55:32 +0100 Subject: [PATCH 02/18] cnosolidation of mobile options --- src/databrowser.html | 5 +- src/index.ts | 87 +++++++++++++++++--------------- src/layout.ts | 107 ++++++++++++++++++++++++++++++++++++++++ src/theme.ts | 34 +++++++++++++ static/browse-test.html | 3 +- static/browse.html | 3 +- 6 files changed, 194 insertions(+), 45 deletions(-) create mode 100644 src/layout.ts create mode 100644 src/theme.ts diff --git a/src/databrowser.html b/src/databrowser.html index 34b2fc37..066e9d44 100644 --- a/src/databrowser.html +++ b/src/databrowser.html @@ -2,6 +2,7 @@ + <%= htmlWebpackPlugin.options.title %> - + -
+
diff --git a/src/index.ts b/src/index.ts index 320cdee7..98f850ef 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,39 +1,47 @@ import * as $rdf from 'rdflib' import * as panes from 'solid-panes' import { authn, solidLogicSingleton, authSession, store } from 'solid-logic' +import { layout } from './layout' +import { theme } from './theme' +import type { RenderEnvironment } from 'pane-registry' import versionInfo from './versionInfo' import './styles/mash.css' const global: any = window -// Theme Management -const initializeTheme = () => { - const savedTheme = localStorage.getItem('mashlib-theme') - const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches - const theme = savedTheme || (prefersDark ? 'dark' : 'light') +// Build a snapshot of the current render environment +const buildRenderEnvironment = (): RenderEnvironment => ({ + layout: layout.get(), + layoutPreference: layout.getPreference(), + inputMode: layout.getInputMode(), + theme: theme.get(), + viewport: layout.getViewport() +}) + +// Inject or update the environment on the pane context +const syncEnvironmentToContext = () => { - if (theme === 'dark') { - document.documentElement.setAttribute('data-theme', 'dark') - } else { - document.documentElement.removeAttribute('data-theme') + const outliner = panes.getOutliner(document) as any + + if (!outliner) { + console.warn('outliner not ready yet') + return } -} -const setTheme = (theme: 'light' | 'dark') => { - if (theme === 'dark') { - document.documentElement.setAttribute('data-theme', 'dark') - } else { - document.documentElement.removeAttribute('data-theme') + if (!outliner.context) { + console.warn('outliner.context missing: creating fallback context') + outliner.context = {} } - localStorage.setItem('mashlib-theme', theme) -} -const getTheme = (): 'light' | 'dark' => { - return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light' + outliner.context.environment = buildRenderEnvironment() } -// Initialize theme on load -initializeTheme() +// Initialize theme and layout +theme.init() +layout.init() + +// Keep environment in sync on layout/theme changes +window.addEventListener('mashlib:layoutchange', syncEnvironmentToContext) global.$rdf = $rdf global.panes = panes @@ -43,14 +51,7 @@ global.SolidLogic = { store, solidLogicSingleton } -global.mashlib = { - versionInfo, - theme: { - set: setTheme, - get: getTheme, - init: initializeTheme - } -} +global.mashlib = { versionInfo } global.panes.runDataBrowser = function (uri?:string|$rdf.NamedNode|null) { // Set up cross-site proxy @@ -67,11 +68,21 @@ global.panes.runDataBrowser = function (uri?:string|$rdf.NamedNode|null) { console.error('Failed to add web monetization tag to page header') } + window.addEventListener('load', syncEnvironmentToContext) + window.addEventListener('resize', syncEnvironmentToContext) + // Authenticate the user - authn.checkUser().then(function (_profile: any) { - const mainPage = panes.initMainPage(solidLogicSingleton.store, uri) - return mainPage - }) + authn.checkUser() + .then(() => panes.initMainPage(solidLogicSingleton.store, uri)) + .then(() => { + // Inject render environment into pane context after outliner exists + syncEnvironmentToContext() + window.requestAnimationFrame(syncEnvironmentToContext) + }) + .catch((err: any) => { + console.error('runDataBrowser failed', err) + }) + } window.onpopstate = function (_event: any) { @@ -84,13 +95,7 @@ window.onpopstate = function (_event: any) { ) } -// It's not clear where this function is used, so unfortunately we cannot remove it: -function dump (msg: string[]) { - console.log(msg.slice(0, -1)) -} - -global.dump = dump - export { - versionInfo + versionInfo, + buildRenderEnvironment } diff --git a/src/layout.ts b/src/layout.ts new file mode 100644 index 00000000..6c060fbd --- /dev/null +++ b/src/layout.ts @@ -0,0 +1,107 @@ +/* generated by AI - see readme for details*/ +import type { LayoutMode, LayoutPreference } from 'pane-registry' + +const LAYOUT_STORAGE_KEY = 'mashlib-layout' +const MOBILE_BREAKPOINT_PX = 768 + +const getStoredLayoutPreference = (): LayoutPreference => { + const storedLayout = localStorage.getItem(LAYOUT_STORAGE_KEY) + + if (storedLayout === 'mobile' || storedLayout === 'desktop' || storedLayout === 'auto') { + return storedLayout + } + + return 'auto' +} + +const resolveAutomaticLayout = (): LayoutMode => { + return window.innerWidth <= MOBILE_BREAKPOINT_PX ? 'mobile' : 'desktop' +} + +const applyLayoutAttributes = (layout: LayoutMode, preference: LayoutPreference) => { + const root = document.documentElement + const inputMode = window.matchMedia('(pointer: coarse)').matches ? 'touch' : 'pointer' + + root.setAttribute('data-layout', layout) + root.setAttribute('data-layout-preference', preference) + root.setAttribute('data-input-mode', inputMode) + root.style.setProperty('--app-height', `${window.innerHeight}px`) + + window.dispatchEvent(new CustomEvent('mashlib:layoutchange', { + detail: { + inputMode, + layout, + preference, + viewport: { + height: window.innerHeight, + width: window.innerWidth + } + } + })) +} + +const updateLayout = (preference: LayoutPreference = getStoredLayoutPreference()): LayoutMode => { + const layout = preference === 'auto' ? resolveAutomaticLayout() : preference + applyLayoutAttributes(layout, preference) + return layout +} + +const setLayoutPreference = (preference: LayoutPreference): LayoutMode => { + if (preference === 'auto') { + localStorage.removeItem(LAYOUT_STORAGE_KEY) + } else { + localStorage.setItem(LAYOUT_STORAGE_KEY, preference) + } + + return updateLayout(preference) +} + +const getLayoutPreference = (): LayoutPreference => { + return getStoredLayoutPreference() +} + +const getLayoutMode = (): LayoutMode => { + return (document.documentElement.getAttribute('data-layout') as LayoutMode) || resolveAutomaticLayout() +} + +const initializeLayout = () => { + let resizeFrame = 0 + const syncLayout = () => { + updateLayout() + } + + const onResize = () => { + if (resizeFrame) { + window.cancelAnimationFrame(resizeFrame) + } + + resizeFrame = window.requestAnimationFrame(() => { + resizeFrame = 0 + syncLayout() + }) + } + + syncLayout() + window.addEventListener('resize', onResize) + + window.matchMedia('(pointer: coarse)').addEventListener('change', syncLayout) + window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT_PX}px)`).addEventListener('change', syncLayout) +} + +const getInputMode = (): 'touch' | 'pointer' => { + return window.matchMedia('(pointer: coarse)').matches ? 'touch' : 'pointer' +} + +const getViewport = () => ({ + width: window.innerWidth, + height: window.innerHeight +}) + +export const layout = { + get: getLayoutMode, + getInputMode, + getPreference: getLayoutPreference, + getViewport, + init: initializeLayout, + set: setLayoutPreference +} diff --git a/src/theme.ts b/src/theme.ts new file mode 100644 index 00000000..44f6ba9d --- /dev/null +++ b/src/theme.ts @@ -0,0 +1,34 @@ +import type { ThemeMode } from 'pane-registry' + +const THEME_STORAGE_KEY = 'mashlib-theme' + +const applyTheme = (theme: ThemeMode) => { + if (theme === 'dark') { + document.documentElement.setAttribute('data-theme', 'dark') + } else { + document.documentElement.removeAttribute('data-theme') + } +} + +const initializeTheme = () => { + const savedTheme = localStorage.getItem(THEME_STORAGE_KEY) + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches + const theme = (savedTheme || (prefersDark ? 'dark' : 'light')) as ThemeMode + + applyTheme(theme) +} + +const setTheme = (theme: ThemeMode) => { + applyTheme(theme) + localStorage.setItem(THEME_STORAGE_KEY, theme) +} + +const getTheme = (): ThemeMode => { + return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light' +} + +export const theme = { + get: getTheme, + init: initializeTheme, + set: setTheme +} diff --git a/static/browse-test.html b/static/browse-test.html index 20c8938d..f7cd5e70 100644 --- a/static/browse-test.html +++ b/static/browse-test.html @@ -2,6 +2,7 @@ + - - - -
-
-
- - - - - - - - - -
-
-
-
- + + + + + + + + + +
+ + +
+ +
+ + + + +
+ + + diff --git a/src/styles/mash.css b/src/styles/mash.css index 4a331aaf..b5c19a9a 100644 --- a/src/styles/mash.css +++ b/src/styles/mash.css @@ -5,13 +5,6 @@ @import url("./themes.css"); @import url("./mash-utilities.css"); -/* I couldn't find the code for the collapse image. this is a quick work around -to make the collapsing easier to use ( the triangles dont jump 20 pixels). ~cm2 -*/ -img[title="Hide details."] { - float: left; -} - html, body { margin: 0; padding: 0; @@ -25,6 +18,85 @@ html, body { text-rendering: optimizeLegibility; } +/* ── App layout ── */ +body { + display: flex; + flex-direction: column; + min-height: 100dvh; /* dvh = dynamic viewport for mobile chrome */ +} + +#PageHeader { + position: sticky; + top: 0; + z-index: 100; + flex-shrink: 0; +} + +#MainContent { + flex: 1 1 auto; + overflow-y: auto; + -webkit-overflow-scrolling: touch; /* smooth iOS scroll */ + container-type: inline-size; /* enable @container queries */ +} + +#PageFooter { + flex-shrink: 0; +} + +/* ── Skip link ── */ +.skip-link { + position: absolute; + top: -100%; + left: 0; + z-index: 1000; + padding: 0.5rem 1rem; + background: var( --color-info-bg); + color: var(--color-background); + text-decoration: none; + font-weight: var(--font-weight-bold); +} +.skip-link:focus { + top: 0; +} + +/* ── Pane icon tray (responsive) ── */ +.pane-icon-tray { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + padding: 0.25rem 0; + overflow-x: auto; /* horizontal scroll on very narrow screens */ + -webkit-overflow-scrolling: touch; +} + +.pane-icon-tray img { + width: 2rem; + height: 2rem; + border-radius: 0.4rem; + cursor: pointer; + transition: outline 0.15s; +} +.pane-icon-tray img:focus-visible { + outline: 2px solid #005a9c; + outline-offset: 2px; +} + +/* ── Subject blocks ── */ +.subject-block { + border-bottom: 1px solid #e0e0e0; + padding-block: 0.75rem; +} + +/* ── Responsive breakpoints via container queries ── */ +@container (max-width: 40rem) { + .pane-icon-tray { + justify-content: center; + } + .subject-block h1 { + font-size: 1.15rem; + } +} + /* Improved heading hierarchy */ h1, h2, h3, h4, h5, h6 { color: var(--color-primary); @@ -59,21 +131,6 @@ a:hover, a:focus { text-decoration-thickness: 0.125em; } -/* Main page elements in databrowser.html */ -#PageBody { - display: flex; - flex-direction: column; -} -#DummyUUID { - flex: 1 0 auto; -} -#PageHeader { - flex-shrink: 0; -} -#PageFooter { - flex-shrink: 0; -} - .warning { color: var(--color-warning); } diff --git a/static/browse-test.html b/static/browse-test.html index c7b2f19d..11e762dc 100644 --- a/static/browse-test.html +++ b/static/browse-test.html @@ -103,7 +103,7 @@ -
+
Viewing @@ -112,22 +112,22 @@ As user <public user>
- -
- - - - - - - - - - -
-
-
+
+
+ + +
@@ -164,4 +164,5 @@ } - + + diff --git a/static/browse.html b/static/browse.html index c7b2f19d..11e762dc 100644 --- a/static/browse.html +++ b/static/browse.html @@ -103,7 +103,7 @@ -
+
Viewing @@ -112,22 +112,22 @@ As user <public user>
- -
- - - - - - - - - - -
-
-
+
+
+ + +
@@ -164,4 +164,5 @@ } - + + diff --git a/webpack.config.mjs b/webpack.config.mjs index 21e62daf..da509edf 100644 --- a/webpack.config.mjs +++ b/webpack.config.mjs @@ -37,6 +37,7 @@ const common = { 'rdflib': path.resolve('./node_modules/rdflib'), 'solid-logic': path.resolve('./node_modules/solid-logic'), 'solid-ui': path.resolve('./node_modules/solid-ui'), + 'pane-registry': path.resolve('./node_modules/pane-registry'), UI: path.resolve('./node_modules/solid-ui'), // Handle $rdf alias used by solid-logic '$rdf': path.resolve('./node_modules/rdflib'), From 0e4918f5031929c7c0596ae336ffce7f1baa0b08 Mon Sep 17 00:00:00 2001 From: timea-solid <4144203+timea-solid@users.noreply.github.com> Date: Tue, 24 Mar 2026 13:29:40 +0100 Subject: [PATCH 05/18] removed old table structure form databrowser.html --- README.md | 6 +- package-lock.json | 11 ++-- package.json | 6 +- src/databrowser.html | 72 +++++++++++++++------ src/styles/mash.css | 138 +++++++++++++++++++++++----------------- static/browse-test.html | 35 +++++----- static/browse.html | 35 +++++----- webpack.config.mjs | 1 + 8 files changed, 183 insertions(+), 121 deletions(-) diff --git a/README.md b/README.md index 1dbba86b..79945802 100644 --- a/README.md +++ b/README.md @@ -37,6 +37,8 @@ A colorful dependency tree can be seen [here](https://github.com/solidos/solidos - [Solid-ui & Solid-logic related:](#solid-ui--solid-logic-related) - [The databrowser hack: upgrading your browser](#the-databrowser-hack-upgrading-your-browser) +### [Generative AI usage](#generative-ai-usage) + ## Developing mashlib As part of the SolidOS stack, mashlib can be developed locally by setting up the SolidOS code. Read more about that on the [SolidOS Readme](https://github.com/solidos/solidos#-getting-started-with-the-solidos-code). @@ -157,4 +159,6 @@ The SolidOS team is using GitHub Copilot integrated in Visual Studio Code. We have added comments in the code to make it explicit which parts are 100% written by AI. ### Prompt usage hitory: -* Auto model: Looking at these 2 files (databrowser.html and index.ts), I want to redesign mashlib and underlying panes. I have a design for web and one for mobile. How would I go about making sure I can also have a mobile version? \ No newline at end of file +* Auto model: Looking at these 2 files (databrowser.html and index.ts), I want to redesign mashlib and underlying panes. I have a design for web and one for mobile. How would I go about making sure I can also have a mobile version? + +* Claude-Opes 4.6: I don't think this is correct. Mashlib is bundling together all the panes. I do not need to add mashlib.layout or theme to the globals. I can just call the render of each pane with an interface of values or? diff --git a/package-lock.json b/package-lock.json index 33b9e1d9..688c689f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "2.1.3", "license": "MIT", "dependencies": { + "pane-registry": "^3.0.2", "rdflib": "^2.3.5", "solid-logic": "^4.0.3", "solid-panes": "^4.2.3", @@ -8350,13 +8351,13 @@ "license": "(MIT AND Zlib)" }, "node_modules/pane-registry": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/pane-registry/-/pane-registry-3.0.1.tgz", - "integrity": "sha512-kcAcMGMBL8NAipfErxv+UlqUn7vfkY0TPFl+NyCbOPuUqaVkhNp3G/NSPAvBM/p3MytAxbR0N9fEqfHL0312BQ==", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/pane-registry/-/pane-registry-3.0.2.tgz", + "integrity": "sha512-jd3lbAdNWZ5ig+vUdHayKn8g/QkrB/CyT8f9JCGohzCqwxXmZS6ust2m4HzM/5xtktDcx1abjaWnbG4wTBkIJw==", "license": "MIT", "peerDependencies": { - "rdflib": "^2.3.5", - "solid-logic": "^4.0.2" + "rdflib": "^2.3.6", + "solid-logic": "^4.0.6" } }, "node_modules/param-case": { diff --git a/package.json b/package.json index a74db7df..179181a2 100644 --- a/package.json +++ b/package.json @@ -53,12 +53,14 @@ "rdflib": "^2.3.5", "solid-logic": "^4.0.3", "solid-panes": "^4.2.3", - "solid-ui": "^3.0.4" + "solid-ui": "^3.0.4", + "pane-registry": "^3.0.2" }, "overrides": { "rdflib": "$rdflib", "solid-logic": "$solid-logic", - "solid-ui": "$solid-ui" + "solid-ui": "$solid-ui", + "pane-registry": "$pane-registry" }, "devDependencies": { "@babel/cli": "^7.28.6", diff --git a/src/databrowser.html b/src/databrowser.html index 066e9d44..1487051a 100644 --- a/src/databrowser.html +++ b/src/databrowser.html @@ -10,25 +10,57 @@ }) - - - -
-
- - - - - - - - - - -
-
-
-
-
+ + + + + + + + + +
+ + +
+ +
+ + + + +
+ + +
+ +
diff --git a/src/styles/mash.css b/src/styles/mash.css index 9f05294a..bd4fbf5c 100644 --- a/src/styles/mash.css +++ b/src/styles/mash.css @@ -5,13 +5,6 @@ @import url("./themes.css"); @import url("./mash-utilities.css"); -/* I couldn't find the code for the collapse image. this is a quick work around -to make the collapsing easier to use ( the triangles dont jump 20 pixels). ~cm2 -*/ -img[title="Hide details."] { - float: left; -} - html, body { margin: 0; padding: 0; @@ -26,6 +19,85 @@ html, body { text-rendering: optimizeLegibility; } +/* ── App layout ── */ +body { + display: flex; + flex-direction: column; + min-height: 100dvh; /* dvh = dynamic viewport for mobile chrome */ +} + +#PageHeader { + position: sticky; + top: 0; + z-index: 100; + flex-shrink: 0; +} + +#MainContent { + flex: 1 1 auto; + overflow-y: auto; + -webkit-overflow-scrolling: touch; /* smooth iOS scroll */ + container-type: inline-size; /* enable @container queries */ +} + +#PageFooter { + flex-shrink: 0; +} + +/* ── Skip link ── */ +.skip-link { + position: absolute; + top: -100%; + left: 0; + z-index: 1000; + padding: 0.5rem 1rem; + background: var( --color-info-bg); + color: var(--color-background); + text-decoration: none; + font-weight: var(--font-weight-bold); +} +.skip-link:focus { + top: 0; +} + +/* ── Pane icon tray (responsive) ── */ +.pane-icon-tray { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + padding: 0.25rem 0; + overflow-x: auto; /* horizontal scroll on very narrow screens */ + -webkit-overflow-scrolling: touch; +} + +.pane-icon-tray img { + width: 2rem; + height: 2rem; + border-radius: 0.4rem; + cursor: pointer; + transition: outline 0.15s; +} +.pane-icon-tray img:focus-visible { + outline: 2px solid #005a9c; + outline-offset: 2px; +} + +/* ── Subject blocks ── */ +.subject-block { + border-bottom: 1px solid #e0e0e0; + padding-block: 0.75rem; +} + +/* ── Responsive breakpoints via container queries ── */ +@container (max-width: 40rem) { + .pane-icon-tray { + justify-content: center; + } + .subject-block h1 { + font-size: 1.15rem; + } +} + /* Improved heading hierarchy */ h1, h2, h3, h4, h5, h6 { color: var(--color-primary); @@ -60,42 +132,6 @@ a:hover, a:focus { text-decoration-thickness: 0.125em; } -/* Main page elements in databrowser.html */ -#PageBody { - display: flex; - flex-direction: column; - min-height: 100vh; - min-height: var(--app-height, 100dvh); -} -#MainContent { - flex: 1 1 auto; - min-width: 0; - min-height: 0; - overflow-x: auto; - overflow-y: auto; -} -#DummyUUID { - flex: 1 0 auto; - min-width: 0; -} -#PageHeader { - flex-shrink: 0; -} -#PageFooter { - flex-shrink: 0; -} - -.TabulatorOutline { - width: 100%; - min-width: 0; -} - -#outline, -#GlobalDashboard { - width: 100%; - max-width: 100%; -} - .warning { color: var(--color-warning); } @@ -1438,22 +1474,6 @@ End of styles for tableViewPane width: 100%; } - #MainContent { - padding-top: 0.75rem; - padding-right: max(0.75rem, env(safe-area-inset-right)); - padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); - padding-left: max(0.75rem, env(safe-area-inset-left)); - } - - .TabulatorOutline { - overflow-x: auto; - -webkit-overflow-scrolling: touch; - } - - .TabulatorOutline table { - min-width: 100%; - } - img.outlineImage, img.pic, img.foafPic { diff --git a/static/browse-test.html b/static/browse-test.html index 4dba3dae..89bb170e 100644 --- a/static/browse-test.html +++ b/static/browse-test.html @@ -102,7 +102,7 @@ -
+
Viewing @@ -111,22 +111,22 @@ As user <public user>
- -
- - - - - - - - - - -
-
-
+
+
+ + +
@@ -163,4 +163,5 @@ } - + + diff --git a/static/browse.html b/static/browse.html index 4dba3dae..89bb170e 100644 --- a/static/browse.html +++ b/static/browse.html @@ -102,7 +102,7 @@ -
+
Viewing @@ -111,22 +111,22 @@ As user <public user>
- -
- - - - - - - - - - -
-
-
+
+
+ + +
@@ -163,4 +163,5 @@ } - + + diff --git a/webpack.config.mjs b/webpack.config.mjs index ea7a925d..b22ad77d 100644 --- a/webpack.config.mjs +++ b/webpack.config.mjs @@ -37,6 +37,7 @@ const common = { 'rdflib': path.resolve('./node_modules/rdflib'), 'solid-logic': path.resolve('./node_modules/solid-logic'), 'solid-ui': path.resolve('./node_modules/solid-ui'), + 'pane-registry': path.resolve('./node_modules/pane-registry'), UI: path.resolve('./node_modules/solid-ui'), // Handle $rdf alias used by solid-logic '$rdf': path.resolve('./node_modules/rdflib'), From 3a9b087d43f75c20fe4554273ce8fd8ec9071725 Mon Sep 17 00:00:00 2001 From: timea-solid <4144203+timea-solid@users.noreply.github.com> Date: Tue, 24 Mar 2026 11:45:35 +0100 Subject: [PATCH 06/18] SolidOS app title --- src/databrowser.html | 2 +- static/browse-test.html | 2 +- static/browse.html | 2 +- webpack.config.mjs | 1 - 4 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/databrowser.html b/src/databrowser.html index 1487051a..887180a8 100644 --- a/src/databrowser.html +++ b/src/databrowser.html @@ -3,7 +3,7 @@ - <%= htmlWebpackPlugin.options.title %> + SolidOS