Goyslop/4chan-x
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Website: Fix centering of hover previews when scrolled.

Browse Source
This commit is contained in:
ccd0 2015-03-07 22:26:58 -08:00
parent b218f4e133
commit 86abe4db43
1 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
template.jst
View File

@ -22,11 +22,19 @@ img.screenshot {
margin-left: 8px; margin-left: 8px;
} }
} }
img.hover { span.hover {
display: none; display: none;
} }
a:hover + img.hover { a:hover + span.hover {
display: block; display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
}
span.hover > img {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -35,7 +43,6 @@ a:hover + img.hover {
margin: auto; margin: auto;
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
pointer-events: none;
box-shadow: 5px 5px 20px rgba(0,0,0,0.4); box-shadow: 5px 5px 20px rgba(0,0,0,0.4);
} }
h2 ~ p, h2 ~ p + ul { h2 ~ p, h2 ~ p + ul {
@ -48,7 +55,7 @@ h2 ~ p, h2 ~ p + ul {
<%= <%=
content content
.replace('</h1>', '</h1><a href="img/screenshot.png"><img class="screenshot" src="img/screenshot.png"></a>') .replace('</h1>', '</h1><a href="img/screenshot.png"><img class="screenshot" src="img/screenshot.png"></a>')
.replace(/(<a href="([^"]+\.png)">.*?<\/a>)/g, '$1<img class="hover" src="$2">') .replace(/(<a href="([^"]+\.png)">.*?<\/a>)/g, '$1<span class="hover"><img src="$2"></span>')
%> %>
<script> <script>
var links = document.querySelectorAll('a[href="https://chrome.google.com/webstore/detail/4chan-x/ohnjgmpcibpbafdlkimncjhflgedgpam"]'); var links = document.querySelectorAll('a[href="https://chrome.google.com/webstore/detail/4chan-x/ohnjgmpcibpbafdlkimncjhflgedgpam"]');