Merge branch 'fix-wiki-anchor-interaction' into 'master'

Fix markdown anchor icon interaction ## What does this MR do? Fixes and improves the markdown anchor icon interaction so that hovering over any headers (generated through markdown) will have an anchor icon that's easily accessible (won't hide from you on edge cases), replaced the icon with fontAwesome icon and added more padding for the anchor icon. ## Are there points in the code the reviewer needs to double check? 1. Need to check if it's okay to replace the icon-link.png with fontAwesome 2. Need to check if it's okay for the additional view padding on views that render markdown to compensate for anchor link space 3. Need to check if there are any other views that render markdown that did not have it's padding re-adjusted ## Why was this MR needed? Improve markdown rendered anchor links so that they are more user friendly ## What are the relevant issue numbers? Closes #20459 ## Screenshots (if relevant) Before: ![Screen_Shot_2016-07-30_at_2.31.43_PM](/uploads/12b2aad7f130d26a709ff28083ecc2e3/Screen_Shot_2016-07-30_at_2.31.43_PM.png) After: ![Screen_Shot_2016-08-08_at_10.25.06_AM](/uploads/caac1985cfbd305b8c8665d86e30ab24/Screen_Shot_2016-08-08_at_10.25.06_AM.png) Before: ![https://gitlab.com/gitlab-org/gitlab-ce/uploads/45e6d0aee7abbdb42a4c781ae0ba1961/ws7MBrK70g.gif](https://gitlab.com/gitlab-org/gitlab-ce/uploads/45e6d0aee7abbdb42a4c781ae0ba1961/ws7MBrK70g.gif) After: ![nLQOMn9RUO](/uploads/3905ceac2d591399d14cec1b3319f46b/nLQOMn9RUO.gif) ## Does this MR meet the acceptance criteria? - [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added - Tests - [x] All builds are passing - [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides) - [x] Branch has no merge conflicts with `master` (if you do - rebase it please) - [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits) See merge request !5577

Merge branch 'fix-wiki-anchor-interaction' into 'master'
bb3c9663 · Fatih Acet · c1679ab1 · 2fd64725 · bb3c9663 · c1679ab1
Commit bb3c9663 authored Sep 02, 2016 by Fatih Acet
Showing with 13 additions and 17 deletions

CHANGELOG CHANGELOG +1 -0

icon-link.png app/assets/images/icon-link.png +0 -0

icon_anchor.svg app/assets/images/icon_anchor.svg +2 -0

typography.scss app/assets/stylesheets/framework/typography.scss +10 -17

No files found.
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -22,6 +22,7 @@ v 8.12.0 (unreleased)
  - Fix branches page dropdown sort alignment (ClemMakesApps)
  - Add white background for no readme container (ClemMakesApps)
  - API: Expose issue confidentiality flag. (Robert Schilling)
+  - Fix markdown anchor icon interaction (ClemMakesApps)
  - Optimistic locking for Issues and Merge Requests (title and description overriding prevention)
  - Add `wiki_page_events` to project hook APIs (Ben Boeckel)
  - Remove Gitorious import

--- a/app/assets/images/icon-link.png
+++ b/app/assets/images/icon-link.png
--- a/app/assets/images/icon_anchor.svg
+++ b/app/assets/images/icon_anchor.svg
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#333" fill-rule="evenodd" d="M9.683 6.676l-.047-.048C8.27 5.26 6.07 5.243 4.726 6.588l-2.29 2.29c-1.344 1.344-1.328 3.544.04 4.91 1.366 1.368 3.564 1.385 4.908.04l1.753-1.752c-.695.074-1.457-.078-2.176-.444L5.934 12.66c-.634.634-1.67.625-2.312-.017-.642-.643-.65-1.677-.017-2.312L6.035 7.9c.634-.634 1.67-.625 2.312.017.024.024.048.05.07.075l.003-.002c.36.36.943.366 1.3.01.355-.356.35-.938-.01-1.3l-.027-.024zM6.58 9.586l.048.05c1.367 1.366 3.565 1.384 4.91.04l2.29-2.292c1.344-1.343 1.328-3.542-.04-4.91-1.366-1.366-3.564-1.384-4.908-.04L7.127 4.187c.695-.074 1.457.078 2.176.444l1.028-1.027c.635-.634 1.67-.624 2.313.017.643.644.652 1.678.018 2.312l-2.43 2.432c-.635.634-1.67.624-2.313-.018-.024-.024-.048-.05-.07-.075l-.003.004c-.36-.362-.943-.367-1.3-.01-.355.355-.35.937.01 1.3.01.007.018.015.027.023z"/></svg>
\ No newline at end of file
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -159,25 +159,18 @@
    position: relative;

    a.anchor {
-      // Setting `display: none` would prevent the anchor being scrolled to, so
-      // instead we set the height to 0 and it gets updated on hover.
-      height: 0;
+      left: -16px;
+      position: absolute;
+      text-decoration: none;
+
+      &:after {
+        content: url('icon_anchor.svg');
+        visibility: hidden;
+      }
    }

-    &:hover > a.anchor {
-      $size: 14px;
-      position: absolute;
-      right: 100%;
-      top: 50%;
-      margin-top: -11px;
-      margin-right: 0;
-      padding-right: 15px;
-      display: inline-block;
-      width: $size;
-      height: $size;
-      background-image: image-url("icon-link.png");
-      background-size: contain;
-      background-repeat: no-repeat;
+    &:hover > a.anchor:after {
+      visibility: visible;
    }
  }
 }