responsive

front/dist/manifest.json

@@ -1,14 +1,14 @@
 {
   "main.js": {
-    "file": "assets/main.4387b1b7.js",
+    "file": "assets/main.a36ff043.js",
     "src": "main.js",
     "isEntry": true,
     "css": [
-      "assets/main.0c108e59.css"
+      "assets/main.195c7e49.css"
     ]
   },
   "main.css": {
-    "file": "assets/main.0c108e59.css",
+    "file": "assets/main.195c7e49.css",
     "src": "main.css"
   }
 }

front/js/svelte/Navbar.svelte

@@ -7,13 +7,15 @@
     const channel = getContext("channel");
     const user = getContext("user");
 
+    let contentIsOpen = false;
+
 
 </script>
 
 <nav class="lx-nav">
 
     <div>
-
+        <button on:click={(e) => contentIsOpen = true} class="btn btn-primary btn-sm d-xxl-none">« Content</button>
     </div>
     <div>
         <a class="nav-item" href="{channel.lucentUrl}">{channel.name}</a>
@@ -32,14 +34,14 @@
 
 </nav>
 
-<div class="offcanvas offcanvas-start show border-0 bg-light-subtle" style="padding-top:36px " data-bs-scroll="true"
+<div class="offcanvas offcanvas-start  d-xxl-block show border-0 bg-light-subtle" class:d-none={!contentIsOpen} style="padding-top:36px " data-bs-scroll="true"
      data-bs-backdrop="false"
      tabindex="-1" aria-labelledby="offcanvasScrollingLabel">
     <!--        <div class="offcanvas-header">-->
     <!--            <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Content</h5>-->
     <!--        </div>-->
     <div class="offcanvas-body">
-
+        <button on:click={(e) => contentIsOpen = false} class="btn btn-primary btn-sm d-xxl-none mb-4">« close</button>
         <div class="accordion">
             <div class="accordion-item">
                 <h2 class="accordion-header" id="panelsStayOpen-headingMain">

front/js/svelte/records/Graph.svelte

@@ -40,7 +40,7 @@
             return carry;
         }, {});
 
-    
+
     let childrenEdgesByField = graph.edges
         .filter((edge) => edge.source === record.id && edge.depth === 1)
         .reduce((carry, edge) => {

front/js/svelte/records/block/BlockElements.svelte

@@ -46,6 +46,7 @@
                     Block id: <input class="form-control-plaintext" readonly value={block.id}/>
                     Block name: <input class="form-control-plaintext" readonly value={block.meta.name}/>
                 </h6>
+                <li><hr class="dropdown-divider"></li>
                 <h6 class="dropdown-header">Actions</h6>
                 <button
                         class="dropdown-item text-danger"

front/sass/_wrappers.scss

@@ -61,6 +61,55 @@
     }
 }
 
+
+@media only screen and (max-width: 1800px) {
+    .wrapper-normal {
+        margin: 0px 0px 0px auto;
+        padding: 20px;
+
+        &.transparent {
+
+            margin: 0px 0px 0px auto;
+            padding: 40px;
+        }
+    }
+
+    .wrapper-large {
+        margin: 44px 0px 0px auto;
+        padding: 44px;
+        &.transparent {
+            margin: 0px 0px 0px auto;
+            padding: 40px;
+        }
+    }
+
+}
+
+@media only screen and (max-width: 1390px) {
+
+    .wrapper-normal {
+        margin: 0px auto;
+        padding: 20px;
+
+        &.transparent {
+
+            margin: 0px auto;
+            padding: 40px;
+        }
+    }
+
+    .wrapper-large {
+        margin: 44px 0px 0px auto;
+        padding: 44px;
+        &.transparent {
+            margin: 0px 0px 0px auto;
+            padding: 40px;
+        }
+    }
+}
+
+
+
 .section-actions {
     text-align: center;
     padding: 32px 0;