[BUGFIX] Installer should use 50% of its space 06/58506/5
authorBenni Mack <benni@typo3.org>
Sun, 30 Sep 2018 16:52:33 +0000 (18:52 +0200)
committerSusanne Moog <susanne.moog@typo3.org>
Sun, 30 Sep 2018 18:45:18 +0000 (20:45 +0200)
The Installer uses a full grid which is a lot of white space if not needed.

So, the whole layout is put into a col-md-6 grid with a col-md-offset-3
offset.

Resolves: #86482
Releases: master
Change-Id: If2e409deae98c0cf23eb7606a6cf35b950834874
Reviewed-on: https://review.typo3.org/58506
Reviewed-by: Frank Naegler <frank.naegler@typo3.org>
Tested-by: Frank Naegler <frank.naegler@typo3.org>
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Susanne Moog <susanne.moog@typo3.org>
Tested-by: Susanne Moog <susanne.moog@typo3.org>
typo3/sysext/install/Resources/Private/Templates/Installer/MainLayout.html
typo3/sysext/install/Resources/Private/Templates/Installer/ShowDatabaseConnect.html
typo3/sysext/install/Resources/Private/Templates/Installer/ShowDatabaseData.html
typo3/sysext/install/Resources/Private/Templates/Installer/ShowDatabaseSelect.html
typo3/sysext/install/Resources/Private/Templates/Installer/ShowDefaultConfiguration.html
typo3/sysext/install/Resources/Private/Templates/Installer/ShowEnvironmentAndFolders.html
typo3/sysext/install/Resources/Private/Templates/Installer/ShowInstallerNotAvailable.html
typo3/sysext/install/Resources/Private/Templates/Login/ShowEnableInstallToolFile.html
typo3/sysext/install/Resources/Private/Templates/Login/ShowLogin.html

index 5ac1cea..420b4d9 100644 (file)
@@ -1,20 +1,19 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:i="http://typo3.org/ns/TYPO3/CMS/Install/ViewHelpers" data-namespace-typo3-fluid="true">
 
 <div class="container">
-       <div class="page-header">
-               <h1 class="logo-pageheader">
-                       <img src="{f:uri.resource(path: 'Images/typo3_orange.svg')}" width="130" class="logo" /> <small> CMS <i:constant name="TYPO3_version" /></small>
-               </h1>
-       </div>
        <div class="row">
-               <h2>Installing TYPO3 CMS <i:constant name="TYPO3_version" /></h2>
-
-               <div class="progress t3js-installer-progress">
-                       <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style="width: {currentStep.percent}%;">
+               <div class="col-md-6 col-md-offset-3">
+                       <div class="page-header">
+                               <h1 class="logo-pageheader">
+                                       <img src="{f:uri.resource(path: 'Images/typo3_orange.svg')}" width="130" class="logo" /><h2>Installing TYPO3 CMS <i:constant name="TYPO3_version" /></h2>
+                               </h1>
                        </div>
+                       <div class="progress t3js-installer-progress">
+                               <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style="width: {currentStep.percent}%;">
+                               </div>
+                       </div>
+                       <div class="t3js-installer-content"></div>
                </div>
-
-               <div class="t3js-installer-content"></div>
        </div>
 </div>
 
index f79c9c8..80e65cc 100644 (file)
@@ -9,7 +9,7 @@
                        </p>
                        <div class="t3js-installer-databaseConnect-output"></div>
                        <div class="row">
-                               <div class="col-md-6">
+                               <div class="col-md-12">
                                        <form method="post" class="form-horizontal">
                                                <div class="form-group">
                                                        <label for="t3js-connect-database-driver" class="control-label col-md-2">Connection</label>
                                                        </div>
                                                </f:if>
 
-                                               <hr/>
-                                               <button class="btn btn-success t3js-installer-databaseConnect-execute">
+                                               <button class="btn btn-success pull-right t3js-installer-databaseConnect-execute">
                                                        Continue
                                                </button>
                                        </form>
index b6f9585..f60b431 100644 (file)
@@ -10,7 +10,7 @@
        <div class="t3js-installer-databaseData-output"></div>
 
        <div class="row">
-               <div class="col-md-6">
+               <div class="col-md-12">
                        <form method="post" id="stepInstaller-databaseData" class="t3-install-form-label-before form-horizontal">
                                <input type="hidden" value="execute" name="install[set]" />
                                <div class="form-group">
@@ -69,7 +69,7 @@
                                                />
                                        </div>
                                </div>
-                               <button class="btn btn-success t3js-installer-databaseData-execute">
+                               <button class="btn btn-success pull-right t3js-installer-databaseData-execute">
                                        Continue
                                </button>
                        </form>
