Slightly rework logs and configuration pages.

Maikuolan · Maikuolan · commit 970100a688e5 · 2025-09-01T11:28:51.000+08:00
diff --git a/Changelog.md b/Changelog.md
@@ -213,3 +213,4 @@ __*Why "v3.0.0" instead of "v1.0.0?"*__ Prior to phpMussel v3, the "phpMussel Co
 ### v3.7.1
 
 - [2025.08.31]: Slightly reworked the various front-end themes.
+- [2025.08.31]: Slightly reworked the logs page and the configuration page.
diff --git a/assets/bluemetal/frontend.css b/assets/bluemetal/frontend.css
@@ -128,7 +128,6 @@ input[type=checkbox]+label,input[type=radio]+label,.gridboxitem>label,.gridboxit
 .unshownlink::before{animation:revRotate .5s linear 1;animation-fill-mode:both}
 input[type=button].reset{background:none;cursor:pointer;border:none;padding:0 12px 0 12px;margin:0;width:auto;color:#fca}
 input[type=button].reset:hover,input[type=button].reset:active{color:#ffc}
-.tablend{margin-top:-2px}
 #logsTA{position:relative;top:-2px}
 .navicon.accounts{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:accounts.svg}{/Base64Encode})}
 .navicon.cache{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:cache.svg}{/Base64Encode})}
@@ -157,3 +156,6 @@ input[type=checkbox],input[type=radio]{accent-color:#89b}
 .clockMinutes{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockminutes.svg}{/Base64Encode});position:relative;inset:0 -16px}
 .clockSeconds{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockseconds.svg}{/Base64Encode});position:relative;inset:0 -32px}
 .clockFace{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockface.svg}{/Base64Encode});position:relative;inset:0 -48px}
+.col{display:flex;flex-direction:column;gap:2px;justify-content:start;align-items:start;flex-basis:100%;width:100%}
+.configInitPos{transform:scaleY(0);transform-origin:top center;opacity:0;max-height:0;margin-top:-2px}
+.configOpenPos{transform:scaleY(1);transform-origin:top center;opacity:1;max-height:auto}
diff --git a/assets/default/_config.html b/assets/default/_config.html
@@ -1,26 +1,27 @@
 <div class="mainbox">
   <nav class="big">
 {nav}
-  <div class="ng1 idx" translate="no">{Indexes}</div>
+  <div class="ng1 idx" translate="no">
+    <div class="subNav">{link.Configuration}</div>
+    {Indexes}
+  </div>
   </nav>
   <main class="extend">
     <div class="s">{state_msg}</div>
     <form action="?phpmussel-page=config" method="POST">
       <input type="hidden" name="updatingConfig" value="1" />
-      <table>
-        <tr><td class="ng2"><div class="s">{link.Configuration}</div></td></tr>
-        <tr>
-          <td class="ng1">
-            <div class="s">{tip.See the documentation}<hr /><em>{label.Active configuration file} <span class="txtRd">{ActiveConfigFile}</span></em><hr /></div>
-            <div class="bNav">
-              <input type="submit" value="{field.Update}" /><br />
-              <br />
-              <input type="checkbox" name="orphaned" id="orphaned" class="auto" /><label class="s" for="orphaned">{checkbox.Delete orphaned values}</label>
-            </div>
-          </td>
-        </tr>
-      </table>
+      <div class="col scrollTrans">
+        <div class="ng2 s">{link.Configuration}</div>
+        <div class="ng1 s">
+          {tip.See the documentation}<hr /><em>{label.Active configuration file} <span class="txtRd">{ActiveConfigFile}</span></em><hr />
+          <div class="bNav">
+            <input type="submit" value="{field.Update}" /><br />
+            <br />
+            <input type="checkbox" name="orphaned" id="orphaned" class="auto" /><label class="s" for="orphaned">{checkbox.Delete orphaned values}</label>
+          </div>
+        </div>
 {ConfigFields}
+      </div>
     </form>
   </main>
 </div>
