[ticket/16221] Fix ACP statistics layout

PHPBB3-16221

2 files changed, 64 insertions, 54 deletions

diff --git a/phpBB/adm/style/acp_main.html b/phpBB/adm/style/acp_main.html
index ce55d81375..f874d0cc22 100644
--- a/phpBB/adm/style/acp_main.html
+++ b/phpBB/adm/style/acp_main.html
@@ -98,109 +98,113 @@
 			<table class="table1 zebra-table no-header" data-no-responsive-header="true">
 				<thead>
 					<tr>
-						<th>{L_STATISTIC}</th>
-						<th>{L_VALUE}</th>
+						<th>{{ lang('STATISTIC}') }}</th>
+						<th>{{ lang('VALUE') }}</th>
 					</tr>
 				</thead>
+
 				<tbody>
 					<tr>
-						<td class="tabled">{L_NUMBER_POSTS}{L_COLON}</td>
-						<td class="tabled"><strong>{TOTAL_POSTS}</strong></td>
+						<td class="tabled">{{ lang('BOARD_STARTED') ~ lang('COLON') }}</td>
+						<td class="tabled"><strong>{{ START_DATE }}</strong></td>
 					</tr>
 					<tr>
-						<td class="tabled">{L_POSTS_PER_DAY}{L_COLON}</td>
-						<td class="tabled"><strong>{POSTS_PER_DAY}</strong></td>
+						<td class="tabled">{{ lang('AVATAR_DIR_SIZE') ~ lang('COLON') }}</td>
+						<td class="tabled"><strong>{{ AVATAR_DIR_SIZE }}</strong></td>
 					</tr>
 					<tr>
-						<td class="tabled">{L_NUMBER_TOPICS}{L_COLON}</td>
-						<td class="tabled"><strong>{TOTAL_TOPICS}</strong></td>
+						<td class="tabled">{{ lang('DATABASE_SIZE') ~ lang('COLON') }}</td>
+						<td class="tabled"><strong>{{ DBSIZE }}</strong></td>
 					</tr>
 					<tr>
-						<td class="tabled">{L_TOPICS_PER_DAY}{L_COLON}</td>
-						<td class="tabled"><strong>{TOPICS_PER_DAY}</strong></td>
+						<td class="tabled">{{ lang('UPLOAD_DIR_SIZE') ~ lang('COLON') }}</td>
+						<td class="tabled"><strong>{{ UPLOAD_DIR_SIZE }}</strong></td>
 					</tr>
 					<tr>
-						<td class="tabled">{L_NUMBER_USERS}{L_COLON}</td>
-						<td class="tabled"><strong>{TOTAL_USERS}</strong></td>
+						<td class="tabled">{{ lang('DATABASE_SERVER_INFO') ~ lang('COLON') }}</td>
+						<td class="tabled"><strong>{{ DATABASE_INFO }}</strong></td>
 					</tr>
 					<tr>
-						<td class="tabled">{L_USERS_PER_DAY}{L_COLON}</td>
-						<td class="tabled"><strong>{USERS_PER_DAY}</strong></td>
+						<td class="tabled">{{ lang('GZIP_COMPRESSION') ~ lang('COLON') }}</td>
+						<td class="tabled"><strong>{{ GZIP_COMPRESSION }}</strong></td>
 					</tr>
 					<tr>
-						<td class="tabled">{L_NUMBER_FILES}{L_COLON}</td>
-						<td class="tabled"><strong>{TOTAL_FILES}</strong></td>
+						<td class="tabled">{{ lang('PHP_VERSION') ~ lang('COLON') }}</td>
+						<td class="tabled"><strong>{{ PHP_VERSION_INFO }}</strong></td>
 					</tr>
 					<tr>
-						<td class="tabled">{L_FILES_PER_DAY}{L_COLON}</td>
-						<td class="tabled"><strong>{FILES_PER_DAY}</strong></td>
+					{% if S_TOTAL_ORPHAN %}
+						<td class="tabled">{{ lang('NUMBER_ORPHAN') ~ lang('COLON') }}</td>
+						<td class="tabled">
+						{% if TOTAL_ORPHAN > 0 %}
+							<a href="{{ U_ATTACH_ORPHAN }}" title="{{ lang('MORE_INFORMATION') }}"><strong>{{ TOTAL_ORPHAN }}</strong></a>
+						{% else %}
+							<strong>{{ TOTAL_ORPHAN }}</strong>
+						{% endif %}
+						</td>
+						{% else %}
+					{% endif %}
 					</tr>
+					{% if S_VERSIONCHECK %}
 					<tr>
-						<td class="tabled">&nbsp;</td>
-						<td class="tabled">&nbsp;</td>
+						<td class="tabled">{{ lang('BOARD_VERSION') ~ lang('COLON') }}</td>
+						<td class="tabled">
+							<strong><a href="{{ U_VERSIONCHECK }}" {% if S_VERSION_UP_TO_DATE %}style="color: #228822;" {% elseif not S_VERSIONCHECK_FAIL %}style="color: #BC2A4D;" {% endif %}title="{{ lang('MORE_INFORMATION') }}">{{ BOARD_VERSION }}</a></strong> [&nbsp;<a href="{{ U_VERSIONCHECK_FORCE }}">{{ lang('VERSIONCHECK_FORCE_UPDATE') }}</a>&nbsp;]
+						</td>
 					</tr>
+					{% endif %}
 				</tbody>
 			</table>
+
 			<table class="table1 zebra-table no-header" data-no-responsive-header="true">
 				<thead>
 					<tr>
