Frontend lul
This commit is contained in:
Flummi
parent
1058d313a1
commit
be29734fa4
|
|
@ -76,28 +76,6 @@ button {
|
|||
}
|
||||
|
||||
/* Flummikram lol */
|
||||
div.pscroll {
|
||||
opacity: 0.7;
|
||||
position: fixed;
|
||||
display: inline-block;
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
left: 50%;
|
||||
cursor: pointer;
|
||||
margin-left: -36px;
|
||||
z-index: 999;
|
||||
}
|
||||
div.pscroll:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
div#up {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAANlBMVEUiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIjIyP///8iIiLm5uY3NzdKSkpAQEAqKipZf6aEAAAACnRSTlOxIfAAKvPn6quuQpaxIgAAAMZJREFUeF7t17uOwjAYROHjOMCuL0l4/5ddbQU0M4p/RIE8/flkyY1NTr/XNrjrT8qsSwtsWaGFBpcYcKEF9xFgAhMo9xIBytFrP8owUPb6v10JmN4K6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4LiN4LD2Cv53c8AaUPAL08AXVk9zeeoG3nhb69XuP5fdkLZQITmED840kMIP75zonbaH4j5T8NALtW477R3QAAAABJRU5ErkJggg==');
|
||||
top: 5.8em;
|
||||
}
|
||||
div#down {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAANlBMVEUiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIjIyMiIiLm5uY3NzcqKipAQED///9KSkpHtWFIAAAACnRSTlMqACGx8/Cu6uerGsmyTAAAAM9JREFUeF7t1zkOwzAMBVEt3kLK2/0vm3KQivhWigTQ7+dBpZhyeW3+cNtSckqzd2xOafGu1TT1AVPyzv0YMIABDMD0fQB7u9S1HcCNXhAM4CAQZl98gZ8PgNsB3G69NwAEqQdAUHoABKUHQNB6AAStB0DQegAErQdA0HoABK0HQNB6AAShBwgE+gBACHuAWKCPAIS4B4gEegFAoHcFQKBXAAR6BUCgVwAEehlAoNcBt7Nd7TTXAYjD/uKDMYAB9B+etQ+o/cd3Lsv6NF9ryW9/v8EFMSsbFgAAAABJRU5ErkJggg==');
|
||||
bottom: 5em;
|
||||
}
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
|
|
@ -191,4 +169,25 @@ div#itemview {
|
|||
z-index: 999;
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
display: none;
|
||||
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.items {
|
||||
/*position: relative;*/
|
||||
flex: 1 1 0px;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
img.item {
|
||||
position: absolute;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
88
public/css/icons.css
Normal file
88
public/css/icons.css
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
.close {
|
||||
position: absolute;
|
||||
right: 48px;
|
||||
top: 48px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
opacity: 0.8;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
}
|
||||
.close:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.close:before, .close:after {
|
||||
position: absolute;
|
||||
left: 23px;
|
||||
top: 3px;
|
||||
content: ' ';
|
||||
height: 40px;
|
||||
width: 2px;
|
||||
background-color: #333;
|
||||
}
|
||||
.close:before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.close:after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
|
||||
div.arrow {
|
||||
position: fixed;
|
||||
cursor: pointer;
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
background-color: #000;
|
||||
opacity: .5;
|
||||
border-radius: 10px;
|
||||
z-index: 90;
|
||||
}
|
||||
div.arrow:hover {
|
||||
opacity: .9;
|
||||
box-shadow: 0px 0px 0px 2px #dac8d2;
|
||||
border-radius: 10px;
|
||||
transition: .1s ease-in;
|
||||
}
|
||||
div.arrow:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 7%;
|
||||
left: 7%;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
div.top:before {
|
||||
clip-path: polygon(0% 77%, 50% 23%, 100% 77%);
|
||||
}
|
||||
div.bottom:before {
|
||||
clip-path: polygon(0% 23%, 100% 23%, 50% 77%);
|
||||
}
|
||||
div.left:before {
|
||||
clip-path: polygon(23% 50%, 77% 0%, 77% 100%);
|
||||
}
|
||||
div.right:before {
|
||||
clip-path: polygon(23% 0%, 77% 50%, 23% 100%);
|
||||
}
|
||||
|
||||
div.arrow.top {
|
||||
top: 80px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
div.arrow.bottom {
|
||||
bottom: 80px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
div.arrow.left {
|
||||
left: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
div.arrow.right {
|
||||
right: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
|
@ -120,7 +120,7 @@ const resize = e => {
|
|||
|
||||
// events
|
||||
swiper.init(rt.container.wrapper, e => scroll({ target: { id: e.direction }}));
|
||||
document.querySelectorAll("div.pscroll").forEach(p => p.addEventListener("click", scroll));
|
||||
[...document.querySelectorAll("div.arrow")].filter(e => ["up", "down"].includes(e.id)).forEach(p => p.addEventListener("click", scroll));
|
||||
document.addEventListener("wheel", scroll);
|
||||
|
||||
(() => { // init
|
||||
|
|
@ -137,13 +137,32 @@ document.addEventListener("wheel", scroll);
|
|||
|
||||
|
||||
|
||||
window.addEventListener("hashchange", e => {
|
||||
window.addEventListener("hashchange", async e => {
|
||||
const itemid = parseInt(e.newURL.split("#").slice(-1));
|
||||
if(itemid === "NaN")
|
||||
return rt.container.itemview.style.display = "none";
|
||||
if(itemid <= 0) { // failover
|
||||
rt.container.itemview.style.display = "none";
|
||||
return false;
|
||||
}
|
||||
|
||||
rt.container.itemview.style.display = "flex"; // show itemview
|
||||
rt.container.header.itempos.style.display = "block";
|
||||
rt.container.header.pagepos.style.display = "none";
|
||||
rt.container.header.iteminfo.style.display = "block";
|
||||
|
||||
rt.container.header.itempos.innerHTML = `item ${itemid}`;
|
||||
|
||||
const item = await (await fetch(`/api/item/${itemid}`)).json();
|
||||
console.log(item);
|
||||
|
||||
rt.container.header.infos.source.href = item.src;
|
||||
rt.container.header.infos.source.innerHTML = item.srchost;
|
||||
rt.container.header.infos.channel.innerHTML = `${item.usernetwork} ${item.userchannel}`;
|
||||
rt.container.header.infos.title.innerHTML = `${item.mime} (${item.size})`;
|
||||
rt.container.header.infos.nick.innerHTML = item.username;
|
||||
|
||||
rt.container.items[1].innerHTML = `<img src="${rt.url}${item.dest}" class="item" />`;
|
||||
rt.container.items[1].scrollIntoView({ block: rt.st.block }); // mitte
|
||||
|
||||
rt.container.itemview.style.display = "block"; // show itemview
|
||||
// remove page events
|
||||
document.removeEventListener("wheel", scroll);
|
||||
|
||||
|
|
|
|||
|
|
@ -17,6 +17,19 @@ export default {
|
|||
container: {
|
||||
wrapper: document.querySelector("div#wrapper"),
|
||||
itemview: document.querySelector("div#itemview"),
|
||||
header: {
|
||||
iteminfo: document.querySelector("div#itemInfo"),
|
||||
pagepos: document.querySelector("div#pagePosition"),
|
||||
itempos: document.querySelector("div#itemPosition"),
|
||||
infos: {
|
||||
title: document.querySelector("span#itemTitle"),
|
||||
source: document.querySelector("a#itemSource"),
|
||||
time: document.querySelector("span#itemTime"),
|
||||
nick: document.querySelector("span#itemNick"),
|
||||
channel: document.querySelector("span#itemChannel")
|
||||
}
|
||||
},
|
||||
items: document.querySelectorAll("div.items"),
|
||||
posts: document.querySelectorAll("div.posts")
|
||||
},
|
||||
items: {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
<title>f0ck!</title>
|
||||
<link rel="stylesheet" type="text/css" href="/css/milligram.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/f0ck.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/icons.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="header">
|
||||
|
|
@ -22,19 +23,24 @@
|
|||
<div class="infoText">
|
||||
<span id="itemTime" time=""></span> by
|
||||
<span id="itemNick">blah</span> on
|
||||
<a id="itemChannel">#f0ck</a>
|
||||
<span id="itemChannel">#f0ck</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="wrapper" class="content">
|
||||
<div class="pscroll" id="up"></div>
|
||||
<div class="arrow top" id="up"></div>
|
||||
<div id="posts_1" class="posts"></div>
|
||||
<div id="posts" class="posts"></div>
|
||||
<div id="posts_2" class="posts"></div>
|
||||
<div class="pscroll" id="down"></div>
|
||||
<div class="arrow bottom" id="down"></div>
|
||||
</div>
|
||||
<div id="itemview" class="content">
|
||||
|
||||
<div class="arrow left" id="left"></div>
|
||||
<div id="item_1" class="items"> </div>
|
||||
<div id="item" class="items"> </div>
|
||||
<div id="item_2" class="items"> </div>
|
||||
<div class="arrow right" id="right"></div>
|
||||
<a href="#" class="close"></a>
|
||||
</div>
|
||||
<footer>
|
||||
<section class="credits">Made with 666 souls in mind and 2 liters of fresh virgin blood</section>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user