Separating content from layout

14 files changed, 215 insertions, 113 deletions

diff --git a/src/js/ui/sections/aboutSection.js b/src/js/ui/sections/aboutSection.js
index 902783d..6a01c44 100644
--- a/src/js/ui/sections/aboutSection.js
+++ b/src/js/ui/sections/aboutSection.js
@@ -18,12 +18,11 @@ export function aboutSection()
             { element: "h2", innerText:"About"}
         ]
     };
-    var aboutSection = {
+
+    var content = {
         element: "div",
-        hidden: true,
-        id:"about-section",
+        className: "content",
         innerHTML: [
-            whereAmI,
             { element: "p", innerText:"Arching Kaos is a project about radio, music, communications and decentralization."},
             { element: "p", innerText:'On site, you can listen to the latest mixes of music (menu entry "Mixtapes"), read latest news ("News") of the network and chat (you guessed it, "Chat" menu entry).'},
             { element: "p", innerText:'You can see the zchains appearing in "zchain" and logs of the process on "Logs"'},
@@ -37,7 +36,17 @@ export function aboutSection()
                 { element:"li", innerText:"Your posted newsfeed (...)"}
             ]},
             { element:"p", innerText:"Finally, on the stats page you can find people that are participating over the Stellar Network, using the ARCHINGKAOS token/asset/coin."}
-                    ]
+        ]
+    };
+
+    var aboutSection = {
+        element: "div",
+        hidden: true,
+        id:"about-section",
+        innerHTML: [
+            whereAmI,
+            content
+        ]
     };
 
     makeElement(aboutSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/akNodeInfoSection.js b/src/js/ui/sections/akNodeInfoSection.js
index df28d6a..63f2a0a 100644
--- a/src/js/ui/sections/akNodeInfoSection.js
+++ b/src/js/ui/sections/akNodeInfoSection.js
@@ -20,12 +20,19 @@ export function akNodeInfoSection()
             { element: "h2", innerText:"Node Info" }
         ]
     };
+    var content = {
+        element: "div",
+        className: "content",
+        innerHTML: [
+            { element: "em", id:"node-info-not-found", innerText:"No data found (yet?)!"}
+        ]
+    };
     var akNodeInfoSection = {
         element: "div",
         id: "arching-kaos-node-info",
         innerHTML: [
             whereAmI,
-            { element: "em", id:"node-info-not-found", innerText:"No data found (yet?)!"}
+            content
         ]
     };
     makeElement(akNodeInfoSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/commentsSection.js b/src/js/ui/sections/commentsSection.js
index ba190ac..a0ee7ad 100644
--- a/src/js/ui/sections/commentsSection.js
+++ b/src/js/ui/sections/commentsSection.js
@@ -18,12 +18,19 @@ export function commentsSection()
             { element: "h2", innerText:"Comments"}
         ]
     };
+    var content = {
+        element: "div",
+        className: "content",
+        innerHTML: [
+            { element: "em", id:"comments-sec-not-found", innerText: "No data found (yet?)!"}
+        ]
+    };
     var commentsSection = {
         element: 'div',
         id: 'comments-section',
         innerHTML: [
             whereAmI,
-            { element: "em", id:"comments-sec-not-found", innerText: "No data found (yet?)!"}
+            content
         ]
     };
     makeElement(commentsSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/filesSection.js b/src/js/ui/sections/filesSection.js
index 994c37e..a8147dc 100644
--- a/src/js/ui/sections/filesSection.js
+++ b/src/js/ui/sections/filesSection.js
@@ -20,12 +20,19 @@ export function filesSection()
             { element: "h2", innerText:"Files"}
         ]
     };
+    var content = {
+        element: "div",
+        className: "content",
+        innerHTML: [
+            { element: "em", id:"files-sec-not-found", innerText: "No data found (yet?)!"}
+        ]
+    };
     var filesSection = {
         element: 'div',
         id: "files-section",
         innerHTML: [
             whereAmI,
-            { element: "em", id:"files-sec-not-found", innerText: "No data found (yet?)!"}
+            content
         ]
     };
 
diff --git a/src/js/ui/sections/mixtapesSection.js b/src/js/ui/sections/mixtapesSection.js
index a450914..4848f78 100644
--- a/src/js/ui/sections/mixtapesSection.js
+++ b/src/js/ui/sections/mixtapesSection.js
@@ -18,12 +18,19 @@ export function mixtapesSection()
             { element: "h2", innerText:"Mixtapes"}
         ]
     };
