Milestone3m responsive

jest.config.mjs

@@ -3,6 +3,7 @@ export default {
   coverageDirectory: 'coverage',
   preset: 'ts-jest/presets/js-with-babel',
   testEnvironment: 'jsdom',
+  setupFiles: ['./test/helpers/globals.js'],
   testEnvironmentOptions: {
     customExportConditions: ['node']
   },

src/RDFXMLPane.js

@@ -53,6 +53,7 @@ export const RDFXMLPane = {
     sz.setBase(subject.uri)
     const str = sz.statementsToXML(sts)
     const pre = myDocument.createElement('PRE')
+    pre.setAttribute('style', 'overflow-x: auto; max-width: 100%; box-sizing: border-box;')
     pre.appendChild(myDocument.createTextNode(str))
     div.appendChild(pre)
     return div

src/form/pane.js

@@ -103,7 +103,7 @@ export const formPane = {
                   complainIfBad
                 )
               )
-              e.setAttribute('style', 'float: right;')
+              e.setAttribute('style', 'margin-left: auto; display: block;')
             }
           }
           const anchor = dom.createElement('a')

src/humanReadablePane.js

@@ -185,7 +185,7 @@ const humanReadablePane = {
         const clean = DOMPurify.sanitize(res)
         frame.innerHTML = clean
         frame.setAttribute('class', 'doc')
-        frame.setAttribute('style', `border: 1px solid; padding: 1em; height: ${lines}em; width: 800px; resize: both; overflow: auto;`)
+        frame.setAttribute('style', `border: 1px solid; padding: 1em; height: ${lines}em; max-width: 100%; width: 100%; box-sizing: border-box; resize: both; overflow: auto;`)
       }).catch(error => {
         console.error('Error fetching markdown content:', error)
         frame.innerHTML = '<p>Error loading content</p>'
@@ -195,7 +195,7 @@ const humanReadablePane = {
     const setIframeAttributes = (frame, lines) => {
       frame.setAttribute('src', subject.uri)
       frame.setAttribute('class', 'doc')
-      frame.setAttribute('style', `border: 1px solid; padding: 1em; height: ${lines}em; width: 800px; resize: both; overflow: auto;`)
+      frame.setAttribute('style', `border: 1px solid; padding: 1em; height: ${lines}em; max-width: 100%; width: 100%; box-sizing: border-box; resize: both; overflow: auto;`)
     }
 
     if (isMarkdown) {

src/n3Pane.js

@@ -51,6 +51,7 @@ export const n3Pane = {
     sz.setBase(subject.uri)
     const str = sz.statementsToN3(sts)
     const pre = myDocument.createElement('PRE')
+    pre.setAttribute('style', 'overflow-x: auto; max-width: 100%; box-sizing: border-box;')
     pre.appendChild(myDocument.createTextNode(str))
     div.appendChild(pre)
     return div

src/pad/padPane.css

@@ -0,0 +1,36 @@
+.pad-layout {
+  background-color: white;
+  min-width: 94%;
+  margin-right: 3%;
+  margin-left: 3%;
+  min-height: 13em;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+.pad-row {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.pad-main {
+  flex: 1 1 100%;
+  width: 100%;
+}
+
+.pad-controls {
+  gap: 0.5em;
+  align-items: center;
+}
+
+.pad-cell {
+  flex: 1 1 auto;
+}
+
+@media (max-width: 600px) {
+  .pad-controls .pad-cell {
+    flex: 1 1 100%;
+  }
+}

src/pad/padPane.ts

@@ -2,6 +2,7 @@ import { icons, ns, pad, widgets, login } from 'solid-ui'
 import { authn, AppDetails } from 'solid-logic'
 import { graph, log, NamedNode, Namespace, sym, serialize, Store } from 'rdflib'
 import { PaneDefinition } from 'pane-registry'
+import './padPane.css'
 /*   pad Pane
  **
  */
@@ -517,38 +518,42 @@ const paneDef: PaneDefinition = {
     const div = dom.createElement('div')
 
     //  Build the DOM
-    const structure = div.appendChild(dom.createElement('table')) // @@ make responsive style
-    structure.setAttribute(
-      'style',
-      'background-color: white; min-width: 94%; margin-right:3% margin-left: 3%; min-height: 13em;'
-    )
-
-    const naviLoginoutTR = structure.appendChild(dom.createElement('tr'))
-    naviLoginoutTR.appendChild(dom.createElement('td')) // naviLoginout1
-    naviLoginoutTR.appendChild(dom.createElement('td'))
-    naviLoginoutTR.appendChild(dom.createElement('td'))
-
-    const naviTop = structure.appendChild(dom.createElement('tr')) // stuff
-    const naviMain = naviTop.appendChild(dom.createElement('td'))
-    naviMain.setAttribute('colspan', '3')
-
-    const naviMiddle = structure.appendChild(dom.createElement('tr')) // controls
-    const naviMiddle1 = naviMiddle.appendChild(dom.createElement('td'))
-    const naviMiddle2 = naviMiddle.appendChild(dom.createElement('td'))
-    const naviMiddle3 = naviMiddle.appendChild(dom.createElement('td'))
-
-    const naviStatus = structure.appendChild(dom.createElement('tr')) // status etc
+    const structure = div.appendChild(dom.createElement('div')) // responsive flex layout
+    structure.className = 'pad-layout'
+
+    const naviLoginoutTR = structure.appendChild(dom.createElement('div'))
+    naviLoginoutTR.className = 'pad-row'
+    naviLoginoutTR.appendChild(dom.createElement('div')) // naviLoginout1
+    naviLoginoutTR.appendChild(dom.createElement('div'))
+    naviLoginoutTR.appendChild(dom.createElement('div'))
+
+    const naviTop = structure.appendChild(dom.createElement('div')) // stuff
+    naviTop.className = 'pad-row'
+    const naviMain = naviTop.appendChild(dom.createElement('div'))
+    naviMain.className = 'pad-main'
+
+    const naviMiddle = structure.appendChild(dom.createElement('div')) // controls
+    naviMiddle.className = 'pad-row pad-controls'
+    const naviMiddle1 = naviMiddle.appendChild(dom.createElement('div'))
+    naviMiddle1.className = 'pad-cell'
+    const naviMiddle2 = naviMiddle.appendChild(dom.createElement('div'))
+    naviMiddle2.className = 'pad-cell'
+    const naviMiddle3 = naviMiddle.appendChild(dom.createElement('div'))
+    naviMiddle3.className = 'pad-cell'
+
+    const naviStatus = structure.appendChild(dom.createElement('div')) // status etc
+    naviStatus.className = 'pad-row'
     const statusArea = naviStatus.appendChild(dom.createElement('div'))
 
-    const naviSpawn = structure.appendChild(dom.createElement('tr')) // create new
+    const naviSpawn = structure.appendChild(dom.createElement('div')) // create new
+    naviSpawn.className = 'pad-row'
     const spawnArea = naviSpawn.appendChild(dom.createElement('div'))
 
-    const naviMenu = structure.appendChild(dom.createElement('tr'))
-    naviMenu.setAttribute('class', 'naviMenu')
-    // naviMenu.setAttribute('style', 'margin-top: 3em;');
-    naviMenu.appendChild(dom.createElement('td')) // naviLeft
-    naviMenu.appendChild(dom.createElement('td'))
-    naviMenu.appendChild(dom.createElement('td'))
+    const naviMenu = structure.appendChild(dom.createElement('div'))
+    naviMenu.setAttribute('class', 'pad-row naviMenu')
+    naviMenu.appendChild(dom.createElement('div')) // naviLeft
+    naviMenu.appendChild(dom.createElement('div'))
+    naviMenu.appendChild(dom.createElement('div'))
 
     const options: any = { statusArea, timingArea: naviMiddle1 }
 

src/playlist/playlistPane.js

@@ -100,18 +100,14 @@ export default {
       div.setAttribute('class', 'imageView')
       img = myDocument.createElement('IFRAME')
       img.setAttribute('src', uri)
-      img.setAttribute('width', 560)
-      img.setAttribute('height', 315)
       img.setAttribute('frameborder', 0)
-      img.setAttribute('style', 'max-width: 850px; max-height: 100%;')
+      img.setAttribute('style', 'width: 100%; aspect-ratio: 16/9; max-width: 100%; border: 0;')
       img.setAttribute('allowfullscreen', 'true')
     } else {
       div.setAttribute('class', 'imageView')
       img = myDocument.createElement('IMG')
       img.setAttribute('src', obj.value)
-      img.setAttribute('width', 560)
-      img.setAttribute('height', 315)
-      img.setAttribute('style', 'max-width: 560; max-height: 315;')
+      img.setAttribute('style', 'max-width: 100%; height: auto;')
     }
 
     let descDiv

src/slideshow/slideshowPane.js

@@ -64,7 +64,7 @@ export const slideshowPane = {
           const objectURL = URL.createObjectURL(myBlob)
           img.setAttribute('src', objectURL) // w640 h480 //
         })
-      img.setAttribute('width', '100%')
+      img.style.width = '100%'
       figure.appendChild(dom.createElement('figcaption'))
     }
     const options = { dom }

src/socialPane.css

@@ -0,0 +1,43 @@
+.socialPane .social-layout {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  gap: 0;
+}
+
+.socialPane .social-nav {
+  flex: 1 1 22%;
+  min-width: 8rem;
+  background-color: #eee;
+  border: 0;
+  padding: 0.5em;
+  box-sizing: border-box;
+}
+
+.socialPane .social-main {
+  flex: 2 1 50%;
+  min-width: 12rem;
+  background-color: #fff;
+  color: #000;
+  border-left: 1px solid #ccc;
+  border-right: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+  padding: 0;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.socialPane .social-pic {
+  width: 100%;
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+@media (max-width: 600px) {
+  .socialPane .social-nav,
+  .socialPane .social-main {
+    flex: 1 1 100%;
+    width: 100%;
+  }
+}

src/socialPane.js

@@ -8,6 +8,7 @@
  **  -- todo: use common code to get username and load profile and set 'me'
  */
 
+import './socialPane.css'
 import * as UI from 'solid-ui'
 import { authn } from 'solid-logic'
 import * as $rdf from 'rdflib'
@@ -166,33 +167,28 @@ export const socialPane = {
     const foaf = UI.ns.foaf
     const vcard = UI.ns.vcard
 
-    // extracted from tabbedtab.css 2017-03-21
-    const navBlockStyle =
-      'background-color: #eee; width: 25%; border: 0; padding: 0.5em; margin: 0;'
-    const mainBlockStyle =
-      'background-color: #fff; color: #000; width: 46%; margin: 0; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 0;'
-    const foafPicStyle = ' width: 100% ; border: none; margin: 0; padding: 0;'
+    const foafPicStyle = 'social-pic'
 
-    const structure = div.appendChild(dom.createElement('table'))
-    const tr = structure.appendChild(dom.createElement('tr'))
-    const left = tr.appendChild(dom.createElement('td'))
-    const middle = tr.appendChild(dom.createElement('td'))
-    const right = tr.appendChild(dom.createElement('td'))
+    const structure = div.appendChild(dom.createElement('div'))
+    structure.className = 'social-layout'
+    const left = structure.appendChild(dom.createElement('div'))
+    left.className = 'social-nav'
+    const middle = structure.appendChild(dom.createElement('div'))
+    const right = structure.appendChild(dom.createElement('div'))
+    right.className = 'social-nav'
 
     const tools = left
-    tools.style.cssText = navBlockStyle
     const mainTable = middle.appendChild(dom.createElement('table'))
-    mainTable.style.cssText = mainBlockStyle
+    mainTable.className = 'social-main'
     const tips = right
-    tips.style.cssText = navBlockStyle
 
     // Image top left
     const src = kb.any(s, foaf('img')) || kb.any(s, foaf('depiction'))
     if (src) {
       const img = dom.createElement('IMG')
       img.setAttribute('src', src.uri) // w640 h480
       // img.className = 'foafPic'
-      img.style.cssText = foafPicStyle
+      img.className = foafPicStyle
       tools.appendChild(img)
     }
     const name = kb.anyValue(s, foaf('name')) || '???'

test/helpers/globals.js

@@ -0,0 +1,24 @@
+const { TextEncoder, TextDecoder } = require('util')
+
+// Some transitive deps (solid-logic) use TextEncoder at module-load time.
+global.TextEncoder = TextEncoder
+global.TextDecoder = TextDecoder
+globalThis.TextEncoder = TextEncoder
+globalThis.TextDecoder = TextDecoder
+
+const rdf = require('rdflib')
+const solidLogic = require('solid-logic')
+
+// solid-ui's UMD bundle expects a browser-style global named $rdf.
+global.$rdf = rdf
+globalThis.$rdf = rdf
+if (typeof window !== 'undefined') {
+  window.$rdf = rdf
+}
+
+// solid-ui's UMD bundle also expects a browser-style global named SolidLogic.
+global.SolidLogic = solidLogic
+globalThis.SolidLogic = solidLogic
+if (typeof window !== 'undefined') {
+  window.SolidLogic = solidLogic
+}