diff --git a/assets/default/_config_row.html b/assets/default/_config_row.html
@@ -1,6 +1,5 @@
-    <tr>
-      <td class="ng1"><style>#{DirLangKey}:target{animation:idxAn 4s ease 0s 1 normal}</style>
-        <code id="{DirLangKey}" class="cat">{DirName}</code><br />{DirLang}<br /><br />
-        {FieldOut}
-      </td>
-    </tr>
+    <div class="ng1">
+      <style>#{DirLangKey}:target{animation:idxAn 4s ease 0s 1 normal}</style>
+      <code id="{DirLangKey}" class="cat">{DirName}</code><br />{DirLang}<br /><br />
+      {FieldOut}
+    </div>
diff --git a/assets/default/frontend.css b/assets/default/frontend.css
@@ -132,7 +132,6 @@ input[type=checkbox]+label,input[type=radio]+label,.gridboxitem>label,.gridboxit
 .unshownlink::before{animation:revRotate .5s linear 1;animation-fill-mode:both}
 input[type=button].reset{background:none;cursor:pointer;border:none;padding:0 12px 0 12px;margin:0;width:auto;color:red}
 input[type=button].reset:hover,input[type=button].reset:active{color:#f88}
-.tablend{margin-top:-2px}
 #logsTA{position:relative;top:-2px}
 .navicon.accounts{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:accounts.svg}{/Base64Encode})}
 .navicon.cache{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:cache.svg}{/Base64Encode})}
@@ -162,3 +161,6 @@ input[type=checkbox],input[type=radio]{accent-color:#900}
 .clockMinutes{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockminutes.svg}{/Base64Encode});position:relative;inset:0 -16px}
 .clockSeconds{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockseconds.svg}{/Base64Encode});position:relative;inset:0 -32px}
 .clockFace{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockface.svg}{/Base64Encode});position:relative;inset:0 -48px}
+.col{display:flex;flex-direction:column;gap:2px;justify-content:start;align-items:start;flex-basis:100%;width:100%}
+.configInitPos{transform:scaleY(0);transform-origin:top center;opacity:0;max-height:0;margin-top:-2px}
+.configOpenPos{transform:scaleY(1);transform-origin:top center;opacity:1;max-height:auto}
diff --git a/assets/fullmoon/frontend.css b/assets/fullmoon/frontend.css
@@ -122,7 +122,6 @@ input[type=checkbox]+label,input[type=radio]+label,.gridboxitem>label,.gridboxit
 .unshownlink::before{animation:revRotate .5s linear 1;animation-fill-mode:both}
 input[type=button].reset{background:none;cursor:pointer;border:none;padding:0 12px 0 12px;margin:0;width:auto;color:#e7ab7d}
 input[type=button].reset:hover,input[type=button].reset:active{color:#fcefcf}
-.tablend{margin-top:-2px}
 #logsTA{position:relative;top:-2px}
 .navicon.accounts{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:accounts.svg}{/Base64Encode})}
 .navicon.cache{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:cache.svg}{/Base64Encode})}
@@ -152,3 +151,6 @@ input[type=checkbox],input[type=radio]{accent-color:#cca}
 .clockMinutes{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockminutes.svg}{/Base64Encode});position:relative;inset:0 -16px}
 .clockSeconds{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockseconds.svg}{/Base64Encode});position:relative;inset:0 -32px}
 .clockFace{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockface.svg}{/Base64Encode});position:relative;inset:0 -48px}
+.col{display:flex;flex-direction:column;gap:2px;justify-content:start;align-items:start;flex-basis:100%;width:100%}
+.configInitPos{transform:scaleY(0);transform-origin:top center;opacity:0;max-height:0;margin-top:-2px}
+.configOpenPos{transform:scaleY(1);transform-origin:top center;opacity:1;max-height:auto}
diff --git a/assets/moss/frontend.css b/assets/moss/frontend.css
@@ -130,7 +130,6 @@ input[type=checkbox]+label,input[type=radio]+label,.gridboxitem>label,.gridboxit
 .unshownlink::before{animation:revRotate .5s linear 1;animation-fill-mode:both}
 input[type=button].reset{background:none;cursor:pointer;border:none;padding:0 12px 0 12px;margin:0;width:auto;color:#a04848}
 input[type=button].reset:hover,input[type=button].reset:active{color:#b77}
-.tablend{margin-top:-2px}
 #logsTA{position:relative;top:-2px}
 .navicon.accounts{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:accounts.svg}{/Base64Encode})}
 .navicon.cache{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:cache.svg}{/Base64Encode})}
@@ -160,3 +159,6 @@ input[type=checkbox],input[type=radio]{accent-color:#604848}
 .clockMinutes{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockminutes.svg}{/Base64Encode});position:relative;inset:0 -16px}
 .clockSeconds{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockseconds.svg}{/Base64Encode});position:relative;inset:0 -32px}
 .clockFace{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockface.svg}{/Base64Encode});position:relative;inset:0 -48px}
