Make setup friendlier, and have a stepper showing progress through it.

This commit is contained in:
Buster "Silver Eagle" Neece 2018-10-14 08:53:22 -05:00
parent afd59a33ec
commit 8b006d897e
12 changed files with 767 additions and 716 deletions

File diff suppressed because it is too large Load Diff

View File

@ -25,7 +25,7 @@ $this->layout('minimal', [
<div class="input-group">
<div class="floating-label">
<label for="username"><?=__('E-mail Address') ?></label>
<input type="email" name="username" class="form-control" placeholder="">
<input type="email" name="username" class="form-control" placeholder="" required>
</div>
<span class="input-group-icon">
<i class="material-icons">email</i>
@ -35,7 +35,7 @@ $this->layout('minimal', [
<div class="input-group mt-2">
<div class="floating-label">
<label for="password"><?=__('Password') ?></label>
<input type="password" name="password" class="form-control" placeholder="">
<input type="password" name="password" class="form-control" placeholder="" required>
</div>
<span class="input-group-icon">

View File

@ -12,20 +12,33 @@ $assets->load('zxcvbn');
<div class="card">
<div class="card-body">
<h2 class="card-title mb-0">
<?=sprintf(__('Welcome to %s!'), $app_settings['name']) ?>
<?=sprintf(__('AzuraCast First-Time Setup')) ?>
</h2>
<p class="text-left"><?=__('Begin setup by creating a Super Administrator account.') ?></p>
<p class="text-left"><?=__('Welcome to AzuraCast!') ?></p>
<p class="text-left"><?=__('Let\'s get started by creating your Super Administrator account.') ?></p>
<p class="text-left"><?=__('This account will have full access to the system, and you\'ll automatically be logged in to it for the rest of setup.') ?></p>
<form id="login-form" class="pr-5" action="" method="post">
<div class="floating-label">
<label for="username"><?=__('E-mail Address') ?></label>
<input type="email" name="username" class="form-control" placeholder="">
<div class="input-group">
<div class="floating-label">
<label for="username"><?=__('E-mail Address') ?></label>
<input type="email" name="username" class="form-control" placeholder="" required>
</div>
<span class="input-group-icon">
<i class="material-icons">email</i>
</span>
</div>
<div class="floating-label">
<label for="password"><?=__('Password') ?></label>
<input type="password" name="password" class="form-control" placeholder="">
<div class="input-group mt-2">
<div class="floating-label">
<label for="password"><?=__('Password') ?></label>
<input type="password" name="password" class="form-control" placeholder="" required>
</div>
<span class="input-group-icon">
<i class="material-icons">vpn_key</i>
</span>
</div>
<button type="submit" role="button" title="<?=__('Create Account') ?>" class="btn btn-login btn-primary btn-float">

View File

@ -1,15 +1,31 @@
<?php $this->layout('main', ['title' => __('AzuraCast Setup'), 'manual' => true]); ?>
<div class="block-header">
<h2><?=__('AzuraCast Setup') ?></h2>
<div class="stepper-horiz">
<div class="stepper done">
<div class="stepper-icon">
<i class="material-icons">check</i>
</div>
<span class="stepper-text"><?=__('Create Account') ?></span>
</div>
<div class="stepper done">
<div class="stepper-icon">
<i class="material-icons">check</i>
</div>
<span class="stepper-text"><?=__('Create Station') ?></span>
</div>
<div class="stepper active">
<div class="stepper-icon">
<span>3</span>
</div>
<span class="stepper-text"><?=__('System Settings') ?></span>
</div>
</div>
<div class="card">
<div class="card-header ch-alt">
<h2><?=__('Step 3: Customize AzuraCast Settings') ?></h2>
<div><?=__('Complete the setup process by providing some information about your broadcast environment. These settings can be changed later from the administration panel.') ?></div>
</div>
<div class="card-body card-padding">
<div class="card-body">
<h2 class="card-title"><?=__('Customize AzuraCast Settings') ?></h2>
<p><?=__('Complete the setup process by providing some information about your broadcast environment. These settings can be changed later from the administration panel.') ?></p>
<?=$this->fetch('system/form_edit', ['form' => $form]) ?>
</div>
</div>

View File

@ -9,16 +9,32 @@ $assets
->addInlineJs($this->fetch('partials/station_form.js'), 99);
?>
<div class="block-header">
<h2><?=__('AzuraCast Setup') ?></h2>
<div class="stepper-horiz">
<div class="stepper done">
<div class="stepper-icon">
<i class="material-icons">check</i>
</div>
<span class="stepper-text"><?=__('Create Account') ?></span>
</div>
<div class="stepper active">
<div class="stepper-icon">
<span>2</span>
</div>
<span class="stepper-text"><?=__('Create Station') ?></span>
</div>
<div class="stepper">
<div class="stepper-icon">
<span>3</span>
</div>
<span class="stepper-text"><?=__('System Settings') ?></span>
</div>
</div>
<div class="card">
<div class="card-header ch-alt">
<h2><?=__('Step 2: Create a New Station') ?></h2>
<div><?=__('Continue the setup process by creating your first radio station below. You can edit any of these details later.') ?></div>
</div>
<div class="card-body card-padding">
<div class="card-body">
<h2 class="card-title"><?=__('Create a New Radio Station') ?></h2>
<p><?=__('Continue the setup process by creating your first radio station below. You can edit any of these details later.') ?></p>
<?=$this->fetch('system/form_edit', ['form' => $form]) ?>
</div>
</div>

View File

@ -1,8 +1,8 @@
{
"dist/app.js": "dist/app-9dbd46ed17.js",
"dist/bootgrid.js": "dist/bootgrid-28de3d6f6d.js",
"dist/dark.css": "dist/dark-a831ed6110.css",
"dist/light.css": "dist/light-e0bf1e09ce.css",
"dist/dark.css": "dist/dark-6d5628f45d.css",
"dist/light.css": "dist/light-de99693196.css",
"dist/material.js": "dist/material-a93414a265.js",
"dist/radio.js": "dist/radio-bf97216194.js",
"dist/zxcvbn.js": "dist/zxcvbn-f4433cd930.js"

2
web/static/dist/dark-6d5628f45d.css vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
web/static/dist/light-de99693196.css vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -158,13 +158,13 @@ $snackbar-elevation-shadow: map-get($elevation-shadows, 6);
// Stepper
// Based on https://material.google.com/components/steppers.html#steppers-specs
$stepper-bg: $white;
$stepper-border-color: $material-color-grey-400;
$stepper-icon-bg: $black-hint;
$stepper-bg: $body-bg;
$stepper-border-color: $material-color-grey-800;
$stepper-icon-bg: $theme-color-3;
$stepper-icon-bg-active: theme-color(primary);
$stepper-icon-color: $white-primary;
$stepper-icon-height: $material-icon-size;
$stepper-text-color: $black-hint;
$stepper-text-color: $white-divider;
$stepper-text-color-active: $material-color-grey-200;
// Tab (Bootstrap tab)

View File

@ -343,7 +343,7 @@ $snackbar-padding-y-multi: 1.25rem !default;
// Stepper
// Based on https://material.google.com/components/steppers.html#steppers-specs
$stepper-bg: $white !default;
$stepper-bg: $body-bg !default;
$stepper-border-color: $material-color-grey-400 !default;
$stepper-border-width: $border-width !default;
$stepper-icon-bg: $black-hint !default;