Merge ~blr/maas:pod-configuration-type-styling-lp1773387 into maas:master

[Kit Randel]

LP: #1773387 - Improve styling of Pod Configuration form.

Pods always have one 'Type', hence the value can be rendered in a disabled input, rather than a list. This branch also makes a few tweaks to the form to improve the rendering of the leftmost label column (previously too small, and wrapping).

# Screenshots
https://drive.google.com/open?id=1-EGIMxjzqzgCHsOZglfHHIO-A_zYpK3l (default state)
https://drive.google.com/open?id=1F1rSZnGrT_mYoa4JYlaZDHxu7PQVFngA (edit state)

[MAAS Lander (maas-lander)]

UNIT TESTS
-b pod-configuration-type-styling-lp1773387 lp:~blr/maas/+git/maas into -b master lp:~maas-committers/maas

STATUS: SUCCESS
COMMIT: a303a5b62612df1e05991de23d7bfdd8eaed23da

review: Approve

[Anthony Dillon (ya-bo-ng)]

Look good +1

review: Approve

diff --git a/src/maasserver/static/partials/pod-details.html b/src/maasserver/static/partials/pod-details.html
index a6a7167..4e07590 100644
--- a/src/maasserver/static/partials/pod-details.html
+++ b/src/maasserver/static/partials/pod-details.html
@@ -212,36 +212,36 @@
         </div>
     </section>
     <section class="p-strip" data-ng-if="pod && section.area === 'configuration'">
-      <div class="row">
-        <div class="col-10">
-          <h2>Pod configuration</h2>
-        </div>
-        <div class="col-2">
-          <button class="p-button--neutral u-float--right"
-                data-ng-if="canEdit() && !editing"
-                data-ng-click="editPodConfiguration()">Edit</button>
+        <div class="row">
+            <div class="col-10">
+                <h2>Pod configuration</h2>
+            </div>
+            <div class="col-2">
+                <button class="p-button--neutral u-float--right"
+                    data-ng-if="canEdit() && !editing"
+                    data-ng-click="editPodConfiguration()">Edit</button>
+            </div>
         </div>
-      </div>
-      <div class="row">
+        <div class="row">
             <maas-obj-form obj="pod" manager="podManager" manager-method="updateItem"
                 table-form="true" save-on-blur="false" after-save="exitEditPodConfiguration" data-ng-disabled="!editing">
                 <div class="col-6">
-                    <div class="col-6">
-                        <dl>
-                            <dt>Type</dt>
-                            <dd>{$ getPodTypeTitle() $}</dd>
-                        </dl>
-                        <maas-obj-field type="options" key="zone" label="Zone"
-                            subtle="false" placeholder="Choose a zone"
-                            options="zone.id as zone.name for zone in zones"></maas-obj-field>
-                        <maas-obj-field type="options" key="default_pool"
-                            label="Resource pool" subtle="false"
-                            placeholder="Choose a pool"
-                            options="pool.id as pool.name for pool in pools"></maas-obj-field>
-                        <maas-obj-field type="tags" key="tags" label="Tags"
-                            label-width="2" input-width="5"
-                            disable-label="false" placeholder="Add a tag"></maas-obj-field>
+                    <div class="p-form__group">
+                        <label for="type" class="p-form__label col-2">Type</label>
+                        <div class="p-form__control u-no-margin--top col-5">
+                            <input type="text" id="type" disabled="disabled" value="{$ getPodTypeTitle() $}" />
+                        </div>
                     </div>
+                    <maas-obj-field type="options" key="zone" label="Zone"
+                        subtle="false" placeholder="Choose a zone"
+                        options="zone.id as zone.name for zone in zones"></maas-obj-field>
+                    <maas-obj-field type="options" key="default_pool"
+                        label="Resource pool" subtle="false"
+                        placeholder="Choose a pool"
+                        options="pool.id as pool.name for pool in pools"></maas-obj-field>
+                    <maas-obj-field type="tags" key="tags" label="Tags"
+                        label-width="2" input-width="5"
+                        disable-label="false" placeholder="Add a tag"></maas-obj-field>
                 </div>
                 <div class="col-6">
                     <maas-pod-parameters hide-type="true"></maas-pod-parameters>