Overhaul the credits box

diff --git a/wcfsetup/install/files/acp/style/layout.scss b/wcfsetup/install/files/acp/style/layout.scss
index 20768b63b2da6b6a08cd2fe7a54ecb737737b31a..7549ac8f19c363a88ba723078bbd3a841d9b3c10 100644 (file)
--- a/wcfsetup/install/files/acp/style/layout.scss
+++ b/wcfsetup/install/files/acp/style/layout.scss
@@ -951,7 +951,6 @@ html[data-color-scheme="dark"] {
 
 .acpDashboardBox__title {
        border-bottom: 1px solid var(--wcfContentContainerBorder);
-       color: var(--wcfContentDimmedText);
        font-weight: 600;
        padding: 10px 20px;
 }
@@ -971,21 +970,33 @@ html[data-color-scheme="dark"] {
 }
 
 .acpDashboardBox__keyValue {
-       align-items: center;
+       align-items: start;
        column-gap: 15px;
        display: grid;
-       grid-template-areas: "dt spacer dd";
-       grid-template-columns: max-content auto max-content;
+       grid-template-areas: "key spacer value";
+       grid-template-columns: max-content minmax(15px, auto) minmax(min-content, max-content);
 
        &::before {
                border-bottom: 5px dotted currentColor;
                content: "";
                display: block;
                grid-area: spacer;
+               margin-top: 0.6em;
                opacity: 0.12;
        }
 }
 
 .acpDashboardBox__keyValue__key {
        color: var(--wcfInputLabel);
+       grid-area: key;
+}
+
+.acpDashboardBox__keyValue__value {
+       grid-area: value;
+       text-align: right;
+}
+
+.acpDashboardBox__keyValue__list {
+       display: flex;
+       flex-direction: column;
 }

diff --git a/wcfsetup/install/files/acp/templates/creditsAcpDashboardBox.tpl b/wcfsetup/install/files/acp/templates/creditsAcpDashboardBox.tpl
index c902c28886d5783d3961639e8e5d9a2852be0041..22b057b4385d1bf21ab0ccda23930b4477c1e41d 100644 (file)
--- a/wcfsetup/install/files/acp/templates/creditsAcpDashboardBox.tpl
+++ b/wcfsetup/install/files/acp/templates/creditsAcpDashboardBox.tpl
@@ -1,60 +1,64 @@
-<dl>
-       <dt>{lang}wcf.acp.dashboard.box.credits.developedBy{/lang}</dt>
-       <dd><a href="https://www.woltlab.com/{if $__wcf->getLanguage()->getFixedLanguageCode() === 'de'}de/{/if}" class="externalURL"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank" rel="noopener"{/if}>WoltLab&reg; GmbH</a></dd>
-</dl>
+<div class="acpDashboardBox__keyValueGroup">
+       <dl class="plain acpDashboardBox__keyValue">
+               <dt class="acpDashboardBox__keyValue__key">{lang}wcf.acp.dashboard.box.credits.developedBy{/lang}</dt>
+               <dd class="acpDashboardBox__keyValue__value"><a href="https://www.woltlab.com/{if $__wcf->getLanguage()->getFixedLanguageCode() === 'de'}de/{/if}" class="externalURL"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank" rel="noopener"{/if}>WoltLab&reg; GmbH</a></dd>
+       </dl>
 
-<dl>
-       <dt>{lang}wcf.acp.dashboard.box.credits.productManager{/lang}</dt>
-       <dd>
-               <ul class="inlineList commaSeparated">
-                       <li>Marcel Werk</li>
-               </ul>
-       </dd>
-</dl>
+       <dl class="plain acpDashboardBox__keyValue">
+               <dt class="acpDashboardBox__keyValue__key">{lang}wcf.acp.dashboard.box.credits.productManager{/lang}</dt>
+               <dd class="acpDashboardBox__keyValue__value">
+                       <ul class="acpDashboardBox__keyValue__list">
+                               <li>Marcel Werk</li>
+                       </ul>
+               </dd>
+       </dl>
 
-<dl>
-       <dt>{lang}wcf.acp.dashboard.box.credits.developer{/lang}</dt>
-       <dd>
-               <ul class="inlineList commaSeparated">
-                       <li>Olaf Braun</li>
-                       <li>Tim D&uuml;sterhus</li>
-                       <li>Alexander Ebert</li>
-                       <li>Joshua R&uuml;sweg</li>
-                       <li>Matthias Schmidt</li>
-                       <li>Marcel Werk</li>
-               </ul>
-       </dd>
-</dl>
+       <dl class="plain acpDashboardBox__keyValue">
+               <dt class="acpDashboardBox__keyValue__key">{lang}wcf.acp.dashboard.box.credits.developer{/lang}</dt>
+               <dd class="acpDashboardBox__keyValue__value">
+                       <ul class="acpDashboardBox__keyValue__list">
+                               <li>Olaf Braun</li>
+                               <li>Tim D&uuml;sterhus</li>
+                               <li>Alexander Ebert</li>
+                               <li>Joshua R&uuml;sweg</li>
+                               <li>Matthias Schmidt</li>
+                               <li>Marcel Werk</li>
+                       </ul>
+               </dd>
+       </dl>
 
-<dl>
-       <dt>{lang}wcf.acp.dashboard.box.credits.designer{/lang}</dt>
-       <dd>
-               <ul class="inlineList commaSeparated">
-                       <li>Alexander Ebert</li>
-                       <li>Marcel Werk</li>
-               </ul>
-       </dd>
-</dl>
+       <dl class="plain acpDashboardBox__keyValue">
+               <dt class="acpDashboardBox__keyValue__key">{lang}wcf.acp.dashboard.box.credits.designer{/lang}</dt>
+               <dd class="acpDashboardBox__keyValue__value">
+                       <ul class="acpDashboardBox__keyValue__list">
+                               <li>Alexander Ebert</li>
+                               <li>Marcel Werk</li>
+                       </ul>
+               </dd>
+       </dl>
 
-<dl>
-       <dt>{lang}wcf.acp.dashboard.box.credits.contributor{/lang}</dt>
-       <dd>
-               <ul class="inlineList commaSeparated">
-                       <li>Andrea Berg</li>
-                       <li>Thorsten Buitkamp</li>
-                       <li>
-                               <a href="https://github.com/WoltLab/WCF/contributors" class="externalURL"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank" rel="noopener"{/if}>{lang}wcf.acp.dashboard.box.credits.contributor.more{/lang}</a>
-                       </li>
-               </ul>
-       </dd>
-</dl>
+       <dl class="plain acpDashboardBox__keyValue">
+               <dt class="acpDashboardBox__keyValue__key">{lang}wcf.acp.dashboard.box.credits.contributor{/lang}</dt>
+               <dd class="acpDashboardBox__keyValue__value">
+                       <ul class="acpDashboardBox__keyValue__list">
+                               <li>Andrea Berg</li>
+                               <li>Thorsten Buitkamp</li>
+                               <li>
+                                       <a href="https://github.com/WoltLab/WCF/contributors" class="externalURL"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank" rel="noopener"{/if}>{lang}wcf.acp.dashboard.box.credits.contributor.more{/lang}</a>
+                               </li>
+                       </ul>
+               </dd>
+       </dl>
+</div>
 
-<dl>
-       <dt></dt>
-       <dd>Copyright &copy; 2001-{TIME_NOW|date:'Y'} WoltLab&reg; GmbH. All rights reserved.</dd>
-</dl>
+<div class="acpDashboardBox__keyValueGroup">
+       <p class="acpDashboardBox__keyValue__text">
+               Copyright &copy; 2001-{TIME_NOW|date:'Y'} WoltLab&reg; GmbH.<br>All rights reserved.
+       </p>
+</div>
 
-<dl>
-       <dt></dt>
-       <dd>{lang}wcf.acp.dashboard.box.credits.trademarks{/lang}</dd>
-</dl>
+<div class="acpDashboardBox__keyValueGroup">
+       <p class="acpDashboardBox__keyValue__text">
+               {lang}wcf.acp.dashboard.box.credits.trademarks{/lang}
+       </p>
+</div>