chore: Improve stylings and html markup

die-wegmeister · Dec 3, 2024 · bfc1abe · bfc1abe
1 parent e65e8f0
commit bfc1abe
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 38 deletions.
diff --git a/Resources/Private/Layouts/Default.html b/Resources/Private/Layouts/Default.html
@@ -1,14 +1,4 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <title><f:render section="Title" /></title>
+<f:flashMessages class="flashmessages" />
 
-    </head>
-    <body>
-        <f:flashMessages class="flashmessages" />
-
-        <h1><f:render section="Title" /></h1>
-        <f:render section="Content" />
-    </body>
-</html>
+<f:render section="Title" />
+<f:render section="Content" />
diff --git a/Resources/Private/Templates/DatabaseStorage/DeleteAll.html b/Resources/Private/Templates/DatabaseStorage/DeleteAll.html
@@ -1,9 +1,12 @@
 {namespace neos=Neos\Neos\ViewHelpers}
 <f:layout name="Default" />
 
-<f:section name="title">{neos:backend.translate(id: 'storage.databaseStorage')} - {neos:backend.translate(id: 'storage.deleteAll.deleteEntries')}</f:section>
+<f:section name="title"><h1>{neos:backend.translate(id: 'storage.databaseStorage')} - {neos:backend.translate(id: 'storage.deleteAll.deleteEntries')}</h1></f:section>
 
 <f:section name="content">
+  <style>
+    .neos h1 {font-size: 150%; margin: 1em 0;}
+  </style>
   <section>
     <h3>{neos:backend.translate(id: 'storage.deleteAll.successTitle')}</h3>
     <p>{neos:backend.translate(id: 'storage.deleteAll.successTitle', arguments: {0: count, 1: identifier})}</p>

diff --git a/Resources/Private/Templates/DatabaseStorage/Index.html b/Resources/Private/Templates/DatabaseStorage/Index.html
@@ -1,11 +1,24 @@
 {namespace neos=Neos\Neos\ViewHelpers}
 <f:layout name="Default" />
 
-<f:section name="Title">{neos:backend.translate(id: 'storage.databaseStorage')}</f:section>
+<f:section name="Title"><h1>{neos:backend.translate(id: 'storage.databaseStorage')}</h1></f:section>
 
 <f:section name="Content">
   <style>
+    .neos h1 {font-size: 150%; margin: 1em 0;}
     .size-sm {width: 150px;}
+    .neos .buttons {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      margin-top: 1em;
+    }
+    .buttons .neos-button {
+      height: auto;
+      line-height: 1.2;
+      margin-left: 0!important;
+      padding: 0.8em 1em;
+    }
   </style>
 
   <div class="neos-row-fluid">
@@ -71,16 +84,21 @@
                         </div>
                       </div>
                       <div class="neos-modal-footer">
-                        <a href="#" class="neos-button" data-dismiss="modal">{neos:backend.translate(id: 'cancel', value: 'Cancel', package: 'Neos.Neos')}</a>
-                        <f:form action="deleteAll" arguments="{identifier: identifier}" class="neos-inline">
+                        <f:form action="deleteAll" arguments="{identifier: identifier}">
                           <f:form.hidden name="redirect" value="1" />
-                          <label>
-                            <f:form.checkbox name="removeAttachedResources" value="1" />
-                            {neos:backend.translate(id: 'storage.deleteModal.removeAttachedResources')}
-                          </label>
-                          <button type="submit" class="neos-button neos-button-danger" title="{neos:backend.translate(id: 'storage.deleteModal.buttonTitle')}">
-                            {neos:backend.translate(id: 'storage.deleteModal.buttonText', arguments: {0: identifier})}
-                          </button>
+                          <div>
+                            <label class="neos-checkbox">
+                              <f:form.checkbox name="removeAttachedResources" value="1" />
+                              <span></span>
+                              {neos:backend.translate(id: 'storage.deleteModal.removeAttachedResources')}
+                            </label>
+                          </div>
+                          <div class="buttons">
+                            <a href="#" class="neos-button" data-dismiss="modal">{neos:backend.translate(id: 'cancel', value: 'Cancel', package: 'Neos.Neos')}</a>
+                            <button type="submit" class="neos-button neos-button-danger" title="{neos:backend.translate(id: 'storage.deleteModal.buttonTitle')}">
+                              {neos:backend.translate(id: 'storage.deleteModal.buttonText', arguments: {0: identifier})}
+                            </button>
+                          </div>
                         </f:form>
                       </div>
                     </div>

