homer77
/
tootkomm
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Changed the scope of the link to status.

This commit is contained in:
maste9 2022-02-17 14:17:10 +01:00
parent 8f929523b2
commit 888b761012
2 changed files with 38 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
index.html
View File

@ -14,7 +14,7 @@
<main id="comments">
<link rel="stylesheet" href="fontawesome/css/all.css">
<link rel="stylesheet" href="style.css?v=1.18">
<link rel="stylesheet" href="style.css?v=1.2">
</main>
@ -41,16 +41,15 @@
async function buildArticle(target, mastopost) {
const link = document.createElement('a');
link.href = mastopost.url;
const article = document.createElement('article');
populateHeader(article, mastopost);
populateSection(article, mastopost);
populateSection(article, mastopost);
populateAside(article, mastopost);
populateFooter(article, mastopost);
target.appendChild(link).appendChild(article);
target.appendChild(article);
}
@ -84,23 +83,33 @@
function populateHeader(item, obj) {
const myHeader = document.createElement('header');
const myCW = document.createElement('summary');
const myDateTime = document.createElement('time');
const link = document.createElement('a');
link.href = obj.url;
myDateTime.datetime = obj.created_at;
creation_date = new Date(obj.created_at);
myDateTime.textContent = creation_date.toLocaleString();
myCW.textContent = obj.spoiler_text;
myHeader.appendChild(myCW);
myHeader.appendChild(myDateTime);
myDateTime.textContent = creation_date.toLocaleString('de-DE',{ day: "2-digit", month: "short", year: "numeric", hour:"2-digit", minute:"2-digit"});
if(obj.spoiler_text.length > 0){
const myCW = document.createElement('summary');
const myButton = document.createElement('button');
myButton.textContent = "+";
myCW.textContent = obj.spoiler_text;
myHeader.appendChild(myCW);
myHeader.appendChild(myButton);
}
myHeader.appendChild(link).appendChild(myDateTime);
item.appendChild(myHeader);
}
function populateSection(item, obj){
const mySection = document.createElement('section');
mySection.innerHTML = `${obj['content']}`;
item.appendChild(mySection);
function populateSection(item, obj){
const mySection = document.createElement('section');
mySection.innerHTML = `${obj['content']}`;
item.appendChild(mySection);
}
function populateAside(item, obj){
@ -113,7 +122,7 @@
const myH = document.createElement('hgroup');
const myP = document.createElement('div');
myH.innerHTML = `<h1>${obj.account['display_name']}</h1> <h2>(<a href="${obj.account.url}">${obj.account['username']}</a>)</h2>`;
myP.innerHTML = `<time datetime="${obj.account['created_at']}">since ${myDate.toLocaleDateString()}</time>`;
myP.innerHTML = `<time datetime="${obj.account['created_at']}">since ${myDate.toLocaleDateString('de-DE',{ day: "2-digit", month: "short", year: "numeric"})}</time>`;
aside.appendChild(myH);
aside.appendChild(myP);
@ -135,6 +144,7 @@
}
buildCommentTree("107735248507147283");
// buildCommentTree("107724981153178707");
</script>
</body>

16
style.css
View File

@ -9,6 +9,12 @@ html {
text-decoration: none;
}
time {
display:inline-block;
font-size: 0.7em;
color:#b4b5ba;
}
article {
font-family: monospace, sans-serif;
color: #fff;
@ -33,6 +39,7 @@ article a {
article header {
width:100%;
grid-area: header;
text-align:right;
}
article header summary {
@ -41,6 +48,10 @@ article header summary {
}
article header time {
padding-right:1em;
}
article aside {
grid-area: profile;
text-align:center;
@ -73,12 +84,11 @@ article aside img {
}
article > aside > div {
}
article > aside > div > time {
font-size: 0.7em;
color:#b4b5ba;
}
article section {