Skip to content

Commit

Permalink
Merge pull request joomla#62 from ciar4n/install-style
Browse files Browse the repository at this point in the history 
Install re design
  • Loading branch information
Dimitri Grammatikogianni authored Aug 22, 2017
2 parents 8fb5939 + 48857fc commit 9974ee5
Show file tree
Hide file tree
Showing 7 changed files with 255 additions and 463 deletions.
6 changes: 5 additions & 1 deletion installation/language/en-GB/en-GB.ini
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,11 @@ INSTL_STEP_LANGUAGES_LABEL="Install Languages"
INSTL_STEP_SITE_LABEL="Configuration"
INSTL_STEP_SUMMARY_LABEL="Overview"

;Language view
;Main Config
INSTL_SELECT_LANGUAGE_TITLE="Select Language"
INSTL_WARNJAVASCRIPT="Warning! JavaScript must be enabled for proper installation of Joomla!"
INSTL_WARNJSON="Your PHP installation needs to have JSON enabled for Joomla to be installed!"
INSTL_SETUP_LOGIN_DATA="Setup Login Data"

;Preinstall view
INSTL_PRECHECK_TITLE="Pre-Installation Check"
Expand Down Expand Up @@ -51,6 +52,7 @@ INSTL_DATABASE_TYPE_DESC="This is probably "MySQLi"."
INSTL_DATABASE_TYPE_LABEL="Database Type"
INSTL_DATABASE_USER_DESC="Either a username you created or a username provided by your host."
INSTL_DATABASE_USER_LABEL="Username"
INSTL_INSTALL_JOOMLA="Install Joomla"


;FTP view
Expand All @@ -71,6 +73,7 @@ INSTL_FTP_USER_DESC="Warning! It is recommended to leave this blank and enter yo
INSTL_FTP_PASSWORD_DESC="Warning! It is recommended to leave this blank and enter your FTP password each time you transfer files."

;Site View
INSTL_LOGIN_DATA="Login Data"
INSTL_SITE="Main Configuration"
INSTL_ADMIN_EMAIL_LABEL="Email"
INSTL_ADMIN_EMAIL_DESC="Enter an email address. This will be the email address of the website Super User."
Expand Down Expand Up @@ -100,6 +103,7 @@ INSTL_SAMPLE_DATA_SET_DESC="Install Joomla with one page (a menu with one link)
INSTL_SAMPLE_LEARN_SET_DESC="Install Joomla with example articles that describe how Joomla works."
INSTL_SAMPLE_TESTING_SET_DESC="Install Joomla with all possible menu items to help with testing Joomla."
INSTL_SUPER_USER_TITLE="Super User Account Details"
INSTL_CONNECT_DB="Connect the Database"

;Summary view
INSTL_FINALISATION="Finalisation"
Expand Down
219 changes: 71 additions & 148 deletions installation/template/css/template.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8694,145 +8694,95 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
overflow: visible;
clip: auto; }

