From eab65f982e5fb2bd9b9060f21a43818589193f9f Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Thu, 7 Jan 2016 23:00:44 -0500
Subject: [PATCH] added gravatar photo to settings page. moved action items in
 vault listing to left side for better mobile access

---
 src/Vault/less/vault.less                     | 10 ++++
 .../wwwroot/app/settings/views/settings.html  | 56 +++++++++++--------
 src/Vault/wwwroot/app/vault/views/vault.html  | 12 ++--
 3 files changed, 49 insertions(+), 29 deletions(-)

diff --git a/src/Vault/less/vault.less b/src/Vault/less/vault.less
index 36bd289bed..85187adc35 100644
--- a/src/Vault/less/vault.less
+++ b/src/Vault/less/vault.less
@@ -77,6 +77,16 @@ form div.validation-errors ul {
     }
 }
 
+@media screen and (min-width: @screen-sm-min) {
+    .settings-photo {
+        text-align: center;
+
+        img {
+            margin: 0 auto;
+        }
+    }
+}
+
 /* Buttons */
 
 .btn-table {
diff --git a/src/Vault/wwwroot/app/settings/views/settings.html b/src/Vault/wwwroot/app/settings/views/settings.html
index 1e3dae90d9..998b5f0897 100644
--- a/src/Vault/wwwroot/app/settings/views/settings.html
+++ b/src/Vault/wwwroot/app/settings/views/settings.html
@@ -11,29 +11,39 @@
         </div>
         <form role="form" name="profileForm" ng-submit="profileForm.$valid && save(model)" api-form="savePromise">
             <div class="box-body">
-                <div class="callout callout-danger validation-errors" ng-show="profileForm.$errors">
-                    <h4>Errors have occured</h4>
-                    <ul>
-                        <li ng-repeat="e in profileForm.$errors">{{e}}</li>
-                    </ul>
-                </div>
-                <div class="form-group" show-errors>
-                    <label for="name">Name</label>
-                    <input type="text" id="name" name="Name" ng-model="model.name" class="form-control" required api-field />
-                </div>
-                <div class="form-group">
-                    <label for="email">Email - <a href="javascript:void(0)" ng-click="changeEmail()">change</a></label>
-                    <input type="text" id="email" ng-model="model.email" class="form-control" readonly />
-                </div>
-                <div class="form-group" show-errors>
-                    <label for="hint">Master Password Hint</label>
-                    <input type="text" id="hint" name="MasterPasswordHint" ng-model="model.masterPasswordHint" class="form-control" api-field />
-                </div>
-                <div class="form-group" show-errors>
-                    <label for="culture">Language/Culture</label>
-                    <select id="culture" name="Culture" ng-model="model.culture" class="form-control" api-field>
-                        <option value="en-US">English (US)</option>
-                    </select>
+                <div class="row">
+                    <div class="col-sm-9">
+                        <div class="callout callout-danger validation-errors" ng-show="profileForm.$errors">
+                            <h4>Errors have occured</h4>
+                            <ul>
+                                <li ng-repeat="e in profileForm.$errors">{{e}}</li>
+                            </ul>
+                        </div>
+                        <div class="form-group" show-errors>
+                            <label for="name">Name</label>
+                            <input type="text" id="name" name="Name" ng-model="model.name" class="form-control" required api-field />
+                        </div>
+                        <div class="form-group">
+                            <label for="email">Email - <a href="javascript:void(0)" ng-click="changeEmail()">change</a></label>
+                            <input type="text" id="email" ng-model="model.email" class="form-control" readonly />
+                        </div>
+                        <div class="form-group" show-errors>
+                            <label for="hint">Master Password Hint</label>
+                            <input type="text" id="hint" name="MasterPasswordHint" ng-model="model.masterPasswordHint" class="form-control" api-field />
+                        </div>
+                        <div class="form-group" show-errors>
+                            <label for="culture">Language/Culture</label>
+                            <select id="culture" name="Culture" ng-model="model.culture" class="form-control" api-field>
+                                <option value="en-US">English (US)</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="col-sm-3 settings-photo">
+                        <a href="http://www.gravatar.com/" target="_blank">
+                            <img src="//www.gravatar.com/avatar/{{ main.userProfile.email | gravatar }}.jpg?s=150&d=mm" class="img-rounded img-responsive" alt="User Image">
+                        </a>
+                        <a href="http://www.gravatar.com/" target="_blank" class="btn btn-link">Update Photo</a>
+                    </div>
                 </div>
             </div>
             <div class="box-footer">
diff --git a/src/Vault/wwwroot/app/vault/views/vault.html b/src/Vault/wwwroot/app/vault/views/vault.html
index 4bace8bc14..50f076f1eb 100644
--- a/src/Vault/wwwroot/app/vault/views/vault.html
+++ b/src/Vault/wwwroot/app/vault/views/vault.html
@@ -35,19 +35,19 @@
                 <table class="table table-striped table-hover">
                     <thead>
                         <tr>
-                            <th style="max-width: 200px;">Site</th>
-                            <th>Username</th>
-                            <th style="min-width: 150px;"></th>
+                            <th style="width: 75px; min-width: 75px;"></th>
+                            <th>Site</th>
+                            <th style="width: 300px;">Username</th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr ng-repeat="site in folderSites = (sites | filter: { folderId: folder.id } | filter: (main.searchVaultText || '') | orderBy: ['name', 'username'])">
-                            <td>{{site.name}}</td>
-                            <td>{{site.username}}</td>
-                            <td class="text-right">
+                            <td>
                                 <button type="button" ng-click="deleteSite(site)" class="btn btn-link btn-table" uib-tooltip="Delete"><i class="fa fa-lg fa-trash"></i></button>
                                 <button type="button" ng-click="editSite(site)" class="btn btn-link btn-table" uib-tooltip="View/Edit"><i class="fa fa-lg fa-pencil"></i></button>
                             </td>
+                            <td>{{site.name}}</td>
+                            <td>{{site.username}}</td>
                         </tr>
                     </tbody>
                 </table>