From 646b7149202938c225fe18b55b3f3eada6affee0 Mon Sep 17 00:00:00 2001
From: Jon Uhlmann <me@jonnitto.ch>
Date: Fri, 29 Jan 2021 16:33:10 +0100
Subject: [PATCH] Fix: Don't affect Neos menu in module

---
 Resources/Private/Modules/Views/Index.fusion | 126 ++++++++++---------
 Resources/Public/Module.css                  |  28 ++---
 2 files changed, 78 insertions(+), 76 deletions(-)

diff --git a/Resources/Private/Modules/Views/Index.fusion b/Resources/Private/Modules/Views/Index.fusion
index 3862471..bf007c3 100644
--- a/Resources/Private/Modules/Views/Index.fusion
+++ b/Resources/Private/Modules/Views/Index.fusion
@@ -9,84 +9,86 @@ Carbon.Plausible.PlausibleController {
         table = ${['domain', 'host', 'outboundLinks', 'hashBasedRouting', 'exclusions', 'customEvents']}
 
         renderer = afx`
-            <h1>
-                <img width='152' alt='Plausible'>
-                    <Neos.Fusion:ResourceUri @path='attributes.src' path='resource://Carbon.Plausible/Public/Logo.png' />
-                </img>
-            </h1>
+            <main class='plausible'>
+                <h1>
+                    <img width='152' alt='Plausible'>
+                        <Neos.Fusion:ResourceUri @path='attributes.src' path='resource://Carbon.Plausible/Public/Logo.png' />
+                    </img>
+                </h1>
 
-            <h2
-                @if.set={!props.settings.enable}
-                class='plausible-status'
-                title={Translation.translate('plausible.status.title', 'Based on the setting Carbon.Plausible.enable', [], 'Module', 'Carbon.Plausible')}
-            >
-                <i class='fas fa-times' aria-hidden='true' ></i>
-                {Translation.translate('plausible.status.disabled', 'Plausible is disabled', [], 'Module', 'Carbon.Plausible')}
-            </h2>
-            <h2
-                @if.set={props.settings.enable}
-                class='plausible-status'
-                title={Translation.translate('plausible.status.title', 'Based on the setting Carbon.Plausible.enable', [], 'Module', 'Carbon.Plausible')}
-            >
-                <i class='fas fa-check' aria-hidden='true'></i>
-                {Translation.translate('plausible.status.enabled', 'Plausible is enabled', [], 'Module', 'Carbon.Plausible')}
-            </h2>
-
-            <p @if.set={props.disableBecauseOfCookie}>
-                {Translation.translate('cookieStatus.disabled', 'Tracking from {0} is <strong>disabled</strong> in this browser.', [props.requestMainDomain], 'Module', 'Carbon.Plausible')}
-            </p>
-            <p @if.set={!props.disableBecauseOfCookie}>
-                {Translation.translate('cookieStatus.enabled', 'Tracking from {0} is <strong>enabled</strong> in this browser.', [props.requestMainDomain], 'Module', 'Carbon.Plausible')}
-            </p>
+                <h2
+                    @if.set={!props.settings.enable}
+                    class='plausible-status'
+                    title={Translation.translate('plausible.status.title', 'Based on the setting Carbon.Plausible.enable', [], 'Module', 'Carbon.Plausible')}
+                >
+                    <i class='fas fa-times' aria-hidden='true' ></i>
+                    {Translation.translate('plausible.status.disabled', 'Plausible is disabled', [], 'Module', 'Carbon.Plausible')}
+                </h2>
+                <h2
+                    @if.set={props.settings.enable}
+                    class='plausible-status'
+                    title={Translation.translate('plausible.status.title', 'Based on the setting Carbon.Plausible.enable', [], 'Module', 'Carbon.Plausible')}
+                >
+                    <i class='fas fa-check' aria-hidden='true'></i>
+                    {Translation.translate('plausible.status.enabled', 'Plausible is enabled', [], 'Module', 'Carbon.Plausible')}
+                </h2>
 
+                <p @if.set={props.disableBecauseOfCookie}>
+                    {Translation.translate('cookieStatus.disabled', 'Tracking from {0} is <strong>disabled</strong> in this browser.', [props.requestMainDomain], 'Module', 'Carbon.Plausible')}
+                </p>
+                <p @if.set={!props.disableBecauseOfCookie}>
+                    {Translation.translate('cookieStatus.enabled', 'Tracking from {0} is <strong>enabled</strong> in this browser.', [props.requestMainDomain], 'Module', 'Carbon.Plausible')}
+                </p>
 
-            <section>
-                <h2>{Translation.translate('defaultSettings', 'Default settings', [], 'Module', 'Carbon.Plausible')}</h2>
-                <table class='neos-table'>
-                    <thead>
-                        <Carbon.Plausible:Component.TableHeader />
-                    </thead>
-                    <tbody>
-                        <Neos.Fusion:Loop items={props.table}>
-                            <Carbon.Plausible:Component.TableRow
-                                key={item}
-                                value={props.default[item]}
-                            />
-                        </Neos.Fusion:Loop>
-                    </tbody>
-                </table>
-                <Carbon.Plausible:Component.Markup />
-            </section>
 
-            <h2>{Translation.translate('siteMappings', 'Site mappings', [], 'Module', 'Carbon.Plausible')}</h2>
-            <p @if.set={!props.settings.sites}>
-                {Translation.translate('noSiteMappings', 'No specific mapping set.', [], 'Module', 'Carbon.Plausible')}
-            </p>
-            <Neos.Fusion:Loop items={props.settings.sites} @if.set={this.items}>
                 <section>
+                    <h2>{Translation.translate('defaultSettings', 'Default settings', [], 'Module', 'Carbon.Plausible')}</h2>
                     <table class='neos-table'>
                         <thead>
-                            <Carbon.Plausible:Component.TableHeader
-                                first={Translation.translate('th.rootNodeName', 'Root node name', [], 'Module', 'Carbon.Plausible')}
-                                second={itemKey}
-                            />
                             <Carbon.Plausible:Component.TableHeader />
                         </thead>
                         <tbody>
-                            <Neos.Fusion:Loop items={props.table} itemName='row'>
+                            <Neos.Fusion:Loop items={props.table}>
                                 <Carbon.Plausible:Component.TableRow
-                                    key={row}
-                                    value={item[row]}
-                                    fallback={props.default[row]}
+                                    key={item}
+                                    value={props.default[item]}
                                 />
                             </Neos.Fusion:Loop>
                         </tbody>
                     </table>
-                    <Carbon.Plausible:Component.Markup siteName={itemKey} />
+                    <Carbon.Plausible:Component.Markup />
                 </section>
-            </Neos.Fusion:Loop>
 
-            <div class='neos-footer'>
+                <h2>{Translation.translate('siteMappings', 'Site mappings', [], 'Module', 'Carbon.Plausible')}</h2>
+                <p @if.set={!props.settings.sites}>
+                    {Translation.translate('noSiteMappings', 'No specific mapping set.', [], 'Module', 'Carbon.Plausible')}
+                </p>
+                <Neos.Fusion:Loop items={props.settings.sites} @if.set={this.items}>
+                    <section>
+                        <table class='neos-table'>
+                            <thead>
+                                <Carbon.Plausible:Component.TableHeader
+                                    first={Translation.translate('th.rootNodeName', 'Root node name', [], 'Module', 'Carbon.Plausible')}
+                                    second={itemKey}
+                                />
+                                <Carbon.Plausible:Component.TableHeader />
+                            </thead>
+                            <tbody>
+                                <Neos.Fusion:Loop items={props.table} itemName='row'>
+                                    <Carbon.Plausible:Component.TableRow
+                                        key={row}
+                                        value={item[row]}
+                                        fallback={props.default[row]}
+                                    />
+                                </Neos.Fusion:Loop>
+                            </tbody>
+                        </table>
+                        <Carbon.Plausible:Component.Markup siteName={itemKey} />
+                    </section>
+                </Neos.Fusion:Loop>
+            </main>
+
+            <aside class='plausible neos-footer'>
                 <button
                     type='button'
                     onclick={'setCookie();window.location.reload()'}
@@ -106,7 +108,7 @@ Carbon.Plausible.PlausibleController {
                 <a class='neos-button' href='https://plausible.io/docs' target='_blank' rel='nofollow noopener'>
                     <i class='fas fa-book' aria-hidden='true'></i> {Translation.translate('button.documentation', 'Open documentation', [], 'Module', 'Carbon.Plausible')}
                 </a>
-            </div>
+            </aside>
         `
     }
 }
