diff --git a/core/includes/install.core.inc b/core/includes/install.core.inc
index 6fcc2d26ed65b940b29f228d5a00c403328fc184..ca66c11398e696d0b875e0b05133b8dcdfb131f1 100644
--- a/core/includes/install.core.inc
+++ b/core/includes/install.core.inc
@@ -2158,7 +2158,7 @@ function install_display_requirements($install_state, $requirements) {
// and indicating a desire to continue anyway. See drupal_requirements_url().
if ($severity == REQUIREMENT_ERROR || ($severity == REQUIREMENT_WARNING && empty($install_state['parameters']['continue']))) {
if ($install_state['interactive']) {
- $build['report']['#theme'] = 'status_report';
+ $build['report']['#type'] = 'status_report';
$build['report']['#requirements'] = $requirements;
if ($severity == REQUIREMENT_WARNING) {
$build['#title'] = t('Requirements review');
diff --git a/core/lib/Drupal/Core/Render/Element/StatusReport.php b/core/lib/Drupal/Core/Render/Element/StatusReport.php
new file mode 100644
index 0000000000000000000000000000000000000000..d913066134e5bff3c5c22054ed059a2c9c7268c3
--- /dev/null
+++ b/core/lib/Drupal/Core/Render/Element/StatusReport.php
@@ -0,0 +1,89 @@
+<?php
+
+namespace Drupal\Core\Render\Element;
+
+/**
+ * Creates status report page element.
+ *
+ * @RenderElement("status_report")
+ */
+class StatusReport extends RenderElement {
+
+ /**
+ * {@inheritdoc}
+ */
+ public function getInfo() {
+ $class = get_class($this);
+ return [
+ '#theme' => 'status_report_grouped',
+ '#priorities' => [
+ 'error',
+ 'warning',
+ 'checked',
+ 'ok',
+ ],
+ '#pre_render' => [
+ [$class, 'preRenderGroupRequirements'],
+ ],
+ ];
+ }
+
+ /**
+ * #pre_render callback to group requirements.
+ */
+ public static function preRenderGroupRequirements($element) {
+ $severities = static::getSeverities();
+ $grouped_requirements = [];
+ foreach ($element['#requirements'] as $key => $requirement) {
+ $severity = $severities[REQUIREMENT_INFO];
+ if (isset($requirement['severity'])) {
+ $requirement_severity = (int) $requirement['severity'] === REQUIREMENT_OK ? REQUIREMENT_INFO : (int) $requirement['severity'];
+ $severity = $severities[$requirement_severity];
+ }
+ elseif (defined('MAINTENANCE_MODE') && MAINTENANCE_MODE == 'install') {
+ $severity = $severities[REQUIREMENT_OK];
+ }
+
+ $grouped_requirements[$severity['status']]['title'] = $severity['title'];
+ $grouped_requirements[$severity['status']]['type'] = $severity['status'];
+ $grouped_requirements[$severity['status']]['items'][$key] = $requirement;
+ }
+
+ // Order the grouped requirements by a set order.
+ $order = array_flip($element['#priorities']);
+ uksort($grouped_requirements, function ($a, $b) use ($order) {
+ return $order[$a] > $order[$b];
+ });
+
+ $element['#grouped_requirements'] = $grouped_requirements;
+
+ return $element;
+ }
+
+ /**
+ * Gets the severities.
+ *
+ * @return array
+ */
+ public static function getSeverities() {
+ return [
+ REQUIREMENT_INFO => [
+ 'title' => t('Checked'),
+ 'status' => 'checked',
+ ],
+ REQUIREMENT_OK => [
+ 'title' => t('OK'),
+ 'status' => 'ok',
+ ],
+ REQUIREMENT_WARNING => [
+ 'title' => t('Warnings found'),
+ 'status' => 'warning',
+ ],
+ REQUIREMENT_ERROR => [
+ 'title' => t('Errors found'),
+ 'status' => 'error',
+ ],
+ ];
+ }
+
+}
diff --git a/core/modules/content_translation/src/Tests/ContentTranslationEnableTest.php b/core/modules/content_translation/src/Tests/ContentTranslationEnableTest.php
index fb13642a88abe070fe0662a0f60998203558b82d..26987b4d414fc6f41842fc4569ecbd7d099d1e7f 100644
--- a/core/modules/content_translation/src/Tests/ContentTranslationEnableTest.php
+++ b/core/modules/content_translation/src/Tests/ContentTranslationEnableTest.php
@@ -35,7 +35,7 @@ public function testEnable() {
// No pending updates should be available.
$this->drupalGet('admin/reports/status');
- $requirement_value = $this->cssSelect("tr.system-status-report__entry th:contains('Entity/field definitions') + td");
+ $requirement_value = $this->cssSelect("details.system-status-report__entry summary:contains('Entity/field definitions') + div");
$this->assertEqual(t('Up to date'), trim((string) $requirement_value[0]));
$this->drupalGet('admin/config/regional/content-language');
@@ -53,7 +53,7 @@ public function testEnable() {
// No pending updates should be available.
$this->drupalGet('admin/reports/status');
- $requirement_value = $this->cssSelect("tr.system-status-report__entry th:contains('Entity/field definitions') + td");
+ $requirement_value = $this->cssSelect("details.system-status-report__entry summary:contains('Entity/field definitions') + div");
$this->assertEqual(t('Up to date'), trim((string) $requirement_value[0]));
// Create a node type and check the content translation settings are now
diff --git a/core/modules/system/css/components/system-status-counter.css b/core/modules/system/css/components/system-status-counter.css
new file mode 100644
index 0000000000000000000000000000000000000000..1f568f021f5e2e458412db2b8165d4634f6af48b
--- /dev/null
+++ b/core/modules/system/css/components/system-status-counter.css
@@ -0,0 +1,30 @@
+/**
+ * @file
+ * Styles for the system status counter component.
+ */
+
+.system-status-counter__status-icon {
+ display: inline-block;
+ height: 25px;
+ width: 25px;
+ vertical-align: middle;
+}
+.system-status-counter__status-icon:before {
+ content: "";
+ background-size: 16px;
+ background-position: center 2px;
+ background-repeat: no-repeat;
+ width: 100%;
+ height: 100%;
+ display: block;
+}
+
+.system-status-counter__status-icon--error:before {
+ background-image: url(../../../../misc/icons/e32700/error.svg);
+}
+.system-status-counter__status-icon--warning:before {
+ background-image: url(../../../../misc/icons/e29700/warning.svg);
+}
+.system-status-counter__status-icon--checked:before {
+ background-image: url(../../../../misc/icons/73b355/check.svg);
+}
diff --git a/core/modules/system/css/components/system-status-report-counters.css b/core/modules/system/css/components/system-status-report-counters.css
new file mode 100644
index 0000000000000000000000000000000000000000..1a4e2400f4f39352de54911fcc8eebe1f8cf4f95
--- /dev/null
+++ b/core/modules/system/css/components/system-status-report-counters.css
@@ -0,0 +1,27 @@
+/**
+ * @file
+ * Styles for the system status report counters.
+ */
+
+.system-status-report-counters__item {
+ width: 100%;
+ padding: .5em 0;
+ text-align: center;
+ white-space: nowrap;
+ background-color: rgba(0, 0, 0, 0.063);
+ margin-bottom: .5em;
+}
+
+@media screen and (min-width: 60em) {
+ .system-status-report-counters {
+ flex-wrap: wrap;
+ display: flex;
+ justify-content: space-between;
+ }
+ .system-status-report-counters__item--half-width {
+ width: 49%;
+ }
+ .system-status-report-counters__item--third-width {
+ width: 33%;
+ }
+}
diff --git a/core/modules/system/css/components/system-status-report-general-info.css b/core/modules/system/css/components/system-status-report-general-info.css
new file mode 100644
index 0000000000000000000000000000000000000000..8334d4d198aac215a169c8b1998b1d22be9ae99b
--- /dev/null
+++ b/core/modules/system/css/components/system-status-report-general-info.css
@@ -0,0 +1,14 @@
+/**
+ * @file
+ * Default styles for the System Status general info.
+ */
+
+.system-status-general-info__item {
+ border: 1px solid #ccc;
+ margin-top: 1em;
+ padding: 0 1em 1em;
+}
+
+.system-status-general-info__item-title {
+ border-bottom: 1px solid #ccc;
+}
diff --git a/core/modules/system/css/system.admin.css b/core/modules/system/css/system.admin.css
index 6bfd6f80903d0bef57f0c409827662f2af33b1e3..913ce57fce49223bf33e34df007018ae18a3b719 100644
--- a/core/modules/system/css/system.admin.css
+++ b/core/modules/system/css/system.admin.css
@@ -204,10 +204,11 @@ small .admin-link:after {
.system-status-report__status-title {
position: relative;
vertical-align: top;
- width: 25%;
+ width: 100%;
padding: 10px 6px 10px 40px; /* LTR */
box-sizing: border-box;
font-weight: normal;
+ background-color: transparent;
}
[dir="rtl"] .system-status-report__status-title {
padding: 10px 40px 10px 6px;
@@ -232,6 +233,9 @@ small .admin-link:after {
.system-status-report__status-icon--warning:before {
background-image: url(../../../misc/icons/e29700/warning.svg);
}
+.system-status-report__entry__value {
+ padding: 1em .5em;
+}
/**
* Appearance page.
@@ -387,3 +391,6 @@ small .admin-link:after {
[dir="rtl"] .system-themes-admin-form {
clear: right;
}
+.cron-description__run-cron {
+ display: block;
+}
diff --git a/core/modules/system/src/Controller/DbUpdateController.php b/core/modules/system/src/Controller/DbUpdateController.php
index f378631a5c8639d81e9a36f91a8093068d971b8a..fdedcc652e819f99f90e4d2fb4d3efba2733d420 100644
--- a/core/modules/system/src/Controller/DbUpdateController.php
+++ b/core/modules/system/src/Controller/DbUpdateController.php
@@ -522,7 +522,7 @@ public function requirements($severity, array $requirements, Request $request) {
$try_again_url = Url::fromUri($request->getUriForPath(''))->setOptions(['query' => $options])->toString(TRUE)->getGeneratedUrl();
$build['status_report'] = array(
- '#theme' => 'status_report',
+ '#type' => 'status_report',
'#requirements' => $requirements,
'#suffix' => $this->t('Check the messages and <a href=":url">try again</a>.', array(':url' => $try_again_url))
);
diff --git a/core/modules/system/src/Controller/SystemInfoController.php b/core/modules/system/src/Controller/SystemInfoController.php
index aa9f140457aa702390cbace62fc61327d9797271..829d1fef55b70203d4becb8b96af29815ddda5e5 100644
--- a/core/modules/system/src/Controller/SystemInfoController.php
+++ b/core/modules/system/src/Controller/SystemInfoController.php
@@ -47,7 +47,7 @@ public function __construct(SystemManager $systemManager) {
*/
public function status() {
$requirements = $this->systemManager->listRequirements();
- return array('#theme' => 'status_report', '#requirements' => $requirements);
+ return ['#type' => 'status_report_page', '#requirements' => $requirements];
}
/**
diff --git a/core/modules/system/src/Element/StatusReportPage.php b/core/modules/system/src/Element/StatusReportPage.php
new file mode 100644
index 0000000000000000000000000000000000000000..5d2f985309d9fe4a132c1d126272c130371014c7
--- /dev/null
+++ b/core/modules/system/src/Element/StatusReportPage.php
@@ -0,0 +1,139 @@
+<?php
+
+namespace Drupal\system\Element;
+
+use Drupal\Core\Render\Element\RenderElement;
+use Drupal\Core\Render\Element\StatusReport;
+use Drupal\Core\StringTranslation\PluralTranslatableMarkup;
+
+/**
+ * Creates status report page element.
+ *
+ * @RenderElement("status_report_page")
+ */
+class StatusReportPage extends RenderElement {
+
+ /**
+ * {@inheritdoc}
+ */
+ public function getInfo() {
+ $class = get_class($this);
+ return [
+ '#theme' => 'status_report_page',
+ '#pre_render' => [
+ [$class, 'preRenderCounters'],
+ [$class, 'preRenderGeneralInfo'],
+ [$class, 'preRenderRequirements'],
+ ],
+ ];
+ }
+
+ /**
+ * #pre_render callback to get general info out of requirements.
+ */
+ public static function preRenderGeneralInfo($element) {
+ $element['#general_info'] = [
+ '#theme' => 'status_report_general_info',
+ ];
+ // Loop through requirements and pull out items.
+ foreach ($element['#requirements'] as $key => $requirement) {
+ switch ($key) {
+ case 'cron':
+ foreach ($requirement['description'] as &$description_elements) {
+ foreach ($description_elements as &$description_element) {
+ if (isset($description_element['#url']) && $description_element['#url']->getRouteName() == 'system.run_cron') {
+ $description_element['#attributes']['class'][] = 'button';
+ $description_element['#attributes']['class'][] = 'button--small';
+ $description_element['#attributes']['class'][] = 'button--primary';
+ $description_element['#attributes']['class'][] = 'system-status-general-info__run-cron';
+ }
+ }
+ }
+ $element['#general_info']['#' . $key] = $requirement;
+ unset($element['#requirements'][$key]);
+ break;
+
+ case 'drupal':
+ case 'webserver':
+ case 'database_system':
+ case 'database_system_version':
+ case 'php':
+ case 'php_memory_limit':
+ $element['#general_info']['#' . $key] = $requirement;
+ unset($element['#requirements'][$key]);
+ break;
+ }
+ }
+
+ return $element;
+ }
+
+ /**
+ * #pre_render callback to create counter elements.
+ */
+ public static function preRenderCounters($element) {
+ // Count number of items with different severity for summary.
+ $counters = [
+ 'error' => [
+ 'amount' => 0,
+ 'text' => t('Error'),
+ 'text_plural' => t('Errors'),
+ ],
+ 'warning' => [
+ 'amount' => 0,
+ 'text' => t('Warning'),
+ 'text_plural' => t('Warnings'),
+ ],
+ 'checked' => [
+ 'amount' => 0,
+ 'text' => t('Checked'),
+ 'text_plural' => t('Checked'),
+ ],
+ ];
+
+ $severities = StatusReport::getSeverities();
+ foreach ($element['#requirements'] as $key => &$requirement) {
+ $severity = $severities[REQUIREMENT_INFO];
+ if (isset($requirement['severity'])) {
+ $severity = $severities[(int) $requirement['severity']];
+ }
+ elseif (defined('MAINTENANCE_MODE') && MAINTENANCE_MODE == 'install') {
+ $severity = $severities[REQUIREMENT_OK];
+ }
+
+ if (isset($counters[$severity['status']])) {
+ $counters[$severity['status']]['amount']++;
+ }
+ }
+
+ foreach ($counters as $key => $counter) {
+ if ($counter['amount'] === 0) {
+ continue;
+ }
+
+ $text = new PluralTranslatableMarkup($counter['amount'], $counter['text'], $counter['text_plural']);
+
+ $element['#counters'][$key] = [
+ '#theme' => 'status_report_counter',
+ '#amount' => $counter['amount'],
+ '#text' => $text,
+ '#severity' => $key,
+ ];
+ }
+
+ return $element;
+ }
+
+ /**
+ * #pre_render callback to create status report requirements.
+ */
+ public static function preRenderRequirements($element) {
+ $element['#requirements'] = [
+ '#type' => 'status_report',
+ '#requirements' => $element['#requirements'],
+ ];
+
+ return $element;
+ }
+
+}
diff --git a/core/modules/system/src/SystemManager.php b/core/modules/system/src/SystemManager.php
index e5d3a18bd32363a434c58e4e5990e9279f376875..b9fcebb12ddec56e45ea2e077d8a576d59efd6d7 100644
--- a/core/modules/system/src/SystemManager.php
+++ b/core/modules/system/src/SystemManager.php
@@ -110,7 +110,7 @@ public function listRequirements() {
// Check run-time requirements and status information.
$requirements = $this->moduleHandler->invokeAll('requirements', array('runtime'));
- usort($requirements, function($a, $b) {
+ uasort($requirements, function($a, $b) {
if (!isset($a['weight'])) {
if (!isset($b['weight'])) {
return strcasecmp($a['title'], $b['title']);
diff --git a/core/modules/system/src/Tests/System/CronRunTest.php b/core/modules/system/src/Tests/System/CronRunTest.php
index ec35b72bbe7484c58bad4ad39e1065465e87b1ca..26a56a32c118022407a76722509a82d4dd873137 100644
--- a/core/modules/system/src/Tests/System/CronRunTest.php
+++ b/core/modules/system/src/Tests/System/CronRunTest.php
@@ -121,7 +121,7 @@ public function testManualCron() {
$this->assertResponse(403);
$this->drupalGet('admin/reports/status');
- $this->clickLink(t('run cron manually'));
+ $this->clickLink(t('Run cron'));
$this->assertResponse(200);
$this->assertText(t('Cron ran successfully.'));
}
diff --git a/core/modules/system/system.admin.inc b/core/modules/system/system.admin.inc
index f9c49c765359e4cb5b99bf34235a95d95c3377cc..94f630295adbff40c8928dec5ff40a1665cef70a 100644
--- a/core/modules/system/system.admin.inc
+++ b/core/modules/system/system.admin.inc
@@ -105,66 +105,6 @@ function template_preprocess_system_admin_index(&$variables) {
}
}
-/**
- * Prepares variables for status report template.
- *
- * Default template: status-report.html.twig.
- *
- * This theme function is dependent on install.inc being loaded, because
- * that's where the constants are defined.
- *
- * @param $variables
- * An associative array containing:
- * - requirements: An array of requirements/status items. Each requirement
- * is an associative array containing the following elements:
- * - title: The name of the requirement.
- * - value: (optional) The current value (version, time, level, etc).
- * - description: (optional) The description of the requirement.
- * - severity: (optional) The requirement's result/severity level, one of:
- * - REQUIREMENT_INFO: Status information.
- * - REQUIREMENT_OK: The requirement is satisfied.
- * - REQUIREMENT_WARNING: The requirement failed with a warning.
- * - REQUIREMENT_ERROR: The requirement failed with an error.
- */
-function template_preprocess_status_report(&$variables) {
- $severities = array(
- REQUIREMENT_INFO => array(
- 'title' => t('Info'),
- 'status' => 'info',
- ),
- REQUIREMENT_OK => array(
- 'title' => t('OK'),
- 'status' => 'ok',
- ),
- REQUIREMENT_WARNING => array(
- 'title' => t('Warning'),
- 'status' => 'warning',
- ),
- REQUIREMENT_ERROR => array(
- 'title' => t('Error'),
- 'status' => 'error',
- ),
- );
-
- foreach ($variables['requirements'] as $i => $requirement) {
- // Always use the explicit requirement severity, if defined. Otherwise,
- // default to REQUIREMENT_OK in the installer to visually confirm that
- // installation requirements are met. And default to REQUIREMENT_INFO to
- // denote neutral information without special visualization.
- if (isset($requirement['severity'])) {
- $severity = $severities[(int) $requirement['severity']];
- }
- elseif (defined('MAINTENANCE_MODE') && MAINTENANCE_MODE == 'install') {
- $severity = $severities[REQUIREMENT_OK];
- }
- else {
- $severity = $severities[REQUIREMENT_INFO];
- }
- $variables['requirements'][$i]['severity_title'] = $severity['title'];
- $variables['requirements'][$i]['severity_status'] = $severity['status'];
- }
-}
-
/**
* Prepares variables for the module details templates.
*
diff --git a/core/modules/system/system.install b/core/modules/system/system.install
index 27abfa009bad5a822994a8b87a81d19c7233d09c..d022f6aa0ed2cbce6a17ed8df089e5b4f25f33d1 100644
--- a/core/modules/system/system.install
+++ b/core/modules/system/system.install
@@ -535,14 +535,20 @@ function system_requirements($phase) {
],
];
}
- $cron_url = \Drupal::url('system.cron', ['key' => \Drupal::state()->get('system.cron_key'), ['absolute' => TRUE]]);
$requirements['cron']['description'][] = [
[
- '#markup' => t('You can <a href=":cron">run cron manually</a>.', [':cron' => \Drupal::url('system.run_cron')]),
+ '#type' => 'link',
+ '#prefix' => '(',
+ '#title' => t('more information'),
+ '#suffix' => ')',
+ '#url' => Url::fromRoute('system.cron_settings'),
],
[
- '#prefix' => '<br />',
- '#markup' => t('To run cron from outside the site, go to <a href=":url">@cron</a>', [':url' => $cron_url, '@cron' => $cron_url]),
+ '#prefix' => '<span class="cron-description__run-cron">',
+ '#suffix' => '</span>',
+ '#type' => 'link',
+ '#title' => t('Run cron'),
+ '#url' => Url::fromRoute('system.run_cron'),
],
];
}
diff --git a/core/modules/system/system.libraries.yml b/core/modules/system/system.libraries.yml
index 206ae4fc86e86b1356e8f36c31ca5921950df6f5..98eb2839191af91fd0a04511af5635b90986c2f4 100644
--- a/core/modules/system/system.libraries.yml
+++ b/core/modules/system/system.libraries.yml
@@ -19,6 +19,9 @@ base:
css/components/reset-appearance.module.css: { weight: -10 }
css/components/resize.module.css: { weight: -10 }
css/components/sticky-header.module.css: { weight: -10 }
+ css/components/system-status-counter.css: { weight: -10 }
+ css/components/system-status-report-counters.css: { weight: -10 }
+ css/components/system-status-report-general-info.css: { weight: -10 }
css/components/tabledrag.module.css: { weight: -10 }
css/components/tablesort.module.css: { weight: -10 }
css/components/tree-child.module.css: { weight: -10 }
diff --git a/core/modules/system/system.module b/core/modules/system/system.module
index 6581e60a1040a9346fe2c46c4dadee8b65b13e0d..a63744325f637d4e49c8ac7db1d043ee2bfc45b8 100644
--- a/core/modules/system/system.module
+++ b/core/modules/system/system.module
@@ -197,9 +197,38 @@ function system_theme() {
'render element' => 'form',
'file' => 'system.admin.inc',
),
+ 'status_report_page' => array(
+ 'variables' => array(
+ 'counters' => array(),
+ 'general_info' => array(),
+ 'requirements' => NULL,
+ ),
+ ),
'status_report' => array(
- 'variables' => array('requirements' => NULL),
- 'file' => 'system.admin.inc',
+ 'variables' => array(
+ 'grouped_requirements' => NULL,
+ 'requirements' => NULL,
+ ),
+ ),
+ 'status_report_grouped' => array(
+ 'variables' => array(
+ 'grouped_requirements' => NULL,
+ 'requirements' => NULL,
+ ),
+ ),
+ 'status_report_counter' => array(
+ 'variables' => array('amount' => NULL, 'text' => NULL, 'severity' => NULL),
+ ),
+ 'status_report_general_info' => array(
+ 'variables' => array(
+ 'drupal' => array(),
+ 'cron' => array(),
+ 'database_system' => array(),
+ 'database_system_version' => array(),
+ 'php' => array(),
+ 'php_memory_limit' => array(),
+ 'webserver' => array(),
+ ),
),
'admin_page' => array(
'variables' => array('blocks' => NULL),
diff --git a/core/modules/system/templates/status-report-counter.html.twig b/core/modules/system/templates/status-report-counter.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..8489e495d88ea910bc077d603374d485cd586e45
--- /dev/null
+++ b/core/modules/system/templates/status-report-counter.html.twig
@@ -0,0 +1,16 @@
+{#
+/**
+ * @file
+ * Default theme implementation for the status report counter.
+ *
+ * Available variables:
+ * - amount: The number shown on counter.
+ * - text: The text shown on counter.
+ * - severity: The severity of the counter.
+ *
+ * @ingroup themable
+ */
+#}
+<span class="system-status-counter__status-icon system-status-counter__status-icon--{{ severity }}"></span>
+<span>{{ amount }} {{ text }}</span>
+<a href="#{{ severity }}"><span class="visually-hidden">{{ text }} </span>Details</a>
diff --git a/core/modules/system/templates/status-report-general-info.html.twig b/core/modules/system/templates/status-report-general-info.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..d4d5054dcf41ddfc127955bd8b0a486d84217f12
--- /dev/null
+++ b/core/modules/system/templates/status-report-general-info.html.twig
@@ -0,0 +1,81 @@
+{#
+/**
+ * @file
+ * Default theme implementation for the status report general info.
+ *
+ * Available variables:
+ * - drupal: The status of Drupal installation:
+ * - value: The current status of Drupal installation.
+ * - description: The description for current status of Drupal installation.
+ * - cron: The status of cron:
+ * - value: The current status of cron.
+ * - description: The description for current status of cron.
+ * - cron.run_cron: An array to render a button for running cron.
+ * - database_system: The status of database system:
+ * - value: The current status of database sytem.
+ * - description: The description for current status of cron.
+ * - database_system_version: The info about current database version:
+ * - value: The current version of database.
+ * - description: The description for current version of database.
+ * - php: The current version of PHP:
+ * - value: The status of currently installed PHP version.
+ * - description: The description for current installed PHP version.
+ * - php_memory_limit: The info about current PHP memory limit:
+ * - value: The status of currently set PHP memory limit.
+ * - description: The description for currently set PHP memory limit.
+ * - webserver: The info about currently installed web server:
+ * - value: The status of currently installed web server.
+ * - description: The description for the status of currently installed web
+ * server.
+ */
+#}
+
+<h2>{{ 'General System Information'|t }}</h2>
+<div class="system-status-general-info__item">
+ <h3 class="system-status-general-info__item-title">{{ 'Drupal Version'|t }}</h3>
+ {{ drupal.value }}
+ {% if drupal.description %}
+ {{ drupal.description }}
+ {% endif %}
+</div>
+<div class="system-status-general-info__item">
+ <h3 class="system-status-general-info__item-title">{{ 'Last Cron Run'|t }}</h3>
+ {{ cron.value }}
+ {% if cron.run_cron %}
+ {{ cron.run_cron }}
+ {% endif %}
+ {% if cron.description %}
+ {{ cron.description }}
+ {% endif %}
+</div>
+<div class="system-status-general-info__item">
+ <h3 class="system-status-general-info__item-title">{{ 'Web Server'|t }}</h3>
+ {{ webserver.value }}
+ {% if webserver.description %}
+ {{ webserver.description }}
+ {% endif %}
+</div>
+<div class="system-status-general-info__item">
+ <h3 class="system-status-general-info__item-title">{{ 'PHP'|t }}</h3>
+ <h4>{{ 'Version'|t }}</h4> {{ php.value }}
+ {% if php.description %}
+ {{ php.description }}
+ {% endif %}
+
+ <h4>{{ 'Memory limit'|t }}</h4>{{ php_memory_limit.value }}
+ {% if php_memory_limit.description %}
+ {{ php_memory_limit.description }}
+ {% endif %}
+</div>
+<div class="system-status-general-info__item">
+ <h3 class="system-status-general-info__item-title">{{ 'Database'|t }}</h3>
+ <h4>{{ 'Version'|t }}</h4>{{ database_system_version.value }}
+ {% if database_system_version.description %}
+ {{ database_system_version.description }}
+ {% endif %}
+
+ <h4>{{ 'System'|t }}</h4>{{ database_system.value }}
+ {% if database_system.description %}
+ {{ database_system.description }}
+ {% endif %}
+</div>
diff --git a/core/modules/system/templates/status-report-grouped.html.twig b/core/modules/system/templates/status-report-grouped.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..bd34e5af053facddb1cde4ac2f5c15be5de21207
--- /dev/null
+++ b/core/modules/system/templates/status-report-grouped.html.twig
@@ -0,0 +1,49 @@
+{#
+/**
+ * @file
+ * Default theme implementation of grouped status report requirements.
+ *
+ * - grouped_requirements: Contains grouped requirements.
+ * Each group contains:
+ * - title: The title of the group.
+ * - type: The severity of the group.
+ * - items: The requirement instances.
+ * Each requirement item contains:
+ * - title: The title of the requirement.
+ * - value: (optional) The requirement's status.
+ * - description: (optional) The requirement's description.
+ * - severity_title: The title of the severity.
+ * - severity_status: Indicates the severity status.
+ */
+#}
+{{ attach_library('core/drupal.collapse') }}
+
+<div>
+ {% for group in grouped_requirements %}
+ <div>
+ <h3 id="{{ group.type }}">{{ group.title }}</h3>
+ {% for requirement in group.items %}
+ <details class="system-status-report__entry">
+ {%
+ set summary_classes = [
+ 'system-status-report__status-title',
+ group.type in ['warning', 'error'] ? 'system-status-report__status-icon system-status-report__status-icon--' ~ group.type
+ ]
+ %}
+ <summary{{ create_attribute({'class': summary_classes}) }} role="button">
+ {% if requirement.severity_title %}
+ <span class="visually-hidden">{{ requirement.severity_title }}</span>
+ {% endif %}
+ {{ requirement.title }}
+ </summary>
+ <div class="system-status-report__entry__value">
+ {{ requirement.value }}
+ {% if requirement.description %}
+ <div class="description">{{ requirement.description }}</div>
+ {% endif %}
+ </div>
+ </details>
+ {% endfor %}
+ </div>
+ {% endfor %}
+</div>
diff --git a/core/modules/system/templates/status-report-page.html.twig b/core/modules/system/templates/status-report-page.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..ed6d1ea5904b59313e12b1a90bafee3759273c56
--- /dev/null
+++ b/core/modules/system/templates/status-report-page.html.twig
@@ -0,0 +1,28 @@
+{#
+/**
+ * @file
+ * Default theme implementation for the status report page.
+ *
+ * Available variables:
+ * - counters: The list of counter elements.
+ * - general_info: A render array to create general info element.
+ * - requirements: A render array to create requirements table.
+ *
+ * @see template_preprocess_status_report()
+ */
+#}
+{% if counters|length == 3 %}
+ {% set element_width_class = ' system-status-report-counters__item--third-width' %}
+{% elseif counters|length == 2 %}
+ {% set element_width_class = ' system-status-report-counters__item--half-width' %}
+{% endif %}
+<div class="system-status-report-counters">
+ {% for counter in counters %}
+ <div class="system-status-report-counters__item{{ element_width_class }}">
+ {{ counter }}
+ </div>
+ {% endfor %}
+</div>
+
+{{ general_info }}
+{{ requirements }}
diff --git a/core/modules/system/templates/status-report.html.twig b/core/modules/system/templates/status-report.html.twig
index b6ad73985b88778193b9e4e72dd990ba55a63daa..ca9cf2b6a63e6f31cbf9accddd4dc076c2efdddd 100644
--- a/core/modules/system/templates/status-report.html.twig
+++ b/core/modules/system/templates/status-report.html.twig
@@ -2,40 +2,38 @@
/**
* @file
* Default theme implementation for the status report.
- *
- * Available variables:
- * - requirements: Contains multiple requirement instances.
- * Each requirement contains:
- * - title: The title of the requirement.
- * - value: (optional) The requirement's status.
- * - description: (optional) The requirement's description.
- * - severity_title: The title of the severity.
- * - severity_status: Indicates the severity status.
- *
- * @see template_preprocess_status_report()
- *
- * @ingroup themeable
- */
-#}
-<table class="system-status-report">
- <tbody>
- {% for requirement in requirements %}
- <tr class="system-status-report__entry system-status-report__entry--{{ requirement.severity_status }} color-{{ requirement.severity_status }}">
- {% if requirement.severity_status in ['warning', 'error'] %}
- <th class="system-status-report__status-title system-status-report__status-icon system-status-report__status-icon--{{ requirement.severity_status }}">
+ *
+ * Available variables:
+ * - grouped_requirements: Contains grouped requirements.
+ * Each group contains:
+ * - title: The title of the group.
+ * - type: The severity of the group.
+ * - items: The requirement instances.
+ * Each requirement item contains:
+ * - title: The title of the requirement.
+ * - value: (optional) The requirement's status.
+ * - description: (optional) The requirement's description.
+ * - severity_title: The title of the severity.
+ * - severity_status: Indicates the severity status.
+ * - requirements: Ungrouped requirements
+ *
+ * @ingroup themeable
+ */
+ #}
+{% for group in grouped_requirements %}
+ <h3 id="{{ group.type }}">{{ group.title }}</h3>
+ {% for requirement in group.items %}
+ <details>
+ <summary role="button">
+ {% if requirement.severity_title %}
<span class="visually-hidden">{{ requirement.severity_title }}</span>
- {% else %}
- <th class="system-status-report__status-title">
- {% endif %}
- {{ requirement.title }}
- </th>
- <td>
- {{ requirement.value }}
- {% if requirement.description %}
- <div class="description">{{ requirement.description }}</div>
{% endif %}
- </td>
- </tr>
+ {{ requirement.title }}
+ </summary>
+ {{ requirement.value }}
+ {% if requirement.description %}
+ <div>{{ requirement.description }}</div>
+ {% endif %}
+ </details>
{% endfor %}
- </tbody>
-</table>
+{% endfor %}
diff --git a/core/themes/seven/css/components/system-status-counter.css b/core/themes/seven/css/components/system-status-counter.css
new file mode 100644
index 0000000000000000000000000000000000000000..c3e0f30e5d03fd0d935d5d36e510dd1d41dc8272
--- /dev/null
+++ b/core/themes/seven/css/components/system-status-counter.css
@@ -0,0 +1,87 @@
+/**
+ * @file
+ * Styles for the system status counter component.
+ */
+
+.system-status-counter {
+ box-sizing: border-box;
+ overflow-y: hidden;
+ border: 1px solid #e6e4df;
+ border-radius: 3px;
+ display: inline-block;
+ width: 100%;
+ white-space: nowrap;
+ background: #FCFCFA;
+}
+.system-status-counter__status-icon {
+ display: inline-block;
+ height: 60px;
+ width: 60px;
+ vertical-align: middle;
+ border-right: 1px solid #e6e4df; /* LTR */
+ border-left: 0; /* LTR */
+ background-color: #faf9f5;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, .1) inset;
+}
+[dir="rtl"] .system-status-counter__status-icon {
+ border-right: 0;
+ border-left: 1px solid #e6e4df;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, .1) inset;
+}
+.system-status-counter__status-icon:before {
+ content: "";
+ background-size: 25px;
+ background-position: 50% center;
+ background-repeat: no-repeat;
+ width: 100%;
+ height: 100%;
+ display: block;
+}
+
+.system-status-counter__status-icon--error:before {
+ background-image: url(../../../stable/images/core/icons/e32700/error.svg);
+}
+.system-status-counter__status-icon--warning:before {
+ background-image: url(../../../stable/images/core/icons/e29700/warning.svg);
+}
+.system-status-counter__status-icon--checked:before {
+ background-image: url(../../../stable/images/core/icons/73b355/check.svg);
+}
+
+.system-status-counter__status-title {
+ display: inline-block;
+ vertical-align: middle;
+ text-transform: uppercase;
+ padding: 0 6px;
+ font-size: 1rem;
+ line-height: 1em;
+ font-weight: bold;
+}
+.system-status-counter__title-count {
+ display: block;
+ margin-bottom: 2px;
+}
+.system-status-counter__details {
+ font-size: 12px;
+ font-weight: normal;
+ text-transform: none;
+ display: block;
+ line-height: 1.5;
+}
+
+@media screen and (min-width: 61em) {
+ .system-status-counter__status-icon,
+ .system-status-counter {
+ height: 65px;
+ }
+ .system-status-counter__status-icon {
+ width: 65px;
+ }
+ .system-status-counter__status-title {
+ font-size: 16px;
+ padding: 10px 3%;
+ }
+ .system-status-counter__status-icon:before {
+ background-size: 35px;
+ }
+}
diff --git a/core/themes/seven/css/components/system-status-report-counters.css b/core/themes/seven/css/components/system-status-report-counters.css
new file mode 100644
index 0000000000000000000000000000000000000000..a8e6db3228cf8ef4b52071e5ad600a1208371f02
--- /dev/null
+++ b/core/themes/seven/css/components/system-status-report-counters.css
@@ -0,0 +1,26 @@
+/**
+ * @file
+ * Styles for the system status report counters.
+ */
+
+.system-status-report-counters__item {
+ margin: 10px 0;
+ width: 100%;
+}
+
+@media screen and (min-width: 60em) {
+ .system-status-report-counters__item {
+ margin-bottom: 20px;
+ }
+ .system-status-report-counters {
+ flex-wrap: wrap;
+ display: flex;
+ justify-content: space-between;
+ }
+ .system-status-report-counters__item--half-width {
+ width: 49%;
+ }
+ .system-status-report-counters__item--third-width {
+ width: 32%;
+ }
+}
diff --git a/core/themes/seven/css/components/system-status-report-general-info.css b/core/themes/seven/css/components/system-status-report-general-info.css
new file mode 100644
index 0000000000000000000000000000000000000000..08ee97748dd43a25dbc4f83b05ae9c7aeeaee435
--- /dev/null
+++ b/core/themes/seven/css/components/system-status-report-general-info.css
@@ -0,0 +1,161 @@
+/**
+ * @file
+ * Seven styles for the System Status general info.
+ */
+
+.system-status-general-info {
+ border: 1px solid #ccc;
+ border-radius: 3px;
+}
+
+.system-status-general-info__header {
+ background-color: #f5f5f2;
+ padding: 10px;
+ margin: 0;
+ overflow: hidden;
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+ font-size: 14px;
+ text-transform: uppercase;
+}
+
+.system-status-general-info__item {
+ background: #fcfcfa;
+ border-top: 1px solid #ccc;
+ padding: 10px 10px 20px;
+ box-sizing: border-box;
+ overflow-x: auto;
+}
+
+.system-status-general-info__item-icon {
+ display: inline-block;
+ height: 45px;
+ width: 45px;
+ vertical-align: top;
+}
+.system-status-general-info__item-icon:before {
+ content: "";
+ background-size: 35px;
+ background-position: 50% center;
+ background-repeat: no-repeat;
+ width: 100%;
+ height: 100%;
+ display: block;
+}
+.system-status-general-info__item-icon--d8:before {
+ background-image: url(../../images/icons/cccccc/d8-logo.svg);
+}
+.system-status-general-info__item-icon--clock:before {
+ background-image: url(../../images/icons/cccccc/clock.svg);
+}
+.system-status-general-info__item-icon--server:before {
+ background-image: url(../../images/icons/cccccc/server.svg);
+}
+.system-status-general-info__item-icon--php:before {
+ background-image: url(../../images/icons/cccccc/php-logo.svg);
+ background-size: 45px;
+}
+.system-status-general-info__item-icon--database:before {
+ background-image: url(../../images/icons/cccccc/database.svg);
+ background-size: 30px;
+}
+
+.system-status-general-info__item-details {
+ box-sizing: border-box;
+ display: inline-block;
+ width: calc(100% - 60px);
+ padding-left: 10px; /* LTR */
+ position: relative;
+}
+[dir="rtl"] .system-status-general-info__item-details {
+ padding-right: 10px;
+ padding-left: 0;
+}
+
+.system-status-general-info__item-title {
+ margin-bottom: 0;
+}
+
+.system-status-general-info__sub-item-title {
+ margin: 0;
+}
+
+.system-status-general-info__sub-item__title {
+ font-weight: bold;
+}
+.system-status-general-info__sub-item__value {
+ display: block;
+}
+
+.system-status-general-info__run-cron {
+ margin: 1em 0 0;
+}
+
+@media screen and (min-width: 48em) {
+ .system-status-general-info__items {
+ display: flex;
+ flex-wrap: wrap;
+ overflow-x: hidden;
+ }
+
+ .system-status-general-info__item {
+ flex: 1;
+ flex-basis: 33%;
+ width: 33%;
+ }
+ .system-status-general-info__item:nth-child(2) {
+ flex: 2;
+ flex-basis: 66%;
+ }
+ .system-status-general-info__item:nth-child(2),
+ .system-status-general-info__item:nth-child(4),
+ .system-status-general-info__item:nth-child(5) {
+ border-left: 1px solid #ccc; /* LTR */
+ }
+ [dir="rtl"] .system-status-general-info__item:nth-child(1),
+ [dir="rtl"] .system-status-general-info__item:nth-child(3) {
+ border-left: 1px solid #ccc;
+ }
+ [dir="rtl"] .system-status-general-info__item:nth-child(2),
+ [dir="rtl"] .system-status-general-info__item:nth-child(5) {
+ border-left: 0;
+ }
+
+ .system-status-general-info__run-cron {
+ margin: 15px 0 5px;
+ }
+}
+
+@media screen and (min-width: 60em) {
+ .system-status-general-info__item-icon {
+ width: 55px;
+ height: 55px;
+ }
+ .system-status-general-info__item-icon:before {
+ background-size: 35px;
+ }
+ .system-status-general-info__item-icon--php:before {
+ background-size: 55px;
+ }
+
+ .system-status-general-info__run-cron {
+ position: absolute;
+ top: 1em;
+ right: 1em; /* LTR */
+ margin-top: 0;
+ }
+ [dir="rtl"] .system-status-general-info__run-cron {
+ left: 1em;
+ right: auto;
+ }
+}
+
+@media screen and (max-width: 48em) {
+ .system-status-general-info__header {
+ display: none;
+ }
+ .system-status-general-info {
+ border-top: 0;
+ margin-top: 25px;
+ }
+}
diff --git a/core/themes/seven/css/components/system-status-report.css b/core/themes/seven/css/components/system-status-report.css
index aeac1d3e6c37be130cdd597772afffaba5954a7f..bfcd75cfe4f86563801ec4dec581bb8239e8a209 100644
--- a/core/themes/seven/css/components/system-status-report.css
+++ b/core/themes/seven/css/components/system-status-report.css
@@ -3,13 +3,151 @@
* Seven styles for the System Status Report.
*/
+.system-status-report__requirements-group {
+ padding-top: 20px;
+}
.system-status-report__entry {
+ border: 0;
border-top: 1px solid #ccc;
- border-bottom: inherit;
-}
-.system-status-report__entry:first-child {
- border-top: 1px solid #bebfb9;
+ margin: 0;
+ width: 100%;
+ overflow: auto;
}
-.system-status-report__entry:last-child {
+.system-status-report__entry:last-of-type {
border-bottom: 1px solid #bebfb9;
}
+.system-status-report__entry--error {
+ background-color: transparent;
+}
+.system-status-report__entry--warning {
+ background-color: transparent;
+}
+ /* Account for native and poly-filled details element */
+.system-status-report__status-title {
+ position: relative;
+ padding: 1em 1em 1em 3em; /* LTR */
+ box-sizing: border-box;
+ width: 100%;
+ font-weight: bold;
+}
+.system-status-report__status-title .details-title {
+ color: inherit;
+ text-transform: none;
+}
+html:not(.details) .system-status-report__status-title {
+ padding-left: 0;
+}
+.system-status-report__status-title .details-title {
+ padding-left: 3em; /* LTR */
+}
+[dir="rtl"] .system-status-report__status-title .details-title {
+ padding-right: 3em;
+ padding-left: 0;
+}
+[dir="rtl"].details .system-status-report__status-title {
+ padding: 1em 3em 1em 1em;
+}
+.collapse-processed > .system-status-report__status-title:before {
+ float: right; /* LTR */
+}
+.system-status-report__status-title::-webkit-details-marker {
+ float: right; /* LTR */
+}
+[dir="rtl"] .collapse-processed > .system-status-report__status-title:before {
+ float: left;
+}
+[dir="rtl"] .system-status-report__status-title::-webkit-details-marker {
+ float: left;
+}
+
+/* Make poly-filled details and summary elements behave correctly. */
+.system-status-report summary:first-child ~ * {
+ display: none;
+}
+.system-status-report details[open] > *,
+.system-status-report details > summary:first-child {
+ display: block;
+}
+
+.system-status-report__status-title .details-title:before,
+.details .system-status-report__status-icon:before {
+ content: "";
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: top center;
+ height: 16px;
+ width: 16px;
+ position: absolute;
+ left: 10px; /* LTR */
+ top: 1em;
+ display: inline-block;
+ vertical-align: top;
+ margin-right: 10px; /* LTR */
+}
+[dir="rtl"] .system-status-report__status-title .details-title:before,
+[dir="rtl"].details .system-status-report__status-title:before {
+ left: auto;
+ right: 10px;
+ margin-right: 0;
+}
+.system-status-report__status-icon--error .details-title:before,
+.details .system-status-report__status-icon--error:before {
+ background-image: url(../../../stable/images/core/icons/e32700/error.svg);
+}
+.system-status-report__status-icon--warning .details-title:before,
+.details .system-status-report__status-icon--warning:before {
+ background-image: url(../../../stable/images/core/icons/e29700/warning.svg);
+}
+
+.system-status-report__entry__value {
+ box-sizing: border-box;
+ padding: 0 1em 1em 3em; /* LTR */
+}
+[dir="rtl"] .system-status-report__entry__value {
+ padding-right: 3em;
+ padding-left: 1em;
+}
+
+@media screen and (max-width: 48em) {
+ .system-status-report {
+ word-wrap: break-word;
+ }
+}
+
+@media screen and (min-width: 48em) {
+ .system-status-report__entry::after {
+ display: table;
+ content: '';
+ clear: both;
+ }
+ .system-status-report__status-title {
+ width: 18rem;
+ float: left; /* LTR */
+ cursor: default;
+ }
+ .system-status-report__status-title:hover,
+ .system-status-report__status-title:focus {
+ text-decoration: none;
+ }
+ [dir="rtl"] .system-status-report__status-title {
+ float: right;
+ }
+ .system-status-report__status-title::-webkit-details-marker {
+ display: none;
+ }
+ .collapse-processed > .system-status-report__status-title:before {
+ position: relative;
+ top: 3px;
+ }
+ .system-status-report__entry__value {
+ width: calc(100% - 23em);
+ float: right;
+ display: block;
+ padding-left: 0; /* LTR */
+ padding-top: 1em;
+ }
+ [dir="rtl"] .system-status-report__entry__value {
+ padding-left: 0;
+ padding-right: 3em;
+ }
+}
diff --git a/core/themes/seven/css/components/tables.css b/core/themes/seven/css/components/tables.css
index 913e21a42c2fbe343eb0c0429a91fafae689c10e..816df9e9093868b90e883614f0eeb9f0854c8b22 100644
--- a/core/themes/seven/css/components/tables.css
+++ b/core/themes/seven/css/components/tables.css
@@ -38,7 +38,6 @@ tbody tr:hover,
tbody tr:focus {
background: #f7fcff;
}
-
/* See colors.css */
tbody tr.color-warning:hover,
tbody tr.color-warning:focus {
@@ -48,6 +47,7 @@ tbody tr.color-error:hover,
tbody tr.color-error:focus {
background: #fcf4f2;
}
+
td,
th {
vertical-align: middle;
diff --git a/core/themes/seven/css/theme/maintenance-page.css b/core/themes/seven/css/theme/maintenance-page.css
index 3725ac64d3daa0acf63f1bc67dd1df8a567f19f5..bb29a2228b77e68c6b5ee90bd480809d6bfa974c 100644
--- a/core/themes/seven/css/theme/maintenance-page.css
+++ b/core/themes/seven/css/theme/maintenance-page.css
@@ -2,6 +2,7 @@
* @file
* Maintenance theming.
*/
+
.maintenance-page {
background-color: #e0e0d8;
background-image: -webkit-radial-gradient(hsl(203, 2%, 90%), hsl(203, 2%, 95%));
@@ -51,7 +52,6 @@
.task-list {
margin-left: 0; /* LTR */
list-style-type: none;
- list-style-image: none;
padding-left: 0; /* LTR */
padding-bottom: 1em;
}
@@ -142,7 +142,7 @@
}
.layout-container {
margin: 0 auto;
- max-width: 770px;
+ min-height: 75%;
width: 75%;
border-radius: 5px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
@@ -181,3 +181,21 @@
margin: 0.75em 1.9em;
}
}
+
+/**
+ * Status report customization for install and update page.
+ */
+.system-status-report__status-title {
+ float: none;
+ width: 100%;
+}
+.system-status-report__entry__value {
+ float: none;
+ width: 100%;
+ padding-left: 3em; /* LTR */
+ padding-top: 0;
+}
+[dir="rtl"] .system-status-report__entry__value {
+ padding-left: 1em;
+ padding-right: 3em;
+}
diff --git a/core/themes/seven/images/icons/cccccc/clock.svg b/core/themes/seven/images/icons/cccccc/clock.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e51d3e01fea5a40990a4381605812e0bc11fa944
--- /dev/null
+++ b/core/themes/seven/images/icons/cccccc/clock.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.659" height="46.603" viewBox="0 0 42.659 46.603">
+ <path fill="#CCC" d="M24.15 3.73V0h-8v3.915C6.15 6.13 0 14.717 0 24.978 0 36.92 9.975 46.603 21.918 46.603s20.74-9.682 20.74-21.625c0-10.576-8.507-19.372-18.507-21.25zm7 24.072H17.83V11h5v12.802h8.32v4z"/>
+</svg>
diff --git a/core/themes/seven/images/icons/cccccc/d8-logo.svg b/core/themes/seven/images/icons/cccccc/d8-logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..035119bc76cd778528570cad63ab59febaa448c3
--- /dev/null
+++ b/core/themes/seven/images/icons/cccccc/d8-logo.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.411" height="53.531" viewBox="0 0 47.411 53.531">
+ <circle fill="#CCC" cx="22.308" cy="41.593" r="8.449"/>
+ <path fill="#CCC" d="M32.813 31.532c2.503 2.614 4.044 6.156 4.044 10.06 0 4.945-2.47 9.31-6.24 11.94 6.97-2.15 12.733-7.388 15.314-13.73 3.57-8.776.247-15.38-5.33-21.37.17.776.264 1.58.264 2.406 0 5.078-3.405 9.36-8.05 10.694z"/>
+ <circle fill="#CCC" cx="29.735" cy="20.838" r="6.463"/>
+ <path fill="#CCC" d="M11.178 50.96c-2.134-2.53-3.42-5.798-3.42-9.368 0-7.448 5.598-13.584 12.814-14.442-1.238-1.794-1.965-3.968-1.965-6.312 0-6.145 4.982-11.128 11.13-11.128.507 0 1.006.037 1.495.103C27.59 6.67 23.957 3.483 21.09 0 22.553 15.257 7.192 9.713 1.514 23.773c-3.81 9.433-.376 21.095 9.663 27.188z"/>
+</svg>
diff --git a/core/themes/seven/images/icons/cccccc/database.svg b/core/themes/seven/images/icons/cccccc/database.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3351212de7192e4d9ddc380a87af0404d4364b96
--- /dev/null
+++ b/core/themes/seven/images/icons/cccccc/database.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="38.847" height="44.262" viewBox="0 0 38.847 44.262">
+ <path fill="#CCC" d="M19.745 0c5.74.123 12.272.953 16.9 4.668 1.865 1.498 2.786 3.91 1.597 6.126-1.255 2.34-4.13 3.733-6.518 4.6-5.63 2.04-12.113 2.38-18.014 1.573-2.92-.4-5.91-1.103-8.58-2.374C2.94 13.553.39 11.788.037 9.19c-.532-3.925 4.23-6.23 7.264-7.3C11.287.482 15.54.037 19.745 0c4.302.092-3.334.03 0 0z"/>
+ <path fill="#CCC" d="M6.76 17.5c3.702 1.427 7.65 1.972 11.6 2.09 4.058.12 8.107-.424 12.023-1.523 4.227-1.186 7.227-3.624 8.463-6.145v5.965c-.076.524-.197 1.028-.384 1.5-.718 1.81-2.594 2.974-4.235 3.848-4.293 2.286-9.5 3.04-14.31 3.083-4.803.043-9.902-.542-14.3-2.575-1.906-.88-3.9-2.02-4.988-3.887-.66-1.135-.626-2.21-.626-3.486v-4.38c1.232 2.64 3.94 4.422 6.757 5.51z"/>
+ <path fill="#CCC" d="M6.76 26.436c3.702 1.428 7.65 1.973 11.6 2.09 4.058.12 8.107-.423 12.023-1.522 4.227-1.186 7.227-3.624 8.463-6.145v5.964c-.076.524-.197 1.028-.384 1.5-.718 1.81-2.594 2.974-4.235 3.848-4.293 2.286-9.5 3.04-14.31 3.083-4.803.043-9.902-.542-14.3-2.575-1.906-.88-3.9-2.02-4.988-3.887-.66-1.135-.626-2.21-.626-3.486v-4.38c1.232 2.64 3.94 4.422 6.757 5.51z"/>
+ <path fill="#CCC" d="M6.76 35.374c3.702 1.428 7.65 1.973 11.6 2.09 4.058.12 8.107-.423 12.023-1.522 4.227-1.186 7.227-3.624 8.463-6.145v5.965c-.076.524-.197 1.028-.384 1.5-.718 1.81-2.594 2.974-4.235 3.848-4.293 2.286-9.5 3.04-14.31 3.083-4.803.043-9.902-.542-14.3-2.575-1.906-.88-3.9-2.02-4.988-3.887-.66-1.134-.626-2.21-.626-3.485v-4.38c1.232 2.64 3.94 4.422 6.757 5.51z"/>
+</svg>
diff --git a/core/themes/seven/images/icons/cccccc/php-logo.svg b/core/themes/seven/images/icons/cccccc/php-logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b039d24288f78a471ca52e98cabd15261f742aef
--- /dev/null
+++ b/core/themes/seven/images/icons/cccccc/php-logo.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="66" height="33.447" viewBox="0 0 66 33.447">
+ <g fill="#CCC">
+ <path d="M49.5 12.255h-2.7l-1.473 7h2.4c1.59 0 2.773-.342 3.55-.94.78-.6 1.304-1.62 1.577-3.023.26-1.345.142-1.975-.357-2.528-.5-.553-1.498-.51-2.996-.51z"/>
+ <path d="M33 0C14.775 0 0 7.488 0 16.724s14.775 16.724 33 16.724 33-7.488 33-16.724S51.225 0 33 0zm-9.328 19.982c-.787.737-1.662 1.376-2.625 1.69-.963.313-2.19.583-3.68.583H13.99l-.935 5H9.11l3.52-18h7.584c2.28 0 3.946.34 4.992 1.537 1.046 1.197 1.36 2.74.944 4.885-.172.884-.462 1.628-.87 2.36-.413.732-.947 1.338-1.608 1.945zm11.51 2.273l1.558-8.124c.177-.91.112-1.29-.196-1.62-.308-.33-.962-.255-1.963-.255h-3.126l-2.016 10h-3.913l3.52-18h3.912l-.935 5h3.486c2.193 0 3.706.124 4.54.888.832.765 1.08 1.99.748 3.703l-1.637 8.41h-3.977zm21.747-6.708c-.173.884-.463 1.692-.872 2.424-.41.734-.944 1.404-1.605 2.01-.787.738-1.662 1.377-2.625 1.69-.963.314-2.19.584-3.68.584h-3.377l-.934 5h-3.944l3.518-18h7.584c2.282 0 3.946.34 4.992 1.537 1.046 1.2 1.36 2.61.943 4.757z"/>
+ <path d="M18.72 12.255h-2.703l-1.473 7h2.4c1.59 0 2.773-.342 3.552-.94.778-.6 1.303-1.62 1.576-3.023.26-1.345.142-1.975-.357-2.528-.5-.553-1.497-.51-2.996-.51z"/>
+ </g>
+</svg>
diff --git a/core/themes/seven/images/icons/cccccc/server.svg b/core/themes/seven/images/icons/cccccc/server.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1576b390d873e22ec9e5933145f4198babf1f94a
--- /dev/null
+++ b/core/themes/seven/images/icons/cccccc/server.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="34" viewBox="0 0 44 34">
+ <path fill="#CCC" d="M29.98 7.018H7.17c-1.208 0-2.197-.748-2.197-2s.99-2 2.2-2h22.81c1.208 0 2.198.748 2.198 2s-.99 2-2.2 2zM37.61 7c-1.104 0-2-.895-2-2s.896-2 2-2 2 .895 2 2-.894 2-2 2zM0 0v10h44V0H0zM29.98 31.018H7.17c-1.208 0-2.197-.748-2.197-2s.99-2 2.2-2h22.81c1.208 0 2.198.748 2.198 2s-.99 2-2.2 2zM37.61 31c-1.104 0-2-.895-2-2s.896-2 2-2 2 .895 2 2-.894 2-2 2zM0 24v10h44V24H0zM29.98 19.018H7.17c-1.208 0-2.197-.748-2.197-2s.99-2 2.2-2h22.81c1.208 0 2.198.748 2.198 2s-.99 2-2.2 2zM37.61 19c-1.104 0-2-.895-2-2s.896-2 2-2 2 .895 2 2-.894 2-2 2zM0 12v10h44V12H0z"/>
+</svg>
diff --git a/core/themes/seven/js/responsive-details.js b/core/themes/seven/js/responsive-details.js
new file mode 100644
index 0000000000000000000000000000000000000000..8fdb4530f3bd08a4247d3ca44cafa26ccb1a246d
--- /dev/null
+++ b/core/themes/seven/js/responsive-details.js
@@ -0,0 +1,57 @@
+/**
+ * @file
+ * Provides responsive behaviors to HTML details elements.
+ */
+
+(function ($, Drupal) {
+
+ 'use strict';
+
+ /**
+ * Initializes the responsive behaviors for details elements.
+ *
+ * @type {Drupal~behavior}
+ *
+ * @prop {Drupal~behaviorAttach} attach
+ * Attaches the responsive behavior to status report specific details elements.
+ */
+ Drupal.behaviors.responsiveDetails = {
+ attach: function (context) {
+ var $details = $(context).find('details').once('responsive-details');
+
+ if (!$details.length) {
+ return;
+ }
+
+ function detailsToggle(matches) {
+ if (matches) {
+ $details.attr('open', true);
+ $summaries.attr('aria-expanded', true);
+ $summaries.on('click.details-open', false);
+ }
+ else {
+ // If user explicitly opened one, leave it alone.
+ var $notPressed = $details
+ .find('> summary[aria-pressed!=true]')
+ .attr('aria-expanded', false);
+ $notPressed
+ .parent('details')
+ .attr('open', false);
+ // After resize, allow user to close previously opened details.
+ $summaries.off('.details-open');
+ }
+ }
+
+ function handleDetailsMQ(event) {
+ detailsToggle(event.matches);
+ }
+
+ var $summaries = $details.find('> summary');
+ var mql = window.matchMedia('(min-width:48em)');
+ mql.addListener(handleDetailsMQ);
+ detailsToggle(mql.matches);
+ }
+ };
+
+
+})(jQuery, Drupal);
diff --git a/core/themes/seven/seven.info.yml b/core/themes/seven/seven.info.yml
index 369515ef4b9bcbc312ed168dd640238edacaa25d..3f0e43c0252c062735f91fce8ba3fd9a69f53a74 100644
--- a/core/themes/seven/seven.info.yml
+++ b/core/themes/seven/seven.info.yml
@@ -22,6 +22,12 @@ core: 8.x
libraries:
- seven/global-styling
libraries-override:
+ system/base:
+ css:
+ component:
+ /core/themes/stable/css/system/components/system-status-counter.css: css/components/system-status-counter.css
+ /core/themes/stable/css/system/components/system-status-report-counters.css: css/components/system-status-report-counters.css
+ /core/themes/stable/css/system/components/system-status-report-general-info.css: css/components/system-status-report-general-info.css
core/drupal.vertical-tabs:
css:
component:
diff --git a/core/themes/seven/seven.libraries.yml b/core/themes/seven/seven.libraries.yml
index e68b75a916129ec574b19ec4202ee52ccf9464dd..424e7f5ddbfbbad16de6dc092f42f7fc240fdd32 100644
--- a/core/themes/seven/seven.libraries.yml
+++ b/core/themes/seven/seven.libraries.yml
@@ -27,7 +27,10 @@ global-styling:
css/components/tables.css: {}
css/components/search-admin-settings.css: {}
css/components/tablesort-indicator.css: {}
+ css/components/system-status-report-general-info.css: {}
css/components/system-status-report.css: {}
+ css/components/system-status-report-counters.css: {}
+ css/components/system-status-counter.css: {}
css/components/tabs.css: {}
css/components/views-ui.css: {}
layout:
@@ -74,6 +77,18 @@ drupal.nav-tabs:
- core/drupal
- core/jquery.once
- core/drupal.debounce
+ - core/collapse
+
+drupal.responsive-detail:
+ version: VERSION
+ js:
+ js/responsive-details.js: {}
+ dependencies:
+ - core/matchmedia
+ - core/matchmedia.addListener
+ - core/jquery
+ - core/jquery.once
+ - core/collapse
vertical-tabs:
version: VERSION
diff --git a/core/themes/seven/templates/status-report-counter.html.twig b/core/themes/seven/templates/status-report-counter.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..13ab8a84d46b0ab889f60c5d9d5d3fbbca9ea9d6
--- /dev/null
+++ b/core/themes/seven/templates/status-report-counter.html.twig
@@ -0,0 +1,26 @@
+{#
+/**
+ * @file
+ * Theme override for status report counter.
+ *
+ * Available variables:
+ * - amount: The number shown on counter.
+ * - text: The text shown on counter.
+ * - severity: The severity of the counter.
+ *
+ * @ingroup themable
+ */
+#}
+{%
+ set classes = [
+ 'system-status-counter',
+ 'system-status-counter--' ~ severity,
+ ]
+%}
+<span{{ attributes.addClass(classes) }}>
+ <span class="system-status-counter__status-icon system-status-counter__status-icon--{{ severity }}"></span>
+ <span class="system-status-counter__status-title">
+ <span class="system-status-counter__title-count">{{ amount }} {{ text }}</span>
+ <span class="system-status-counter__details"><a href="#{{ severity }}" ><span class="visually-hidden">{{ text }} </span>Details</a></span>
+ </span>
+</span>
diff --git a/core/themes/seven/templates/status-report-general-info.html.twig b/core/themes/seven/templates/status-report-general-info.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..a5d6ce7bae0d01f31db0676b569797229ea2905b
--- /dev/null
+++ b/core/themes/seven/templates/status-report-general-info.html.twig
@@ -0,0 +1,99 @@
+{#
+/**
+ * @file
+ * Theme override for status report general info.
+ *
+ * Available variables:
+ * - drupal: The status of Drupal installation:
+ * - value: The current status of Drupal installation.
+ * - description: The description for current status of Drupal installation.
+ * - cron: The status of cron:
+ * - value: The current status of cron.
+ * - description: The description for current status of cron.
+ * - cron.run_cron: An array to render a button for running cron.
+ * - database_system: The status of database system:
+ * - value: The current status of database sytem.
+ * - description: The description for current status of cron.
+ * - database_system_version: The info about current database version:
+ * - value: The current version of database.
+ * - description: The description for current version of database.
+ * - php: The current version of PHP:
+ * - value: The status of currently installed PHP version.
+ * - description: The description for current installed PHP version.
+ * - php_memory_limit: The info about current PHP memory limit:
+ * - value: The status of currently set PHP memory limit.
+ * - description: The description for currently set PHP memory limit.
+ * - webserver: The info about currently installed web server:
+ * - value: The status of currently installed web server.
+ * - description: The description for the status of currently installed web
+ * server.
+ */
+#}
+<div class="system-status-general-info">
+ <h2 class="system-status-general-info__header">{{ 'General System Information'|t }}</h2>
+ <div class="system-status-general-info__items">
+ <div class="system-status-general-info__item">
+ <span class="system-status-general-info__item-icon system-status-general-info__item-icon--d8"></span>
+ <div class="system-status-general-info__item-details">
+ <h3 class="system-status-general-info__item-title">{{ 'Drupal Version'|t }}</h3>
+ {{ drupal.value }}
+ {% if drupal.description %}
+ <div class="description">{{ drupal.description }}</div>
+ {% endif %}
+ </div>
+ </div>
+ <div class="system-status-general-info__item">
+ <span class="system-status-general-info__item-icon system-status-general-info__item-icon--clock"></span>
+ <div class="system-status-general-info__item-details">
+ <h3 class="system-status-general-info__item-title">{{ 'Last Cron Run'|t }}</h3>
+ {{ cron.value }}
+ {% if cron.run_cron %}
+ <div class="system-status-general-info__run-cron">{{ cron.run_cron }}</div>
+ {% endif %}
+ {% if cron.description %}
+ <div class="system-status-general-info__description">{{ cron.description }}</div>
+ {% endif %}
+ </div>
+ </div>
+ <div class="system-status-general-info__item">
+ <span class="system-status-general-info__item-icon system-status-general-info__item-icon--server"></span>
+ <div class="system-status-general-info__item-details">
+ <h3 class="system-status-general-info__item-title">{{ 'Web Server'|t }}</h3>
+ {{ webserver.value }}
+ {% if webserver.description %}
+ <div class="description">{{ webserver.description }}</div>
+ {% endif %}
+ </div>
+ </div>
+ <div class="system-status-general-info__item">
+ <span class="system-status-general-info__item-icon system-status-general-info__item-icon--php"></span>
+ <div class="system-status-general-info__item-details">
+ <h3 class="system-status-general-info__item-title">{{ 'PHP'|t }}</h3>
+ <h4 class="system-status-general-info__sub-item-title">{{ 'Version'|t }}</h4>{{ php.value }}
+ {% if php.description %}
+ <div class="description">{{ php.description }}</div>
+ {% endif %}
+
+ <h4 class="system-status-general-info__sub-item-title">{{ 'Memory limit'|t }}</h4>{{ php_memory_limit.value }}
+ {% if php_memory_limit.description %}
+ <div class="description">{{ php_memory_limit.description }}</div>
+ {% endif %}
+ </div>
+ </div>
+ <div class="system-status-general-info__item">
+ <span class="system-status-general-info__item-icon system-status-general-info__item-icon--database"></span>
+ <div class="system-status-general-info__item-details">
+ <h3 class="system-status-general-info__item-title">{{ 'Database'|t }}</h3>
+ <h4 class="system-status-general-info__sub-item-title">{{ 'Version'|t }}</h4>{{ database_system_version.value }}
+ {% if database_system_version.description %}
+ <div class="description">{{ database_system_version.description }}</div>
+ {% endif %}
+
+ <h4 class="system-status-general-info__sub-item-title">{{ 'System'|t }}</h4>{{ database_system.value }}
+ {% if database_system.description %}
+ <div class="description">{{ database_system.description }}</div>
+ {% endif %}
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/core/themes/seven/templates/status-report-grouped.html.twig b/core/themes/seven/templates/status-report-grouped.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..c5d6303f5cf990396dfe82fe205d36a60ff51081
--- /dev/null
+++ b/core/themes/seven/templates/status-report-grouped.html.twig
@@ -0,0 +1,50 @@
+{#
+/**
+ * @file
+ * Theme override to display status report.
+ *
+ * - grouped_requirements: Contains grouped requirements.
+ * Each group contains:
+ * - title: The title of the group.
+ * - type: The severity of the group.
+ * - items: The requirement instances.
+ * Each requirement item contains:
+ * - title: The title of the requirement.
+ * - value: (optional) The requirement's status.
+ * - description: (optional) The requirement's description.
+ * - severity_title: The title of the severity.
+ * - severity_status: Indicates the severity status.
+ */
+#}
+{{ attach_library('core/drupal.collapse') }}
+{{ attach_library('seven/drupal.responsive-detail') }}
+
+<div class="system-status-report">
+ {% for group in grouped_requirements %}
+ <div class="system-status-report__requirements-group">
+ <h3 id="{{ group.type }}">{{ group.title }}</h3>
+ {% for requirement in group.items %}
+ <details class="system-status-report__entry system-status-report__entry--{{ group.type }} color-{{ group.type }}">
+ {%
+ set summary_classes = [
+ 'system-status-report__status-title',
+ group.type in ['warning', 'error'] ? 'system-status-report__status-icon system-status-report__status-icon--' ~ group.type
+ ]
+ %}
+ <summary{{ create_attribute({'class': summary_classes}) }} role="button">
+ {% if requirement.severity_title %}
+ <span class="visually-hidden">{{ requirement.severity_title }}</span>
+ {% endif %}
+ {{ requirement.title }}
+ </summary>
+ <div class="system-status-report__entry__value">
+ {{ requirement.value }}
+ {% if requirement.description %}
+ <div class="description">{{ requirement.description }}</div>
+ {% endif %}
+ </div>
+ </details>
+ {% endfor %}
+ </div>
+ {% endfor %}
+</div>
diff --git a/core/themes/seven/templates/status-report-page.html.twig b/core/themes/seven/templates/status-report-page.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..27e0d1576e24f37191e88926a806dd449bf30750
--- /dev/null
+++ b/core/themes/seven/templates/status-report-page.html.twig
@@ -0,0 +1,28 @@
+{#
+/**
+ * @file
+ * Theme override for the status report page.
+ *
+ * Available variables:
+ * - counters: The list of counter elements.
+ * - general_info: A render array to create general info element.
+ * - requirements: A render array to create requirements table.
+ *
+ * @see template_preprocess_status_report()
+ */
+#}
+{% if counters|length == 3 %}
+ {% set element_width_class = ' system-status-report-counters__item--third-width' %}
+{% elseif counters|length == 2 %}
+ {% set element_width_class = ' system-status-report-counters__item--half-width' %}
+{% endif %}
+<div class="system-status-report-counters">
+ {% for counter in counters %}
+ <div class="system-status-report-counters__item{{ element_width_class }}">
+ {{ counter }}
+ </div>
+ {% endfor %}
+</div>
+
+{{ general_info }}
+{{ requirements }}
diff --git a/core/themes/stable/css/system/components/system-status-counter.css b/core/themes/stable/css/system/components/system-status-counter.css
new file mode 100644
index 0000000000000000000000000000000000000000..8d3ad76d171636de107fddec18944a3c873354c9
--- /dev/null
+++ b/core/themes/stable/css/system/components/system-status-counter.css
@@ -0,0 +1,28 @@
+/**
+ * @file
+ * Styles for the system status counter component.
+ */
+
+.system-status-counter__status-icon {
+ display: inline-block;
+ height: 25px;
+ width: 25px;
+ vertical-align: middle;
+}
+.system-status-counter__status-icon:before {
+ content: "";
+ background-size: 20px;
+ background-position: center 2px;
+ background-repeat: no-repeat;
+ display: block;
+}
+
+.system-status-counter__status-icon--error:before {
+ background-image: url(../../../images/core/icons/e32700/error.svg);
+}
+.system-status-counter__status-icon--warning:before {
+ background-image: url(../../../images/core/icons/e29700/warning.svg);
+}
+.system-status-counter__status-icon--checked:before {
+ background-image: url(../../../images/core/icons/73b355/check.svg);
+}
diff --git a/core/themes/stable/css/system/components/system-status-report-counters.css b/core/themes/stable/css/system/components/system-status-report-counters.css
new file mode 100644
index 0000000000000000000000000000000000000000..1a4e2400f4f39352de54911fcc8eebe1f8cf4f95
--- /dev/null
+++ b/core/themes/stable/css/system/components/system-status-report-counters.css
@@ -0,0 +1,27 @@
+/**
+ * @file
+ * Styles for the system status report counters.
+ */
+
+.system-status-report-counters__item {
+ width: 100%;
+ padding: .5em 0;
+ text-align: center;
+ white-space: nowrap;
+ background-color: rgba(0, 0, 0, 0.063);
+ margin-bottom: .5em;
+}
+
+@media screen and (min-width: 60em) {
+ .system-status-report-counters {
+ flex-wrap: wrap;
+ display: flex;
+ justify-content: space-between;
+ }
+ .system-status-report-counters__item--half-width {
+ width: 49%;
+ }
+ .system-status-report-counters__item--third-width {
+ width: 33%;
+ }
+}
diff --git a/core/themes/stable/css/system/components/system-status-report-general-info.css b/core/themes/stable/css/system/components/system-status-report-general-info.css
new file mode 100644
index 0000000000000000000000000000000000000000..8334d4d198aac215a169c8b1998b1d22be9ae99b
--- /dev/null
+++ b/core/themes/stable/css/system/components/system-status-report-general-info.css
@@ -0,0 +1,14 @@
+/**
+ * @file
+ * Default styles for the System Status general info.
+ */
+
+.system-status-general-info__item {
+ border: 1px solid #ccc;
+ margin-top: 1em;
+ padding: 0 1em 1em;
+}
+
+.system-status-general-info__item-title {
+ border-bottom: 1px solid #ccc;
+}
diff --git a/core/themes/stable/css/system/system.admin.css b/core/themes/stable/css/system/system.admin.css
index c8e20cf78cf0387ec3671b501ebff604fe4d3cb8..cd92b1ad045d61a0ede854618d39c800e4787983 100644
--- a/core/themes/stable/css/system/system.admin.css
+++ b/core/themes/stable/css/system/system.admin.css
@@ -204,10 +204,11 @@ small .admin-link:after {
.system-status-report__status-title {
position: relative;
vertical-align: top;
- width: 25%;
+ width: 100%;
padding: 10px 6px 10px 40px; /* LTR */
box-sizing: border-box;
font-weight: normal;
+ background-color: transparent;
}
[dir="rtl"] .system-status-report__status-title {
padding: 10px 40px 10px 6px;
@@ -232,6 +233,9 @@ small .admin-link:after {
.system-status-report__status-icon--warning:before {
background-image: url(../../images/core/icons/e29700/warning.svg);
}
+.system-status-report__entry__value {
+ padding: 1em .5em;
+}
/**
* Appearance page.
@@ -387,3 +391,6 @@ small .admin-link:after {
[dir="rtl"] .system-themes-admin-form {
clear: right;
}
+.cron-description__run-cron {
+ display: block;
+}
diff --git a/core/themes/stable/stable.info.yml b/core/themes/stable/stable.info.yml
index 7e585b188295c3e574bdc9dc722a329cee00a552..251ecbd534dbdeeb181cd2090d6c4a96b7a02da7 100644
--- a/core/themes/stable/stable.info.yml
+++ b/core/themes/stable/stable.info.yml
@@ -175,6 +175,9 @@ libraries-override:
css/components/reset-appearance.module.css: css/system/components/reset-appearance.module.css
css/components/resize.module.css: css/system/components/resize.module.css
css/components/sticky-header.module.css: css/system/components/sticky-header.module.css
+ css/components/system-status-counter.css: css/system/components/system-status-counter.css
+ css/components/system-status-report-counters.css: css/system/components/system-status-report-counters.css
+ css/components/system-status-report-general-info.css: css/system/components/system-status-report-general-info.css
css/components/tabledrag.module.css: css/system/components/tabledrag.module.css
css/components/tablesort.module.css: css/system/components/tablesort.module.css
css/components/tree-child.module.css: css/system/components/tree-child.module.css
diff --git a/core/themes/stable/templates/admin/status-report-counter.html.twig b/core/themes/stable/templates/admin/status-report-counter.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..b0f7bd5cbead69b799daa51b2d4871aa60299928
--- /dev/null
+++ b/core/themes/stable/templates/admin/status-report-counter.html.twig
@@ -0,0 +1,15 @@
+{#
+/**
+ * @file
+ * Theme override for the status report counter.
+ *
+ * Available variables:
+ * - amount: The number shown on counter.
+ * - text: The text shown on counter.
+ * - severity: The severity of the counter.
+ *
+ * @ingroup themable
+ */
+#}
+{{ amount }} {{ text }}
+<a href="#{{ severity }}"><span class="visually-hidden">{{ text }} </span>Details</a>
diff --git a/core/themes/stable/templates/admin/status-report-general-info.html.twig b/core/themes/stable/templates/admin/status-report-general-info.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..c71d83965cf58ef0bd686140d3b198510145692a
--- /dev/null
+++ b/core/themes/stable/templates/admin/status-report-general-info.html.twig
@@ -0,0 +1,81 @@
+{#
+/**
+ * @file
+ * Theme override for the status report general info.
+ *
+ * Available variables:
+ * - drupal: The status of Drupal installation:
+ * - value: The current status of Drupal installation.
+ * - description: The description for current status of Drupal installation.
+ * - cron: The status of cron:
+ * - value: The current status of cron.
+ * - description: The description for current status of cron.
+ * - cron.run_cron: An array to render a button for running cron.
+ * - database_system: The status of database system:
+ * - value: The current status of database sytem.
+ * - description: The description for current status of cron.
+ * - database_system_version: The info about current database version:
+ * - value: The current version of database.
+ * - description: The description for current version of database.
+ * - php: The current version of PHP:
+ * - value: The status of currently installed PHP version.
+ * - description: The description for current installed PHP version.
+ * - php_memory_limit: The info about current PHP memory limit:
+ * - value: The status of currently set PHP memory limit.
+ * - description: The description for currently set PHP memory limit.
+ * - webserver: The info about currently installed web server:
+ * - value: The status of currently installed web server.
+ * - description: The description for the status of currently installed web
+ * server.
+ */
+#}
+
+<h2>{{ 'General System Information'|t }}</h2>
+<div class="system-status-general-info__item">
+ <h3 class="system-status-general-info__item-title">{{ 'Drupal Version'|t }}</h3>
+ {{ drupal.value }}
+ {% if drupal.description %}
+ {{ drupal.description }}
+ {% endif %}
+</div>
+<div class="system-status-general-info__item">
+ <h3 class="system-status-general-info__item-title">{{ 'Last Cron Run'|t }}</h3>
+ {{ cron.value }}
+ {% if cron.run_cron %}
+ {{ cron.run_cron }}
+ {% endif %}
+ {% if cron.description %}
+ {{ cron.description }}
+ {% endif %}
+</div>
+<div class="system-status-general-info__item">
+ <h3 class="system-status-general-info__item-title">{{ 'Web Server'|t }}</h3>
+ {{ webserver.value }}
+ {% if webserver.description %}
+ {{ webserver.description }}
+ {% endif %}
+</div>
+<div class="system-status-general-info__item">
+ <h3 class="system-status-general-info__item-title">{{ 'PHP'|t }}</h3>
+ <h4>{{ 'Version'|t }}</h4>{{ php.value }}
+ {% if php.description %}
+ {{ php.description }}
+ {% endif %}
+
+ <h4>{{ 'Memory limit'|t }}</h4>{{ php_memory_limit.value }}
+ {% if php_memory_limit.description %}
+ {{ php_memory_limit.description }}
+ {% endif %}
+</div>
+<div class="system-status-general-info__item">
+ <h3 class="system-status-general-info__item-title">{{ 'Database'|t }}</h3>
+ <h4>{{ 'Version'|t }}</h4>{{ database_system_version.value }}
+ {% if database_system_version.description %}
+ {{ database_system_version.description }}
+ {% endif %}
+
+ <h4>{{ 'System'|t }}</h4>{{ database_system.value }}
+ {% if database_system.description %}
+ {{ database_system.description }}
+ {% endif %}
+</div>
diff --git a/core/themes/stable/templates/admin/status-report-grouped.html.twig b/core/themes/stable/templates/admin/status-report-grouped.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..bbeaa47a014ccc39e0aeb45805c9cb16e12052a0
--- /dev/null
+++ b/core/themes/stable/templates/admin/status-report-grouped.html.twig
@@ -0,0 +1,49 @@
+{#
+/**
+ * @file
+ * Theme override of grouped status report requirements.
+ *
+ * - grouped_requirements: Contains grouped requirements.
+ * Each group contains:
+ * - title: The title of the group.
+ * - type: The severity of the group.
+ * - items: The requirement instances.
+ * Each requirement item contains:
+ * - title: The title of the requirement.
+ * - value: (optional) The requirement's status.
+ * - description: (optional) The requirement's description.
+ * - severity_title: The title of the severity.
+ * - severity_status: Indicates the severity status.
+ */
+#}
+{{ attach_library('core/drupal.collapse') }}
+
+<div>
+ {% for group in grouped_requirements %}
+ <div>
+ <h3 id="{{ group.type }}">{{ group.title }}</h3>
+ {% for requirement in group.items %}
+ <details class="system-status-report__entry">
+ {%
+ set summary_classes = [
+ 'system-status-report__status-title',
+ group.type in ['warning', 'error'] ? 'system-status-report__status-icon system-status-report__status-icon--' ~ group.type
+ ]
+ %}
+ <summary{{ create_attribute({'class': summary_classes}) }} role="button">
+ {% if requirement.severity_title %}
+ <span class="visually-hidden">{{ requirement.severity_title }}</span>
+ {% endif %}
+ {{ requirement.title }}
+ </summary>
+ <div class="system-status-report__entry__value">
+ {{ requirement.value }}
+ {% if requirement.description %}
+ <div class="description">{{ requirement.description }}</div>
+ {% endif %}
+ </div>
+ </details>
+ {% endfor %}
+ </div>
+ {% endfor %}
+</div>
diff --git a/core/themes/stable/templates/admin/status-report-page.html.twig b/core/themes/stable/templates/admin/status-report-page.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..27e0d1576e24f37191e88926a806dd449bf30750
--- /dev/null
+++ b/core/themes/stable/templates/admin/status-report-page.html.twig
@@ -0,0 +1,28 @@
+{#
+/**
+ * @file
+ * Theme override for the status report page.
+ *
+ * Available variables:
+ * - counters: The list of counter elements.
+ * - general_info: A render array to create general info element.
+ * - requirements: A render array to create requirements table.
+ *
+ * @see template_preprocess_status_report()
+ */
+#}
+{% if counters|length == 3 %}
+ {% set element_width_class = ' system-status-report-counters__item--third-width' %}
+{% elseif counters|length == 2 %}
+ {% set element_width_class = ' system-status-report-counters__item--half-width' %}
+{% endif %}
+<div class="system-status-report-counters">
+ {% for counter in counters %}
+ <div class="system-status-report-counters__item{{ element_width_class }}">
+ {{ counter }}
+ </div>
+ {% endfor %}
+</div>
+
+{{ general_info }}
+{{ requirements }}