Added article sharing feature
This commit is contained in:
sairaj mote
parent
976e3f0c00
commit
1b059b5c24
15
css/main.css
15
css/main.css
@ -338,6 +338,20 @@ ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bullet-point {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 0.8ch;
|
||||
}
|
||||
.bullet-point::after {
|
||||
content: "";
|
||||
height: 0.4ch;
|
||||
width: 0.4ch;
|
||||
border-radius: 0.5em;
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
@ -709,7 +723,6 @@ theme-toggle {
|
||||
}
|
||||
.article-card .flex {
|
||||
font-size: 0.8rem;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
#explore {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -333,6 +333,19 @@ ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bullet-point {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 0.8ch;
|
||||
&::after {
|
||||
content: "";
|
||||
height: 0.4ch;
|
||||
width: 0.4ch;
|
||||
border-radius: 0.5em;
|
||||
background-color: currentColor;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
@ -675,7 +688,6 @@ theme-toggle {
|
||||
}
|
||||
.flex {
|
||||
font-size: 0.8rem;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
60
index.html
60
index.html
@ -227,7 +227,7 @@
|
||||
<section id="main_page__header" class="flex align-center">
|
||||
<div id="news_categories_list" class="flex"></div>
|
||||
</section>
|
||||
<section>
|
||||
<section class="grid gap-1-5">
|
||||
<h5>Trending</h5>
|
||||
<div id="trending_article_container"></div>
|
||||
</section>
|
||||
@ -248,8 +248,23 @@
|
||||
</article>
|
||||
<article id="article" class="page page-layout hide-completely">
|
||||
<section class="hero-section">
|
||||
<div class="flex align-center">
|
||||
<time id="published_time"></time> • <span id="reading_time"></span>
|
||||
<div class="flex space-between align-center">
|
||||
<div class="flex align-center">
|
||||
<time id="published_time"></time><span class="bullet-point"></span><span
|
||||
id="reading_time"></span>
|
||||
</div>
|
||||
<button class="icon-only" title="Share preview" onclick="sharePreview()">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
|
||||
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<g>
|
||||
<rect fill="none" height="24" width="24" />
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="M16,5l-1.42,1.42l-1.59-1.59V16h-1.98V4.83L9.42,6.42L8,5l4-4L16,5z M20,10v11c0,1.1-0.9,2-2,2H6c-1.11,0-2-0.9-2-2V10 c0-1.11,0.89-2,2-2h3v2H6v11h12V10h-3V8h3C19.1,8,20,8.89,20,10z" />
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<h1 id="article_title"></h1>
|
||||
</section>
|
||||
@ -289,6 +304,23 @@
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
<sm-popup id="share_popup">
|
||||
<header slot="header" class="popup__header">
|
||||
<div class="flex align-center">
|
||||
<button class="popup__header__close" onclick="hidePopup()">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
|
||||
fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||
<path
|
||||
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
|
||||
</svg>
|
||||
</button>
|
||||
<h3>Share article preview</h3>
|
||||
</div>
|
||||
</header>
|
||||
<span class="label">Copy link</span>
|
||||
<sm-copy id="shared_url" clip-text></sm-copy>
|
||||
</sm-popup>
|
||||
<sm-popup id="preview_popup">
|
||||
<header slot="header" class="popup__header">
|
||||
<div class="flex align-center">
|
||||
@ -382,7 +414,7 @@
|
||||
<a href="" class="grid article-link">
|
||||
<h4 class="article-card__title"></h4>
|
||||
<div class="flex">
|
||||
<span class="article-card__read-time"></span> •
|
||||
<span class="article-card__read-time"></span><span class="bullet-point"></span>
|
||||
<time class="article-card__published"></time>
|
||||
</div>
|
||||
</a>
|
||||
@ -922,15 +954,17 @@
|
||||
}
|
||||
const { category, title, published, readTime, summary, uid } = highestRatedArticle
|
||||
getRef('trending_article_container').innerHTML = `
|
||||
<div class="grid gap-0-5">
|
||||
<a href="#/explore?type=category&query=${category}" class="article-card__category">${category}</a>
|
||||
<a class="article-card--highlight grid" href="#/article?articleID=${uid}">
|
||||
<a class="article-card--highlight grid gap-0-5" href="#/article?articleID=${uid}" style="color: inherit">
|
||||
<h3 id="trending_article__title">${title}</h3>
|
||||
<div class="flex">
|
||||
<span class="trending_article__read-time">${readTime} Min read</span>•<time
|
||||
class="trending_article__published">${relativeTime.from(published)}</time>
|
||||
<span class="trending_article__read-time h5">${readTime} Min read</span><span class="bullet-point"></span><time
|
||||
class="trending_article__published h5">${relativeTime.from(published)}</time>
|
||||
</div>
|
||||
<p id="trending_article__summary">${summary}</p>
|
||||
</a>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
@ -1175,6 +1209,18 @@
|
||||
}
|
||||
}, 300))
|
||||
|
||||
function sharePreview() {
|
||||
if (window.navigator.share) {
|
||||
navigator.share({
|
||||
title: "Share article preview",
|
||||
url: window.location.href
|
||||
})
|
||||
} else {
|
||||
getRef('shared_url').value = window.location.href
|
||||
showPopup('share_popup')
|
||||
}
|
||||
}
|
||||
|
||||
async function renderDashboard() {
|
||||
const requests = floGlobals.generalData[`publishing_requests|${floGlobals.adminID}|${floGlobals.application}`]
|
||||
const frag = document.createDocumentFragment()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user