-						<th>{L_STATISTIC}</th>
-						<th>{L_VALUE}</th>
+						<th>{{ lang('STATISTIC}') }}</th>
+						<th>{{ lang('VALUE') }}</th>
 					</tr>
 				</thead>
+
 				<tbody>
 					<tr>
-						<td class="tabled">{L_BOARD_STARTED}{L_COLON}</td>
-						<td class="tabled"><strong>{START_DATE}</strong></td>
+						<td class="tabled">{{ lang('NUMBER_POSTS') ~ lang('COLON') }}</td>
+						<td class="tabled"><strong>{{ TOTAL_POSTS }}</strong></td>
 					</tr>
 					<tr>
-						<td class="tabled">{L_AVATAR_DIR_SIZE}{L_COLON}</td>
-						<td class="tabled"><strong>{AVATAR_DIR_SIZE}</strong></td>
+						<td class="tabled">{{ lang('POSTS_PER_DAY') ~ lang('COLON') }}</td>
+						<td class="tabled"><strong>{{ POSTS_PER_DAY }}</strong></td>
 					</tr>
 					<tr>
-						<td class="tabled">{L_DATABASE_SIZE}{L_COLON}</td>
-						<td class="tabled"><strong>{DBSIZE}</strong></td>
+						<td class="tabled">{{ lang('NUMBER_TOPICS') ~ lang('COLON') }}</td>
+						<td class="tabled"><strong>{{ TOTAL_TOPICS }}</strong></td>
 					</tr>
 					<tr>
-						<td class="tabled">{L_UPLOAD_DIR_SIZE}{L_COLON}</td>
-						<td class="tabled"><strong>{UPLOAD_DIR_SIZE}</strong></td>
+						<td class="tabled">{{ lang('TOPICS_PER_DAY') ~ lang('COLON') }}</td>
+						<td class="tabled"><strong>{{ TOPICS_PER_DAY }}</strong></td>
 					</tr>
 					<tr>
-						<td class="tabled">{L_DATABASE_SERVER_INFO}{L_COLON}</td>
-						<td class="tabled"><strong>{DATABASE_INFO}</strong></td>
+						<td class="tabled">{{ lang('NUMBER_USERS') ~ lang('COLON') }}</td>
+						<td class="tabled"><strong>{{ TOTAL_USERS }}</strong></td>
 					</tr>
 					<tr>
-						<td class="tabled">{L_GZIP_COMPRESSION}{L_COLON}</td>
-						<td class="tabled"><strong>{GZIP_COMPRESSION}</strong></td>
+						<td class="tabled">{{ lang('USERS_PER_DAY') ~ lang('COLON') }}</td>
+						<td class="tabled"><strong>{{ USERS_PER_DAY }}</strong></td>
 					</tr>
 					<tr>
-						<td class="tabled">{L_PHP_VERSION}{L_COLON}</td>
-						<td class="tabled"><strong>{PHP_VERSION_INFO}</strong></td>
+						<td class="tabled">{{ lang('NUMBER_FILES') ~ lang('COLON') }}</td>
+						<td class="tabled"><strong>{{ TOTAL_FILES }}</strong></td>
 					</tr>
 					<tr>
-					<!-- IF S_TOTAL_ORPHAN -->
-						<td class="tabled">{L_NUMBER_ORPHAN}{L_COLON}</td>
-						<td class="tabled">
-						<!-- IF TOTAL_ORPHAN > 0 -->
-							<a href="{U_ATTACH_ORPHAN}" title="{L_MORE_INFORMATION}"><strong>{TOTAL_ORPHAN}</strong></a>
-						<!-- ELSE -->
-							<strong>{TOTAL_ORPHAN}</strong>
-						<!-- ENDIF -->
-						</td>
-						<!-- ELSE -->
-					<!-- ENDIF -->
+						<td class="tabled">{{ lang('FILES_PER_DAY') ~ lang('COLON') }}</td>
+						<td class="tabled"><strong>{{ FILES_PER_DAY }}</strong></td>
 					</tr>
-					<!-- IF S_VERSIONCHECK -->
 					<tr>
-						<td class="tabled">{L_BOARD_VERSION}{L_COLON}</td>
-						<td class="tabled">
-							<strong><a href="{U_VERSIONCHECK}" <!-- IF S_VERSION_UP_TO_DATE -->style="color: #228822;" <!-- ELSEIF not S_VERSIONCHECK_FAIL -->style="color: #BC2A4D;" <!-- ENDIF -->title="{L_MORE_INFORMATION}">{BOARD_VERSION}</a></strong> [&nbsp;<a href="{U_VERSIONCHECK_FORCE}">{L_VERSIONCHECK_FORCE_UPDATE}</a>&nbsp;]
-						</td>
+						<td class="tabled">&nbsp;</td>
+						<td class="tabled">&nbsp;</td>
 					</tr>
-					<!-- ENDIF -->
 				</tbody>
 			</table>
 		</div>
+
 	<!-- IF S_ACTION_OPTIONS -->
 		<fieldset>
 			<legend>{L_STATISTIC_RESYNC_OPTIONS}</legend>
diff --git a/phpBB/adm/style/admin.css b/phpBB/adm/style/admin.css
index a44de6561e..9a898cdb68 100644
--- a/phpBB/adm/style/admin.css
+++ b/phpBB/adm/style/admin.css
@@ -723,11 +723,17 @@ td {
 }
 
 .table1 {
-	clear: both;
+	display: inline-block;
 	border-spacing: 1px;
 	border-collapse: separate;
 }
 
+.lside {
+	display: flex;
+	align-items: stretch;
+	width: 100%;
+}
+
 .tabled {
 	width: 25%;
 }