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

Minor UI improvements

Browse Source
This commit is contained in:
sairaj mote 2022-02-01 03:11:48 +05:30
parent 7fb27e728c
commit 42762d944b
4 changed files with 39 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
css/main.css
View File

@ -50,7 +50,7 @@ body[data-theme=dark] ::-webkit-calendar-picker-indicator {
p,
strong {
font-size: 0.9rem;
max-width: 70ch;
max-width: 65ch;
line-height: 1.7;
color: rgba(var(--text-color), 0.8);
}
@ -685,8 +685,9 @@ theme-toggle {
line-height: 1.4;
}
.article-card__category {
background-color: rgba(var(--text-color), 0.1);
border-radius: 0.3rem;
border: solid thin rgba(var(--text-color), 0.3);
margin-right: 0.5rem;
border-radius: 1rem;
font-size: 0.8rem;
padding: 0.3rem 0.6rem;
font-weight: 700;
@ -785,6 +786,10 @@ theme-toggle {
grid-template-columns: minmax(0, 1fr);
}
#article_summary:not(:empty) {
margin-bottom: 0.5rem;
}
#article_contributors {
flex-wrap: wrap;
gap: 0.3rem;
@ -1175,6 +1180,10 @@ theme-toggle {
margin-top: auto;
}
#article_body {
margin-top: 1rem;
}
.request-card {
grid-template-columns: 1fr auto;
}

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

13
css/main.scss
View File

@ -54,7 +54,7 @@ body[data-theme="dark"] {
p,
strong {
font-size: 0.9rem;
max-width: 70ch;
max-width: 65ch;
line-height: 1.7;
color: rgba(var(--text-color), 0.8);
@ -649,8 +649,9 @@ theme-toggle {
line-height: 1.4;
}
&__category {
background-color: rgba(var(--text-color), 0.1);
border-radius: 0.3rem;
border: solid thin rgba(var(--text-color), 0.3);
margin-right: 0.5rem;
border-radius: 1rem;
font-size: 0.8rem;
padding: 0.3rem 0.6rem;
font-weight: 700;
@ -746,6 +747,9 @@ theme-toggle {
gap: 0.5rem;
grid-template-columns: minmax(0, 1fr);
}
#article_summary:not(:empty) {
margin-bottom: 0.5rem;
}
#article_contributors {
flex-wrap: wrap;
gap: 0.3rem;
@ -1113,6 +1117,9 @@ theme-toggle {
position: relative;
margin-top: auto;
}
#article_body {
margin-top: 1rem;
}
.request-card {
grid-template-columns: 1fr auto;

35
index.html
View File

@ -234,13 +234,14 @@
</div>
</aside>
<main class="grid gap-2">
<section class="hero-section">
<header class="hero-section">
<h1 id="article_title"></h1>
<p id="article_summary"></p>
<div class="flex align-center">
<time id="published_time"></time>
<span class="bullet-point"></span><span id="reading_time" style="white-space: nowrap;"></span>
</div>
</section>
</header>
<details id="article_map_accordion" class="hide-on-desktop">
<summary class="space-between">
<h4>In this article</h4>
@ -538,27 +539,27 @@
</sm-popup>
<template id="trending_article_template">
<div class="trending-article grid gap-0-5">
<a href="" class="article-card__category"></a>
<a class="article-card--highlight grid gap-0-5" href="" style="color: inherit">
<h3 class="trending-article__title"></h3>
<div class="flex">
<span class="trending-article__read-time h5"></span><span class="bullet-point"></span><time
class="trending-article__published h5"></time>
</div>
<p class="trending-article__summary"></p>
</a>
<div class="flex align-center" style="margin-top: 0.3rem;">
<a href="" class="article-card__category interact"></a>
<span class="trending-article__read-time h5"></span><span class="bullet-point"></span><time
class="trending-article__published h5"></time>
</div>
</div>
</template>
<template id="article_card_template">
<li class="article-card grid">
<a href="" class="article-card__category interact"></a>
<a href="" class="grid article-link">
<h4 class="article-card__title"></h4>
<div class="flex">
<span class="article-card__read-time"></span><span class="bullet-point"></span>
<time class="article-card__published"></time>
</div>
</a>
<div class="flex align-center" style="margin-top: 0.3rem;">
<a href="" class="article-card__category interact"></a>
<span class="article-card__read-time"></span><span class="bullet-point"></span>
<time class="article-card__published"></time>
</div>
</li>
</template>
<template id="article_row_template">
@ -759,11 +760,6 @@
}
document.addEventListener('popupopened', e => {
// switch (e.target.id) {
// case 'preview_popup':
// getRef('preview_container').innerHTML = ''
// break;
// }
})
document.addEventListener('popupclosed', e => {
zIndex--
@ -1218,11 +1214,12 @@
async function renderArticle(articleID, firstLoad = true) {
const frag = document.createDocumentFragment()
const allArticles = await compactIDB.readData('appObjects', 'articlesContent')
const { title, published, readTime, contributors, updated } = floGlobals.appObjects.rmTimes.articles[articleID]
const { title, published, readTime, contributors, updated, summary } = floGlobals.appObjects.rmTimes.articles[articleID]
getRef('article_title').textContent = title
getRef('article_summary').textContent = summary
getRef('published_time').textContent = `Published ${getFormattedTime(published, 'date-only')}${updated ? `, Updated ${relativeTime.from(updated)}` : ''}`
getRef('reading_time').textContent = `${readTime} Min read`
getRef('article_body').innerHTML = allArticles[articleID]
getRef('article_body').innerHTML = DOMPurify.sanitize(allArticles[articleID])
getRef('article_body').querySelectorAll('h3').forEach(heading => {
const headingText = heading.textContent
const headingID = `s${floCrypto.randString(8)}`