diff --git a/Resources/Public/Module.css b/Resources/Public/Module.css
index 6e5b8e8..38e3906 100644
--- a/Resources/Public/Module.css
+++ b/Resources/Public/Module.css
@@ -1,59 +1,59 @@
-.neos.neos strong {
+.plausible.plausible strong {
   font-weight: bold;
 }
 
-.neos.neos h2 {
+.plausible.plausible h2 {
   font-size: 18px;
   margin: 2em 0 1em;
 }
 
-.neos.neos h3 {
+.plausible.plausible h3 {
   margin: 2em 0 1em;
 }
 
-.neos .plausible-status .fa-check {
+.plausible .plausible-status .fa-check {
   color: #00a338;
   margin-right: 0.5em;
 }
 
-.neos .plausible-status .fa-times {
+.plausible .plausible-status .fa-times {
   color: #ff8700;
   margin-right: 0.5em;
 }
 
-.neos .plausible-markup {
+.plausible .plausible-markup {
   margin: 0 0 2em;
 }
 
-.neos .plausible-markup code {
+.plausible .plausible-markup code {
   display: block;
   padding: 16px;
   background: #141414;
 }
 
-.neos .plausible-error {
+.plausible .plausible-error {
   background: #ff8700;
   padding: 16px;
 }
 
-.neos .plausible-error strong {
+.plausible .plausible-error strong {
   display: block;
 }
 
-.neos .plausible-markup code:empty,
-.neos .plausible-hide {
+.plausible .plausible-markup code:empty,
+.plausible .plausible-hide {
   display: none !important;
 }
 
-.neos .plausible-row--error td {
+.plausible .plausible-row--error td {
   background: #ff8700 !important;
 }
 
-.neos .neos-button .fas {
+.plausible .neos-button .fas {
   margin-right: 0.5em;
 }
 
-.neos .neos-table th:first-child {
+.plausible .neos-table th:first-child {
   width: 1%;
   white-space: nowrap;
 }