tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-07-27 15:54:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

Installer styling

Browse Source
This commit is contained in:
Bernd Erk 2014-11-13 17:20:06 +01:00
parent a5b8de366f
commit 205ba64781
4 changed files with 66 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
modules/setup/application/views/scripts/form/setup-requirements.phtml
View File

@ -22,7 +22,7 @@ $requirements = $form->getRequirements();
<td></td> <td></td>
<td class="btn-update"> <td class="btn-update">
<div class="buttons"> <div class="buttons">
<a href="<?= $this->href(); ?>" class="button-like"><?= mt('setup', 'Update'); ?></a> <a href="<?= $this->href(); ?>" class="button-like"><?= mt('setup', 'Refresh'); ?></a>
</div> </div>
</td> </td>
</tr> </tr>
@ -41,4 +41,4 @@ $requirements = $form->getRequirements();
echo $btn; echo $btn;
?> ?>
</div> </div>
</form> </form>

28
modules/setup/application/views/scripts/form/setup-welcome.phtml
View File

@ -11,26 +11,6 @@ $cliPath = realpath(Icinga::app()->getApplicationDir() . '/../bin/icingacli');
?> ?>
<div class="welcome-page"> <div class="welcome-page">
<h2><?= mt('setup', 'Welcome to the configuration of Icinga Web 2!') ?></h2> <h2><?= mt('setup', 'Welcome to the configuration of Icinga Web 2!') ?></h2>
<div class="info">
<p><?= sprintf(
mt(
'setup',
'Icinga Web 2 is the next generation monitoring web interface,'
. ' framework and CLI tool developed by the %s.'
),
'<a href="https://www.icinga.org/community/team/">' . mt('setup', 'Icinga Project') . '</a>'
); ?></p>
<p><?= mt(
'setup',
'Responsive and fast, rewritten from scratch supporting multiple backends and'
. ' providing a CLI tool. Compatible with Icinga Core 2.x and 1.x.'
); ?></p>
<p><?= sprintf(
mt('setup', 'Check the Icinga website for some %s.', 'setup.welcome.screenshots'),
'<a href="https://www.icinga.org/icinga/screenshots/icinga-web-2/">'
. mt('setup', 'insights', 'setup.welcome.screenshots.label') . '</a>'
); ?></p>
</div>
<?php if (false === file_exists($setupTokenPath) && file_exists(Config::resolvePath('config.ini'))): ?> <?php if (false === file_exists($setupTokenPath) && file_exists(Config::resolvePath('config.ini'))): ?>
<p class="restart-warning"><?= mt( <p class="restart-warning"><?= mt(
'setup', 'setup',
@ -40,8 +20,7 @@ $cliPath = realpath(Icinga::app()->getApplicationDir() . '/../bin/icingacli');
<?php else: ?> <?php else: ?>
<p><?= mt( <p><?= mt(
'setup', 'setup',
'This wizard will guide you through the configuration of Icinga Web 2. Once completed and successfully' ''
. ' finished you are able to log in and to explore all the new and stunning features!'
); ?></p> ); ?></p>
<?php endif ?> <?php endif ?>
<form id="<?= $form->getName(); ?>" name="<?= $form->getName(); ?>" enctype="<?= $form->getEncType(); ?>" method="<?= $form->getMethod(); ?>" action="<?= $form->getAction(); ?>"> <form id="<?= $form->getName(); ?>" name="<?= $form->getName(); ?>" enctype="<?= $form->getEncType(); ?>" method="<?= $form->getMethod(); ?>" action="<?= $form->getAction(); ?>">
@ -54,7 +33,6 @@ $cliPath = realpath(Icinga::app()->getApplicationDir() . '/../bin/icingacli');
</form> </form>
<div class="note"> <div class="note">
<div class="title"> <div class="title">
<img src="<?= $this->href('img/icons/comment.png'); ?>" alt="<?= mt('setup', 'Note'); ?>">
<strong>Generating a New Setup Token</strong> <strong>Generating a New Setup Token</strong>
</div> </div>
<div> <div>
@ -75,10 +53,10 @@ $cliPath = realpath(Icinga::app()->getApplicationDir() . '/../bin/icingacli');
<span>head -c 12 /dev/urandom | base64 | tee <?= $setupTokenPath; ?>;</span> <span>head -c 12 /dev/urandom | base64 | tee <?= $setupTokenPath; ?>;</span>
<span>chmod 0660 <?= $setupTokenPath; ?>;</span> <span>chmod 0660 <?= $setupTokenPath; ?>;</span>
</div> </div>
<p style="font-size: 85%;"><?= sprintf( <p><?= sprintf(
mt('setup', 'Please see the %s for an extensive description on how to access and use this wizard.'), mt('setup', 'Please see the %s for an extensive description on how to access and use this wizard.'),
'<a href="http://docs.icinga.org/">' . mt('setup', 'Icinga Web 2 documentation') . '</a>' // TODO: Add link to iw2 docs which points to the installation topic '<a href="http://docs.icinga.org/">' . mt('setup', 'Icinga Web 2 documentation') . '</a>' // TODO: Add link to iw2 docs which points to the installation topic
); ?></p> ); ?></p>
</div> </div>
</div> </div>
</div> </div>

4
public/css/icinga/forms.less
View File

@ -46,8 +46,8 @@ input[type=submit] {
text-align: center; text-align: center;
color: #fff; color: #fff;
border: 2px solid #ddd; border: 2px solid #ddd;
border-color: #049baf; border-color: @colorPetrol;
background: #049baf; background: @colorPetrol;
outline: 0; outline: 0;
} }

108
public/css/icinga/setup.less
View File

@ -2,20 +2,22 @@
overflow: auto; // TODO: Shouldn't be necessary, here, IMHO overflow: auto; // TODO: Shouldn't be necessary, here, IMHO
} }
#setup { #setup {
.header { .header {
width: 100%; width: 100%;
height: 5.4em; height: 5.4em;
background-color: #555; background-color: @colorPetrol;
background-image: -moz-linear-gradient(top, #777, #555); border-bottom: 1px solid #d9d9d9d;
background-image: -webkit-linear-gradient(top, #777, #555); text-align: center;
background-image: -o-linear-gradient(top, #777, #555); -webkit-box-shadow: 0 3px 7px -3px #000;
background-image: -ms-linear-gradient(top, #777, #555); -moz-box-shadow: 0 3px 7px -3px #000;
background-image: linear-gradient(top, #777, #555); box-shadow: 0 3px 7px -3px #000;
img { img {
width: 12.5em; width: 7.5em;
margin: 0.5em; margin: 1.5em;
float: left; float: left;
} }
@ -29,7 +31,7 @@
h1 { h1 {
margin: 0; margin: 0;
color: white; color: white;
font-size: 1em; font-size: 0.9em;
text-align: center; text-align: center;
} }
@ -49,7 +51,7 @@
background-color: lightgrey; background-color: lightgrey;
&.line { &.line {
height: 0.5em; height: 0.4em;
&.left { &.left {
margin-left: 0.1em; margin-left: 0.1em;
@ -67,9 +69,9 @@
} }
&.bubble { &.bubble {
width: 1.5em; width: 1.2em;
height: 1.5em; height: 1.2em;
border-radius: 1.5em; border-radius: 1.2em;
// Make sure that such a bubble overlays lines // Make sure that such a bubble overlays lines
position: relative; position: relative;
@ -81,11 +83,11 @@
} }
&.complete { &.complete {
background-color: #2e8b57; background-color: @colorOk ;
} }
&.visited { &.visited {
background-color: #77bf97; background-color: #eee;
} }
} }
} }
@ -93,12 +95,13 @@
} }
.setup-content { .setup-content {
margin: 1.5em 1.8em 0 1.8em; margin: 1.5em 10em 0 10em;
form { form {
h2 { h2 {
font-size: 1.5em; font-size: 2.0em;
color: #444; color: @colorTextDefault;
border-bottom: 2px solid @colorPetrol;
} }
} }
} }
@ -114,24 +117,30 @@
#btn_prev { #btn_prev {
margin-right: 1em; margin-right: 1em;
font-size: 0.9em;
}
#btn_next {
font-size: 0.9em;
} }
button, .button-like { button, .button-like {
padding: 0.5em 1em; font-size: 0.9em;
font-weight: bold; font-weight: bold;
outline: 0; outline: 0;
border: 1px solid black; color: #fff;
border-radius: 0.2em; border: 2px solid;
background: #666; border-color: @colorPetrol;
color: #eee; background: @colorPetrol;
&[disabled="1"] { &[disabled="1"] {
background-color: #aaa; background-color: #aaa;
border: 1px dotted black; border: 1px solid black;
} }
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
background-color: #333; background-color: #666;
border-color: #666;
&[disabled="1"] { &[disabled="1"] {
background-color: #aaa; background-color: #aaa;
@ -141,10 +150,10 @@
&.finish, &.login { &.finish, &.login {
min-width: 25em; min-width: 25em;
color: #fffafa; color: #fffafa;
background: #aaa; background: @colorPetrol;
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
background: #888; background: #666;
} }
} }
} }
@ -156,9 +165,11 @@
} }
#setup table.requirements { #setup table.requirements {
margin: -1em -1em 0; font-size: 0.9em;
margin: -1em -1em 2em;
border-spacing: 1em; border-spacing: 1em;
border-collapse: separate; border-collapse: separate;
border-bottom: 2px solid @colorPetrol;
td { td {
h2 { h2 {
@ -168,10 +179,9 @@
&.state { &.state {
color: white; color: white;
padding: 0.4em; padding: 0.4em;
border-radius: 0.2em;
&.fulfilled { &.fulfilled {
background-color: #4fad4b; background-color: @colorOk;
} }
&.not-available { &.not-available {
@ -180,7 +190,7 @@
} }
&.missing { &.missing {
background-color: #fd7770; background-color: @colorCritical;
} }
} }
@ -193,7 +203,7 @@
a.button-like { a.button-like {
padding: 0.2em 0.5em; padding: 0.2em 0.5em;
background-color: #888; background-color: @colorPetro;
&:hover, &:focus { &:hover, &:focus {
background-color: #666; background-color: #666;
@ -229,11 +239,10 @@
div.page { div.page {
float: left; float: left;
width: 25em; width: 20em;
min-height: 25em; min-height: 25em;
padding: 0 1em 1em; padding: 0 1em 1em;
margin: 1em 1.5em 1.5em; margin: 1em 1.5em 1.5em;
border-radius: 0.5em;
border: 1px dashed lightgrey; border: 1px dashed lightgrey;
h2 { h2 {
@ -272,14 +281,13 @@
padding: 0.5em; padding: 0.5em;
color: white; color: white;
font-weight: bold; font-weight: bold;
border-radius: 1em;
} }
#setup-finish { #setup-finish {
div.report { div.report {
padding: 1em; padding: 1em;
border: 1px solid lightgrey;
border-radius: 0em; border-radius: 0em;
background-color: #eee;
div.line-separator { div.line-separator {
width: 50%; width: 50%;
@ -319,14 +327,15 @@
text-align: center; text-align: center;
h2 { h2 {
font-size: 1.5em; font-size: 2.0em;
color: @colorTextDefault;
border-bottom: 2px solid @colorPetrol;
margin-bottom: 2em;
} }
div.info { div.info {
display: inline-block;
max-width: 66%;
padding: 0 1em; padding: 0 1em;
border-radius: 1em;
background-color: #eee; background-color: #eee;
border: 1px solid lightgrey; border: 1px solid lightgrey;
} }
@ -337,20 +346,20 @@
} }
div.note { div.note {
width: 40%;
padding: 1em 1em 0; padding: 1em 1em 0;
margin: 3em auto 0; margin: 3em auto 0;
text-align: left; text-align: left;
border-radius: 0.5em; font-size: 0.9em;
border: 1px solid #eee; border: 1px solid lightgrey;
div.title { div.title {
color: white;
padding: 0.2em; padding: 0.2em;
margin: -1em -1em 1em; margin: -1em -1em 1em;
text-align: center; text-align: center;
background-color: #eee; color: @colorTextDefault;
border-top-left-radius: 0.5em; border-bottom: 2px solid @colorPetrol;
border-top-right-radius: 0.5em;
} }
img { img {
@ -391,16 +400,16 @@
width: auto; width: auto;
padding: 1em; padding: 1em;
overflow: hidden; overflow: hidden;
border-radius: 1em; border: solid 1px lightgrey;
background-color: #f4f4f4;
div.buttons { div.buttons {
margin: 1.5em 0 0; margin: 1.5em 0 0;
float: right;
button[type=submit] { button[type=submit] {
padding: 0.5em; padding: 0.5em;
line-height: 0.5em; line-height: 0.5em;
background-color: #888; background-color: @colorPetrol;
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
background-color: #666; background-color: #666;
@ -410,6 +419,7 @@
} }
div.module-menu { div.module-menu {
font-size: 0.9em;
width: 25%; width: 25%;
float: right; float: right;
margin-left: 1.5em; margin-left: 1.5em;