Merge branch 'todos-hover-state' into 'master'

Add hover state to todos

## What does this MR do?

- Add a hover state to todos like for repository files.
- Fix button alignment in todos
- Add link to avatar in todos

## Are there points in the code the reviewer needs to double check?

The `border-collapse` part—is there any better way?

## Why was this MR needed?

Make hover states consistent.

## What are the relevant issue numbers?

fixes #19833 

## Screenshots

### Before

![before](/uploads/cd2e7b234bf08fac48aebb60cdfa26a9/before.png)

### After

![todos-list](/uploads/592457050cb3ff2c43dfcce78418c50b/todos-list.png)

![todos-list-last-hover](/uploads/532714333bc74d1656a5c767012b4cdd/todos-list-last-hover.png)

![todos-mobile](/uploads/d542b04ddebc9d4354d57151dd04c0d2/todos-mobile.png)

See merge request !5361

CHANGELOG

@@ -41,6 +41,7 @@ v 8.11.0 (unreleased)
   - Update `timeago` plugin to use multiple string/locale settings
   - Remove unused images (ClemMakesApps)
   - Get issue and merge request description templates from repositories
+  - Add hover state to todos !5361 (winniehell)
   - Limit git rev-list output count to one in forced push check
   - Show deployment status on merge requests with external URLs
   - Clean up unused routes (Josef Strzibny)

app/assets/stylesheets/pages/todos.scss

@@ -20,10 +20,43 @@
   }
 }
 
-.todo {
+.todos-list > .todo {
+  // workaround because we cannot use border-colapse
+  border-top: 1px solid transparent;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: row;
+  flex-direction: row;
+
   &:hover {
+    background-color: $row-hover;
+    border-color: $row-hover-border;
     cursor: pointer;
   }
+
+  // overwrite border style of .content-list
+  &:last-child {
+    border-bottom: 1px solid transparent;
+
+    &:hover {
+      border-color: $row-hover-border;
+    }
+  }
+
+  .todo-actions {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+    margin-left: 10px;
+  }
+
+  .todo-item {
+    -webkit-flex: auto;
+    flex: auto;
+  }
 }
 
 .todo-item {
@@ -43,8 +76,6 @@
   }
 
   .todo-body {
-    margin-right: 174px;
-
     .todo-note {
       word-wrap: break-word;
 
@@ -90,6 +121,12 @@
 }
 
 @media (max-width: $screen-xs-max) {
+  .todo {
+    .avatar {
+      display: none;
+    }
+  }
+
   .todo-item {
     .todo-title {
       white-space: normal;
@@ -98,10 +135,6 @@
       margin-bottom: 10px;
     }
 
-    .avatar {
-      display: none;
-    }
-
     .todo-body {
       margin: 0;
       border-left: 2px solid #ddd;

app/views/dashboard/todos/_todo.html.haml

 %li{class: "todo todo-#{todo.done? ? 'done' : 'pending'}", id: dom_id(todo), data:{url: todo_target_path(todo)} }
+  = author_avatar(todo, size: 40)
+
   .todo-item.todo-block
-    = image_tag avatar_icon(todo.author_email, 40), class: 'avatar s40', alt:''
     .todo-title.title
       - unless todo.build_failed?
         = todo_target_state_pill(todo)
@@ -19,13 +20,13 @@
 
       · #{time_ago_with_tooltip(todo.created_at)}
 
-    - if todo.pending?
-      .todo-actions.pull-right
-        = link_to [:dashboard, todo], method: :delete, class: 'btn btn-loading done-todo' do
-          Done
-          = icon('spinner spin')
-
     .todo-body
       .todo-note
         .md
           = event_note(todo.body, project: todo.project)
+
+  - if todo.pending?
+    .todo-actions
+      = link_to [:dashboard, todo], method: :delete, class: 'btn btn-loading done-todo' do
+        Done
+        = icon('spinner spin')