MAAS

Merge ~ya-bo-ng/maas:FUJ-improvements into maas:master

  1. Git
  2. lp:~ya-bo-ng/maas
  3. FUJ-improvements
  4. Merge into master
Proposed by Anthony Dillon
Status: Merged
Approved by: Andres Rodriguez
Approved revision: 751a80767ab884ee858c366bba70903e84abfd89
Merge reported by: MAAS Lander
Merged at revision: not available
Proposed branch: ~ya-bo-ng/maas:FUJ-improvements
Merge into: maas:master
Diff against target: 125 lines (+24/-15)
3 files modified
src/maasserver/static/partials/boot-images.html (+5/-4)
src/maasserver/static/partials/intro-user.html (+11/-7)
src/maasserver/static/partials/intro.html (+8/-4)
Reviewer Review Type Date Requested Status
Andres Rodriguez (community) Approve
MAAS Lander unittests Pending
Review via email: mp+340124@code.launchpad.net

Commit message

LP: #1751896 - Improvements to the FUJ

Description of the change

## Done
Reduced the size of the headings. Added dividers between the content and the titles. Made the success text into a list and the submit button is now full width.

## QA
- Set up a new user and login
- See that the design matches the original design: https://github.com/CanonicalLtd/MAAS-design/blob/master/First%20Use%20Journey/Flat_Visuals/001-Welcome-to-MAAS.png

Fixes https://bugs.launchpad.net/maas/+bug/1751896

To post a comment you must log in.
~ya-bo-ng/maas:FUJ-improvements updated
3a5c972... by Anthony Dillon

More improvements to the FUJ

Revision history for this message
Andres Rodriguez (andreserl) wrote :

