f0ck/f0ckv1
3
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Firef0cks der Hurensohn

Browse Source
This commit is contained in:
Flummi 2016-09-02 10:25:33 +00:00
parent d8613a0190
commit 35686be025
2 changed files with 22 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
s/index.tpl.html
View File

@ -4,27 +4,29 @@
<title>f0ck me!</title> <title>f0ck me!</title>
<link rel="icon" type="image/gif" href="./s/favicon.gif" /> <link rel="icon" type="image/gif" href="./s/favicon.gif" />
<link rel="stylesheet" type="text/css" href="./s/style.css"> <link rel="stylesheet" type="text/css" href="./s/style.css">
<link rel="stylesheet" type="text/css" href="//codepen.io/assets/reset/normalize.css">
</head> </head>
<body> <body>
<div class="navbar"><a href="/">f0ck.me</a> | <a href="/how">how to</a> | <a href="/contact">Contact</a></div> <div class="navbar"><a href="/">f0ck.me</a> | <a href="/how">how to</a> | <a href="/contact">Contact</a></div>
<ul id="posts" data-last="{{ last }}"> <div class="body">
{% for item in items %}<li class="post"><a href="//f0ck.me/{{ item.id }}" title="{{ item.mime }}"><img class="thumb" src="//f0ck.me/t/{{ item.id }}.png" /></a></li> <div id="posts" data-last="{{ last }}">
{% endfor %} {% for item in items %}<a href="./{{ item.id }}" title="{{ item.mime }}"><img class="thumb" src="./t/{{ item.id }}.png" /></a>
</ul> {% endfor %}
</div>
<div class="clear"></div>
</div>
<script src="./s/jquery-3.1.0.min.js"></script> <script src="./s/jquery-3.1.0.min.js"></script>
<script> <script>
var scrollListener = function () { var scrollListener = () => {
$(window).one("scroll", function () { $(window).one("scroll", () => {
if($(window).scrollTop() + 256 >= $(document).height() - $(window).height()) { if($(window).scrollTop() + 256 >= $(document).height() - $(window).height()) {
$.ajax({ $.ajax({
url: './api/p/'+$('#posts').data('last'), url: './api/p/'+$('#posts').data('last'),
dataType: 'json', dataType: 'json',
success: function(msg) { success: (msg) => {
var html = ""; var html = "";
for(var i = 0; i < msg.items.length; i++) for(var i = 0; i < msg.items.length; i++)
if(msg.items[i].id) if(msg.items[i].id)
html += "<li class=\"post\"><a href=\"//f0ck.me/"+msg.items[i].id+"\" title=\""+msg.items[i].mime+"\"><img class=\"thumb\" src=\"//f0ck.me/t/"+msg.items[i].id+".png\" /></a></li>\n"; html += "<a href=\"./"+msg.items[i].id+"\" title=\""+msg.items[i].mime+"\"><img class=\"thumb\" src=\"./t/"+msg.items[i].id+".png\" /></a>\n";
$('#posts').append(html); $('#posts').append(html);
$('#posts').data('last', msg.last); $('#posts').data('last', msg.last);
} }
@ -33,7 +35,7 @@
setTimeout(scrollListener, 200); setTimeout(scrollListener, 200);
}); });
}; };
$(document).ready(function () { $(document).ready(() => {
scrollListener(); scrollListener();
}); });
</script> </script>

32
s/style.css
View File

@ -1,35 +1,24 @@
html, body { html, body {
height: 100%; height: 100%;
width: 100%;
} }
body { body {
width: 100%;
margin: 1em auto 3em auto; margin: 1em auto 3em auto;
background-color: #262626; background-color: #262626;
color: #fff; color: #fff;
font-family: Monospace; font-family: Monospace;
} }
ul#posts { .body {
width: calc(100% - 210px); width: 90%;
margin: 0; margin: 1em auto 3em auto;
margin-left: 100px; background-color: #262626;
padding: 0; color: #fff;
list-style: none; font-family: Monospace;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
li.post {
padding: 5px;
width: 128px;
height: 128px;
margin-top: 5px;
line-height: 128px;
} }
.thumb { .thumb {
border: 0;
margin: 0 8px 8px 0;
float: left;
border: 2px solid #4c4a4a; border: 2px solid #4c4a4a;
} }
.thumb:hover { .thumb:hover {
@ -64,7 +53,6 @@ a:hover {
} }
.navbar { .navbar {
text-align: center; text-align: center;
margin-top: 7px;
} }
.return { .return {
text-align: center; text-align: center;