Userpicker view: Change anchor element to button (umbraco#8738)

* Change a to button * Fix styling issues after button conversion
Nuklon · Aug 31, 2020 · ae7290f · ae7290f
1 parent 6bb105f
commit ae7290f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-picker-list.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-picker-list.less
@@ -8,6 +8,8 @@
     margin-bottom: 5px;
     padding: 10px;
     align-items: center;
+    width: 100%;
+    text-align: left;
 }
 
 .umb-user-picker-list-item:active,
@@ -39,4 +41,4 @@
 .umb-user-picker-list-item__name {
     font-size: 15px;
     font-weight: bold;
-}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/userpicker/userpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/userpicker/userpicker.html
@@ -9,9 +9,9 @@
             hide-icon="true"
             hide-description="true">
         </umb-editor-header>
-        
+
         <umb-editor-container>
-            
+
             <umb-load-indicator
                 ng-if="vm.loading">
             </umb-load-indicator>
@@ -31,10 +31,10 @@
                             no-dirty-check />
                     </div>
                     <div class="umb-user-picker-item-list">
-                        <a href="" class="umb-user-picker-list-item" ng-repeat="user in vm.users" ng-click="vm.selectUser(user)">
+                        <button type="button" class="btn-reset umb-user-picker-list-item" ng-repeat="user in vm.users" ng-click="vm.selectUser(user)">
                             <div class="umb-user-picker-list-item__avatar">
                                 <umb-checkmark
-                                    class="umb-user-picker-list-item__checkmark" 
+                                    class="umb-user-picker-list-item__checkmark"
                                     ng-if="user.selected"
                                     checked="user.selected">
                                 </umb-checkmark>
@@ -52,9 +52,9 @@
                                     <span ng-repeat="userGroup in user.userGroups">{{ userGroup.name }}<span ng-if="!$last">, </span></span>
                                 </div>
                             </div>
-                        </a>
+                        </button>
                     </div>
-            
+
                     <div class="flex justify-center">
                         <umb-pagination
                             ng-if="vm.usersOptions.totalPages"