lgtm!

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
diff --git a/src/maasserver/static/partials/boot-images.html b/src/maasserver/static/partials/boot-images.html
index 9fe1ad3..22603f9 100644
--- a/src/maasserver/static/partials/boot-images.html
+++ b/src/maasserver/static/partials/boot-images.html
@@ -1,15 +1,16 @@
1<form class="form">1<form class="form">
2 <div data-ng-if="!loading" data-ng-class="{'p-strip is-bordered': design === 'page', 'p-card--highlighted col-12': design === 'card'}">2 <div data-ng-if="!loading" data-ng-class="{'p-strip is-bordered': design === 'page', 'p-card--highlighted col-12': design === 'card'}">
3 <div class="row">3 <div class="row">
4 <div class="col-8">4 <div class="col-12">
5 <h2 class="u-vertically-center"><span data-ng-if="design === 'card'"><i class="{$ getTitleIcon() $}"></i>&nbsp;</span>Ubuntu</h2>5 <h2 class="p-heading--four"><span data-ng-if="design === 'card'"><i class="{$ getTitleIcon() $}"></i>&nbsp;</span>Ubuntu</h2>
6 <hr />
6 <p data-ng-if="isSuperUser() && !source.tooMany">7 <p data-ng-if="isSuperUser() && !source.tooMany">
7 Select images and architecture to be imported and kept in sync daily. Images will be available for deploying to machines managed by MAAS.8 Select images and architecture to be imported and kept in sync daily. Images will be available for deploying to machines managed by MAAS.
8 </p>9 </p>
9 </div>10 </div>
10 </div>11 </div>
11 <div class="row" data-ng-if="isSuperUser() && !source.tooMany">12 <div class="row" data-ng-if="isSuperUser() && !source.tooMany">
12 <h3>Choose source</h3>13 <h3 class="p-heading--five">Choose source</h3>
13 </div>14 </div>
14 <div class="row">15 <div class="row">
15 <div class="col-2">16 <div class="col-2">
@@ -23,7 +24,7 @@
23 </div>24 </div>
24 <div class="row" data-ng-if="isSuperUser() && !source.tooMany && showMirrorPath()">25 <div class="row" data-ng-if="isSuperUser() && !source.tooMany && showMirrorPath()">
25 <div class="col-8">26 <div class="col-8">
26 <h3>Mirror URL</h3>27 <h3 class="p-heading--five">Mirror URL</h3>
27 <p>Add the URL you want to use to select your images from.</p>28 <p>Add the URL you want to use to select your images from.</p>
28 </div>29 </div>
29 </div>30 </div>
diff --git a/src/maasserver/static/partials/intro-user.html b/src/maasserver/static/partials/intro-user.html
index 6110b93..a4050b4 100644
--- a/src/maasserver/static/partials/intro-user.html
+++ b/src/maasserver/static/partials/intro-user.html
@@ -1,12 +1,13 @@
1<div class="p-strip" data-ng-if="!loading">1<div class="p-strip" data-ng-if="!loading">
2 <div class="row">2 <div class="row">
3 <div class="p-card--highlighted col-12">3 <div class="p-card--highlighted col-12">
4 <h2 class="p-card__title">4 <h2 class="p-card__title p-heading--four">
5 <i data-ng-class="{'p-icon--success': canContinue(), 'p-icon--success-muted': !canContinue()}"></i>5 <i data-ng-class="{'p-icon--success': canContinue(), 'p-icon--success-muted': !canContinue()}"></i>
6 SSH keys for {$ user.username $}6 SSH keys for {$ user.username $}
7 </h2>7 </h2>
8 <hr />
8 <div class="p-card__content">9 <div class="p-card__content">
9 <p class="u-margin--top">Add multiple keys from Launchpad and Github or enter them manually.</p>10 <p>Add multiple keys from Launchpad and Github or enter them manually.</p>
10 <h3>Keys</h3>11 <h3>Keys</h3>
11 <maas-ssh-keys></maas-ssh-keys>12 <maas-ssh-keys></maas-ssh-keys>
12 </div>13 </div>
@@ -14,18 +15,21 @@
14 </div>15 </div>
15 <div class="row">16 <div class="row">
16 <div class="p-card--highlighted col-12" data-ng-if="isSuperUser()" data-ng-class="{'u-muted': !canContinue()}">17 <div class="p-card--highlighted col-12" data-ng-if="isSuperUser()" data-ng-class="{'u-muted': !canContinue()}">
17 <h2 class="p-card__title">18 <h2 class="p-card__title p-heading--four">
18 MAAS has been successfully set up19 MAAS has been successfully set up
19 </h2>20 </h2>
21 <hr />
20 <div class="p-card__content">22 <div class="p-card__content">
21 <p class="u-margin--top"><i class="p-icon--success"></i>Once DHCP is enabled, set your machines to PXE boot and they will be automatically enlisted in the Nodes tab.</p>23 <ul class="p-list">
22 <p class="u-margin--top"><i class="p-icon--success"></i>Discovered MAC/IP pairs in your network will be listed on your dashboard and can be added to MAAS.</p>24 <li class="p-list__item"><i class="p-icon--success"></i>Once DHCP is enabled, set your machines to PXE boot and they will be automatically enlisted in the Nodes tab.</p>
23 <p class="u-margin--top u-margin--bottom"><i class="p-icon--success"></i>The fabrics, VLANs and subnets in your network will be automatically added to MAAS in Networks.</p>25 <li class="p-list__item"><i class="p-icon--success"></i>Discovered MAC/IP pairs in your network will be listed on your dashboard and can be added to MAAS.</p>
26 <li class="p-list__item"><i class="p-icon--success"></i>The fabrics, VLANs and subnets in your network will be automatically added to MAAS in Networks.</p>
27 </ul>
24 </div>28 </div>
25 </div>29 </div>
26 </div>30 </div>
27 <div class="row">31 <div class="row">
28 <button class="p-button--positive"32 <button class="p-button--positive col-12"
29 data-ng-disabled="!canContinue()"33 data-ng-disabled="!canContinue()"
30 data-ng-click="clickContinue()">Go to dashboard</button>34 data-ng-click="clickContinue()">Go to dashboard</button>
31 </div>35 </div>
diff --git a/src/maasserver/static/partials/intro.html b/src/maasserver/static/partials/intro.html
index 0729252..4d6022f 100644
--- a/src/maasserver/static/partials/intro.html
+++ b/src/maasserver/static/partials/intro.html
@@ -2,10 +2,11 @@
2 <div class="row">2 <div class="row">
3 <div class="col-12">3 <div class="col-12">
4 <div class="p-card--highlighted">4 <div class="p-card--highlighted">
5 <h2 class="p-card__title">5 <h2 class="p-card__title p-heading--four">
6 <i data-ng-class="{ 'p-icon--success': !welcomeInError(), 'p-icon--error': welcomeInError() }"></i>6 <i data-ng-class="{ 'p-icon--success': !welcomeInError(), 'p-icon--error': welcomeInError() }"></i>
7 Welcome to MAAS7 Welcome to MAAS
8 </h2>8 </h2>
9 <hr />
9 <div class="p-card__content">10 <div class="p-card__content">
10 <div class="u-margin--top">11 <div class="u-margin--top">
11 <maas-obj-form obj="maasName" manager="configManager" class="p-form p-form--stacked">12 <maas-obj-form obj="maasName" manager="configManager" class="p-form p-form--stacked">
@@ -21,9 +22,10 @@
21 <div class="row">22 <div class="row">
22 <div class="col-12">23 <div class="col-12">
23 <div class="p-card--highlighted">24 <div class="p-card--highlighted">
24 <h2 class="p-card__title u-vertically-center">25 <h2 class="p-card__title p-heading--four">
25 <i data-ng-class="{ 'p-icon--success': !networkInError(), 'p-icon--error': networkInError() }"></i>&nbsp;Connectivity26 <i data-ng-class="{ 'p-icon--success': !networkInError(), 'p-icon--error': networkInError() }"></i>&nbsp;Connectivity
26 </h2>27 </h2>
28 <hr />
27 <ul class="p-card__content p-list">29 <ul class="p-card__content p-list">
28 <li>30 <li>
29 <maas-obj-form obj="upstreamDNS" manager="configManager" class="p-form p-form--stacked">31 <maas-obj-form obj="upstreamDNS" manager="configManager" class="p-form p-form--stacked">
@@ -58,11 +60,13 @@
58 </div>60 </div>
59 </div>61 </div>
60 <div class="row">62 <div class="row">
61 <maas-boot-images design="'card'"></maas-boot-images>63 <div class="col-12">
64 <maas-boot-images design="'card'"></maas-boot-images>
65 </div>
62 </div>66 </div>
63 <div class="row">67 <div class="row">
64 <div class="col-12">68 <div class="col-12">
65 <button class="p-button--positive" data-ng-disabled="!canContinue()" data-ng-click="clickContinue()">Continue</button>69 <button class="col-12 p-button--positive" data-ng-disabled="!canContinue()" data-ng-click="clickContinue()">Continue</button>
66 </div>70 </div>
67 </div>71 </div>
68</section>72</section>

Subscribers

People subscribed via source and target branches