+    var content = {
+        element: "div",
+        className: "content",
+        innerHTML: [
+            { element: "em", id:"mixtapes-sec-not-found", innerText:"No data found (yet?)!"}
+        ]
+    };
     var mixtapesSection = {
         element: "div",
         id: "mixtapes-section",
         innerHTML: [
             whereAmI,
-            { element: "em", id:"mixtapes-sec-not-found", innerText:"No data found (yet?)!"}
+            content
         ]
     };
     makeElement(mixtapesSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/myPageSection.js b/src/js/ui/sections/myPageSection.js
index 4976691..5dbd2ab 100644
--- a/src/js/ui/sections/myPageSection.js
+++ b/src/js/ui/sections/myPageSection.js
@@ -20,11 +20,10 @@ export function myPageSection()
             { element: "h2", innerText: "My Page" }
         ]
     };
-    var myPageSection = {
+    var content = {
         element: "div",
-        id: "mypage-section",
+        className: "content",
         innerHTML: [
-            whereAmI,
             { element: "h2", innerText: "My page" },
             { element: "button", id: "stellar-freigher-connect-address-button", onclick:"connect()", innerText:"Connect with Freighter wallet" },
             { element: "div", id:"my-news", innerHTML:[
@@ -41,6 +40,14 @@ export function myPageSection()
             ]}
         ]
     };
+    var myPageSection = {
+        element: "div",
+        id: "mypage-section",
+        innerHTML: [
+            whereAmI,
+            content
+        ]
+    };
 
     makeElement(myPageSection, document.querySelector('.main'));
 }
diff --git a/src/js/ui/sections/newsSection.js b/src/js/ui/sections/newsSection.js
index 6875dd6..983a031 100644
--- a/src/js/ui/sections/newsSection.js
+++ b/src/js/ui/sections/newsSection.js
@@ -20,12 +20,19 @@ export function newsSection()
             { element: "h2", innerText:"News"}
         ]
     };