body {
background-color: #1c3d5c;
background-image: linear-gradient(90deg, #1c3d5c 0%, #2a5c8b 100%); }

*, *::after, *::before {
box-sizing: border-box; }

form {
width: 100%;
padding: 0 20px; }
.j-install {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh; }

.container {
width: 940px; }
.j-header {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
color: #fff; }

.container-main, .container-header {
width: 940px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.15); }
.j-container {
width: 100%;
max-width: 620px;
margin: 0 auto; }

.container-header {
position: relative;
height: 140px;
background-color: #1c3d5c; }
.j-footer {
padding: 10px 20px;
margin-top: auto;
font-size: .8rem;
color: #fff;
text-align: right;
background-color: #0b3257; }

.header {
position: fixed;
z-index: 1080;
.j-header-logo {
width: 100%;
color: #fff;
background-color: #1c3d5c;
background-repeat: no-repeat;
box-shadow: 0 7px 0 0 #2a5c8b; }
.header .logo {
max-width: 240px;
margin: 20px; }

.j-header-help {
margin: 20px 20px 20px auto; }
.j-header-help a {
padding: 1rem;
font-size: 2rem;
color: #fff; }

.j-install-step {
display: none;
margin-bottom: 20px;
background-color: #fff;
box-shadow: 0 0 2px rgba(52, 58, 67, 0.1), 0 2px 5px rgba(52, 58, 67, 0.08), 0 5px 15px rgba(52, 58, 67, 0.08); }
.j-install-step.active {
display: block; }
.j-install-step select {
width: 100%;
max-width: 280px;
margin-bottom: 15px; }
.header a {
color: #00afff; }
margin-left: 0 !important; }
.j-install-step .btn-block {
margin-top: 40px; }

.nav-steps {
position: absolute;
bottom: -51px;
left: 0;
display: table;
width: 960px;
padding: 0 140px;
margin: 0 auto;
color: #182c3e;
list-style: none;
table-layout: fixed; }
.nav-steps .nav-link {
font-size: 1.1rem;
color: #1b3956;
text-transform: uppercase;
letter-spacing: 2px;
opacity: .5; }
.nav-steps > li {
.j-install-step-header {
position: relative;
padding: 10px 25px;
font-size: 1.1rem;
line-height: 2.4rem;
color: #fff;
background-color: #0b3257; }
.j-install-step-header::after {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 3px;
content: "";
background-color: #006898;
background-image: linear-gradient(to right, #59afff 0, #59daff 100%); }
.j-install-step-header span {
position: relative;
display: table-cell;
font-size: .8rem;
color: #fff;
text-align: center; }
.nav-steps > li::before {
position: relative;
z-index: 1000;
display: block;
width: 3rem;
height: 3rem;
margin: 0 auto;
margin-bottom: .25rem;
font-family: "FontAwesome";
font-size: 1.2rem;
font-weight: bold;
line-height: 2.3rem;
text-align: center;
background-color: #4882b7;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
border: .4rem solid #e8e6e6;
border-radius: 100%;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), inset 0 0 1px rgba(0, 0, 0, 0.3), inset 1px 1px 1px rgba(255, 255, 255, 0.3); }
.nav-steps > li[data-step="1"]::before {
content: "\f015"; }
.nav-steps > li[data-step="2"]::before {
content: "\f007"; }
.nav-steps > li[data-step="3"]::before {
content: "\f1e6"; }
.nav-steps > li::after {
position: absolute;
top: 1.2rem;
right: 50%;
display: block;
width: 100%;
height: .4rem;
margin-left: 1.5rem\9;
content: "";
background: #4882b7; }
.nav-steps > li:first-child::after {
display: none; }
.nav-steps > li.active::before, .nav-steps > li.active::after {
background-color: #7ac143; }
top: 5px;
margin-right: 5px;
font-size: 2rem; }

.container-main {
position: relative;
z-index: 1060;
padding-top: 200px;
padding-bottom: 80px;
margin-bottom: 100px;
background-color: #fff;
box-shadow: 0 0 80px rgba(0, 0, 0, 0.1), inset 0 7px 0 #e8e6e6; }

.install-form {
padding: 0 42px; }
.install-form form {
margin: 30px 0 0; }
.install-form input, .install-form textarea, .install-form select {
border-color: #b6bcc2; }
.install-form .progress {
margin-top: 10px; }
.install-form .text-muted {
color: #2a5c8b !important; }
.j-install-step-form {
padding: 30px 30px 10px; }

.languageForm {
padding: 0 0 30px; }
.languageForm .custom-select {
width: 100%; }

.install-nav-footer {
margin: 20px -27px -17px;
text-align: center;
background: #fafafa;
border-top: 1px solid #ddd; }
.install-nav-footer .nav-link {
margin-bottom: 0;
border: 0; }
.install-nav-footer .nav-button {
display: block;
font-weight: bold;
line-height: 4rem;
text-transform: uppercase; }
.install-nav-footer .nav-button.disabled {
opacity: .3; }
.install-nav-footer .nav-item + .nav-item {
border-left: 1px solid #ddd; }

.system-message .alert {
margin: 25px 50px; }

Expand Down Expand Up @@ -8881,33 +8831,6 @@ form {
[hidden="hidden"] {
display: none; }

.install-step {
padding-top: 200px;
margin-top: -200px; }
.install-step .form-group {
opacity: 0;
transition: all .3s ease;
transform: translateY(30px); }
.install-step select {
width: 100%;
margin-left: 0 !important; }

.active .form-group {
opacity: 1;
transform: translateY(0); }
.active .form-group:first-of-type {
transition-delay: .1s; }
.active .form-group:nth-of-type(2) {
transition-delay: .15s; }
.active .form-group:nth-of-type(3) {
transition-delay: .2s; }
.active .form-group:nth-of-type(4) {
transition-delay: .25s; }
.active .form-group:nth-of-type(5) {
transition-delay: .3s; }
.active .form-group:nth-of-type(6) {
transition-delay: .35s; }

.btn-success {
color: #fff;
background-color: #75b544;
Expand Down
2 changes: 1 addition & 1 deletion installation/template/css/template.css.map
View file

Large diffs are not rendered by default.

68 changes: 35 additions & 33 deletions installation/template/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,38 +56,40 @@
<jdoc:include type="styles" />
</head>
<body data-basepath="<?php echo JUri::root(true); ?>">
<?php // Header ?>
<header class="header" role="banner">
<div id="top-header" class="container container-header d-flex justify-content-center">
<img src="<?php echo $this->baseurl ?>/template/images/logo.svg" alt="Joomla" class="logo"/>
<ul class="nav-steps hidden">
<li class="step active" id="site" data-step="1">
<a class="nav-link" href="#"></a></li>
<li class="step" data-step="2">
<a class="nav-link" id="database" href="#" ></a>
</li>
<li class="step disabled " id="summary " data-step="3">
<a class="nav-link disabled"></a>
</li>
</ul>
</div>
</header>
<?php // Container ?>
<section class="container container-main" role="main">
<div id="system-message-container">
<jdoc:include type="message" />
</div>
<div id="javascript-warning">
<noscript>
<joomla-alert level="danger text-center">
<?php echo JText::_('INSTL_WARNJAVASCRIPT'); ?>
</joomla-alert>
</noscript>
</div>
<div id="container-installation" class="container-installation flex no-js" data-base-url="<?php echo JUri::root(); ?>" style="display:none">
<jdoc:include type="component" />
</div>
</section>
<jdoc:include type="scripts" />
<div class="j-install">
<?php // Header ?>
<header class="j-header" role="banner">
<div class="j-header-logo">
<img src="<?php echo $this->baseurl ?>/template/images/logo.svg" alt="Joomla" class="logo"/>
</div>
<div class="j-header-help">
<a href="#">
<span class="fa fa-lightbulb-o" aria-hidden="true"></span>
</a>
</div>
</header>
<?php // Container ?>
<section class="j-container" role="main">
<div id="system-message-container">
<jdoc:include type="message" />
</div>
<div id="javascript-warning">
<noscript>
<joomla-alert level="danger text-center">
<?php echo JText::_('INSTL_WARNJAVASCRIPT'); ?>
</joomla-alert>
</noscript>
</div>
<div id="container-installation" class="container-installation flex no-js" data-base-url="<?php echo JUri::root(); ?>" style="display:none">
<jdoc:include type="component" />
</div>
</section>
<jdoc:include type="scripts" />
<footer class="j-footer">
<a href="https://www.joomla.org" target="_blank">Joomla!</a>
is free software released under the
<a href="https://www.gnu.org/licenses/old-licenses/gpl-2.0.html" target="_blank" rel="noopener noreferrer">GNU General Public License</a>
</footer>
</div>
</body>
</html>
2 changes: 2 additions & 0 deletions installation/template/js/setup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -334,6 +334,7 @@ window.Install = new Joomla.installation(
document.getElementById('installStep2').removeAttribute('hidden');
document.getElementById('installStep2').classList.add('active');
document.getElementById('step1').parentNode.removeChild(document.getElementById('step1'));
document.getElementById('installStep1').classList.remove('active');
document.querySelector('li[data-step="2"]').classList.add('active');
Joomla.scrollTo(document.getElementById('installStep2'), document.getElementById('installStep2').offsetTop);

Expand All @@ -354,6 +355,7 @@ window.Install = new Joomla.installation(
document.getElementById('installStep3').removeAttribute('hidden');
document.getElementById('installStep3').classList.add('active');
document.getElementById('step2').parentNode.removeChild(document.getElementById('step2'));
document.getElementById('installStep2').classList.remove('active');
document.querySelector('li[data-step="3"]').classList.add('active');
Joomla.scrollTo(document.getElementById('installStep3'), document.getElementById('installStep3').offsetTop);
document.getElementById('setupButton').style.display = 'block';
Expand Down
Loading

0 comments on commit 9974ee5

Please sign in to comment.