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

Testing adding hero images to articles

Browse Source
This commit is contained in:
sairaj mote 2022-02-04 16:57:00 +05:30
parent 8030e4eb6e
commit fd674e2cc4
4 changed files with 78 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
css/main.css
View File

@ -173,6 +173,13 @@ ul {
list-style: none;
}
img {
border-radius: 0.5rem;
-o-object-fit: cover;
object-fit: cover;
width: 100%;
}
.overflow-ellipsis {
width: 100%;
overflow: hidden;
@ -704,22 +711,34 @@ theme-toggle {
}
#trending_article_container {
gap: 3rem 2rem;
counter-reset: trending;
margin-bottom: 1.5rem;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.trending-article {
counter-increment: trending;
grid-template-columns: auto 1fr;
gap: 0.5rem 1.5rem;
}
.trending-article::before {
.trending-article a:first-of-type {
position: relative;
overflow: hidden;
}
.trending-article a:first-of-type::before {
color: white;
position: absolute;
content: counter(trending);
grid-column: 1/2;
grid-row: 1/3;
font-size: 2.5em;
font-weight: 700;
opacity: 0.3;
line-height: 1;
margin: 1rem;
z-index: 1;
text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
}
.trending-article img {
height: 12rem;
margin-bottom: 0.5rem;
}
#explore {
@ -791,6 +810,10 @@ theme-toggle {
grid-template-columns: minmax(0, 1fr);
}
#article_image {
margin-top: 1.5rem;
}
#article_summary:not(:empty) {
margin-bottom: 0.5rem;
}
@ -1117,6 +1140,7 @@ theme-toggle {
}
#main_page {
gap: 2rem 4vw;
padding: 1rem 8vw;
grid-template-rows: auto 1fr;
grid-template-columns: 2fr 1fr;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

37
css/main.scss
View File

