Optimized platform installer pages (#61)

This commit is contained in:
Andy Strobel 2014-07-05 21:20:11 +02:00
parent bd7b07c3b9
commit 1a8275f3c2
13 changed files with 227 additions and 48 deletions

View File

@ -29,9 +29,20 @@ class InstallerModule extends HWebModule
public $isCoreModule = true;
private $_assetsUrl;
public function getAssetsUrl() {
if ($this->_assetsUrl === null)
$this->_assetsUrl = Yii::app()->getAssetManager()->publish(
Yii::getPathOfAlias('installer.resources')
);
return $this->_assetsUrl;
}
public function init()
{
$this->setLayoutPath(Yii::getPathOfAlias('installer.views'));
Yii::app()->clientScript->registerCoreScript('jquery');
}
/**

View File

@ -72,7 +72,7 @@ class ConfigController extends Controller
{
if (HSetting::Get('name') == "") {
HSetting::Set('name', "My HumHub Network");
HSetting::Set('name', "HumHub");
}
$this->setupInitialData();

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

@ -5,6 +5,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="language" content="en"/>
<link type="text/css" href="<?php echo Yii::app()->baseUrl; ?>/css/animate.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->baseUrl; ?>/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->baseUrl; ?>/css/style.css"/>
<link href="<?php echo Yii::app()->baseUrl; ?>/themes/HumHub/css/theme.css" rel="stylesheet">
@ -14,16 +15,28 @@
<title><?php echo CHtml::encode($this->pageTitle); ?></title>
</head>
<style type="text/css">
body {
background-color: #7191a8 !important;
}
</style>
<body>
<div class="container installer" style="margin: 0 auto; max-width: 700px;">
<div class="container installer outside" style="margin: 0 auto; max-width: 700px;">
<div class="logo">
<h1><?php echo Yii::app()->name; ?></h1>
<h2><?php echo Yii::t('InstallerModule.base', 'Your Social Network Toolbox'); ?></h2>
<?php if (Yii::app()->name == "HumHub") : ?>
<a class="animated fadeIn" href="http://www.humhub.org" target="_blank" class="">
<img src="<?php echo $this->module->assetsUrl; ?>/humhub-logo-white.png" alt="Logo">
</a>
<?php else : ?>
<h1 class="animated fadeIn"><?php echo Yii::app()->name; ?></h1>
<?php endif; ?>
</div>
<?php echo $content; ?>
<div class="text text-center animated fadeIn">
Powered by <a href="http://www.humhub.org" target="_blank">HumHub</a>
</div>
</div>
<div class="clear"></div>

View File

@ -1,7 +1,10 @@
<div class="panel panel-default">
<div class="panel-body">
<p class="lead"><?php echo Yii::t('InstallerModule.base', '<strong>Create</strong> admin account'); ?></p>
<div id="create-admin-account-form" class="panel panel-default animated fadeIn">
<div class="install-header install-header-small" style="background-image: url('<?php echo $this->module->assetsUrl; ?>/humhub-install-header.jpg');">
<h2 class="install-header-title"><?php echo Yii::t('InstallerModule.base', '<strong>Admin</strong> Account'); ?></h2>
</div>
<div class="panel-body">
<p><?php echo Yii::t('InstallerModule.base', "You're almost done. In the last step you have to fill out the form to create an admin account. With this account you can manage the whole network."); ?></p>
<hr/>
<?php echo $form; ?>
@ -9,4 +12,20 @@
</div>
</div>
<script type="text/javascript">
$(function () {
// set cursor to email field
$('#User_username').focus();
})
// Shake panel after wrong validation
<?php foreach($form->models as $model) : ?>
<?php if ($model->hasErrors()) : ?>
$('#create-admin-account-form').removeClass('fadeIn');
$('#create-admin-account-form').addClass('shake');
<?php endif; ?>
<?php endforeach; ?>
</script>

View File

@ -1,13 +1,17 @@
<div class="panel panel-default">
<div id="name-form" class="panel panel-default animated fadeIn">
<div class="install-header install-header-small" style="background-image: url('<?php echo $this->module->assetsUrl; ?>/humhub-install-header.jpg');">
<h2 class="install-header-title"><?php echo Yii::t('InstallerModule.base', 'Social Network <strong>Name</strong>'); ?></h2>
</div>
<div class="panel-body">
<p class="lead"><?php echo Yii::t('InstallerModule.base', '<strong>Your</strong> Social Network name'); ?></p>
<p>Of course, your new social network need a name. Please change the default name with one you like. (For example the name of your company, organization or club)</p>
<?php
$form = $this->beginWidget('CActiveForm', array(
'id' => 'basic-form',
'enableAjaxValidation' => true,
'enableAjaxValidation' => false,
));
?>
@ -25,4 +29,19 @@
</div>
</div>
<script type="text/javascript">
$(function () {
// set cursor to email field
$('#ConfigBasicForm_name').focus();
})
// Shake panel after wrong validation
<?php if ($form->errorSummary($model) != null) { ?>
$('#name-form').removeClass('fadeIn');
$('#name-form').addClass('shake');
<?php } ?>
</script>

View File

@ -1,10 +1,19 @@
<div class="panel panel-default">
<div class="panel-body">
<div class="panel panel-default animated fadeIn">
<div class="install-header install-header-small"
style="background-image: url('<?php echo $this->module->assetsUrl; ?>/humhub-install-header.jpg');">
<h2 class="install-header-title"><?php echo Yii::t('InstallerModule.base', '<strong>Setup</strong> Complete'); ?></h2>
</div>
<div class="panel-body text-center">
<p class="lead"><?php echo Yii::t('InstallerModule.base', "<strong>Congratulations</strong>. You're done."); ?></p>
<p>The installation completed successfully! Have fun with your new social network.</p>
<hr>
<?php echo HHtml::link(Yii::t('InstallerModule.base', 'Sign in'), Yii::app()->createUrl('/site/index'), array('class' => 'btn btn-primary')); ?>
<div class="text-center">
<br/>
<?php echo HHtml::link(Yii::t('InstallerModule.base', 'Sign in'), Yii::app()->createUrl('/site/index'), array('class' => 'btn btn-primary')); ?>
<br/><br/>
</div>
</div>
</div>

View File

@ -1,24 +1,23 @@
<div class="panel panel-default">
<div class="panel-body">
<div class="panel panel-default animated fadeIn">
<p class="lead"><?php echo Yii::t('InstallerModule.base', '<strong>Welcome</strong> to the HumHub installer.'); ?></p>
<div class="install-header" style="background-image: url('<?php echo $this->module->assetsUrl; ?>/humhub-install-header.jpg');">
<h2 class="install-header-title"><?php echo Yii::t('InstallerModule.base', '<strong>Setup</strong> Wizard'); ?></h2>
</div>
<p><?php echo Yii::t('InstallerModule.base', 'The HumHub basic installation needs just a web server who supports <strong>PHP 5.3</strong> or higher and <strong>MySQL 5.4</strong> or higher.'); ?></p>
<p><?php echo Yii::t('InstallerModule.base', 'For installing HumHub to your MySQL database you have to know the following database information before proceeding:'); ?></p>
<ol>
<li><?php echo Yii::t('InstallerModule.base', 'Hostname'); ?></li>
<li><?php echo Yii::t('InstallerModule.base', 'Username'); ?></li>
<li><?php echo Yii::t('InstallerModule.base', 'Password'); ?></li>
<li><?php echo Yii::t('InstallerModule.base', 'Name of database'); ?></li>
</ol>
<p><?php echo Yii::t('InstallerModule.base', 'In the next step HumHub will check your system to determine if your configurations are comparable with the needed requirements.'); ?></p>
<div class="panel-body text-center">
<hr>
<p class="lead"><?php echo Yii::t('InstallerModule.base', '<strong>Welcome</strong> to HumHub<br>Your Social Network Toolbox'); ?></p>
<?php echo HHtml::link(Yii::t('InstallerModule.base',"Ok, let's go"). ' <i class="fa fa-arrow-circle-right"></i>', array('go'), array('class' => 'btn btn-lg btn-primary')); ?>
<p><?php echo Yii::t('InstallerModule.base', 'This wizard will install and configure your own HumHub instance.<br><br>To continue, click Next.'); ?></p>
<div class="text-center">
<br/>
<?php echo HHtml::link(Yii::t('InstallerModule.base', "Next") . ' <i class="fa fa-arrow-circle-right"></i>', array('go'), array('class' => 'btn btn-lg btn-primary')); ?>
<br/><br/>
</div>
</div>
</div>
</div>
<?php echo Yii::t('InstallerModule.base', ''); ?>
</div>

View File

@ -1,7 +1,10 @@
<div class="panel panel-default">
<div class="panel-body">
<p class="lead"><?php echo Yii::t('InstallerModule.base', '<strong>HumHub</strong> database configuration'); ?></p>
<div id="database-form" class="panel panel-default animated fadeIn">
<div class="install-header install-header-small" style="background-image: url('<?php echo $this->module->assetsUrl; ?>/humhub-install-header.jpg');">
<h2 class="install-header-title"><?php echo Yii::t('InstallerModule.base', '<strong>Database</strong> Configuration'); ?></h2>
</div>
<div class="panel-body">
<p>
<?php echo Yii::t('InstallerModule.base', 'Below you have to enter your database connection details. If youre not sure about these, please contact your administrator or web host.'); ?>
</p>
@ -72,4 +75,19 @@
<?php $this->endWidget(); ?>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
// set cursor to email field
$('#hostname').focus();
})
// Shake panel after wrong validation
<?php if ($form->errorSummary($model) != null) { ?>
$('#database-form').removeClass('fadeIn');
$('#database-form').addClass('shake');
<?php } ?>
</script>

View File

@ -1,25 +1,30 @@
<div class="panel panel-default">
<div class="panel panel-default animated fadeIn">
<div class="install-header install-header-small" style="background-image: url('<?php echo $this->module->assetsUrl; ?>/humhub-install-header.jpg');">
<h2 class="install-header-title"><?php echo Yii::t('InstallerModule.base', '<strong>System</strong> Check'); ?></h2>
</div>
<div class="panel-body">
<p class="lead"><?php echo Yii::t('InstallerModule.base', '<strong>HumHub</strong> system check'); ?></p>
<p><?php echo Yii::t('InstallerModule.base', 'In the following overview, you can see, if all requierements are ready.'); ?></p>
<hr/>
<div class="well">
<div class="prerequisites-list">
<ul>
<?php foreach ($checks as $check): ?>
<li>
<strong><?php echo $check['title']; ?>:</strong>
<?php if ($check['state'] == 'OK') : ?>
<span style="color:green">Ok!</span>
<i class="fa fa-check-circle check-ok animated bounceIn"></i>
<?php elseif ($check['state'] == 'WARNING') : ?>
<span style="color:orange">Warning!</span>
<i class="fa fa-exclamation-triangle check-warning animated swing"></i>
<?php else : ?>
<span style="color:red">Error!</span>
<i class="fa fa-minus-circle check-error animated wobble"></i>
<?php endif; ?>
<strong><?php echo $check['title']; ?></strong>
<?php if (isset($check['hint'])): ?>
<span>(Hint: <?php echo $check['hint']; ?>)</span>
<?php endif; ?>
@ -27,10 +32,8 @@
</li>
<?php endforeach; ?>
</ul>
</div>
<br/>
<?php if (!$hasError): ?>
<div class="alert alert-success">
@ -40,7 +43,7 @@
<hr>
<?php echo HHtml::link('<i class="fa fa-repeat"></i> '. Yii::t('InstallerModule.base','Check again'), array('//installer/setup/prerequisites'), array('class' => 'btn btn-default')); ?>
<?php echo HHtml::link('<i class="fa fa-repeat"></i> '. Yii::t('InstallerModule.base','Check again'), array('//installer/setup/prerequisites'), array('class' => 'btn btn-info')); ?>
<?php if (!$hasError): ?>
<?php echo HHtml::link(Yii::t('InstallerModule.base','Next'). ' <i class="fa fa-arrow-circle-right"></i>', array('//installer/setup/database'), array('class' => 'btn btn-primary')); ?>

View File

@ -1112,12 +1112,14 @@ img.bounceIn {
.outside .text {
color: #ffffff;
font-size: 12px;
margin-bottom: 15px;
}
.outside .text a {
color: #ffffff;
text-decoration: underline;
}
.outside h1 {
.outside h1,
.outside h2 {
color: #ffffff !important;
}
.outside .panel {
@ -1129,3 +1131,39 @@ img.bounceIn {
.outside .panel .panel-body {
padding: 15px;
}
.outside .panel .fa {
width: 18px;
}
.outside .panel .check-ok {
color: #4cd9c0;
}
.outside .panel .check-warning {
color: #fdd198;
}
.outside .panel .check-error {
color: #ff8989;
}
.outside .panel .prerequisites-list ul {
list-style: none;
padding-left: 15px;
}
.outside .panel .prerequisites-list ul li {
padding-bottom: 5px;
}
.outside .install-header {
position: relative;
text-align: center;
height: 152px;
background-position: top center;
border-radius: 3px;
border: 3px solid #ffffff;
}
.outside .install-header .install-header-title {
padding: 6% 30px 0 30px;
}
.outside .install-header.install-header-small {
height: 110px;
}
.outside .install-header.install-header-small .install-header-title {
padding: 3% 30px 0 30px;
}

View File

@ -1488,6 +1488,7 @@ img.bounceIn {
.text {
color: #ffffff;
font-size: 12px;
margin-bottom: 15px;
a {
color: #ffffff;
@ -1495,7 +1496,7 @@ img.bounceIn {
}
}
h1 {
h1, h2 {
color: #ffffff !important;
}
@ -1507,5 +1508,54 @@ img.bounceIn {
.panel-heading, .panel-body {
padding: 15px;
}
.fa {
width: 18px;
}
.check-ok {
color: @colorInfo2;
}
.check-warning {
color: @colorWarning1
}
.check-error {
color: @colorDanger1;
}
.prerequisites-list {
ul {
list-style: none;
padding-left: 15px;
li {
padding-bottom: 5px;
}
}
}
}
.install-header {
position: relative;
text-align: center;
height: 152px;
background-position: top center;
border-radius: 3px;
border: 3px solid #ffffff;
.install-header-title {
padding: 6% 30px 0 30px;
}
}
.install-header.install-header-small {
height: 110px;
.install-header-title {
padding: 3% 30px 0 30px;
}
}
}