did better homepage design
This commit is contained in:
sairaj mote
parent
434e7cf86b
commit
12473767ce
92
css/main.css
92
css/main.css
@ -166,10 +166,6 @@ ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.overflow-ellipsis {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
@ -512,64 +508,14 @@ sm-copy {
|
||||
grid-column: 2/3;
|
||||
}
|
||||
|
||||
#landing {
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
#landing header {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
#landing > section {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
#landing h1 {
|
||||
margin-top: -2ch;
|
||||
font-size: clamp(2rem, 5vw, 5rem);
|
||||
}
|
||||
#landing p {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#sign_in,
|
||||
#sign_up {
|
||||
grid-template-rows: auto 1fr;
|
||||
align-items: center;
|
||||
}
|
||||
#sign_in section,
|
||||
#sign_up section {
|
||||
margin-top: -6rem;
|
||||
justify-self: center;
|
||||
width: min(24rem, 100%);
|
||||
}
|
||||
#sign_in sm-form,
|
||||
#sign_up sm-form {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
#sign_in header,
|
||||
#sign_up header {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
#sign_up .h2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
#sign_up .card {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
#sign_up h5 {
|
||||
font-weight: 500;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
#sign_up .warning {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
#loading {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#loader_container {
|
||||
position: relative;
|
||||
height: 3rem;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1.5rem;
|
||||
@ -625,9 +571,6 @@ main {
|
||||
}
|
||||
|
||||
#main_header {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
@ -682,8 +625,7 @@ theme-toggle {
|
||||
|
||||
#main_page {
|
||||
display: grid;
|
||||
padding: 1rem;
|
||||
padding-top: 0;
|
||||
padding: 1.5rem;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@ -693,7 +635,6 @@ theme-toggle {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
#latest_articles_list,
|
||||
#query_results_list {
|
||||
margin: 1rem 0;
|
||||
gap: 1.6rem;
|
||||
@ -725,6 +666,25 @@ theme-toggle {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
#trending_article_container {
|
||||
counter-reset: trending;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.trending-article {
|
||||
counter-increment: trending;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.5rem 1.5rem;
|
||||
}
|
||||
.trending-article::before {
|
||||
content: counter(trending);
|
||||
grid-column: 1/2;
|
||||
grid-row: 1/3;
|
||||
font-size: 2.5em;
|
||||
font-weight: 700;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
#explore {
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
@ -906,6 +866,10 @@ footer {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 40rem) {
|
||||
.hide-on-mobile {
|
||||
display: none;
|
||||
@ -965,9 +929,9 @@ footer {
|
||||
}
|
||||
|
||||
#main_page {
|
||||
padding: 1rem 6vw;
|
||||
padding: 1rem 8vw;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: 1fr 22rem;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
}
|
||||
|
||||
#main_page__header {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -159,10 +159,6 @@ ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.overflow-ellipsis {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
@ -489,60 +485,13 @@ sm-copy {
|
||||
grid-column: 2/3;
|
||||
}
|
||||
}
|
||||
#landing {
|
||||
grid-template-rows: auto 1fr;
|
||||
header {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
& > section {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
h1 {
|
||||
margin-top: -2ch;
|
||||
font-size: clamp(2rem, 5vw, 5rem);
|
||||
}
|
||||
p {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#sign_in,
|
||||
#sign_up {
|
||||
grid-template-rows: auto 1fr;
|
||||
align-items: center;
|
||||
section {
|
||||
margin-top: -6rem;
|
||||
justify-self: center;
|
||||
width: min(24rem, 100%);
|
||||
}
|
||||
sm-form {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
header {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
}
|
||||
#sign_up {
|
||||
.h2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.card {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
h5 {
|
||||
font-weight: 500;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.warning {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
#loading {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
#loader_container {
|
||||
position: relative;
|
||||
height: 3rem;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1.5rem;
|
||||
@ -593,8 +542,6 @@ main {
|
||||
}
|
||||
|
||||
#main_header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
@ -644,12 +591,8 @@ theme-toggle {
|
||||
|
||||
#main_page {
|
||||
display: grid;
|
||||
padding: 1rem;
|
||||
padding-top: 0;
|
||||
padding: 1.5rem;
|
||||
gap: 1.5rem;
|
||||
// & > * {
|
||||
// border: solid;
|
||||
// }
|
||||
}
|
||||
|
||||
#news_categories_list {
|
||||
@ -660,7 +603,6 @@ theme-toggle {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
#latest_articles_list,
|
||||
#query_results_list {
|
||||
margin: 1rem 0;
|
||||
gap: 1.6rem;
|
||||
@ -691,6 +633,24 @@ theme-toggle {
|
||||
}
|
||||
}
|
||||
|
||||
#trending_article_container {
|
||||
counter-reset: trending;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
#explore {
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
@ -871,6 +831,10 @@ footer {
|
||||
}
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 40rem) {
|
||||
.hide-on-mobile {
|
||||
display: none;
|
||||
@ -922,9 +886,9 @@ footer {
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
#main_page {
|
||||
padding: 1rem 6vw;
|
||||
padding: 1rem 8vw;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: 1fr 22rem;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
}
|
||||
#main_page__header {
|
||||
grid-area: 1/1/2/-1;
|
||||
|
||||
172
index.html
172
index.html
@ -59,38 +59,40 @@
|
||||
<sm-button variant="no-outline" class="submit-btn">OK</sm-button>
|
||||
</div>
|
||||
</sm-popup>
|
||||
<article id="loading" class="page page-layout">
|
||||
<div id="loader_container">
|
||||
<svg id="loader" viewBox="0 0 112 256" xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<rect x="33" width="39" height="8" rx="2" />
|
||||
<rect x="33" y="11" width="79" height="13" rx="2" />
|
||||
<rect x="33" y="29" width="79" height="20" rx="2" />
|
||||
<rect width="27" height="27" rx="2" />
|
||||
</g>
|
||||
<g>
|
||||
<rect x="33" y="69" width="39" height="8" rx="2" />
|
||||
<rect x="33" y="80" width="79" height="13" rx="2" />
|
||||
<rect x="33" y="98" width="79" height="20" rx="2" />
|
||||
<rect y="69" width="27" height="27" rx="2" />
|
||||
</g>
|
||||
<g>
|
||||
<rect x="33" y="138" width="39" height="8" rx="2" />
|
||||
<rect x="33" y="149" width="79" height="13" rx="2" />
|
||||
<rect x="33" y="167" width="79" height="20" rx="2" />
|
||||
<rect y="138" width="27" height="27" rx="2" />
|
||||
</g>
|
||||
<g>
|
||||
<rect x="33" y="207" width="39" height="8" rx="2" />
|
||||
<rect x="33" y="218" width="79" height="13" rx="2" />
|
||||
<rect x="33" y="236" width="79" height="20" rx="2" />
|
||||
<rect y="207" width="27" height="27" rx="2" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<h4>Loading RM Times</h4>
|
||||
<article id="loading" class="page">
|
||||
<section>
|
||||
<div id="loader_container">
|
||||
<svg id="loader" viewBox="0 0 112 256" xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<rect x="33" width="39" height="8" rx="2" />
|
||||
<rect x="33" y="11" width="79" height="13" rx="2" />
|
||||
<rect x="33" y="29" width="79" height="20" rx="2" />
|
||||
<rect width="27" height="27" rx="2" />
|
||||
</g>
|
||||
<g>
|
||||
<rect x="33" y="69" width="39" height="8" rx="2" />
|
||||
<rect x="33" y="80" width="79" height="13" rx="2" />
|
||||
<rect x="33" y="98" width="79" height="20" rx="2" />
|
||||
<rect y="69" width="27" height="27" rx="2" />
|
||||
</g>
|
||||
<g>
|
||||
<rect x="33" y="138" width="39" height="8" rx="2" />
|
||||
<rect x="33" y="149" width="79" height="13" rx="2" />
|
||||
<rect x="33" y="167" width="79" height="20" rx="2" />
|
||||
<rect y="138" width="27" height="27" rx="2" />
|
||||
</g>
|
||||
<g>
|
||||
<rect x="33" y="207" width="39" height="8" rx="2" />
|
||||
<rect x="33" y="218" width="79" height="13" rx="2" />
|
||||
<rect x="33" y="236" width="79" height="20" rx="2" />
|
||||
<rect y="207" width="27" height="27" rx="2" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<h4>Loading RM Times</h4>
|
||||
</section>
|
||||
</article>
|
||||
<main>
|
||||
<main class="hide">
|
||||
<header id="main_header">
|
||||
<button id="search_button" class="icon-only" title="Search for articles" onclick="toggleSearch()">
|
||||
<svg class="icon" slot="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||
@ -147,16 +149,31 @@
|
||||
<section id="main_page__header" class="flex align-center">
|
||||
<div id="news_categories_list" class="flex"></div>
|
||||
</section>
|
||||
<section class="grid gap-1-5">
|
||||
<h5>Trending</h5>
|
||||
<div id="trending_article_container"></div>
|
||||
</section>
|
||||
<section id="lastest_articles_section">
|
||||
<div class="flex align-center space-between">
|
||||
<h5>Latest</h5>
|
||||
<a href="">See all</a>
|
||||
<section class="flex direction-column gap-1-5">
|
||||
<div class="flex align-center">
|
||||
<svg class="icon button__icon--left" 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 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6z" />
|
||||
</svg>
|
||||
<h5>Trending</h5>
|
||||
</div>
|
||||
<ul id="latest_articles_list" class="grid"></ul>
|
||||
<div id="trending_article_container" class="grid gap-2"></div>
|
||||
</section>
|
||||
<section id="lastest_articles_section" class="flex direction-column gap-1-5">
|
||||
<div class="flex align-center space-between">
|
||||
<div class="flex">
|
||||
<svg class="icon button__icon--left" 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="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z" />
|
||||
</svg>
|
||||
<h5>Latest</h5>
|
||||
</div>
|
||||
<a class="button" href="#/explore?type=recent">See all</a>
|
||||
</div>
|
||||
<ul id="latest_articles_list" class="grid gap-2"></ul>
|
||||
</section>
|
||||
</article>
|
||||
<article id="explore" class="page page-layout hide">
|
||||
@ -397,6 +414,19 @@
|
||||
</div>
|
||||
</section>
|
||||
</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>
|
||||
</template>
|
||||
<template id="article_card_template">
|
||||
<li class="article-card grid">
|
||||
<a href="" class="article-card__category"></a>
|
||||
@ -761,6 +791,9 @@
|
||||
articleTitleObserver.disconnect()
|
||||
}
|
||||
}
|
||||
if (pageId !== 'loading') {
|
||||
document.querySelector('main').classList.remove('hide')
|
||||
}
|
||||
document.querySelectorAll('.page').forEach(page => page.classList.add('hide'))
|
||||
getRef(targetPage).classList.remove('hide')
|
||||
if (pagesData.lastPage !== pageId) {
|
||||
@ -871,6 +904,18 @@
|
||||
clone.querySelector('.article-card__published').textContent = relativeTime.from(published)
|
||||
return clone
|
||||
},
|
||||
trendingArticleCard(details) {
|
||||
const { uid: articleID, category, title, readTime, published, summary } = 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__title').textContent = title
|
||||
clone.querySelector('.trending-article__read-time').textContent = `${readTime} Min read`
|
||||
clone.querySelector('.trending-article__published').textContent = relativeTime.from(published)
|
||||
clone.querySelector('.trending-article__summary').textContent = summary
|
||||
return clone
|
||||
},
|
||||
requestCard(details) {
|
||||
const { message: { articleID, category, title }, time, vectorClock } = details
|
||||
if (!floGlobals.appObjects.publishedVc.hasOwnProperty(vectorClock)) {
|
||||
@ -924,33 +969,17 @@
|
||||
})))
|
||||
getRef('news_categories_list').innerHTML = ''
|
||||
getRef('news_categories_list').append(frag)
|
||||
// render latest articles
|
||||
const arrOfArticles = getArrayOfObj(floGlobals.appObjects.articles)
|
||||
const sortedArticles = arrOfArticles.sort((a, b) => b.published - a.published)
|
||||
sortedArticles.slice(0, 4).forEach(articleDetail => frag.append(render.articleCard(articleDetail)))
|
||||
// Render trending article card
|
||||
let sortedByVotes = arrOfArticles.sort((a, b) => b.votes - a.votes)
|
||||
sortedByVotes.slice(0, 3).forEach(articleDetail => frag.append(render.trendingArticleCard(articleDetail)))
|
||||
getRef('trending_article_container').innerHTML = ''
|
||||
getRef('trending_article_container').append(frag)
|
||||
// render latest articles
|
||||
const sortedArticles = sortedByVotes.slice(3, 6).sort((a, b) => b.published - a.published)
|
||||
sortedArticles.forEach(articleDetail => frag.append(render.articleCard(articleDetail)))
|
||||
getRef('latest_articles_list').innerHTML = ''
|
||||
getRef('latest_articles_list').append(frag)
|
||||
// Render trending article card
|
||||
let highestRatedArticle = arrOfArticles[0]
|
||||
for (let i = 1; i < arrOfArticles.length; i++) {
|
||||
if (highestRatedArticle.votes < arrOfArticles[i].votes) {
|
||||
highestRatedArticle = arrOfArticles[i]
|
||||
}
|
||||
}
|
||||
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 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 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>
|
||||
`
|
||||
}
|
||||
|
||||
const openedArticles = {}
|
||||
@ -997,11 +1026,16 @@
|
||||
function renderExplorePage(params) {
|
||||
const { type, query } = params
|
||||
const frag = document.createDocumentFragment()
|
||||
const options = (type === 'category') ? { keys: ['category'], threshold: 0 } : { keys: ['title', 'category', 'tags'], threshold: 0.3 }
|
||||
const fuse = new Fuse(getArrayOfObj(floGlobals.appObjects.articles).sort((a, b) => b.published - a.published), options)
|
||||
const searchResult = fuse.search(query).map(v => v.item)
|
||||
searchResult.forEach(articleDetail => frag.append(render.articleCard(articleDetail)))
|
||||
getRef('explore_heading').textContent = `${type === 'category' ? 'Explore' : 'Related to'} ${query}`
|
||||
const sortedByTime = getArrayOfObj(floGlobals.appObjects.articles).sort((a, b) => b.published - a.published)
|
||||
if (type === 'recent') {
|
||||
sortedByTime.forEach(articleDetail => frag.append(render.articleCard(articleDetail)))
|
||||
} else {
|
||||
const options = (type === 'category') ? { keys: ['category'], threshold: 0 } : { keys: ['title', 'category', 'tags'], threshold: 0.3 }
|
||||
const fuse = new Fuse(sortedByTime, options)
|
||||
const searchResult = fuse.search(query).map(v => v.item)
|
||||
searchResult.forEach(articleDetail => frag.append(render.articleCard(articleDetail)))
|
||||
getRef('explore_heading').textContent = `${type === 'category' ? 'Explore' : 'Related to'} ${query}`
|
||||
}
|
||||
getRef('query_results_list').innerHTML = ''
|
||||
getRef('query_results_list').append(frag)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user