@ -164,6 +164,11 @@ sm-button {
ul {
list-style: none;
}
img {
border-radius: 0.5rem;
object-fit: cover;
width: 100%;
}
.overflow-ellipsis {
width: 100%;
@ -668,20 +673,32 @@ theme-toggle {
}
#trending_article_container {
gap: 3rem 2rem;
counter-reset: trending;
margin-bottom: 1.5rem;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.trending-article {
counter-increment: trending;
grid-template-columns: auto 1fr;
gap: 0.5rem 1.5rem;
&::before {
content: counter(trending);
grid-column: 1/2;
grid-row: 1/3;
font-size: 2.5em;
font-weight: 700;
opacity: 0.3;
a:first-of-type {
position: relative;
overflow: hidden;
&::before {
color: white;
position: absolute;
content: counter(trending);
font-size: 2.5em;
font-weight: 700;
line-height: 1;
margin: 1rem;
z-index: 1;
text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
}
}
img {
height: 12rem;
margin-bottom: 0.5rem;
}
}
@ -751,6 +768,9 @@ theme-toggle {
gap: 0.5rem;
grid-template-columns: minmax(0, 1fr);
}
#article_image {
margin-top: 1.5rem;
}
#article_summary:not(:empty) {
margin-bottom: 0.5rem;
}
@ -1057,6 +1077,7 @@ theme-toggle {
padding: 1rem 1.5rem;
}
#main_page {
gap: 2rem 4vw;
padding: 1rem 8vw;
grid-template-rows: auto 1fr;
grid-template-columns: 2fr 1fr;

26
index.html
View File

@ -158,7 +158,7 @@
</svg>
<h5>Trending</h5>
</div>
<div id="trending_article_container" class="grid gap-2"></div>
<div id="trending_article_container" class="grid"></div>
</section>
<section id="lastest_articles_section" class="flex direction-column gap-1-5">
<div class="flex align-center space-between">
@ -241,6 +241,7 @@
<time id="published_time"></time>
<span class="bullet-point"></span><span id="reading_time" style="white-space: nowrap;"></span>
</div>
<img id="article_image" src="" alt="" loading="lazy">
</header>
<details id="article_map_accordion" class="hide-on-desktop">
<summary class="space-between">
@ -437,6 +438,10 @@
<h5>Select category</h5>
<sm-select id="edit_category"></sm-select>
</div>
<div class="grid gap-0-5">
<h5>Hero image URL</h5>
<sm-input id="edit_image" type="url"></sm-input>
</div>
<div class="grid gap-0-5">
<h5>Summary</h5>
<sm-textarea id="edit_summary" rows="4"></sm-textarea>
@ -533,6 +538,7 @@
<template id="trending_article_template">
<div class="trending-article grid gap-0-5">
<a class="article-card--highlight grid gap-0-5" href="" style="color: inherit">
<img class="trending-article__image" src="" alt="" loading="lazy">
<h3 class="trending-article__title"></h3>
<p class="trending-article__summary"></p>
</a>
@ -546,6 +552,7 @@
<template id="article_card_template">
<li class="article-card grid" draggable="true">
<a href="" class="grid article-link">
<img class="article-card__image" src="" alt="" loading='lazy'>
<h4 class="article-card__title"></h4>
</a>
<div class="flex align-center" style="margin-top: 0.3rem;">
@ -1086,22 +1093,24 @@
const relativeTime = new RelativeTime({ style: 'narrow' });
const render = {
articleCard(details) {
const { uid: articleID, category, title, readTime, published } = details
const { uid: articleID, category, title, readTime, published, heroImage } = details
const clone = getRef('article_card_template').content.cloneNode(true).firstElementChild
clone.querySelector('.article-card__category').textContent = category
clone.querySelector('.article-card__category').href = `#/explore?type=category&query=${category}`
clone.querySelector('.article-link').href = `#/article?articleID=${articleID}`
clone.querySelector('.article-card__image').src = heroImage
clone.querySelector('.article-card__title').textContent = title
clone.querySelector('.article-card__read-time').textContent = `${readTime} Min read`
clone.querySelector('.article-card__published').textContent = relativeTime.from(published)
return clone
},
trendingArticleCard(details) {
const { uid: articleID, category, title, readTime, published, summary } = details
const { uid: articleID, category, title, readTime, published, summary, heroImage } = details
const clone = getRef('trending_article_template').content.cloneNode(true).firstElementChild
clone.querySelector('.article-card__category').textContent = category
clone.querySelector('.article-card__category').href = `#/explore?type=category&query=${category}`
clone.querySelector('.article-card--highlight').href = `#/article?articleID=${articleID}`
clone.querySelector('.trending-article__image').src = heroImage
clone.querySelector('.trending-article__title').textContent = title
clone.querySelector('.trending-article__read-time').textContent = `${readTime} Min read`
clone.querySelector('.trending-article__published').textContent = relativeTime.from(published)
@ -1109,7 +1118,6 @@
return clone
},
requestCard(details) {
console.log(details)
const { senderID, message: { articleID, category, title }, time, vectorClock } = details
const { publishedVc, rejectedVc, approvedID } = floGlobals.appObjects.adminData
const shouldRender = approvedID.hasOwnProperty(senderID) && !publishedVc.hasOwnProperty(vectorClock) && !rejectedVc.hasOwnProperty(vectorClock)
@ -1172,7 +1180,8 @@
async article(articleID, firstLoad = true) {
const frag = document.createDocumentFragment()
const allArticles = await compactIDB.readData('appObjects', 'articlesContent')
const { title, published, readTime, contributors, updated, summary } = floGlobals.appObjects.rmTimes.articles[articleID]
const { title, published, readTime, contributors, updated, summary, heroImage } = floGlobals.appObjects.rmTimes.articles[articleID]
getRef('article_image').src = heroImage
getRef('article_title').textContent = title
getRef('article_summary').textContent = summary
getRef('published_time').textContent = `${getFormattedTime(published, 'date-only')}${updated ? `, Updated ${relativeTime.from(updated)}` : ''}`
@ -1849,8 +1858,9 @@
}
function setArticleMetaData(details) {
const { category, title, tags, summary, published, contributors } = details
const { category, title, tags, summary, published, contributors, heroImage } = details
getRef('edit_title').value = title;
getRef('edit_image').value = heroImage || '';
getRef('edit_summary').value = summary || '';
getRef('edit_category').value = category || '';
getRef('edit_contributors').value = contributors || [];
@ -1862,6 +1872,7 @@
return {
title: getRef('edit_title').value.trim(),
category: getRef('edit_category').value,
heroImage: getRef('edit_image').value,
summary: getRef('edit_summary').value.trim(),
published: new Date(getRef('edit_published').value).getTime(),
contributors: getRef('edit_contributors').value,
@ -1886,11 +1897,12 @@
function updateArticleMetaData(articleID) {
getConfirmation('Update article meta data?').then(res => {
if (res) {
const { title, category, summary, published, tags, contributors } = getArticleMetaData()
const { title, category, summary, published, tags, contributors, heroImage } = getArticleMetaData()
floGlobals.appObjects.rmTimes.articles[articleID].category = category
floGlobals.appObjects.rmTimes.articles[articleID].title = title
floGlobals.appObjects.rmTimes.articles[articleID].tags = tags
floGlobals.appObjects.rmTimes.articles[articleID].summary = summary
floGlobals.appObjects.rmTimes.articles[articleID].heroImage = heroImage
floGlobals.appObjects.rmTimes.articles[articleID].contributors = contributors
Promise.all([
floCloudAPI.updateObjectData('rmTimes'),