index 730931d..66c31f9 100644 (file)
@@ -16,7 +16,7 @@
 
        <form method="post" id="stepInstaller-databaseSelect">
                <div class="row">
-                       <div class="col-md-6">
+                       <div class="col-md-12">
                                <div class="radio">
                                        <label for="t3-install-form-db-select-type-existing">
                                                <input id="t3-install-form-db-select-type-existing" type="radio" name="install[values][type]" value="existing" class="radio" checked="checked" />
@@ -70,7 +70,7 @@
                                </div>
 
                                <div class="form-group">
-                                       <button class="btn btn-success t3js-installer-databaseSelect-execute">
+                                       <button class="btn btn-success pull-right t3js-installer-databaseSelect-execute">
                                                Continue
                                        </button>
                                </div>
index 938c6a9..b212351 100644 (file)
@@ -40,7 +40,7 @@
                                </label>
                        </div>
                </div>
-               <button class="btn btn-success t3js-installer-defaultConfiguration-execute">
+               <button class="btn btn-success pull-right t3js-installer-defaultConfiguration-execute">
                        Open the TYPO3 Backend
                </button>
        </form>
index b096a66..4272593 100644 (file)
@@ -1,24 +1,30 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
 
 <h3>Environment Overview</h3>
-
 <p>First the Install Wizard needs to inspect your web server and identify any issues that may prevent TYPO3 from running correctly.</p>
 
-<form class="t3js-installer-environmentFolders-bad" style="display: none;">
-       <div class="form-group">
-               <button class="btn btn-default t3js-installer-environmentFolders-retry">
-                       Scan environment again
-               </button>
+<div class="row">
+       <div class="col-xs-6">
+               <form class="t3js-installer-environmentFolders-bad" style="display: none;">
+                       <div class="form-group">
+                               <button class="btn btn-default btn-block t3js-installer-environmentFolders-retry">
+                                       Scan environment again
+                               </button>
+                       </div>
+               </form>
        </div>
-</form>
-<form class="t3js-installer-environmentFolders-bad" style="display: none;">
-       <div class="form-group">
-               <button class="btn btn-danger t3js-installer-environmentFolders-execute">
-                       Continue with errors
-                       <span class="t3-install-form-button-icon-negative">&nbsp;</span>
-               </button>
+       <div class="col-xs-6">
+               <form class="t3js-installer-environmentFolders-bad" style="display: none;">
+                       <div class="form-group">
+                               <button class="btn btn-danger btn-block t3js-installer-environmentFolders-execute">
+                                       Continue with errors
+                                       <span class="t3-install-form-button-icon-negative">&nbsp;</span>
+                               </button>
+                       </div>
+               </form>
        </div>
-</form>
+</div>
+
 <form class="t3js-installer-environmentFolders-good" style="display: none;">
        <button class="btn btn-success t3js-installer-environmentFolders-execute">
                No problems detected, continue with installation
@@ -26,9 +32,7 @@
 </form>
 
 <div class="t3js-installer-environment-details" style="display: none;">
-       <br>
        <h3>Problems Detected</h3>
-
 </div>
 
 </html>
index fe54736..b456003 100644 (file)
@@ -1,20 +1,17 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
 
-<div class="row">
-       <div class="col-sm-12 col-md-6">
-               <div class="panel panel-success">
-                       <div class="panel-heading">
-                               <h2>Thank you for choosing TYPO3</h2>
-                       </div>
-                       <div class="panel-body">
-                               <p>The Installation Wizard will guide you through the necessary steps required to install TYPO3 on your web server.</p>
-                               <p>To begin the installation, create an empty file called <strong>FIRST_INSTALL</strong> in the document root of your web server.</p>
-                               <p>
-                                       <strong>Note:</strong>
-                                       The filename is case sensitive and it will be deleted once the installation process is complete.
-                               </p>
-                       </div>
-               </div>
+<div class="panel panel-success">
+       <div class="panel-heading">
+               <h2>Thank you for choosing TYPO3</h2>
+       </div>
+       <div class="panel-body">
+               <p>The Installation Wizard will guide you through the necessary steps required to install TYPO3 on your web server.</p>
+               <p>To begin the installation, create an empty file called
+                       <strong>FIRST_INSTALL</strong> in the document root of your web server.</p>
+               <p>
+                       <strong>Note:</strong>
+                       The filename is case sensitive and it will be deleted once the installation process is complete.
+               </p>
        </div>
 </div>
 
index 34d3675..28f6e11 100644 (file)
@@ -1,11 +1,12 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
 
 <div class="container">
-       <div class="page-header">
-               <img src="{f:uri.resource(path: 'Images/typo3_orange.svg')}" width="130" class="logo" />
-       </div>
        <div class="row">
