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

UI update

Browse Source
This commit is contained in:
sairaj mote 2022-08-27 16:10:00 +05:30
parent 45a98a4984
commit 4640468d15
4 changed files with 151 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
css/main.css
View File

@ -22,6 +22,21 @@ body {
--danger-color: rgb(255, 75, 75); --danger-color: rgb(255, 75, 75);
--green: #1cad59; --green: #1cad59;
--like-color: #e91e63; --like-color: #e91e63;
--dark-red: #d40e1e;
--red: #f50000;
--kinda-pink: #e40273;
--purple: #462191;
--shady-blue: #324de6;
--nice-blue: #256eff;
--maybe-cyan: #00b0ff;
--teal: #00bcd4;
--mint-green: #16c79a;
--yellowish-green: #66bb6a;
--greenish-yellow: #8bc34a;
--dark-teal: #11698e;
--tangerine: #ff6f00;
--orange: #ff9100;
--redish-orange: #ff3d00;
scrollbar-gutter: stable; scrollbar-gutter: stable;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
background: rgba(var(--background-color), 1); background: rgba(var(--background-color), 1);
@ -38,6 +53,21 @@ body[data-theme=dark] {
--background-color: 21, 22, 22; --background-color: 21, 22, 22;
--danger-color: rgb(255, 106, 106); --danger-color: rgb(255, 106, 106);
--green: #00e676; --green: #00e676;
--dark-red: #ff5e7e;
--red: #ff6098;
--kinda-pink: #c44ae6;
--purple: #9565f7;
--shady-blue: #7084f5;
--nice-blue: #86afff;
--maybe-cyan: #66cfff;
--teal: #6aeeff;
--mint-green: #4dffd2;
--yellowish-green: #9effa2;
--greenish-yellow: #c7fc8b;
--dark-teal: #51cbff;
--tangerine: #ffac6d;
--orange: #ffbe68;
--redish-orange: #ff8560;
} }
body[data-theme=dark] sm-popup::part(popup) { body[data-theme=dark] sm-popup::part(popup) {
background-color: rgba(var(--foreground-color), 1); background-color: rgba(var(--foreground-color), 1);
@ -386,6 +416,10 @@ h3 {
fill: rgba(var(--text-color), 0.8); fill: rgba(var(--text-color), 0.8);
flex-shrink: 0; flex-shrink: 0;
} }
.icon--small {
width: 1em;
height: 1em;
}
.margin-right-0-3 { .margin-right-0-3 {
margin-right: 0.3rem; margin-right: 0.3rem;
@ -395,6 +429,10 @@ h3 {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.margin-left-auto {
margin-left: auto;
}
.margin-left-0-5 { .margin-left-0-5 {
margin-left: 0.5rem; margin-left: 0.5rem;
} }
@ -876,15 +914,27 @@ theme-toggle {
#article_contributors { #article_contributors {
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.3rem; gap: 1.5rem;
margin: 0.5rem 0 1rem 0; margin: 1rem 0;
} }
.contributor { .contributor {
display: flex;
font-size: 0.75rem; font-size: 0.75rem;
background-color: rgba(var(--text-color), 0.06); align-items: center;
border-radius: 0.3rem; font-weight: 500;
padding: 0.3rem 0.5rem; }
.contributor__dp {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
background-color: var(--accent-color);
border-radius: 2rem;
font-weight: 700;
aspect-ratio: 1/1;
color: rgba(var(--background-color), 1);
margin-right: 0.5rem;
} }
#related_articles { #related_articles {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

61
css/main.scss
View File

@ -22,6 +22,22 @@ body {
--danger-color: rgb(255, 75, 75); --danger-color: rgb(255, 75, 75);
--green: #1cad59; --green: #1cad59;
--like-color: #e91e63; --like-color: #e91e63;
// Accent colors
--dark-red: #d40e1e;
--red: #f50000;
--kinda-pink: #e40273;
--purple: #462191;
--shady-blue: #324de6;
--nice-blue: #256eff;
--maybe-cyan: #00b0ff;
--teal: #00bcd4;
--mint-green: #16c79a;
--yellowish-green: #66bb6a;
--greenish-yellow: #8bc34a;
--dark-teal: #11698e;
--tangerine: #ff6f00;
--orange: #ff9100;
--redish-orange: #ff3d00;
* { * {
scrollbar-width: thin; scrollbar-width: thin;
} }
@ -38,6 +54,22 @@ body[data-theme="dark"] {
--background-color: 21, 22, 22; --background-color: 21, 22, 22;
--danger-color: rgb(255, 106, 106); --danger-color: rgb(255, 106, 106);
--green: #00e676; --green: #00e676;
// Accent colors
--dark-red: #ff5e7e;
--red: #ff6098;
--kinda-pink: #c44ae6;
--purple: #9565f7;
--shady-blue: #7084f5;
--nice-blue: #86afff;
--maybe-cyan: #66cfff;
--teal: #6aeeff;
--mint-green: #4dffd2;
--yellowish-green: #9effa2;
--greenish-yellow: #c7fc8b;
--dark-teal: #51cbff;
--tangerine: #ffac6d;
--orange: #ffbe68;
--redish-orange: #ff8560;
sm-popup::part(popup) { sm-popup::part(popup) {
background-color: rgba(var(--foreground-color), 1); background-color: rgba(var(--foreground-color), 1);
} }
@ -370,6 +402,10 @@ h3 {
height: 1.2rem; height: 1.2rem;
fill: rgba(var(--text-color), 0.8); fill: rgba(var(--text-color), 0.8);
flex-shrink: 0; flex-shrink: 0;
&--small {
width: 1em;
height: 1em;
}
} }
.margin-right-0-3 { .margin-right-0-3 {
@ -379,6 +415,9 @@ h3 {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.margin-left-auto {
margin-left: auto;
}
.margin-left-0-5 { .margin-left-0-5 {
margin-left: 0.5rem; margin-left: 0.5rem;
} }
@ -816,14 +855,26 @@ theme-toggle {
} }
#article_contributors { #article_contributors {
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.3rem; gap: 1.5rem;
margin: 0.5rem 0 1rem 0; margin: 1rem 0;
} }
.contributor { .contributor {
display: flex;
font-size: 0.75rem; font-size: 0.75rem;
background-color: rgba(var(--text-color), 0.06); align-items: center;
border-radius: 0.3rem; font-weight: 500;
padding: 0.3rem 0.5rem; &__dp {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
background-color: var(--accent-color);
border-radius: 2rem;
font-weight: 700;
aspect-ratio: 1/1;
color: rgba(var(--background-color), 1);
margin-right: 0.5rem;
}
} }
#related_articles { #related_articles {
margin-top: 1rem; margin-top: 1rem;

54
index.html
View File

@ -241,6 +241,7 @@
<time id="published_time"></time> <time id="published_time"></time>
<span class="bullet-point"></span><span id="reading_time" style="white-space: nowrap;"></span> <span class="bullet-point"></span><span id="reading_time" style="white-space: nowrap;"></span>
</div> </div>
<div id="article_contributors" class="flex"></div>
<img id="article_image" src="" alt="" loading="lazy"> <img id="article_image" src="" alt="" loading="lazy">
</header> </header>
<details id="article_map_accordion" class="hide-on-desktop"> <details id="article_map_accordion" class="hide-on-desktop">
@ -254,10 +255,6 @@
</summary> </summary>
</details> </details>
<section id="article_body" class="grid"></section> <section id="article_body" class="grid"></section>
<section>
<h4>Article by -</h4>
<div id="article_contributors" class="flex"></div>
</section>
<section> <section>
<h5>Pick something to read </h5> <h5>Pick something to read </h5>
<div id="related_articles" class="grid"></div> <div id="related_articles" class="grid"></div>
@ -580,6 +577,16 @@
<time class="trending-article__published h5"></time> <time class="trending-article__published h5"></time>
<span class="bullet-point"></span> <span class="bullet-point"></span>
<span class="trending-article__read-time h5"></span> <span class="trending-article__read-time h5"></span>
<span class="bullet-point"></span>
<div class="flex align-center h5">
<svg class="icon icon--small margin-right-0-3" 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="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z" />
</svg>
<span class="trending-article__votes h5"></span>
</div>
</div> </div>
<h3 class="trending-article__title"></h3> <h3 class="trending-article__title"></h3>
<p class="trending-article__summary"></p> <p class="trending-article__summary"></p>
@ -595,6 +602,16 @@
<time class="article-card__published"></time> <time class="article-card__published"></time>
<span class="bullet-point"></span> <span class="bullet-point"></span>
<span class="article-card__read-time"></span> <span class="article-card__read-time"></span>
<span class="bullet-point"></span>
<div class="flex align-center h5">
<svg class="icon icon--small margin-right-0-3" 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="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z" />
</svg>
<span class="article-card__votes h5"></span>
</div>
</div> </div>
<h4 class="article-card__title"></h4> <h4 class="article-card__title"></h4>
</a> </a>
@ -1179,7 +1196,7 @@
}) })
const render = { const render = {
articleCard(details) { articleCard(details) {
const { uid: articleID, categories, title, readTime, published, heroImage } = details const { uid: articleID, categories, title, readTime, published, heroImage, votes } = details
const clone = getRef('article_card_template').content.cloneNode(true).firstElementChild const clone = getRef('article_card_template').content.cloneNode(true).firstElementChild
const frag = document.createDocumentFragment() const frag = document.createDocumentFragment()
categories.forEach(category => { categories.forEach(category => {
@ -1190,6 +1207,7 @@
})) }))
}) })
clone.querySelector('.article-card__categories').append(frag) clone.querySelector('.article-card__categories').append(frag)
clone.querySelector('.article-card__votes').textContent = votes
clone.querySelector('.article-link').href = `#/article?articleID=${articleID}` clone.querySelector('.article-link').href = `#/article?articleID=${articleID}`
clone.querySelector('.article-card__title').textContent = title clone.querySelector('.article-card__title').textContent = title
clone.querySelector('.article-card__read-time').textContent = `${readTime} Min read` clone.querySelector('.article-card__read-time').textContent = `${readTime} Min read`
@ -1202,7 +1220,7 @@
return clone return clone
}, },
trendingArticleCard(details) { trendingArticleCard(details) {
const { uid: articleID, categories, title, readTime, published, summary, heroImage } = details const { uid: articleID, categories, title, readTime, published, summary, heroImage, votes } = details
const clone = getRef('trending_article_template').content.cloneNode(true).firstElementChild const clone = getRef('trending_article_template').content.cloneNode(true).firstElementChild
const frag = document.createDocumentFragment() const frag = document.createDocumentFragment()
categories.forEach(category => { categories.forEach(category => {
@ -1213,6 +1231,7 @@
})) }))
}) })
clone.querySelector('.trending-article__categories').append(frag) clone.querySelector('.trending-article__categories').append(frag)
clone.querySelector('.trending-article__votes').textContent = votes
clone.querySelector('.article-card--highlight').href = `#/article?articleID=${articleID}` clone.querySelector('.article-card--highlight').href = `#/article?articleID=${articleID}`
clone.querySelector('.trending-article__title').textContent = title clone.querySelector('.trending-article__title').textContent = title
clone.querySelector('.trending-article__read-time').textContent = `${readTime} Min read` clone.querySelector('.trending-article__read-time').textContent = `${readTime} Min read`
@ -1331,15 +1350,16 @@
headingObserver.observe(heading.nextElementSibling) headingObserver.observe(heading.nextElementSibling)
}) })
contributors.forEach(id => { const contributorList = contributors.map(id => {
frag.append(createElement('a', { const contributorName = floGlobals.appObjects.rmTimes.articleWriters.hasOwnProperty(id) ? floGlobals.appObjects.rmTimes.articleWriters[id].name : id;
textContent: floGlobals.appObjects.rmTimes.articleWriters.hasOwnProperty(id) ? floGlobals.appObjects.rmTimes.articleWriters[id].name : id, return html`
className: 'contributor', <a href="${`#/writer?id=${id}`}" class="contributor">
attributes: { 'href': `#/writer?id=${id}` } <span class="contributor__dp">${contributorName.split(' ').map(v => v.charAt(0)).join('')}</span>
})) ${contributorName}
</a>
`
}) })
getRef('article_contributors').innerHTML = '' renderElem(getRef('article_contributors'), html`${contributorList}`)
getRef('article_contributors').append(frag)
const fuse = new Fuse(getArrayOfObj(floGlobals.appObjects.rmTimes.articles), { keys: ['categories'], threshold: 0, useExtendedSearch: true }) const fuse = new Fuse(getArrayOfObj(floGlobals.appObjects.rmTimes.articles), { keys: ['categories'], threshold: 0, useExtendedSearch: true })
const searchResult = fuse.search(categories.join('|')).map(v => v.item).filter(v => v.uid !== articleID) const searchResult = fuse.search(categories.join('|')).map(v => v.item).filter(v => v.uid !== articleID)
@ -1418,7 +1438,7 @@
// const allImages = await compactIDB.readAllData('images') // const allImages = await compactIDB.readAllData('images')
if (floGlobals.appObjects.rmTimes.articleWriters.hasOwnProperty(params.id)) { if (floGlobals.appObjects.rmTimes.articleWriters.hasOwnProperty(params.id)) {
const { name, bio } = floGlobals.appObjects.rmTimes.articleWriters[params.id] const { name, bio } = floGlobals.appObjects.rmTimes.articleWriters[params.id]
getRef('writer_initials').textContent = name[0] getRef('writer_initials').textContent = name.split(' ').map(v => v.charAt(0)).join('')
getRef('writer_name').textContent = name getRef('writer_name').textContent = name
getRef('writer_bio').textContent = bio getRef('writer_bio').textContent = bio
} else { } else {
@ -1492,6 +1512,10 @@
title: 'Fiction', title: 'Fiction',
icon: `<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><g/><g><path d="M12,3c-0.46,0-0.93,0.04-1.4,0.14C7.84,3.67,5.64,5.9,5.12,8.66c-0.48,2.61,0.48,5.01,2.22,6.56 C7.77,15.6,8,16.13,8,16.69V19c0,1.1,0.9,2,2,2h0.28c0.35,0.6,0.98,1,1.72,1s1.38-0.4,1.72-1H14c1.1,0,2-0.9,2-2v-2.31 c0-0.55,0.22-1.09,0.64-1.46C18.09,13.95,19,12.08,19,10C19,6.13,15.87,3,12,3z M14,17h-4v-1h4V17z M10,19v-1h4v1H10z M15.31,13.74c-0.09,0.08-0.16,0.18-0.24,0.26H8.92c-0.08-0.09-0.15-0.19-0.24-0.27c-1.32-1.18-1.91-2.94-1.59-4.7 c0.36-1.94,1.96-3.55,3.89-3.93C11.32,5.03,11.66,5,12,5c2.76,0,5,2.24,5,5C17,11.43,16.39,12.79,15.31,13.74z"/></g><g><rect height="3" width="1" x="11.5" y="11"/><rect height="3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.0312 10.8536)" width="1" x="10.59" y="8.79"/><rect height="3" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 14.7678 26.7028)" width="1" x="12.41" y="8.79"/></g></g></svg>` icon: `<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><g/><g><path d="M12,3c-0.46,0-0.93,0.04-1.4,0.14C7.84,3.67,5.64,5.9,5.12,8.66c-0.48,2.61,0.48,5.01,2.22,6.56 C7.77,15.6,8,16.13,8,16.69V19c0,1.1,0.9,2,2,2h0.28c0.35,0.6,0.98,1,1.72,1s1.38-0.4,1.72-1H14c1.1,0,2-0.9,2-2v-2.31 c0-0.55,0.22-1.09,0.64-1.46C18.09,13.95,19,12.08,19,10C19,6.13,15.87,3,12,3z M14,17h-4v-1h4V17z M10,19v-1h4v1H10z M15.31,13.74c-0.09,0.08-0.16,0.18-0.24,0.26H8.92c-0.08-0.09-0.15-0.19-0.24-0.27c-1.32-1.18-1.91-2.94-1.59-4.7 c0.36-1.94,1.96-3.55,3.89-3.93C11.32,5.03,11.66,5,12,5c2.76,0,5,2.24,5,5C17,11.43,16.39,12.79,15.31,13.74z"/></g><g><rect height="3" width="1" x="11.5" y="11"/><rect height="3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.0312 10.8536)" width="1" x="10.59" y="8.79"/><rect height="3" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 14.7678 26.7028)" width="1" x="12.41" y="8.79"/></g></g></svg>`
}, },
{
title: 'Film',
icon: `<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="M5.76 10H20v8H4V6.47M22 4h-4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4z"/></svg>`
},
{ {
title: 'History', title: 'History',
icon: `<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="M6.5 10h-2v7h2v-7zm6 0h-2v7h2v-7zm8.5 9H2v2h19v-2zm-2.5-9h-2v7h2v-7zm-7-6.74L16.71 6H6.29l5.21-2.74m0-2.26L2 6v2h19V6l-9.5-5z"/></svg>` icon: `<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="M6.5 10h-2v7h2v-7zm6 0h-2v7h2v-7zm8.5 9H2v2h19v-2zm-2.5-9h-2v7h2v-7zm-7-6.74L16.71 6H6.29l5.21-2.74m0-2.26L2 6v2h19V6l-9.5-5z"/></svg>`