+.col{display:flex;flex-direction:column;gap:2px;justify-content:start;align-items:start;flex-basis:100%;width:100%}
+.configInitPos{transform:scaleY(0);transform-origin:top center;opacity:0;max-height:0;margin-top:-2px}
+.configOpenPos{transform:scaleY(1);transform-origin:top center;opacity:1;max-height:auto}
diff --git a/assets/primer/frontend.css b/assets/primer/frontend.css
@@ -137,7 +137,6 @@ input[type=text][pattern]:invalid:not(input[type=text]:placeholder-shown){backgr
 .unshownlink::before{animation:revRotate .5s linear 1;animation-fill-mode:both}
 input[type=button].reset{box-shadow:none;background:none;cursor:pointer;border:none;padding:0 12px 0 12px;width:auto;color:#cb2431}
 input[type=button].reset:hover,input[type=button].reset:active{color:#f88}
-.tablend{margin-top:-2px}
 #logsTA{position:relative;top:-2px}
 .navicon.accounts{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:accounts.svg}{/Base64Encode})}
 .navicon.cache{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:cache.svg}{/Base64Encode})}
@@ -166,3 +165,6 @@ input[type=checkbox],input[type=radio]{accent-color:#1d1d1e}
 .clockMinutes{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockminutes.svg}{/Base64Encode});position:relative;inset:0 -16px}
 .clockSeconds{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockseconds.svg}{/Base64Encode});position:relative;inset:0 -32px}
 .clockFace{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockface.svg}{/Base64Encode});position:relative;inset:0 -48px}
+.col{display:flex;flex-direction:column;gap:2px;justify-content:start;align-items:start;flex-basis:100%;width:100%}
+.configInitPos{transform:scaleY(0);transform-origin:top center;opacity:0;max-height:0;margin-top:-2px}
+.configOpenPos{transform:scaleY(1);transform-origin:top center;opacity:1;max-height:auto}
diff --git a/assets/primerdark/frontend.css b/assets/primerdark/frontend.css
@@ -139,7 +139,6 @@ input[type=text][pattern]:invalid:not(input[type=text]:placeholder-shown){backgr
 .unshownlink::before{animation:revRotate .5s linear 1;animation-fill-mode:both}
 input[type=button].reset{box-shadow:none;background:none;cursor:pointer;border:none;padding:0 12px 0 12px;width:auto;color:#c99}
 input[type=button].reset:hover,input[type=button].reset:active{color:#eaa}
-.tablend{margin-top:-2px}
 #logsTA{position:relative;top:-2px}
 .navicon.accounts{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:accounts.svg}{/Base64Encode})}
 .navicon.cache{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:cache.svg}{/Base64Encode})}
@@ -168,3 +167,6 @@ input[type=checkbox],input[type=radio]{accent-color:#bdc0c3}
 .clockMinutes{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockminutes.svg}{/Base64Encode});position:relative;inset:0 -16px}
 .clockSeconds{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockseconds.svg}{/Base64Encode});position:relative;inset:0 -32px}
 .clockFace{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockface.svg}{/Base64Encode});position:relative;inset:0 -48px}
+.col{display:flex;flex-direction:column;gap:2px;justify-content:start;align-items:start;flex-basis:100%;width:100%}
+.configInitPos{transform:scaleY(0);transform-origin:top center;opacity:0;max-height:0;margin-top:-2px}
+.configOpenPos{transform:scaleY(1);transform-origin:top center;opacity:1;max-height:auto}
diff --git a/assets/rbi/frontend.css b/assets/rbi/frontend.css
@@ -132,7 +132,6 @@ input[type=checkbox]+label,input[type=radio]+label,.gridboxitem>label,.gridboxit
 .unshownlink::before{animation:revRotate .5s linear 1;animation-fill-mode:both}
 input[type=button].reset{background:none;cursor:pointer;border:none;padding:0 12px 0 12px;margin:0;width:auto;color:red}
 input[type=button].reset:hover,input[type=button].reset:active{color:#f88}
-.tablend{margin-top:-2px}
 #logsTA{position:relative;top:-2px}
 .navicon.accounts{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:accounts.svg}{/Base64Encode})}
 .navicon.cache{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:cache.svg}{/Base64Encode})}
@@ -162,3 +161,6 @@ input[type=checkbox],input[type=radio]{accent-color:#009}
 .clockMinutes{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockminutes.svg}{/Base64Encode});position:relative;inset:0 -16px}
 .clockSeconds{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockseconds.svg}{/Base64Encode});position:relative;inset:0 -32px}
 .clockFace{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockface.svg}{/Base64Encode});position:relative;inset:0 -48px}
