From 2fd647259874399a14f1f1fac4bddb93fef714d0 Mon Sep 17 00:00:00 2001
From: Clement Ho <ClemMakesApps@gmail.com>
Date: Sat, 30 Jul 2016 14:23:46 -0500
Subject: [PATCH] Fix markdown anchor icon interaction
---
CHANGELOG | 1 +
app/assets/images/icon-link.png | Bin 729 -> 0 bytes
app/assets/images/icon_anchor.svg | 1 +
.../stylesheets/framework/typography.scss | 27 +++++++-----------
4 files changed, 12 insertions(+), 17 deletions(-)
delete mode 100644 app/assets/images/icon-link.png
create mode 100644 app/assets/images/icon_anchor.svg
diff --git a/CHANGELOG b/CHANGELOG
index 08562b1a5a064..399a461e6d3df 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -16,6 +16,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
diff --git a/app/assets/images/icon-link.png b/app/assets/images/icon-link.png
deleted file mode 100644
index 5b55e12571c894c5f34d3cd0d5325919d1919e6f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001
literal 729
zcmeAS@N?(olHy`uVBq!ia0y~yU~m9o4h9AWhJGeJCI$uurjj7PV21zE6P30yFfdK>
zba4!+V4QN5nMXEIp!MP2{OsF#hi`4mz3mopJ1yk)wnZRzu&>qZ$(3jK2tR-KpH;j6
zjJ5g7&{m_;-+4b>4$f@c`cqcFaR2m)%>Ju(9SF+l6xlIpV(>hBQ=<n(S?$vK>>Jn*
zZvL(j(Wrf+JArB4^8ev2uXOHN7#MQQ+uOgZqvJ)KnV_0+!kg)r=i3S$j6dD5(_QhS
zGTRwju2_bKx3RYQ6^BD^u(!@Q&lvFSaX|ZwON$M{*%Q8(3BGakVvAx*xR=7l)yD4E
zmm9Ro<7(XMdy}>a^Q7>xuQ~O$qOjU7>>U5cOflJtn47HAGFS!kIOdB6H@^Pxm!ntZ
z#>^cxS597@FMp@t$G&9+d#27?$?o{e<-Kk6d8Ti929?L=vA!_gm+bJ?`D^$)nW;t^
z3G$x>3>SR;_s8D8CFYaUymq@=Y)KAp#V^daJ*}#5@+F&-@r~<+YL*S+j_(-*s>QCz
zG3-rOoPUjb!T0Ier{e$22C-Jg)(KvTW7u1+lVQtLrO)(@<Ap7Em43rD`=|f5e|U5L
zyYqX=ib;Z1iyA+1rOqh*c;!Py)p>`|7p@J3{Rgbx1RjuU{BvV5gDunZ4epH9ENYhb
zZ2n%>@7~#HvOrY+x}uD3hx8j`83oZ52cCCNJ$zetkyYHEfB7Elr#^^Ed){uA<Skm_
zH+%nCp`S;U0;V@MrpPeWN_x~xPq;pBc7tx;^tXcl{tJEEnZ{tJdX1&-zthgDvv+I1
zJgH}V_1wg<zCQFpDwoI_TjniC-4EU}cDOu;ga68Vc0L9veWz0=)%o~4v)@VzFt+dI
zTafTx(&6A8V+N)#Wev-Iy!w8a@4~Gk2kjm!Zerduzk1?P&iwyZ>lMwc7k{{SuG>63
hY~#s@ue~omF)%m_6l6JtoD~G6Sx;9#mvv4FO#p};O633m
diff --git a/app/assets/images/icon_anchor.svg b/app/assets/images/icon_anchor.svg
new file mode 100644
index 0000000000000..7e242586bad3d
--- /dev/null
+++ b/app/assets/images/icon_anchor.svg
@@ -0,0 +1 @@
+<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
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 06874a993faff..3f8433a0e7f67 100644
--- 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;
}
}
}
--
GitLab