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

16
style.css
View File

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