Merge branch 'main' into popup-forms-convert-to-string

src/renderer/assets/css/section.css

@@ -19,14 +19,6 @@
         transform 0.12s ease-in-out;
 }
 
-.section.nested {
-    padding-top: 15px;
-    padding-bottom: 15px;
-}
-
-.section > * {
-    height: 100%;
-}
 
 nwb-main h3,
 nwb-main p {

src/renderer/src/server.ts

@@ -54,7 +54,6 @@ export const onServerOpen = (callback:Function) => {
 }
 
 export const activateServer = () => {
-    console.log('GO!')
  statusBar.items[2].status = true
 
  serverCallbacks.forEach(cb => cb())

src/renderer/src/stories/List.ts

@@ -26,8 +26,8 @@ export class List extends LitElement {
         overflow: auto;
       }
 
+
       #empty {
-        padding: 20px 10px;
         margin-left: -40px;
         color: gray;
       }
@@ -59,7 +59,6 @@ export class List extends LitElement {
         list-style-type: none;
         display: flex;
         flex-wrap: wrap;
-        margin: 0;
         padding: 0;
       }
 

src/renderer/src/stories/Main.js

@@ -146,10 +146,10 @@ export class Main extends LitElement {
             ${headerEl}
             ${capsules
                 ? html`<div style="width: 100%; text-align: center; padding-top: 15px;">${capsules}</div>`
-                : html`<div style="height:50px"</div>`}
+                : html``}
             ${title
                 ? html`<div
-                      style="position: sticky; padding: 0px 50px; top: 0; left: 0; background: white; z-index: 1;"
+                      style="position: sticky; padding: 0px 50px; top: 0; left: 0; background: white; z-index: 1; ${capsules ? '' : 'padding-top: 35px;'}"
                   >
                       <div style="display: flex; flex: 1 1 0px; justify-content: space-between; align-items: end;">
                           <div style="line-height: 1em; color: gray;">
@@ -162,8 +162,8 @@ export class Main extends LitElement {
                   </div>`
                 : ""}
 
-            <main id="content" class="js-content" style="overflow: hidden;">
-                <section class="section ${capsules ? "nested" : ""}">${page}</section>
+            <main id="content" class="js-content" style="overflow: hidden; ${capsules || title ? '' : 'padding-top: 35px;'}"">
+                <section class="section">${page}</section>
             </main>
             ${footerEl}
         `;

src/renderer/src/stories/pages/guided-mode/data/GuidedMetadata.js

@@ -42,6 +42,7 @@ const getInfoFromId = (key) => {
 export class GuidedMetadataPage extends ManagedPage {
     constructor(...args) {
         super(...args);
+        this.style.height = "100%"; // Fix main section
     }
 
     beforeSave = () => {

src/renderer/src/stories/pages/guided-mode/data/GuidedSourceData.js

@@ -24,8 +24,11 @@ const propsToIgnore = [
 ];
 
 export class GuidedSourceDataPage extends ManagedPage {
+
+
     constructor(...args) {
         super(...args);
+        this.style.height = "100%"; // Fix main section
     }
 
     beforeSave = () => {

src/renderer/src/stories/pages/guided-mode/data/GuidedStructure.js

@@ -142,7 +142,7 @@ export class GuidedStructurePage extends Page {
         this.addButton.setAttribute("hidden", "");
 
         return html`
-            <div style="width: 100%; text-align: center;">${this.list} ${this.addButton}</div>
+            <div style="width: 100%; display: flex; flex-direction: column; align-items: center;">${this.list} ${this.addButton}</div>
             ${this.searchModal}
         `;
     }

src/renderer/src/stories/pages/guided-mode/options/GuidedStubPreview.js

@@ -16,6 +16,8 @@ export const getStubArray = (stubs) =>
 export class GuidedStubPreviewPage extends Page {
     constructor(...args) {
         super(...args);
+        this.style.height = "100%"; // Fix main section
+
     }
 
     header = {

src/renderer/src/stories/pages/preview/PreviewPage.js

@@ -13,6 +13,7 @@ export class PreviewPage extends Page {
 
     constructor(...args) {
         super(...args);
+        this.style.height = "100%"; // Fix main section
     }
 
     updatePath = async (path) => {

src/renderer/src/stories/pages/settings/SettingsPage.js

@@ -24,10 +24,20 @@ export class SettingsPage extends Page {
     header = {
         title: "App Settings",
         subtitle: "This page allows you to set global settings for the GUIDE.",
+        controls: [
+            new Button({
+                label: "Save Changes",
+                onClick: async () => {
+                    if (!this.unsavedUpdates) return this.#openNotyf("All changes were already saved", "success");
+                    this.save();
+                },
+            })
+        ]
     };
 
     constructor(...args) {
         super(...args);
+        this.style.height = "100%"; // Fix main section
     }
 
     #notification;
@@ -52,14 +62,6 @@ export class SettingsPage extends Page {
     render() {
         this.localState = merge(global.data, {});
 
-        const button = new Button({
-            label: "Save Changes",
-            onClick: async () => {
-                if (!this.unsavedUpdates) return this.#openNotyf("All changes were already saved", "success");
-                this.save();
-            },
-        });
-
         // NOTE: API Keys and Dandiset IDs persist across selected project
         this.form = new JSONSchemaForm({
             results: this.localState,
@@ -76,8 +78,6 @@ export class SettingsPage extends Page {
 
         return html`
             ${this.form}
-            <hr />
-            ${button}
         `;
     }
 }