responsive css

Author: Alain Bourgeois

src/folderPane.ts

@@ -96,13 +96,15 @@ export default {
       packageDiv.classList.add('folderPanePackageDiv')
       kb.fetcher.load(indexThing.doc()).then(function () {
         mainTable = packageDiv.appendChild(dom.createElement('table'))
+        mainTable.classList.add('folderPaneMainTable')
         context
           .getOutliner(dom)
           .GotoSubject(indexThing, true, undefined, false, undefined, mainTable)
       })
       return div
     } else {
       mainTable = div.appendChild(dom.createElement('table'))
+      mainTable.classList.add('folderPaneMainTable')
       mainTable.refresh = refresh
       refresh()
       // addDownstreamChangeListener is a high level function which when someone else changes the resource,
@@ -112,6 +114,7 @@ export default {
 
     // Allow user to create new things within the folder
     const creationDiv = div.appendChild(dom.createElement('div'))
+    creationDiv.classList.add('folderPaneCreationDiv')
     const me = authn.currentUser() // @@ respond to login events
     if (!me) {
       return div // Cannot create new things without being logged in
@@ -144,6 +147,10 @@ export default {
           target = creationDiv.firstChild // Overload drop target semantics onto the plus sign
         }
 
+        if (target instanceof HTMLElement) {
+          target.classList.add('folderPaneDropTarget')
+        }
+
         // /////////// Allow new file to be Uploaded
         UI.widgets.makeDropTarget(target, null, droppedFileHandler)
       })

src/styles/folderPane.css

@@ -1,18 +1,63 @@
 .folderPaneInstancePane {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
   border-top: solid 1px #777;
   border-bottom: solid 1px #777;
   margin-top: var(--spacing-xs, 0.5em);
   margin-bottom: var(--spacing-xs, 0.5em);
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
 }
+
 .folderPanePackageDiv {
+  width: 100%;
+  max-width: 100%;
   border-top: 0.2em solid #ccc;
+  overflow-x: auto;
+}
+
+.folderPaneMainTable {
+  width: 100%;
+  max-width: 100%;
+  table-layout: auto;
+  text-align: left;
+}
+
+.folderPaneMainTable td,
+.folderPaneMainTable th {
+  text-align: left;
+  vertical-align: top;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .folderPanePredicateCell {
-  min-width: 3em;
+  min-width: 0.1em;
+}
+
+.folderPaneCreationDiv {
+  width: 100%;
+  max-width: 100%;
+}
+
+.folderPaneDropTarget {
+  max-width: 100%;
 }
 
 .folderPaneExplicitDropIcon {
   width: var(--icon-base, 2em);
   height: var(--icon-base, 2em);
 }
+
+@media (max-width: 700px) {
+  .folderPaneInstancePane {
+    margin-top: var(--spacing-2xs, 0.25em);
+    margin-bottom: var(--spacing-2xs, 0.25em);
+  }
+
+  .folderPaneExplicitDropIcon {
+    width: var(--icon-sm, 1.5em);
+    height: var(--icon-sm, 1.5em);
+  }
+}