+.col{display:flex;flex-direction:column;gap:2px;justify-content:start;align-items:start;flex-basis:100%;width:100%}
+.configInitPos{transform:scaleY(0);transform-origin:top center;opacity:0;max-height:0;margin-top:-2px}
+.configOpenPos{transform:scaleY(1);transform-origin:top center;opacity:1;max-height:auto}
diff --git a/assets/scripts.js b/assets/scripts.js
diff --git a/assets/slate/frontend.css b/assets/slate/frontend.css
@@ -132,7 +132,6 @@ input[type=checkbox]+label,input[type=radio]+label,.gridboxitem>label,.gridboxit
 .unshownlink::before{animation:revRotate .5s linear 1;animation-fill-mode:both}
 input[type=button].reset{background:none;cursor:pointer;border:none;padding:0 12px 0 12px;margin:0;width:auto;color:#f74}
 input[type=button].reset:hover,input[type=button].reset:active{color:#fa7}
-.tablend{margin-top:-2px}
 #logsTA{position:relative;top:-2px}
 .navicon.accounts{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:accounts.svg}{/Base64Encode})}
 .navicon.cache{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:cache.svg}{/Base64Encode})}
@@ -162,3 +161,6 @@ input[type=checkbox],input[type=radio]{accent-color:#b50}
 .clockMinutes{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockminutes.svg}{/Base64Encode});position:relative;inset:0 -16px}
 .clockSeconds{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockseconds.svg}{/Base64Encode});position:relative;inset:0 -32px}
 .clockFace{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockface.svg}{/Base64Encode});position:relative;inset:0 -48px}
+.col{display:flex;flex-direction:column;gap:2px;justify-content:start;align-items:start;flex-basis:100%;width:100%}
+.configInitPos{transform:scaleY(0);transform-origin:top center;opacity:0;max-height:0;margin-top:-2px}
+.configOpenPos{transform:scaleY(1);transform-origin:top center;opacity:1;max-height:auto}
diff --git a/src/pages/config.php b/src/pages/config.php
@@ -52,11 +52,9 @@
         }
     }
     $FE['ConfigFields'] .= sprintf(
-        '<table class="tablend"><tr><td class="ng2"><div id="%1$s-container">' .
-        '<a id="%1$sShowLink" class="showlink s" href="#%1$s-container" onclick="javascript:toggleconfig(\'%1$sRow\',\'%1$sShowLink\')">%1$s</a>' .
-        '%3$s</div></td></tr></table><span id="%1$sRow" %2$s><table class="tablend">',
+        '        <div class="ng2" id="%1$s-container"><a id="%1$sShowLink" class="showlink s" href="#%1$s-container" onclick="javascript:toggleconfig(\'%1$sRow\',\'%1$sShowLink\')">%1$s</a>' .
+        '%2$s</div><div class="col configInitPos scrollTrans" id="%1$sRow">',
         $CatKey,
-        'style="display:none"',
         $CatInfo
     ) . "\n";
     $CatData = '';
@@ -645,7 +643,7 @@
         $CatKeyFriendly,
         $CatData
     );
-    $FE['ConfigFields'] .= "</table></span>\n";
+    $FE['ConfigFields'] .= "</div>\n";
 }
 
 /** Cleanup. */
diff --git a/src/pages/logs.php b/src/pages/logs.php
@@ -24,7 +24,7 @@
 $FE['FE_Content'] = $this->Loader->parse($FE, $this->Loader->readFile($this->getAssetPath('_logs.html')), true);
 
 /** Initialise array for fetching logs data. */
-$FE['LogFiles'] = ['Files' => $this->logsRecursiveList(), 'Out' => "\n"];
+$FE['LogFiles'] = ['Files' => $this->logsRecursiveList(), 'Out' => ''];
 
 /** Download a log file. */
 if (
@@ -114,7 +114,11 @@
 );
 
 /** Set the log files list or the no log files available message. */
-$FE['LogFiles'] = $FE['LogFiles']['Out'] ?: $this->Loader->L10N->getString('label.No log files available');
+if ($FE['LogFiles']['Out'] === '') {
+    $FE['LogFiles'] = $this->Loader->L10N->getString('label.No log files available');
+} else {
+    $FE['LogFiles'] = sprintf('      <div class="subNav">%s</div>', $this->Loader->L10N->getString('link.Logs')) . "\n" . $FE['LogFiles']['Out'];
+}
 
 /** Send output. */
 echo $this->sendOutput($FE);

Original file line number	Diff line number	Diff line change
`@@ -213,3 +213,4 @@ __Why "v3.0.0" instead of "v1.0.0?"__ Prior to phpMussel v3, the "phpMussel Co`
`213`	`213`	`### v3.7.1`
`214`	`214`
`215`	`215`	`- [2025.08.31]: Slightly reworked the various front-end themes.`
	`216`	`+- [2025.08.31]: Slightly reworked the logs page and the configuration page.`