RanchiMall/articles
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Convert to multiple page app

Browse Source
This commit is contained in:
Vivek Teega 2020-08-08 17:10:23 +05:30
parent 2690c476a6
commit 46e83e8322
1 changed files with 40 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
index.html
View File

@ -15,6 +15,7 @@
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
} }
.hide { .hide {
display: none; display: none;
} }
@ -40,6 +41,7 @@
p { p {
margin: 1.2rem 0; margin: 1.2rem 0;
} }
p:not(:first-of-type)::first-letter { p:not(:first-of-type)::first-letter {
margin-left: 4rem; margin-left: 4rem;
} }
@ -60,6 +62,7 @@
text-transform: uppercase; text-transform: uppercase;
padding: 0.6rem 0; padding: 0.6rem 0;
} }
.subhead::after { .subhead::after {
content: ''; content: '';
position: absolute; position: absolute;
@ -273,6 +276,12 @@
width: 100%; width: 100%;
} }
:any-link {
text-decoration: none;
color: #DC143C;
cursor: pointer;
}
/*________________________________________________________________________________________________________________________________*/ /*________________________________________________________________________________________________________________________________*/
/*MEDIAQUERIES*/ /*MEDIAQUERIES*/
@media all and (max-width: 1280px) { @media all and (max-width: 1280px) {
@ -292,6 +301,7 @@
margin: 0 2vw; margin: 0 2vw;
} }
} }
@media all and (min-width: 1920px) { @media all and (min-width: 1920px) {
.columns { .columns {
margin: 0 4vw; margin: 0 4vw;
@ -320,13 +330,13 @@
for (let i = 0; i < repocontent.length; i++) { for (let i = 0; i < repocontent.length; i++) {
articlehtml = await (await fetch(repocontent[i]["download_url"])).text() articlehtml = await (await fetch(repocontent[i]["download_url"])).text()
if(repocontent[i]['name'].slice(-5, repocontent[i]['name'].length)=='.html' && repocontent[i]['name'].slice(0, -5)!='index'){ if (repocontent[i]['name'].slice(-5, repocontent[i]['name'].length) == '.html' && repocontent[i][
'name'
].slice(0, -5) != 'index') {
articles[repocontent[i]['name'].slice(0, repocontent[i]['name'].length - 5)] = articlehtml articles[repocontent[i]['name'].slice(0, repocontent[i]['name'].length - 5)] = articlehtml
} }
} }
debugger
parseArticles(articles) parseArticles(articles)
renderColumns(parsedarticles) renderColumns(parsedarticles)
})(); })();
@ -372,6 +382,7 @@
let parsedArticlesKeys = Object.keys(parsedarticles) let parsedArticlesKeys = Object.keys(parsedarticles)
for (let i = 0; i < parsedArticlesKeys.length; i++) { for (let i = 0; i < parsedArticlesKeys.length; i++) {
debugger
columnhtml = `<div class="column" id="column${i+1}" data-articlekey="${parsedArticlesKeys[i]}"> columnhtml = `<div class="column" id="column${i+1}" data-articlekey="${parsedArticlesKeys[i]}">
<div class="head"> <div class="head">
<span class="headline hl3">${parsedarticles[parsedArticlesKeys[i]].title}</span> <span class="headline hl3">${parsedarticles[parsedArticlesKeys[i]].title}</span>
@ -379,10 +390,8 @@
</div> </div>
<p>${parsedarticles[parsedArticlesKeys[i]].sections[0].paragraph}</p> <p>${parsedarticles[parsedArticlesKeys[i]].sections[0].paragraph}</p>
<p>${parsedarticles[parsedArticlesKeys[i]].sections[1].paragraph}...</p> <p>${parsedarticles[parsedArticlesKeys[i]].sections[1].paragraph}...</p>
<div id="goforward" onclick="switchtoArticle(this.parentNode)" style="color:#DC143C"> <a href='./${parsedArticlesKeys[i]}.html'>Read article <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
Read article
<i class="fa fa-angle-double-right" aria-hidden="true"></i>
</div>
</div>` </div>`
//debugger; //debugger;
//columns.append(columnhtml) //columns.append(columnhtml)
@ -397,7 +406,6 @@
document.getElementById("displaypage").innerHTML = articles[element.dataset.articlekey] document.getElementById("displaypage").innerHTML = articles[element.dataset.articlekey]
document.getElementById("display_page_main").classList.remove('hide') document.getElementById("display_page_main").classList.remove('hide')
} }
</script> </script>
<body translate="no"> <body translate="no">
@ -550,8 +558,7 @@
if (homepage.classList.contains('hide')) { if (homepage.classList.contains('hide')) {
homepage.classList.remove('hide') homepage.classList.remove('hide')
document.getElementById("display_page_main").classList.add('hide') document.getElementById("display_page_main").classList.add('hide')
} } else {
else {
} }
}); });
@ -561,8 +568,7 @@
if (homepage.classList.contains('hide')) { if (homepage.classList.contains('hide')) {
homepage.classList.remove('hide') homepage.classList.remove('hide')
document.getElementById("display_page_main").classList.add('hide') document.getElementById("display_page_main").classList.add('hide')
} } else {
else {
} }
}); });