+    var content = {
+        element: "div",
+        className: "content",
+        innerHTML: [
+            { element: "em", id:"news-sec-not-found", innerText: "No data found (yet?)!"}
+        ]
+    };
     var newsSection = {
         element: 'div',
         id: 'news-section',
         innerHTML: [
             whereAmI,
-            { element: "em", id:"news-sec-not-found", innerText: "No data found (yet?)!"}
+            content
         ]
     };
     makeElement(newsSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/notFoundSection.js b/src/js/ui/sections/notFoundSection.js
index 3e3d000..46fc421 100644
--- a/src/js/ui/sections/notFoundSection.js
+++ b/src/js/ui/sections/notFoundSection.js
@@ -9,15 +9,19 @@ import { makeElement } from "../../arching-kaos-generator.js";
 
 export function notFoundSection()
 {
-    var notFoundSection = {
-        element: 'div',
-        id: 'not-found-section',
-        hidden: true,
+    var whereAmI = {
+        element: "div",
+        className: "where-am-i",
+        innerHTML: [
+            { element: "img", src:"./img/logo.png", onclick:"menusel({id:'#/welcome-section'})"},
+            { element: "span", innerText:">"},
+            { element: "h2", innerText:"Not found"}
+        ]
+    };
+    var content = {
+        element: "div",
+        className: "content",
         innerHTML: [
-            {
-                element: 'h2',
-                innerText: 'Not found'
-            },
             {
                 element: 'p',
                 innerText: 'Soft 404'
@@ -28,6 +32,15 @@ export function notFoundSection()
             }
         ]
     };
+    var notFoundSection = {
+        element: 'div',
+        id: 'not-found-section',
+        hidden: true,
+        innerHTML: [
+            whereAmI,
+            content
+        ]
+    };
 
     makeElement(notFoundSection, document.querySelector('.main'));
 }
diff --git a/src/js/ui/sections/settingsSection.js b/src/js/ui/sections/settingsSection.js
index e2e2fe3..8d8be0f 100644
--- a/src/js/ui/sections/settingsSection.js
+++ b/src/js/ui/sections/settingsSection.js
@@ -14,18 +14,20 @@ debugLog(settings);
 
 export function settingsSection()
 {
+    var whereAmI = {
+        element: "div",
+        className:"where-am-i",
+        innerHTML:[
+            {element: "img", src:"./img/logo.png", onclick: "menusel({id:'#/welcome-section'})"},
+            {element: "span", innerText:">"},
+            {element: "h2", innerText:"🔧 Settings"}
+        ]
+    };
     var settingsSection = {
         element: 'div',
         id: "settings-section",
         innerHTML: [
-            {element: "div",
-                className:"where-am-i",
-                innerHTML:[
-                    {element: "img", src:"./img/logo.png", onclick: "menusel({id:'#/welcome-section'})"},
-                    {element: "span", innerText:">"},
-                    {element: "h2", innerText:"🔧 Settings"}
-                ]
-            }
+            whereAmI
         ]
     };
 
diff --git a/src/js/ui/sections/statsSection.js b/src/js/ui/sections/statsSection.js
index 115cd68..c88bfe5 100644
--- a/src/js/ui/sections/statsSection.js
+++ b/src/js/ui/sections/statsSection.js
@@ -20,11 +20,10 @@ export function statsSection()
             { element: "h2", innerText:"Stats"}
         ]
     };
-    var statsSection = {
-        element: 'div',
-        id: "stats-section",
+    var content = {
+        element : "div",
+        className: "content",
         innerHTML: [
-            whereAmI,
             { element: "div", className: "available-networks", innerHTML: [
                 { element: "h3", innerText: "Networks" },
                 { element: "details", className: "stellar-network", innerHTML:[
@@ -39,6 +38,14 @@ export function statsSection()
             ]}
         ]
     };
+    var statsSection = {
+        element: 'div',
+        id: "stats-section",
+        innerHTML: [
+            whereAmI,
+            content
+        ]
+    };
     makeElement(statsSection, document.querySelector('.main'));
 }
 // @license-end
diff --git a/src/js/ui/sections/stellarBalancesSection.js b/src/js/ui/sections/stellarBalancesSection.js
index 9b68b5a..fd07dde 100644
--- a/src/js/ui/sections/stellarBalancesSection.js
+++ b/src/js/ui/sections/stellarBalancesSection.js
@@ -20,13 +20,20 @@ export function stellarBalancesSection()
             { element: "h2", innerText: "Balances" }
         ]
     };
+    var content = {
+        element: "div",
+        className: "content",
+        innerHTML: [
+            { element: "em", id: "stellar-balances-not-found", innerText: "No data found (yet?)!" },
+            { element: "table", id:"stellar-balances-table" }
+        ]
+    };
     var stellarBalancesSection = {
         element: "div",
         id: "stellar-balances",
         innerHTML: [
             whereAmI,
-            { element: "em", id: "stellar-balances-not-found", innerText: "No data found (yet?)!" },
-            { element: "table", id:"stellar-balances-table" }
+            content
         ]
     };
     makeElement(stellarBalancesSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/stellarDataConfigSection.js b/src/js/ui/sections/stellarDataConfigSection.js
index 268051f..a7816a1 100644
--- a/src/js/ui/sections/stellarDataConfigSection.js
+++ b/src/js/ui/sections/stellarDataConfigSection.js
@@ -20,12 +20,19 @@ export function stellarDataConfigSection()
             { element: "h2", innerText:"Data"}
         ]
     };
+    var content = {
+        element: "div",
+        className: "content",
+        innerHTML: [
+            { element: "em", id:"stellar-data-config-not-found", innerText:"No data found (yet?)!" }
+        ]
+    };
     var stellarDataConfigSection = {
         element: "div",
         id: "stellar-data-config",
         innerHTML: [
             whereAmI,
-            { element: "em", id:"stellar-data-config-not-found", innerText:"No data found (yet?)!" }
+            content
         ]
     };
     makeElement(stellarDataConfigSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/welcomeSection.js b/src/js/ui/sections/welcomeSection.js
index 0a97616..31f7d4b 100644
--- a/src/js/ui/sections/welcomeSection.js
+++ b/src/js/ui/sections/welcomeSection.js
@@ -88,6 +88,89 @@ var renderForm = {
     ]
 };
 
