[TASK] Update colors for pageoverview view

in2code-de · Nov 6, 2024 · de1e0ed · de1e0ed
1 parent 1e4df00
commit de1e0ed
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 25 deletions.
diff --git a/Resources/Private/Partials/PageOverview/Analysis/Body.html b/Resources/Private/Partials/PageOverview/Analysis/Body.html
@@ -1,4 +1,4 @@
-<div class="row" style="background-color: #fafafa; border-top: 1px solid #cdcdcd; border-bottom: 1px solid #cdcdcd; padding: 5px; margin: 5px;">
+<div class="row">
     <div class="col-md-4">
         <h4><f:translate key="LLL:EXT:lux/Resources/Private/Language/locallang_db.xlf:pageoverviewAnalysis.enter">enter</f:translate></h4>
         <div class="row">

diff --git a/Resources/Private/Sass/PageOverview.scss b/Resources/Private/Sass/PageOverview.scss
@@ -1,10 +1,21 @@
 @import "Settings";
 @import "Timeline";
 
+.lux-pageoverview-container {
+    border-radius: var(--pagemodule-grid-border-radius);
+    border: 1px dotted var(--pagemodule-grid-border-color);
+    margin-bottom: var(--typo3-spacing);
+    padding: 1rem;
+}
+.lux-pageoverview-container-inner {
+    border-radius: var(--pagemodule-grid-cell-border-radius);
+    background-color: var(--pagemodule-grid-cell-bg);
+    padding: 1rem;
+}
 .lux-pageoverview-box {
     width: 100%;
     height: 180px;
-    background: #eee;
+    background: var(--pagemodule-element-bg);
     display: flex;
     margin-bottom: 20px;
     overflow: hidden;

diff --git a/Resources/Private/Templates/Backend/PageOverview.html b/Resources/Private/Templates/Backend/PageOverview.html
@@ -8,33 +8,35 @@
         0: '{f:uri.resource(path:\'Css/PageOverview.min.css\',extensionName:\'Lux\')}'
     }"/>
 
-    <div class="lux">
-        <lux:condition.isLuxenterpriseExtensionActivated>
-            <f:else>
-                <a href="https://www.in2code.de/produkte/lux-typo3-marketing-automation/?utm_campaign=LUX+Community+Version&utm_id=llcv&utm_source=typo3&utm_medium=browser&utm_content=page+overview+go+enterprise" class="lux_poweredby" style="float:right;font-weight:bold;">
-                    <img src="{f:uri.resource(path:'Icons/star.svg',extensionName:'lux')}" alt="Lux enterprise" width="20" height="20" style="vertical-align:bottom;" />
-                    Go enterprise
-                </a>
-            </f:else>
-        </lux:condition.isLuxenterpriseExtensionActivated>
+    <div class="lux lux-pageoverview-container">
+        <div class="lux-pageoverview-container-inner">
+            <lux:condition.isLuxenterpriseExtensionActivated>
+                <f:else>
+                    <a href="https://www.in2code.de/produkte/lux-typo3-marketing-automation/?utm_campaign=LUX+Community+Version&utm_id=llcv&utm_source=typo3&utm_medium=browser&utm_content=page+overview+go+enterprise" class="lux_poweredby" style="float:right;font-weight:bold;">
+                        <img src="{f:uri.resource(path:'Icons/star.svg',extensionName:'lux')}" alt="Lux enterprise" width="20" height="20" style="vertical-align:bottom;" />
+                        Go enterprise
+                    </a>
+                </f:else>
+            </lux:condition.isLuxenterpriseExtensionActivated>
 
-        <h4 class="callout-title">
-            <div data-lux-unitajax="Pageoverview{view}Title" data-lux-unitajax-parameter-pageidentifier="{pageIdentifier}" style="min-height: 25px;"></div>
-        </h4>
+            <h4 class="callout-title">
+                <div data-lux-unitajax="Pageoverview{view}Title" data-lux-unitajax-parameter-pageidentifier="{pageIdentifier}" style="min-height: 25px;"></div>
+            </h4>
 
-        <div data-lux-toggle-target="pageOverview" class="{f:if(condition:'{status} == \'close\'',then:' hide')}">
-            <div>
-                <div data-lux-unitajax="Pageoverview{view}Body" data-lux-unitajax-parameter-pageidentifier="{pageIdentifier}" class="unitajax">
-                    <div class="unitajax-spinner"></div>
+            <div data-lux-toggle-target="pageOverview" class="{f:if(condition:'{status} == \'close\'',then:' hide')}">
+                <div>
+                    <div data-lux-unitajax="Pageoverview{view}Body" data-lux-unitajax-parameter-pageidentifier="{pageIdentifier}" class="unitajax">
+                        <div class="unitajax-spinner"></div>
+                    </div>
                 </div>
-            </div>
 
 
-            <lux:backend.getRenderingTime>
-                <p class="alert alert-light" role="alert" style="clear:both;color:black;background:white;margin:5px;">
-                    Rendering time: {renderingTime}s
-                </p>
-            </lux:backend.getRenderingTime>
+                <lux:backend.getRenderingTime>
+                    <p class="alert alert-light" role="alert" style="clear:both;color:black;background:white;margin:5px;">
+                        Rendering time: {renderingTime}s
+                    </p>
+                </lux:backend.getRenderingTime>
+            </div>
         </div>
     </div>
 </f:if>
diff --git a/Resources/Public/Css/PageOverview.min.css b/Resources/Public/Css/PageOverview.min.css