list-groups for org box listing

src/app/settings/views/settings.html

@@ -113,29 +113,14 @@
         <div class="box-header with-border">
             <h3 class="box-title">Organizations</h3>
         </div>
-        <div class="box-body" ng-class="{'no-padding': model.organizations && model.organizations.length}">
+        <div class="box-body" ng-if="!model.organizations || !model.organizations.length">
-            <div ng-show="!model.organizations || !model.organizations.length">
+            No organizations yet for your account.
-                No organizations yet for your account.
+        </div>
-            </div>
+        <div class="list-group" ng-if="model.organizations && model.organizations.length">
-            <div class="table-responsive" ng-show="model.organizations && model.organizations.length">
+            <a ng-repeat="org in model.organizations | orderBy: ['name']"
-                <table class="table table-striped table-hover table-selectable">
+               href="javascript:void(0)" ng-click="viewOrganization(org.id)" class="list-group-item">
-                    <tbody>
+                <i class="fa fa-sitemap fa-fw"></i> {{org.name}}
-                        <tr ng-repeat="org in model.organizations | orderBy: ['name']">
+            </a>
-                            <td class="actions" style="width: 40px; min-width: 40px;">
-                                <button type="button" ng-click="viewOrganization(org.id)" class="btn btn-link btn-table"
-                                        uib-tooltip="View/Manage">
-                                    <i class="fa fa-lg fa-share"></i>
-                                </button>
-                            </td>
-                            <td ng-click="viewOrganization(org.id)">
-                                <span ng-click="$event.stopPropagation()">
-                                    {{org.name}}
-                                </span>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
         </div>
         <div class="box-footer">
             <button type="button" ng-click="createOrganization()" class="btn btn-default btn-flat">

src/less/vault.less

@@ -148,6 +148,28 @@ form .btn .loading-icon {
     }
 }
 
+/* Boxes */
+
+.box > .list-group {
+    margin-bottom: 0;
+}
+
+.box > .list-group .list-group-item {
+    border-width: 1px 0;
+    border-radius: 0;
+    border-color: @box-border-color;
+}
+
+.box > .list-group:last-child .list-group-item:last-child {
+    border-bottom: 0;
+    border-bottom-right-radius: @box-border-radius;
+    border-bottom-left-radius: @box-border-radius;
+}
+
+.list-group + .box-footer, .box-header + .list-group .list-group-item:first-child {
+    border-top-width: 0;
+}
+
 /* Toastr */
 
 #toast-container {