+var content = {
+    element : "div",
+    className: "content",
+    innerHTML: [
+        greeting,
+        homeGrid,
+        renderTitle,
+        renderForm,
+        {
+            element: "div",
+            className: "results-area",
+            innerHTML: [
+                {
+                    elements: "h3",
+                    innerText: "Results"
+                }
+            ]
+        },
+        {
+            element: "h3",
+            innerText: "Manual scan"
+        },
+        {
+            element: "div",
+            id: "manual-scan-section",
+            innerHTML: [
+                {
+                    element: "div",
+                    className: "manual-scan",
+                    innerHTML: [
+                        { element:"button", onclick:"scanStellarNetworkForPeers()", innerText:"Check Stellar Network"},
+                        { element:"button", onclick:"checkLocalNodeInfo()", innerText:"Check local Node"},
+                        { element:"button", onclick:"checkLocalPeers()", innerText:"Check local Peers"},
+                        { element:"button", onclick:"checkLocalSchain()", innerText:"Check Local Schain"}
+                    ]
+                }
+            ]
+        },
+        {
+            element: "div",
+            className: "preview"
+        },
+        {
+            element: "div",
+            className: "dialog",
+            innerHTML: [
+                {
+                    element: "h3",
+                    innerText: "Progress"
+                },
+                {
+                    element: "progress",
+                    id: "total-progress",
+                    value: 0
+                },
+                {
+                    element: "progress",
+                    id: "http-progress",
+                    value: 0
+                },
+                {
+                    element: "pre",
+                    id: "current-log-message"
+                }
+            ]
+        },
+        {
+            element: "details",
+            id: "logs-area",
+            innerHTML: [
+                {
+                    element: "summary",
+                    innerText: "Logs (click to expand)"
+                },
+                {
+                    element: "div",
+                    id: "logs-area-element"
+                }
+            ]
+        }
+    ]
+};
+
 export function welcomeSection()
 {
     var welcomeSection = {
@@ -95,82 +178,7 @@ export function welcomeSection()
         id: "welcome-section",
         innerHTML: [
             whereAmI,
-            greeting,
-            homeGrid,
-            renderTitle,
-            renderForm,
-            {
-                element: "div",
-                className: "results-area",
-                innerHTML: [
-                    {
-                        elements: "h3",
-                        innerText: "Results"
-                    }
-                ]
-            },
-            {
-                element: "h3",
-                innerText: "Manual scan"
-            },
-            {
-                element: "div",
-                id: "manual-scan-section",
-                innerHTML: [
-                    {
-                        element: "div",
-                        className: "manual-scan",
-                        innerHTML: [
-                            { element:"button", onclick:"scanStellarNetworkForPeers()", innerText:"Check Stellar Network"},
-                            { element:"button", onclick:"checkLocalNodeInfo()", innerText:"Check local Node"},
-                            { element:"button", onclick:"checkLocalPeers()", innerText:"Check local Peers"},
-                            { element:"button", onclick:"checkLocalSchain()", innerText:"Check Local Schain"}
-                        ]
-                    }
-                ]
-            },
-            {
-                element: "div",
-                className: "preview"
-            },
-            {
-                element: "div",
-                className: "dialog",
-                innerHTML: [
-                    {
-                        element: "h3",
-                        innerText: "Progress"
-                    },
-                    {
-                        element: "progress",
-                        id: "total-progress",
-                        value: 0
-                    },
-                    {
-                        element: "progress",
-                        id: "http-progress",
-                        value: 0
-                    },
-                    {
-                        element: "pre",
-                        id: "current-log-message"
-                    }
-                ]
-            },
-            {
-                element: "details",
-                id: "logs-area",
-                innerHTML: [
-                    {
-                        element: "summary",
-                        innerText: "Logs (click to expand)"
-                    },
-                    {
-                        element: "div",
-                        id: "logs-area-element"
-                    }
-                ]
-            }
+            content
         ]
     };
 
diff --git a/src/js/ui/sections/zchainDataSection.js b/src/js/ui/sections/zchainDataSection.js
index 7bedffa..37ef98e 100644
--- a/src/js/ui/sections/zchainDataSection.js
+++ b/src/js/ui/sections/zchainDataSection.js
@@ -20,12 +20,19 @@ export function zchainDataSection()
             { element: "h2", innerText:"zchains"}
         ]
     };
+    var content = {
+        element: "div",
+        className: "content",
+        innerHTML: [
+            { element: "em", id:"zchain-data-sec-not-found", innerText:"No data found (yet?)!" }
+        ]
+    };
     var zchainDataSection = {
         element: "div",
         id:"zchain-data-section",
         innerHTML: [
             whereAmI,
-            { element: "em", id:"zchain-data-sec-not-found", innerText:"No data found (yet?)!" }
+            content
         ]
     };
     makeElement(zchainDataSection, document.querySelector('.main'));