solid-panes 4.2.5 → 4.4.0

package/dist/outline/context.js

@@ -5,14 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createContext = createContext;
 var _index = require("../index");
-function createContext(dom, paneRegistry, store, logic) {
+function createContext(dom, paneRegistry, store, logic, environment) {
   return {
     dom,
     getOutliner: _index.getOutliner,
     session: {
       paneRegistry,
+      // @ts-ignore
       store,
+      // @ts-ignore
       logic
-    }
+    },
+    environment
   };
 }

package/dist/outline/manager.css

@@ -31,21 +31,18 @@
 
 .paneShown {
   width: 24px;
-  border-radius: 0.5em;
-  border-top: solid #222 1px;
-  border-left: solid #222 0.1em;
-  border-bottom: solid #eee 0.1em;
-  border-right: solid #eee 0.1em;
-  margin-left: 1em;
-  padding: 3px;
-  background-color: #ffd;
+  border: none !important;
+  border-radius: var(--border-radius-md, 0.5rem);
+  margin-left: var(--spacing-small, 0.1rem);
+  padding: 0.188rem; /* 3px */
+  background-color: var(--header-menu-item-hover, #e6dcff) !important;
 }
 
 .paneHidden {
   width: 24px;
-  border-radius: 0.5em;
-  margin-left: 1em;
-  padding: 3px;
+  border-radius: var(--border-radius-md, 0.5rem);
+  margin-left: var(--spacing-small, 0.1rem);
+  padding: 0.188rem; /* 3px */
 }
 
 .header {
@@ -57,12 +54,13 @@
 
 .strongHeader {
   font-size: 150%;
-  margin: 0 0.6em 0 0;
-  padding: 0.1em 0.4em;
+  margin: 0 0.6rem 0 0;
+  padding: 0.1rem 0.4rem;
 }
 
 .tableFullWidth {
   width: 100%;
+  background: var(--color-background, #F8F9FB) !important;
 }
 
 .placeholderTable {
@@ -70,7 +68,7 @@
 }
 
 .tdFlex {
-  margin: 0.2em;
+  margin: var(--spacing-xxxs, 0.2rem);
   border: none;
   padding: 0;
   vertical-align: top;

package/dist/outline/manager.js

@@ -13,6 +13,12 @@ var _propertyViews = require("./propertyViews");
 var _outlineIcons = require("./outlineIcons.js");
 var _userInput = require("./userInput.js");
 var queryByExample = _interopRequireWildcard(require("./queryByExample.js"));
+var _ownerProfile = require("../profileUtils/ownerProfile");
+var _person = _interopRequireDefault(require("../icons/person.svg"));
+var _friends = _interopRequireDefault(require("../icons/friends.svg"));
+var _folder = _interopRequireDefault(require("../icons/folder.svg"));
+var _dashboard = _interopRequireDefault(require("../icons/dashboard.svg"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /* istanbul ignore file */
 /* -*- coding: utf-8-dos -*-
@@ -21,6 +27,11 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 
 // @@ chec
 
+const PERSON_ICON = _person.default;
+const FRIENDS_ICON = _friends.default;
+const FOLDER_ICON = _folder.default;
+const DASHBOARD_ICON = _dashboard.default;
+
 /* global alert XPathResult sourceWidget */
 // XPathResult?
 
@@ -29,6 +40,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function _default(context) {
   const dom = context.dom;
   this.document = context.dom;
+  this.context = context;
   this.outlineIcons = _outlineIcons.outlineIcons;
   this.labeller = this.labeller || {};
   this.labeller.LanguagePreference = ''; // for now
@@ -54,6 +66,16 @@ function _default(context) {
     const table = getOutlineContainer();
     table.outline = this;
   };
+  this.getLayoutMode = function () {
+    const envLayout = this.context?.environment?.layout;
+    if (envLayout === 'mobile' || envLayout === 'desktop') return envLayout;
+    if (typeof window !== 'undefined' && window.matchMedia) {
+      const viewportWidth = Math.round(Math.min(window.innerWidth, window.visualViewport?.width || window.innerWidth));
+      const isTouchInput = window.matchMedia('(pointer: coarse)').matches || navigator.maxTouchPoints > 0;
+      return viewportWidth <= 768 || isTouchInput && viewportWidth <= 1024 ? 'mobile' : 'desktop';
+    }
+    return 'desktop';
+  };
 
   /** benchmark a function **/
   benchmark.lastkbsize = 0;
@@ -155,6 +177,10 @@ function _default(context) {
     td.classList.add('obj');
     td.setAttribute('notSelectable', 'false');
     td.style.margin = '0.2em';
+    if (!obj) {
+      td.textContent = 'No object available.';
+      return td;
+    }
     td.style.border = 'none';
     td.style.padding = '0';
     td.style.verticalAlign = 'top';
@@ -253,31 +279,15 @@ function _default(context) {
       throw new Error('Not logged in');
     }
     const items = await getDashboardItems();
-    function renderTab(div, item) {
-      div.dataset.globalPaneName = item.tabName || item.paneName;
-      div.textContent = item.label;
-    }
-    function renderMain(containerDiv, item) {
-      // Items are pane names
-      const pane = paneRegistry.byName(item.paneName); // 20190701
-      containerDiv.innerHTML = '';
-      const table = containerDiv.appendChild(dom.createElement('table'));
-      const me = _solidLogic.authn.currentUser();
-      thisOutline.GotoSubject(item.subject || me, true, pane, false, undefined, table);
-    }
-    div.appendChild(UI.tabs.tabWidget({
-      dom,
-      subject: me,
-      items,
-      renderMain,
-      renderTab,
-      ordered: true,
-      orientation: 0,
-      backgroundColor: '#eeeeee',
-      // black?
-      selectedTab: options.selectedTab,
-      onClose: options.onClose
-    }));
+    const selectedItem = options.selectedTab ? items.find(item => item.paneName === options.selectedTab || item.tabName === options.selectedTab) : items[0];
+    if (!selectedItem) {
+      return div;
+    }
+    div.dataset.globalPaneName = selectedItem.tabName || selectedItem.paneName;
+    const content = div.appendChild(dom.createElement('div'));
+    const pane = paneRegistry.byName(selectedItem.paneName); // 20190701
+    const table = content.appendChild(dom.createElement('table'));
+    thisOutline.GotoSubject(selectedItem.subject || me, true, pane, false, undefined, table);
     return div;
   }
   this.getDashboard = globalAppTabs;
@@ -285,24 +295,38 @@ function _default(context) {
     const me = _solidLogic.authn.currentUser();
     if (!me) return [];
     const div = dom.createElement('div');
-    const [pods] = await Promise.all([getPods()]);
-    return [{
-      paneName: 'home',
-      label: 'Your stuff',
-      icon: UI.icons.iconBase + 'noun_547570.svg'
-    }, {
-      paneName: 'basicPreferences',
-      label: 'Preferences',
-      icon: UI.icons.iconBase + 'noun_Sliders_341315_00000.svg'
-    }, {
+    const panes = [{
       paneName: 'profile',
-      label: 'Your Profile',
-      icon: UI.icons.iconBase + 'noun_15059.svg'
+      subject: me,
+      label: 'Your profile',
+      icon: PERSON_ICON
     }, {
+      paneName: 'social',
+      // loads socialPane
+      subject: me,
+      label: 'Your friends',
+      icon: FRIENDS_ICON
+    }];
+    const [pods] = await Promise.all([getPods()]);
+    panes.push(...pods);
+    panes.push(
+    /* not in use since redesign of profile-pane
+    {
       paneName: 'editProfile',
       label: 'Edit your Profile',
       icon: UI.icons.iconBase + 'noun_492246.svg'
-    }].concat(pods);
+    },
+    */
+    {
+      paneName: 'home',
+      label: 'Your dashboard',
+      icon: DASHBOARD_ICON
+    }, {
+      paneName: 'basicPreferences',
+      label: 'Your preferences',
+      icon: UI.icons.iconBase + 'noun_Sliders_341315_000000.svg'
+    });
+    return panes;
     async function getPods() {
       async function addPodStorage(pod) {
         // namedNode
@@ -332,10 +356,10 @@ function _default(context) {
       }
       // load pod's storages from profile
       let pods = kb.each(me, ns.space('storage'), null, me.doc());
-      pods.map(async pod => {
+      await Promise.all(pods.map(async pod => {
         // TODO use addPodStorageFromUrl(pod.uri) to check for pim:Storage ???
         await loadContainerRepresentation(pod);
-      });
+      }));
       try {
         // if uri then SolidOS is a browse.html web app
         const uri = new URL(window.location.href).searchParams.get('uri');
@@ -354,19 +378,20 @@ function _default(context) {
       }
       pods = uniques(pods);
       if (!pods.length) return [];
-      return pods.map((pod, index) => {
+      return Promise.all(pods.map(async (pod, index) => {
         function split(item) {
           return item.uri.split('//')[1].slice(0, -1);
         }
-        const label = split(me).startsWith(split(pod)) ? 'Your storage' : split(pod);
+        const ownerName = (await (0, _ownerProfile.getNameOfPodOwner)(pod, kb, sf)) || '';
+        const label = split(me).startsWith(split(pod)) ? 'Your storage' : ownerName.trim() !== '' ? ownerName + '\'s storage' : split(pod);
         return {
           paneName: 'folder',
           tabName: `folder-${index}`,
           label,
           subject: pod,
-          icon: UI.icons.iconBase + 'noun_Cabinet_251723.svg'
+          icon: FOLDER_ICON
         };
-      });
+      }));
     }
     async function getAddressBooks() {
       try {
@@ -397,62 +422,91 @@ function _default(context) {
    * @param {string} [options.pane] To open a specific dashboard pane
    * @returns {Promise<void>}
    */
-  async function showDashboard(options = {}) {
+  function closeDashboard() {
+    const dashboardContainer = getDashboardContainer();
+    const outlineContainer = getOutlineContainer();
+    dashboardContainer.innerHTML = '';
+    hideGlobalContainer(dashboardContainer);
+    showGlobalContainer(outlineContainer);
+  }
+
+  // Register the closeDashboard listener only once
+  _solidLogic.authSession.events.on('logout', closeDashboard);
+  function showGlobalContainer(container) {
+    container.removeAttribute('hidden');
+    container.style.display = '';
+  }
+  function hideGlobalContainer(container) {
+    container.setAttribute('hidden', '');
+    container.style.display = 'none';
+  }
+  async function showDashboard(subject, options = {}) {
     const dashboardContainer = getDashboardContainer();
     const outlineContainer = getOutlineContainer();
-    // reuse dashboard if already children already is inserted
-    if (dashboardContainer.childNodes.length > 0 && options.pane) {
-      outlineContainer.style.display = 'none';
-      dashboardContainer.style.display = 'inherit';
-      const tab = dashboardContainer.querySelector(`[data-global-pane-name="${options.pane}"]`);
-      if (tab) {
-        tab.click();
+
+    // reuse existing dashboard if already rendered for the same pane and subject
+    if (dashboardContainer.childNodes.length > 0) {
+      const existingDashboard = dashboardContainer.firstElementChild;
+      if (existingDashboard && options.pane && existingDashboard.dataset.globalPaneName === options.pane && existingDashboard.dataset.subject === (subject && subject.value || '')) {
+        hideGlobalContainer(outlineContainer);
+        showGlobalContainer(dashboardContainer);
         return;
       }
-      console.warn('Did not find the referred tab in global dashboard, will open first one');
+      dashboardContainer.innerHTML = '';
     }
 
     // create a new dashboard if not already present
     const dashboard = await globalAppTabs({
-      selectedTab: options.pane,
-      onClose: closeDashboard
+      selectedTab: options.pane
+      // onClose: closeDashboard
     });
 
-    // close the dashboard if user log out
-    _solidLogic.authSession.events.on('logout', closeDashboard);
-
     // finally - switch to showing dashboard
-    outlineContainer.style.display = 'none';
+    hideGlobalContainer(outlineContainer);
+    showGlobalContainer(dashboardContainer);
     dashboardContainer.appendChild(dashboard);
-    const tab = dashboardContainer.querySelector(`[data-global-pane-name="${options.pane}"]`);
-    if (tab) {
-      tab.click();
-    }
-    function closeDashboard() {
-      dashboardContainer.style.display = 'none';
-      outlineContainer.style.display = 'inherit';
-    }
   }
   this.showDashboard = showDashboard;
   function getDashboardContainer() {
-    return getOrCreateContainer('GlobalDashboard');
+    return getOrCreateContainer('GlobalDashboard', 'Dashboard');
   }
   function getOutlineContainer() {
-    return getOrCreateContainer('outline');
+    return getOrCreateContainer('OutlineView', 'Resource browser');
   }
 
   /**
    * Get element with id or create a new on the fly with that id
    *
    * @param {string} id The ID of the element you want to get or create
+   * @param {string} [ariaLabel] Optional aria-label for accessibility
    * @returns {HTMLElement}
    */
   function getOrCreateContainer(id) {
+    const containerHost = document.getElementById('app-view') || document.getElementById('MainContent') || document.querySelector('[role="main"]') || document.body;
+
+    // OutlineView is a table
+    if (id === 'OutlineView') {
+      const existingOutline = document.getElementById('OutlineView');
+      if (existingOutline) {
+        return existingOutline;
+      }
+      if (containerHost) {
+        const OutlineView = document.createElement('table');
+        OutlineView.id = 'OutlineView';
+        OutlineView.classList.add('outline-view');
+        OutlineView.setAttribute('aria-label', 'Resource browser');
+        containerHost.appendChild(OutlineView);
+        return OutlineView;
+      }
+    }
+
+    // or we deal with the section GlobalDashboard
     return document.getElementById(id) || (() => {
-      const dashboardContainer = document.createElement('div');
-      dashboardContainer.id = id;
-      const mainContainer = document.querySelector('[role="main"]') || document.body;
-      return mainContainer.appendChild(dashboardContainer);
+      const GlobalDashboard = document.createElement('section');
+      GlobalDashboard.id = id;
+      GlobalDashboard.setAttribute('aria-label', 'Dashboard');
+      GlobalDashboard.classList.add('global-dashboard');
+      return containerHost.appendChild(GlobalDashboard);
     })();
   }
   async function loadContainerRepresentation(subject) {
@@ -504,7 +558,14 @@ function _default(context) {
         // if only one, simplify interface
         relevantPanes.forEach((pane, index) => {
           const label = pane.label(subject, context);
-          const iconSrc = typeof pane.icon === 'function' ? pane.icon(subject, context) : pane.icon;
+          let iconSrc = '';
+          if (pane.name === 'profile') {
+            iconSrc = PERSON_ICON;
+          } else if (pane.name === 'social') {
+            iconSrc = FRIENDS_ICON;
+          } else {
+            iconSrc = typeof pane.icon === 'function' ? pane.icon(subject, context) : pane.icon;
+          }
           const ico = UI.utils.AJARImage(iconSrc, label, label, dom);
 
           // Handle async icon functions
@@ -567,6 +628,9 @@ function _default(context) {
                 const second = containingTable.firstChild.nextSibling;
                 const row = dom.createElement('tr');
                 const cell = row.appendChild(dom.createElement('td'));
+                cell.setAttribute('colspan', '2');
+                cell.style.textAlign = 'left';
+                cell.style.width = '100%';
                 cell.appendChild(paneDiv);
                 if (second) containingTable.insertBefore(row, second);else containingTable.appendChild(row);
                 row.pane = pane;
@@ -611,7 +675,7 @@ function _default(context) {
       tr.setAttribute('class', 'hoverControl');
     }
     const td = tr.appendChild(dom.createElement('td'));
-    td.setAttribute('style', 'margin: 0.2em; border: none; padding: 0; vertical-align: top;' + 'display:flex; justify-content: space-between; flex-direction: row;');
+    td.setAttribute('style', 'margin: 0.2em; border: none; padding-top: 0; padding-bottom: 0; vertical-align: top;' + 'display:flex; justify-content: space-between; flex-direction: row;' + 'background-color: var(--color-background, #F8F9FB);');
     td.setAttribute('notSelectable', 'true');
     td.setAttribute('about', subject.toNT());
     td.setAttribute('colspan', '2');
@@ -625,7 +689,7 @@ function _default(context) {
       icon.addEventListener('click', collapseMouseDownListener);
       const strong = header.appendChild(dom.createElement('h1'));
       strong.appendChild(dom.createTextNode(UI.utils.label(subject)));
-      strong.style = 'font-size: 150%; margin: 0 0.6em 0 0; padding: 0.1em 0.4em;';
+      strong.style = 'font-size: 150%; margin: 0 0.6em 0 0; padding: 0.1em 0.4em;' + 'background-color: var(--color-background, #F8F9FB);';
       UI.widgets.makeDraggable(strong, subject);
     }
     header.appendChild(await renderPaneIconTray(td, {
@@ -702,6 +766,10 @@ function _default(context) {
           }
           const row = dom.createElement('tr');
           const cell = row.appendChild(dom.createElement('td'));
+          cell.setAttribute('colspan', '2');
+          cell.style.textAlign = 'left';
+          cell.style.width = '100%';
+          cell.style.backgroundColor = 'var(--color-background, #F8F9FB)';
           cell.appendChild(paneDiv);
           if (tr1.firstPane.requireQueryButton && dom.getElementById('queryButton')) {
             dom.getElementById('queryButton').removeAttribute('style');
@@ -1304,7 +1372,7 @@ function _default(context) {
             outline.GotoSubject(object, true);
             /* //deal with this later
             deselectAll();
-            var newTr=dom.getElementById('outline').lastChild;
+            var newTr=dom.getElementById('OutlineView').lastChild;
             setSelected(newTr.firstChild.firstChild.childNodes[1].lastChild,true);
             function setSelectedAfterward(uri){
                 deselectAll();
@@ -1875,10 +1943,10 @@ function _default(context) {
   @param pane    -- optional -- pane to be used for expanded display
   @param solo    -- optional -- the window will be cleared out and only the subject displayed
   @param referer -- optional -- where did we hear about this from anyway?
-  @param table   -- option  -- a table element in which to put the outline.
+  @param table   -- option  -- default is an HTML table element in which to put the outline.
   */
   this.GotoSubject = function (subject, expand, pane, solo, referrer, table) {
-    table = table || dom.getElementById('outline'); // if does not exist just add one? nowhere to out it
+    table = table || getOutlineContainer('OutlineView'); // if does not exist create a compatible host in the current shell
     if (solo) {
       UI.utils.emptyNode(table);
       table.style.width = '100%';
@@ -1910,8 +1978,11 @@ function _default(context) {
         paneName: pane.name
       } : {};
       try {
-        // can fail if different origin
-        dom.defaultView.history.pushState(stateObj, subject.uri, subject.uri);
+        const currentUrl = new URL(document.location.href);
+        const targetUrl = new URL(subject.uri, document.location.href);
+        if (currentUrl.origin === targetUrl.origin) {
+          dom.defaultView.history.pushState(stateObj, subject.uri, subject.uri);
+        }
       } catch (e) {
         console.log(e);
       }

package/dist/outline/userInput.js

@@ -1069,9 +1069,12 @@ function UserInput(outline) {
         }
       }, false);
       window.addEventListener('mousedown', UserInput.Mousedown, false);
-      document.getElementById('outline').oncontextmenu = function () {
-        return false;
-      };
+      const outlineView = document.getElementById('OutlineView');
+      if (outlineView) {
+        outlineView.oncontextmenu = function () {
+          return false;
+        };
+      }
       if (e.button === 2) {
         // right click
         UserInput.switchMode();

package/dist/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%;
+  }
+}

package/dist/pad/padPane.d.ts

@@ -1,4 +1,5 @@
 import { PaneDefinition } from 'pane-registry';
+import './padPane.css';
 declare const paneDef: PaneDefinition;
 export default paneDef;
 //# sourceMappingURL=padPane.d.ts.map

package/dist/pad/padPane.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"padPane.d.ts","sourceRoot":"","sources":["../../src/pad/padPane.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAK9C,QAAA,MAAM,OAAO,EAAE,cAmiBd,CAAA;AAGD,eAAe,OAAO,CAAA"}
+{"version":3,"file":"padPane.d.ts","sourceRoot":"","sources":["../../src/pad/padPane.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,eAAe,CAAA;AAKtB,QAAA,MAAM,OAAO,EAAE,cA0iBd,CAAA;AAGD,eAAe,OAAO,CAAA"}

package/dist/pad/padPane.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _solidUi = require("solid-ui");
 var _solidLogic = require("solid-logic");
 var _rdflib = require("rdflib");
+require("./padPane.css");
 /*   pad Pane
  **
  */
@@ -18,6 +19,7 @@ const paneDef = {
   audience: [_solidUi.ns.solid('PowerUser')],
   // Does the subject deserve an pad pane?
   label: function (subject, context) {
+    // @ts-ignore
     const t = context.session.store.findTypeURIs(subject);
     if (t['http://www.w3.org/ns/pim/pad#Notepad']) {
       return 'pad';
@@ -26,6 +28,7 @@ const paneDef = {
   },
   mintClass: _solidUi.ns.pad('Notepad'),
   mintNew: function (context, newPaneOptions) {
+    // @ts-ignore
     const store = context.session.store;
     const updater = store.updater;
     if (newPaneOptions.me && !newPaneOptions.me.uri) {
@@ -65,6 +68,7 @@ const paneDef = {
   // @@ TODO Set better type for paneOptions
   render: function (subject, context, paneOptions) {
     const dom = context.dom;
+    // @ts-ignore
     const store = context.session.store;
     // Utility functions
     const complainIfBad = function (ok, message) {
@@ -375,29 +379,36 @@ const paneDef = {
     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 = {
       statusArea,
       timingArea: naviMiddle1

package/dist/playlist/playlistPane.js

@@ -78,18 +78,14 @@ var _default = exports.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;
     if (index) {

package/dist/profileUtils/ownerProfile.d.ts

@@ -0,0 +1,5 @@
+import { Fetcher, IndexedFormula, NamedNode } from 'rdflib';
+export declare function loadProfileFromURI(uri: NamedNode, store: IndexedFormula, fetcher: Fetcher): Promise<NamedNode>;
+export declare function getNameOfPodOwner(pod: NamedNode, store: IndexedFormula, fetcher: Fetcher): Promise<string>;
+export declare function getName(store: IndexedFormula, ownersProfile: NamedNode): string;
+//# sourceMappingURL=ownerProfile.d.ts.map