UI tweaks
This commit is contained in:
sairaj mote
parent
1db96bb362
commit
5848e22bf5
30
css/main.css
30
css/main.css
@ -12,7 +12,6 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -669,19 +668,13 @@ theme-toggle {
|
||||
.category .icon {
|
||||
margin-bottom: 1rem;
|
||||
transition: transform 0.3s;
|
||||
transform-origin: top;
|
||||
}
|
||||
.category:hover .icon {
|
||||
transform: scale(1.3);
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
|
||||
#query_results_list,
|
||||
#written_article_list {
|
||||
margin: 1rem 0;
|
||||
padding-bottom: 2rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.article-card {
|
||||
gap: 0.3rem;
|
||||
}
|
||||
@ -709,10 +702,11 @@ theme-toggle {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
#trending_article_container {
|
||||
#trending_article_container,
|
||||
#query_results_list,
|
||||
#written_article_list {
|
||||
gap: 3rem 2rem;
|
||||
counter-reset: trending;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 3rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
|
||||
}
|
||||
|
||||
@ -724,6 +718,12 @@ theme-toggle {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.trending-article p {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.trending-article img {
|
||||
height: 12rem;
|
||||
margin-bottom: 0.5rem;
|
||||
@ -1124,7 +1124,7 @@ theme-toggle {
|
||||
}
|
||||
|
||||
.page-layout {
|
||||
grid-template-columns: 1fr 80vw 1fr;
|
||||
grid-template-columns: 1fr 90vw 1fr;
|
||||
}
|
||||
|
||||
.hide-on-desktop {
|
||||
@ -1141,7 +1141,7 @@ theme-toggle {
|
||||
|
||||
#main_page {
|
||||
gap: 2rem 4vw;
|
||||
padding: 1rem 8vw;
|
||||
padding: 1rem 6vw;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
}
|
||||
@ -1223,10 +1223,10 @@ theme-toggle {
|
||||
}
|
||||
|
||||
#edit_article_meta_popup {
|
||||
--width: 48rem;
|
||||
--width: min(56rem, calc(100vw - 8rem));
|
||||
}
|
||||
#edit_article_meta_popup > section {
|
||||
grid-template-columns: 1fr 1.5fr;
|
||||
grid-template-columns: 1fr 1.3fr;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -12,7 +12,6 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -629,6 +628,7 @@ theme-toggle {
|
||||
.icon {
|
||||
margin-bottom: 1rem;
|
||||
transition: transform 0.3s;
|
||||
transform-origin: top;
|
||||
}
|
||||
&:hover {
|
||||
.icon {
|
||||
@ -638,12 +638,6 @@ theme-toggle {
|
||||
}
|
||||
}
|
||||
|
||||
#query_results_list,
|
||||
#written_article_list {
|
||||
margin: 1rem 0;
|
||||
padding-bottom: 2rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
.article-card {
|
||||
gap: 0.3rem;
|
||||
a {
|
||||
@ -671,10 +665,11 @@ theme-toggle {
|
||||
}
|
||||
}
|
||||
|
||||
#trending_article_container {
|
||||
#trending_article_container,
|
||||
#query_results_list,
|
||||
#written_article_list {
|
||||
gap: 3rem 2rem;
|
||||
counter-reset: trending;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 3rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
|
||||
}
|
||||
.trending-article {
|
||||
@ -684,6 +679,12 @@ theme-toggle {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
p {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
height: 12rem;
|
||||
margin-bottom: 0.5rem;
|
||||
@ -1062,7 +1063,7 @@ theme-toggle {
|
||||
--width: 24rem;
|
||||
}
|
||||
.page-layout {
|
||||
grid-template-columns: 1fr 80vw 1fr;
|
||||
grid-template-columns: 1fr 90vw 1fr;
|
||||
}
|
||||
.hide-on-desktop {
|
||||
display: none;
|
||||
@ -1075,7 +1076,7 @@ theme-toggle {
|
||||
}
|
||||
#main_page {
|
||||
gap: 2rem 4vw;
|
||||
padding: 1rem 8vw;
|
||||
padding: 1rem 6vw;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
}
|
||||
@ -1152,9 +1153,9 @@ theme-toggle {
|
||||
--width: 60ch;
|
||||
}
|
||||
#edit_article_meta_popup {
|
||||
--width: 48rem;
|
||||
--width: min(56rem, calc(100vw - 8rem));
|
||||
& > section {
|
||||
grid-template-columns: 1fr 1.5fr;
|
||||
grid-template-columns: 1fr 1.3fr;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
47
index.html
47
index.html
@ -197,7 +197,7 @@
|
||||
<sm-copy id="writer_id"></sm-copy>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<section class="grid gap-1-5 align-start">
|
||||
<h4>Articles contributed</h4>
|
||||
<div id="written_article_list" class="grid observe-empty-state"></div>
|
||||
<p class="empty-state">No articles written</p>
|
||||
@ -1166,11 +1166,11 @@
|
||||
const arrOfArticles = getArrayOfObj(floGlobals.appObjects.rmTimes.articles)
|
||||
// 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)))
|
||||
sortedByVotes.slice(0, 4).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).sort((a, b) => b.published - a.published)
|
||||
const sortedArticles = sortedByVotes.slice(4).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)
|
||||
@ -1238,12 +1238,12 @@
|
||||
const frag = document.createDocumentFragment()
|
||||
const sortedByTime = getArrayOfObj(floGlobals.appObjects.rmTimes.articles).sort((a, b) => b.published - a.published)
|
||||
if (type === 'recent') {
|
||||
sortedByTime.forEach(articleDetail => frag.append(render.articleCard(articleDetail)))
|
||||
sortedByTime.forEach(articleDetail => frag.append(render.trendingArticleCard(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)))
|
||||
searchResult.forEach(articleDetail => frag.append(render.trendingArticleCard(articleDetail)))
|
||||
getRef('explore_heading').textContent = `${type === 'category' ? 'Explore' : 'Related to'} ${query}`
|
||||
}
|
||||
getRef('query_results_list').innerHTML = ''
|
||||
@ -1266,7 +1266,7 @@
|
||||
const options = { keys: ['contributors'], threshold: 0 }
|
||||
const fuse = new Fuse(sortedByTime, options)
|
||||
const searchResult = fuse.search(params.id).map(v => v.item)
|
||||
searchResult.forEach(articleDetail => frag.append(render.articleCard(articleDetail)))
|
||||
searchResult.forEach(articleDetail => frag.append(render.trendingArticleCard(articleDetail)))
|
||||
getRef('written_article_list').innerHTML = ''
|
||||
getRef('written_article_list').append(frag)
|
||||
},
|
||||
@ -1294,21 +1294,34 @@
|
||||
return arr
|
||||
}
|
||||
|
||||
// implement image resizing
|
||||
function resizeImage(img, maxWidth, maxHeight) {
|
||||
const canvas = document.createElement('canvas')
|
||||
const ctx = canvas.getContext('2d')
|
||||
const ratio = 1
|
||||
canvas.width = img.width * ratio
|
||||
canvas.height = img.height * ratio
|
||||
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
|
||||
const dataURL = canvas.toDataURL('image/jpeg', 0.5)
|
||||
return dataURL
|
||||
}
|
||||
|
||||
|
||||
const categories = [
|
||||
{
|
||||
title: 'Art & Culture',
|
||||
title: 'Culture',
|
||||
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><g><path d="M12,22C6.49,22,2,17.51,2,12S6.49,2,12,2s10,4.04,10,9c0,3.31-2.69,6-6,6h-1.77c-0.28,0-0.5,0.22-0.5,0.5 c0,0.12,0.05,0.23,0.13,0.33c0.41,0.47,0.64,1.06,0.64,1.67C14.5,20.88,13.38,22,12,22z M12,4c-4.41,0-8,3.59-8,8s3.59,8,8,8 c0.28,0,0.5-0.22,0.5-0.5c0-0.16-0.08-0.28-0.14-0.35c-0.41-0.46-0.63-1.05-0.63-1.65c0-1.38,1.12-2.5,2.5-2.5H16 c2.21,0,4-1.79,4-4C20,7.14,16.41,4,12,4z"/><circle cx="6.5" cy="11.5" r="1.5"/><circle cx="9.5" cy="7.5" r="1.5"/><circle cx="14.5" cy="7.5" r="1.5"/><circle cx="17.5" cy="11.5" r="1.5"/></g></g></g></g></svg>`
|
||||
},
|
||||
{
|
||||
title: 'People & Biography',
|
||||
title: 'People',
|
||||
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" x="0"/></g><g><path d="M22.47,5.2C22,4.96,21.51,4.76,21,4.59v12.03C19.86,16.21,18.69,16,17.5,16c-1.9,0-3.78,0.54-5.5,1.58V5.48 C10.38,4.55,8.51,4,6.5,4C4.71,4,3.02,4.44,1.53,5.2C1.2,5.36,1,5.71,1,6.08v12.08c0,0.58,0.47,0.99,1,0.99 c0.16,0,0.32-0.04,0.48-0.12C3.69,18.4,5.05,18,6.5,18c2.07,0,3.98,0.82,5.5,2c1.52-1.18,3.43-2,5.5-2c1.45,0,2.81,0.4,4.02,1.04 c0.16,0.08,0.32,0.12,0.48,0.12c0.52,0,1-0.41,1-0.99V6.08C23,5.71,22.8,5.36,22.47,5.2z M10,16.62C8.86,16.21,7.69,16,6.5,16 c-1.19,0-2.36,0.21-3.5,0.62V6.71C4.11,6.24,5.28,6,6.5,6C7.7,6,8.89,6.25,10,6.72V16.62z M19,0.5l-5,5V15l5-4.5V0.5z"/></g></svg>`
|
||||
},
|
||||
{
|
||||
title: 'Business & Economy',
|
||||
title: 'Economics',
|
||||
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="M20 7h-4V5l-2-2h-4L8 5v2H4c-1.1 0-2 .9-2 2v5c0 .75.4 1.38 1 1.73V19c0 1.11.89 2 2 2h14c1.11 0 2-.89 2-2v-3.28c.59-.35 1-.99 1-1.72V9c0-1.1-.9-2-2-2zM10 5h4v2h-4V5zM4 9h16v5h-5v-3H9v3H4V9zm9 6h-2v-2h2v2zm6 4H5v-3h4v1h6v-1h4v3z"/></svg>`
|
||||
},
|
||||
{
|
||||
title: 'Crypto & Blockchain',
|
||||
title: 'Crypto',
|
||||
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"><rect fill="none" height="24" width="24"/><path d="M22,11V3h-7v3H9V3H2v8h7V8h2v10h4v3h7v-8h-7v3h-2V8h2v3H22z M7,9H4V5h3V9z M17,15h3v4h-3V15z M17,5h3v4h-3V5z"/></svg>`
|
||||
},
|
||||
{
|
||||
@ -1320,13 +1333,21 @@
|
||||
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: 'History & Politics',
|
||||
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>`
|
||||
},
|
||||
{
|
||||
title: 'Science & Tech',
|
||||
title: 'Politics',
|
||||
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>`
|
||||
},
|
||||
{
|
||||
title: 'Science',
|
||||
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><path d="M19.93,8.35l-3.6,1.68L14,7.7V6.3l2.33-2.33l3.6,1.68c0.38,0.18,0.82,0.01,1-0.36c0.18-0.38,0.01-0.82-0.36-1l-3.92-1.83 c-0.38-0.18-0.83-0.1-1.13,0.2L13.78,4.4C13.6,4.16,13.32,4,13,4c-0.55,0-1,0.45-1,1v1H8.82C8.4,4.84,7.3,4,6,4C4.34,4,3,5.34,3,7 c0,1.1,0.6,2.05,1.48,2.58L7.08,18H6c-1.1,0-2,0.9-2,2v1h13v-1c0-1.1-0.9-2-2-2h-1.62L8.41,8.77C8.58,8.53,8.72,8.28,8.82,8H12v1 c0,0.55,0.45,1,1,1c0.32,0,0.6-0.16,0.78-0.4l1.74,1.74c0.3,0.3,0.75,0.38,1.13,0.2l3.92-1.83c0.38-0.18,0.54-0.62,0.36-1 C20.75,8.34,20.31,8.17,19.93,8.35z M6,8C5.45,8,5,7.55,5,7c0-0.55,0.45-1,1-1s1,0.45,1,1C7,7.55,6.55,8,6,8z M11.11,18H9.17 l-2.46-8h0.1L11.11,18z"/></g></svg>`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Tech',
|
||||
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><path d="M19.93,8.35l-3.6,1.68L14,7.7V6.3l2.33-2.33l3.6,1.68c0.38,0.18,0.82,0.01,1-0.36c0.18-0.38,0.01-0.82-0.36-1l-3.92-1.83 c-0.38-0.18-0.83-0.1-1.13,0.2L13.78,4.4C13.6,4.16,13.32,4,13,4c-0.55,0-1,0.45-1,1v1H8.82C8.4,4.84,7.3,4,6,4C4.34,4,3,5.34,3,7 c0,1.1,0.6,2.05,1.48,2.58L7.08,18H6c-1.1,0-2,0.9-2,2v1h13v-1c0-1.1-0.9-2-2-2h-1.62L8.41,8.77C8.58,8.53,8.72,8.28,8.82,8H12v1 c0,0.55,0.45,1,1,1c0.32,0,0.6-0.16,0.78-0.4l1.74,1.74c0.3,0.3,0.75,0.38,1.13,0.2l3.92-1.83c0.38-0.18,0.54-0.62,0.36-1 C20.75,8.34,20.31,8.17,19.93,8.35z M6,8C5.45,8,5,7.55,5,7c0-0.55,0.45-1,1-1s1,0.45,1,1C7,7.55,6.55,8,6,8z M11.11,18H9.17 l-2.46-8h0.1L11.11,18z"/></g></svg>`
|
||||
},
|
||||
]
|
||||
|
||||
const headingObserver = new IntersectionObserver(entries => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user