diff --git a/Resources/Private/Templates/DatabaseStorage/Show.html b/Resources/Private/Templates/DatabaseStorage/Show.html
@@ -4,21 +4,32 @@
 
 <f:section name="Title">
 	<p><f:link.action action="index" class="neos-button">{neos:backend.translate(id: 'storage.backToIdentifiers')}</f:link.action></p>
-	<div class="neos-row-fluid">
-		<legend>
-			{neos:backend.translate(id: 'storage.databaseStorage')} - [{f:if(condition: '{entries -> f:count()} > 0', then: '{entries -> f:count()}')}] {neos:backend.translate(id: 'storage.entriesForX', arguments: {0: identifier})}
-		</legend>
-	</div>
+    <h1>
+        {neos:backend.translate(id: 'storage.databaseStorage')} - [{f:if(condition: '{entries -> f:count()} > 0', then: '{entries -> f:count()}')}] {neos:backend.translate(id: 'storage.entriesForX', arguments: {0: identifier})}
+    </h1>
 </f:section>
 
 <f:section name="Content">
   <style>
+    .neos h1 {font-size: 150%; margin: 1em 0;}
     .scrollable-table {overflow-x: auto; width: 100%;}
     .scrollable-table .neos-table {min-width: 100%; max-width: none;}
     .size-sm {width: 50px;}
     .neos.neos-module table.neos-table td,
     .neos.neos-module table.neos-table th {line-height: 24px; padding: 8px 16px;}
     .neos.neos-module table td a {text-decoration: underline;}
+    .neos .buttons {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      margin-top: 1em;
+    }
+    .buttons .neos-button {
+      height: auto;
+      line-height: 1.2;
+      margin-left: 0!important;
+      padding: 0.8em 1em;
+    }
   </style>
 
   <div class="neos-row-fluid">
@@ -55,15 +66,20 @@
                           </div>
                         </div>
                         <div class="neos-modal-footer">
-                          <a href="#" class="neos-button" data-dismiss="modal">{neos:backend.translate(id: 'cancel', value: 'Cancel', package: 'Neos.Neos')}</a>
-                          <f:form action="delete" object="{entry}" objectName="entry" class="neos-inline">
-                            <label>
-                              <f:form.checkbox name="removeAttachedResources" value="1" />
-                              {neos:backend.translate(id: 'storage.deleteModal.removeAttachedResources')}
-                            </label>
-                            <button type="submit" class="neos-button neos-button-danger" title="{neos:backend.translate(id: 'storage.deleteSingleModal.buttonTitle')}">
-                              {neos:backend.translate(id: 'storage.deleteSingleModal.buttonTitle')}
-                            </button>
+                          <f:form action="delete" object="{entry}" objectName="entry">
+                            <div>
+                              <label class="neos-checkbox">
+                                <f:form.checkbox name="removeAttachedResources" value="1" />
+                                <span></span>
+                                {neos:backend.translate(id: 'storage.deleteModal.removeAttachedResources')}
+                              </label>
+                            </div>
+                            <div class="buttons">
+                              <a href="#" class="neos-button" data-dismiss="modal">{neos:backend.translate(id: 'cancel', value: 'Cancel', package: 'Neos.Neos')}</a>
+                              <button type="submit" class="neos-button neos-button-danger" title="{neos:backend.translate(id: 'storage.deleteSingleModal.buttonTitle')}">
+                                {neos:backend.translate(id: 'storage.deleteSingleModal.buttonTitle')}
+                              </button>
+                            </div>
                           </f:form>
                         </div>
                       </div>