-               <div class="col-sm-12 col-md-8 col-lg-5 center-block">
+               <div class="col-md-6 col-md-offset-3">
+                       <div class="page-header">
+                               <img src="{f:uri.resource(path: 'Images/typo3_orange.svg')}" width="130" class="logo" />
+                       </div>
+
                        <div class="panel panel-warning">
                                <div class="panel-heading">
                                        <h2 class="panel-title">The Install Tool is locked</h2>
@@ -17,7 +18,6 @@
                                                The file must be writable by the web server user.
                                                The filename is case-sensitive but the file itself can be empty.
                                        </p>
-
                                        <p>
                                                <strong>Security note:</strong>
                                                When you are finished with the Install Tool, you should rename or delete this file.
index 96b5f8c..79aebc7 100644 (file)
@@ -6,41 +6,44 @@
                        <img src="{f:uri.resource(path: 'Images/typo3_orange.svg')}" width="130" class="logo" /> Site: {siteName} <small>Login to TYPO3 <i:constant name="TYPO3_version" /> Install Tool</small>
                </h1>
        </div>
-       <div class="row"></div>
-       <div id="t3-install-box-body">
-               <form method="post" class="form-inline" id="t3-install-form-login" data-login-token="{loginToken}">
-                       <div class="form-group">
-                               <label for="t3-install-form-password">Password</label>
-                               <input id="t3-install-form-password" type="password" name="install[password]" class="t3-install-form-input-text form-control" autofocus="autofocus" />
+       <div class="row">
+               <div class="col-md-6 col-md-offset-3">
+                       <div id="t3-install-box-body">
+                               <form method="post" class="form-inline" id="t3-install-form-login" data-login-token="{loginToken}">
+                                       <div class="form-group">
+                                               <label for="t3-install-form-password">Password</label>
+                                               <input id="t3-install-form-password" type="password" name="install[password]" class="t3-install-form-input-text form-control" autofocus="autofocus" />
+                                       </div>
+                                       <button type="button" class="btn btn-default btn-success t3js-login-login">
+                                               Login
+                                       </button>
+                                       <button type="button" class="btn btn-default btn-danger pull-right t3js-login-lockInstallTool">
+                                               <i class="fa fa-lock"></i> Lock Install Tool again
+                                       </button>
+                               </form>
                        </div>
-                       <button type="button" class="btn btn-default btn-success t3js-login-login">
-                               Login
-                       </button>
-                       <button type="button" class="btn btn-default btn-danger pull-right t3js-login-lockInstallTool">
-                               <i class="fa fa-lock"></i> Lock Install Tool again
-                       </button>
-               </form>
-       </div>
-       <div id="t3-install-box-border-bottom">&nbsp;</div>
+                       <div id="t3-install-box-border-bottom">&nbsp;</div>
 
-       <div class="t3js-login-output"></div>
+                       <div class="t3js-login-output"></div>
 
-       <div class="panel panel-info">
-               <div class="panel-heading"><h3 class="panel-title">Information</h3></div>
-               <div class="panel-body">
-                       By default the Install Tool password is the one specified during the installation.
-               </div>
-       </div>
-       <div class="panel panel-warning">
-               <div class="panel-heading"><h3 class="panel-title">Important</h3></div>
-               <div class="panel-body">
-                       If you don't know the current password, you can set a new one by setting the value of
-                       <code>$GLOBALS['TYPO3_CONF_VARS']['BE']['installToolPassword']</code> in <code>typo3conf/LocalConfiguration.php</code> to
-                       the hash value of the password you desire, which will be shown if you enter the desired password
-                       in this form and submit it.
-                       <br /><br />
-                       This password gives an attacker full control over your instance if cracked. It should be strong
-                       (include lower and upper case characters, special characters and numbers) and at least eight characters long.
+                       <div class="panel panel-info">
+                               <div class="panel-heading"><h3 class="panel-title">Information</h3></div>
+                               <div class="panel-body">
+                                       By default the Install Tool password is the one specified during the installation.
+                               </div>
+                       </div>
+                       <div class="panel panel-warning">
+                               <div class="panel-heading"><h3 class="panel-title">Important</h3></div>
+                               <div class="panel-body">
+                                       If you don't know the current password, you can set a new one by setting the value of
+                                       <code>$GLOBALS['TYPO3_CONF_VARS']['BE']['installToolPassword']</code> in <code>typo3conf/LocalConfiguration.php</code> to
+                                       the hash value of the password you desire, which will be shown if you enter the desired password
+                                       in this form and submit it.
+                                       <br /><br />
+                                       This password gives an attacker full control over your instance if cracked. It should be strong
+                                       (include lower and upper case characters, special characters and numbers) and at least eight characters long.
+                               </div>
+                       </div>
                </div>
        </div>
 </div>