UI design

ee2807c7 · Antoine Rey · 26118e66 · ee2807c7 · ee2807c7 · ee2807c7
Commit ee2807c7 authored 8 years ago by Antoine Rey
--- a/src/main/webapp/index.html
+++ b/src/main/webapp/index.html
@@ -26,7 +26,11 @@

 <body class="container">
 <layout-nav></layout-nav>
-<div ng-view></div>
+<div class="container-fluid">
+    <div class="container xd-container">
+        <div ng-view></div>
+    </div>
+</div>
 <layout-footer></layout-footer>
 </body>


--- a/src/main/webapp/scripts/app/owner-details/owner-details.template.html
+++ b/src/main/webapp/scripts/app/owner-details/owner-details.template.html
@@ -19,36 +19,53 @@
    </tr>
    <tr>
        <td>
-            <a class="btn btn-info" href="#!/owners/{{$ctrl.owner.id}}/edit">Edit Owner</a>
+            <a class="btn btn-default" href="#!/owners/{{$ctrl.owner.id}}/edit">Edit Owner</a>
        </td>
        <td>
-            <a href="#!/owners/{{$ctrl.owner.id}}/new-pet" class="btn btn-success">Add New Pet</a>
+            <a href="#!/owners/{{$ctrl.owner.id}}/new-pet" class="btn btn-default">Add New Pet</a>
        </td>
    </tr>
 </table>

 <h2>Pets and Visits</h2>

-<div ng-repeat="pet in $ctrl.owner.pets">
-    <h3>
-        <a href="#!/owners/{{$ctrl.owner.id}}/pets/{{pet.id}}">{{pet.name}}</a>
-    </h3>
-    <p>
-        {{pet.birthDate | date:'yyyy MMM dd'}} - {{pet.type.name}} -
-        <a href="#!/owners/{{$ctrl.owner.id}}/pets/{{pet.id}}/visits">Add Visit</a>
-    </p>
-    <h4>Visits</h4>
-
-    <div ng-repeat="visit in pet.visits" style="margin-top: 1em;">
-        <h5>{{visit.date | date:'yyyy MMM dd'}}</h5>
-        <p style="white-space: pre-line">{{visit.description}}</p>
-    </div>
+<table class="table table-striped">
+    <tr ng-repeat="pet in $ctrl.owner.pets">
+        <td valign="top">
+            <dl class="dl-horizontal">
+                <dt>Name</dt>
+                <dd><a href="#!/owners/{{$ctrl.owner.id}}/pets/{{pet.id}}">{{pet.name}}</a></dd>
+                <dt>Birth Date</dt>
+                <dd>{{pet.birthDate | date:'yyyy MMM dd'}}</dd>
+                <dt>Type</dt>
+                <dd>{{pet.type.name}}</dd>
+            </dl>
+        </td>
+        <td valign="top">
+            <table class="table-condensed">
+                <thead>
+                <tr>
+                    <th>Visit Date</th>
+                    <th>Description</th>
+                </tr>
+                </thead>
+                <tr ng-repeat="visit in pet.visits">
+                    <td>{{visit.date | date:'yyyy MMM dd'}}</td>
+                    <td>{{visit.description}}</td>
+                </tr>
+                <tr>
+                    <td>
+                        <a href="#!/owners/{{$ctrl.owner.id}}/pets/{{pet.id}}">Edit Pet</a>
+                    </td>
+                    <td>
+                        <a href="#!/owners/{{$ctrl.owner.id}}/pets/{{pet.id}}/visits">Add Visit</a>
+                    </td>
+                </tr>
+            </table>
+        </td>

-    <p ng-if="pet.visits.length == 0">
-        No visit yet
-    </p>
+    </tr>
+</table>

-    <hr/>
-</div>


--- a/src/main/webapp/scripts/app/owner-form/owner-form.template.html
+++ b/src/main/webapp/scripts/app/owner-form/owner-form.template.html
@@ -32,7 +32,7 @@
    </div>
    
    <div class="form-group">
-        <button class="btn btn-primary" type="submit">Submit</button>
+        <button class="btn btn-default" type="submit">Submit</button>
    </div>
 </form>

--- a/src/main/webapp/scripts/app/pet-form/pet-form.template.html
+++ b/src/main/webapp/scripts/app/pet-form/pet-form.template.html
@@ -35,7 +35,7 @@

    <div class="form-group">
        <div class="col-sm-6 col-sm-offset-2">
-            <button class="btn btn-primary" type="submit">
+            <button class="btn btn-default" type="submit">
                Submit
            </button>
        </div>