Merge pull request #4496 from Icinga/feature/redesign-about-view
Feature/redesign about view
This commit is contained in:
Johannes Meyer
GitHub
commit
dee70b029f
|
|
@ -1,25 +1,141 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
use ipl\Html\HtmlElement;
|
||||||
|
use ipl\Web\Widget\Icon;
|
||||||
|
|
||||||
|
?>
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<?= $tabs ?>
|
<?= $tabs ?>
|
||||||
</div>
|
</div>
|
||||||
<div id="about" class="content content-centered">
|
<div id="about" class="content">
|
||||||
<?= $this->img('img/icinga-logo-big.svg', null, array('class' => 'icinga-logo', 'width' => 320)) ?>
|
|
||||||
<dl class="name-value-list">
|
<?= $this->img('img/icinga-logo-big.svg', null, array('class' => 'icinga-logo', 'width' => 194)) ?>
|
||||||
<?php if (isset($version['appVersion'])): ?>
|
|
||||||
<dt><?= $this->translate('Icinga Web 2 Version') ?></dt>
|
<section>
|
||||||
<dd><?= $this->escape($version['appVersion']) ?></dd>
|
<table class="name-value-table">
|
||||||
<?php endif ?>
|
<?php if (isset($version['appVersion'])): ?>
|
||||||
<?php if (isset($version['gitCommitID'])): ?>
|
<tr>
|
||||||
<dt><?= $this->translate('Git commit') ?></dt>
|
<th><?= $this->translate('Icinga Web 2 Version') ?></th>
|
||||||
<dd><?= $this->escape($version['gitCommitID']) ?></dd>
|
<td><?= $this->escape($version['appVersion']) ?></td>
|
||||||
<?php endif ?>
|
</tr>
|
||||||
<dt><?= $this->translate('PHP Version') ?></dt>
|
<?php endif ?>
|
||||||
<dd><?= $this->escape(PHP_VERSION) ?></dd>
|
<?php if (isset($version['gitCommitID'])): ?>
|
||||||
<?php if (isset($version['gitCommitDate'])): ?>
|
<tr>
|
||||||
<dt><?= $this->translate('Git commit date') ?></dt>
|
<th><?= $this->translate('Git commit') ?></th>
|
||||||
<dd><?= $this->escape($version['gitCommitDate']) ?></dd>
|
<td><?= $this->escape($version['gitCommitID']) ?></td>
|
||||||
<?php endif ?>
|
</tr>
|
||||||
<dt><?= $this->translate('Copyright') ?></dt>
|
<?php endif ?>
|
||||||
<dd>
|
<tr>
|
||||||
|
<th><?= $this->translate('PHP Version') ?></th>
|
||||||
|
<td><?= $this->escape(PHP_VERSION) ?></td>
|
||||||
|
</tr>
|
||||||
|
<?php if (isset($version['gitCommitDate'])): ?>
|
||||||
|
<tr>
|
||||||
|
<th><?= $this->translate('Git commit date') ?></th>
|
||||||
|
<td><?= $this->escape($version['gitCommitDate']) ?></td>
|
||||||
|
</tr>
|
||||||
|
<?php endif ?>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<div class="external-links">
|
||||||
|
<div class="col">
|
||||||
|
<?=
|
||||||
|
HtmlElement::create('a', [
|
||||||
|
'href' => 'https://icinga.com/support/',
|
||||||
|
'target' => '_blank',
|
||||||
|
'title' => $this->translate('Get Icinga Support')
|
||||||
|
], [
|
||||||
|
new Icon('life-ring'),
|
||||||
|
$this->translate('Get Icinga Support'),
|
||||||
|
]
|
||||||
|
);
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<?=
|
||||||
|
HtmlElement::create('a', [
|
||||||
|
'href' => 'https://icinga.com/community/',
|
||||||
|
'target' => '_blank',
|
||||||
|
'title' => $this->translate('Icinga Community')
|
||||||
|
], [
|
||||||
|
new Icon('globe-europe'),
|
||||||
|
$this->translate('Icinga Community'),
|
||||||
|
]
|
||||||
|
);
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<?=
|
||||||
|
HtmlElement::create('a', [
|
||||||
|
'href' => 'https://github.com/icinga/icingaweb2/issues',
|
||||||
|
'target' => '_blank',
|
||||||
|
'title' => $this->translate('Icinga Community')
|
||||||
|
], [
|
||||||
|
new Icon('bullhorn'),
|
||||||
|
$this->translate('Report a bug'),
|
||||||
|
]
|
||||||
|
);
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<?=
|
||||||
|
HtmlElement::create('a', [
|
||||||
|
'href' => 'https://icinga.com/docs/icinga-web-2/'
|
||||||
|
. (isset($version['docVersion']) ? $version['docVersion'] : 'latest'),
|
||||||
|
'target' => '_blank',
|
||||||
|
'title' => $this->translate('Icinga Documentation')
|
||||||
|
], [
|
||||||
|
new Icon('book'),
|
||||||
|
$this->translate('Icinga Documentation'),
|
||||||
|
]
|
||||||
|
);
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2><?= $this->translate('Loaded Libraries') ?></h2>
|
||||||
|
<table class="name-value-table" data-base-target="_next">
|
||||||
|
<?php foreach ($libraries as $library): ?>
|
||||||
|
<tr>
|
||||||
|
<th>
|
||||||
|
<?= $this->escape($library->getName()) ?>
|
||||||
|
</th>
|
||||||
|
<td>
|
||||||
|
<?= $this->escape($library->getVersion()) ?: '-' ?>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<?php endforeach ?>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<h2><?= $this->translate('Loaded Modules') ?></h2>
|
||||||
|
<table class="name-value-table" data-base-target="_next">
|
||||||
|
<?php foreach ($modules as $module): ?>
|
||||||
|
<tr>
|
||||||
|
<th>
|
||||||
|
<?= $this->escape($module->getName()) ?>
|
||||||
|
</th>
|
||||||
|
<td>
|
||||||
|
<td>
|
||||||
|
<?= $this->escape($module->getVersion()) ?>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<?php if ($this->hasPermission('config/modules')): ?>
|
||||||
|
<?= $this->qlink(
|
||||||
|
$this->translate('Configure'),
|
||||||
|
'config/module/',
|
||||||
|
array('name' => $module->getName()),
|
||||||
|
array('title' => sprintf($this->translate('Show the overview of the %s module'), $module->getName()))
|
||||||
|
) ?>
|
||||||
|
<?php endif ?>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<?php endforeach ?>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="about-copyright">
|
||||||
|
<?= $this->translate('Copyright') ?>
|
||||||
<span>© 2013-<?= date('Y') ?></span>
|
<span>© 2013-<?= date('Y') ?></span>
|
||||||
<?= $this->qlink(
|
<?= $this->qlink(
|
||||||
'Icinga GmbH',
|
'Icinga GmbH',
|
||||||
|
|
@ -29,118 +145,27 @@
|
||||||
'target' => '_blank'
|
'target' => '_blank'
|
||||||
)
|
)
|
||||||
) ?>
|
) ?>
|
||||||
</dd>
|
</div>
|
||||||
</dl>
|
<div class="about-social">
|
||||||
<div class="about-social">
|
|
||||||
<?= $this->qlink(
|
|
||||||
null,
|
|
||||||
'https://www.twitter.com/icinga',
|
|
||||||
null,
|
|
||||||
array(
|
|
||||||
'target' => '_blank',
|
|
||||||
'icon' => 'twitter',
|
|
||||||
'title' => $this->translate('Icinga on Twitter')
|
|
||||||
)
|
|
||||||
) ?> <?= $this->qlink(
|
|
||||||
null,
|
|
||||||
'https://www.facebook.com/icinga',
|
|
||||||
null,
|
|
||||||
array(
|
|
||||||
'target' => '_blank',
|
|
||||||
'icon' => 'facebook-squared',
|
|
||||||
'title' => $this->translate('Icinga on Facebook')
|
|
||||||
)
|
|
||||||
) ?>
|
|
||||||
</div>
|
|
||||||
<div class="about-links">
|
|
||||||
<?= $this->qlink(
|
|
||||||
null,
|
|
||||||
'https://github.com/icinga/icingaweb2/issues',
|
|
||||||
null,
|
|
||||||
array(
|
|
||||||
'target' => '_blank',
|
|
||||||
'icon' => 'bug',
|
|
||||||
'title' => $this->translate('Report a bug')
|
|
||||||
)
|
|
||||||
) ?>
|
|
||||||
<?= $this->qlink(
|
|
||||||
null,
|
|
||||||
'https://icinga.com/support/',
|
|
||||||
null,
|
|
||||||
array(
|
|
||||||
'target' => '_blank',
|
|
||||||
'icon' => 'chat-empty',
|
|
||||||
'title' => $this->translate('Support')
|
|
||||||
)
|
|
||||||
) ?>
|
|
||||||
<?= $this->qlink(
|
|
||||||
null,
|
|
||||||
'https://icinga.com/community/',
|
|
||||||
null,
|
|
||||||
array(
|
|
||||||
'target' => '_blank',
|
|
||||||
'icon' => 'lightbulb',
|
|
||||||
'title' => $this->translate('Icinga Community')
|
|
||||||
)
|
|
||||||
) ?>
|
|
||||||
<?= $this->qlink(
|
|
||||||
null,
|
|
||||||
'https://docs.icinga.com/',
|
|
||||||
null,
|
|
||||||
array(
|
|
||||||
'target' => '_blank',
|
|
||||||
'icon' => 'doc-text',
|
|
||||||
'title' => $this->translate('Icinga Documentation')
|
|
||||||
)
|
|
||||||
) ?>
|
|
||||||
</div>
|
|
||||||
<h2><?= $this->translate('Loaded Libraries') ?></h2>
|
|
||||||
<table class="table-row-selectable common-table" data-base-target="_next">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th><?= $this->translate('Name') ?></th>
|
|
||||||
<th><?= $this->translate('Version') ?></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<?php foreach ($libraries as $library): ?>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<?= $this->escape($library->getName()) ?>
|
|
||||||
<td>
|
|
||||||
<?= $this->escape($library->getVersion()) ?: '-' ?>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<?php endforeach ?>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<h2><?= $this->translate('Loaded Modules') ?></h2>
|
|
||||||
<table class="table-row-selectable common-table" data-base-target="_next">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th><?= $this->translate('Name') ?></th>
|
|
||||||
<th><?= $this->translate('Version') ?></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<?php foreach ($modules as $module): ?>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<?php if ($this->hasPermission('config/modules')): ?>
|
|
||||||
<?= $this->qlink(
|
<?= $this->qlink(
|
||||||
$module->getName(),
|
null,
|
||||||
'config/module/',
|
'https://www.twitter.com/icinga',
|
||||||
array('name' => $module->getName()),
|
null,
|
||||||
array('title' => sprintf($this->translate('Show the overview of the %s module'), $module->getName()))
|
array(
|
||||||
|
'target' => '_blank',
|
||||||
|
'icon' => 'twitter',
|
||||||
|
'title' => $this->translate('Icinga on Twitter')
|
||||||
|
)
|
||||||
|
) ?> <?= $this->qlink(
|
||||||
|
null,
|
||||||
|
'https://www.facebook.com/icinga',
|
||||||
|
null,
|
||||||
|
array(
|
||||||
|
'target' => '_blank',
|
||||||
|
'icon' => 'facebook-squared',
|
||||||
|
'title' => $this->translate('Icinga on Facebook')
|
||||||
|
)
|
||||||
) ?>
|
) ?>
|
||||||
<?php else: ?>
|
</div>
|
||||||
<?= $this->escape($module->getName()) ?>
|
</footer>
|
||||||
<?php endif ?>
|
|
||||||
<td>
|
|
||||||
<?= $this->escape($module->getVersion()) ?>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<?php endforeach ?>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,9 @@ class Version
|
||||||
public static function get()
|
public static function get()
|
||||||
{
|
{
|
||||||
$version = array('appVersion' => self::VERSION);
|
$version = array('appVersion' => self::VERSION);
|
||||||
|
preg_match('/2.(\d+)\./', self::VERSION, $matches);
|
||||||
|
$version['docVersion'] = isset($matches[1]) ? '2.' . $matches[1] : null;
|
||||||
|
|
||||||
if (false !== ($appVersion = @file_get_contents(Icinga::app()->getApplicationDir('VERSION')))) {
|
if (false !== ($appVersion = @file_get_contents(Icinga::app()->getApplicationDir('VERSION')))) {
|
||||||
$matches = array();
|
$matches = array();
|
||||||
if (@preg_match('/^(?P<gitCommitID>\w+) (?P<gitCommitDate>\S+)/', $appVersion, $matches)) {
|
if (@preg_match('/^(?P<gitCommitID>\w+) (?P<gitCommitDate>\S+)/', $appVersion, $matches)) {
|
||||||
|
|
|
||||||
|
|
@ -1,36 +1,95 @@
|
||||||
/*! Icinga Web 2 | (c) 2015 Icinga Development Team | GPLv2+ */
|
/*! Icinga Web 2 | (c) 2015 Icinga Development Team | GPLv2+ */
|
||||||
|
|
||||||
#about {
|
#about {
|
||||||
|
&.content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
width: auto;
|
||||||
|
|
||||||
|
> * {
|
||||||
|
margin-bottom: 2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
margin-top: 2.5em;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-social i {
|
.name-value-table {
|
||||||
font-size: 1.7em;
|
th {
|
||||||
color: @text-color;
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-social i:hover {
|
section:not(:last-child),
|
||||||
color: @icinga-blue;
|
.icinga-logo {
|
||||||
|
margin-bottom: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-links {
|
.external-links {
|
||||||
margin-top: 2.5em;
|
.rounded-corners();
|
||||||
margin-bottom: 2.5em;
|
border: 1px solid @gray-light;
|
||||||
|
display: flex;
|
||||||
|
padding: .5em 0;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.col {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12/14em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col:not(:last-child) {
|
||||||
|
border-right: 1px solid @gray-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
padding: .75em 1em;
|
||||||
|
margin: -7/12em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
background: @gray-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 2*14/12em;
|
||||||
|
opacity: .8;
|
||||||
|
margin-bottom: .25em;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-links i {
|
footer {
|
||||||
margin: 0.5em;
|
margin-top: auto;
|
||||||
padding: 0;
|
align-self: stretch;
|
||||||
font-size: 5em;
|
display: flex;
|
||||||
color: @text-color;
|
justify-content: space-between;
|
||||||
}
|
align-items: baseline;
|
||||||
|
|
||||||
.about-links i:hover {
|
a {
|
||||||
color: @icinga-blue;
|
i {
|
||||||
}
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
.common-table th {
|
&:hover {
|
||||||
text-align: center;
|
opacity: .6;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue