Added writer's bio page
This commit is contained in:
sairaj mote
parent
ff344299a8
commit
656b697fba
76
css/main.css
76
css/main.css
@ -641,7 +641,8 @@ theme-toggle {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#query_results_list {
|
||||
#query_results_list,
|
||||
#written_article_list {
|
||||
margin: 1rem 0;
|
||||
padding-bottom: 2rem;
|
||||
gap: 1.6rem;
|
||||
@ -696,9 +697,35 @@ theme-toggle {
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
#writer {
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
padding: 1.5rem;
|
||||
gap: 3rem;
|
||||
}
|
||||
#writer sm-copy {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
#writer_profile {
|
||||
display: flex;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-radius: 2rem;
|
||||
background-color: var(--accent-color);
|
||||
justify-content: center;
|
||||
}
|
||||
#writer_profile #writer_initials {
|
||||
align-self: center;
|
||||
font-weight: 700;
|
||||
font-size: 1.8rem;
|
||||
color: rgba(var(--background-color), 1);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#article {
|
||||
gap: 2rem 0;
|
||||
padding-bottom: 3rem;
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
@ -715,12 +742,22 @@ theme-toggle {
|
||||
}
|
||||
|
||||
.contributor {
|
||||
color: inherit;
|
||||
font-size: 0.8rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
border-radius: 0.3rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
}
|
||||
|
||||
#like_panel {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
justify-items: flex-start;
|
||||
}
|
||||
|
||||
.up-vote {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
@ -792,11 +829,6 @@ theme-toggle {
|
||||
background-color: var(--foreground-color);
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 3rem 1.5rem;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
#dashboard {
|
||||
height: -webkit-max-content;
|
||||
height: -moz-max-content;
|
||||
@ -993,6 +1025,17 @@ footer {
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
#writer {
|
||||
gap: 1.5rem 6vw;
|
||||
padding: 2rem 8vw;
|
||||
grid-template-columns: 20rem 1fr;
|
||||
}
|
||||
#writer > section:first-of-type {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 1.5rem;
|
||||
}
|
||||
|
||||
#preview_popup h1,
|
||||
#article h1 {
|
||||
font-size: 2.5rem;
|
||||
@ -1020,6 +1063,25 @@ footer {
|
||||
--width: 28rem;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 64rem) {
|
||||
.hide-on-medium {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 64rem) {
|
||||
#like_panel {
|
||||
margin: 1.5rem;
|
||||
width: 18vw;
|
||||
border-radius: 0.8rem;
|
||||
border: solid thin rgba(var(--text-color), 0.2);
|
||||
justify-content: flex-start;
|
||||
justify-items: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
#like_panel .up-vote {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
@media (any-hover: hover) {
|
||||
::-webkit-scrollbar {
|
||||
width: 0.5rem;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -606,7 +606,8 @@ theme-toggle {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#query_results_list {
|
||||
#query_results_list,
|
||||
#written_article_list {
|
||||
margin: 1rem 0;
|
||||
padding-bottom: 2rem;
|
||||
gap: 1.6rem;
|
||||
@ -659,9 +660,34 @@ theme-toggle {
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
#writer {
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
padding: 1.5rem;
|
||||
gap: 3rem;
|
||||
sm-copy {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
#writer_profile {
|
||||
display: flex;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-radius: 2rem;
|
||||
background-color: var(--accent-color);
|
||||
justify-content: center;
|
||||
#writer_initials {
|
||||
align-self: center;
|
||||
font-weight: 700;
|
||||
font-size: 1.8rem;
|
||||
color: rgba(var(--background-color), 1);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
#article {
|
||||
gap: 2rem 0;
|
||||
padding-bottom: 3rem;
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
@ -676,11 +702,20 @@ theme-toggle {
|
||||
margin: 0.5rem 0 1rem 0;
|
||||
}
|
||||
.contributor {
|
||||
color: inherit;
|
||||
font-size: 0.8rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
border-radius: 0.3rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
}
|
||||
#like_panel {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
justify-items: flex-start;
|
||||
}
|
||||
.up-vote {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
@ -760,11 +795,6 @@ theme-toggle {
|
||||
background-color: var(--foreground-color);
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 3rem 1.5rem;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
#dashboard {
|
||||
height: max-content;
|
||||
padding: 1.5rem 0;
|
||||
@ -945,6 +975,18 @@ footer {
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
#writer {
|
||||
gap: 1.5rem 6vw;
|
||||
padding: 2rem 8vw;
|
||||
grid-template-columns: 20rem 1fr;
|
||||
& > section {
|
||||
&:first-of-type {
|
||||
position: sticky;
|
||||
top: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#preview_popup,
|
||||
#article {
|
||||
h1 {
|
||||
@ -971,6 +1013,25 @@ footer {
|
||||
--width: 28rem;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 64rem) {
|
||||
.hide-on-medium {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 64rem) {
|
||||
#like_panel {
|
||||
margin: 1.5rem;
|
||||
width: 18vw;
|
||||
border-radius: 0.8rem;
|
||||
border: solid thin rgba(var(--text-color), 0.2);
|
||||
justify-content: flex-start;
|
||||
justify-items: flex-start;
|
||||
text-align: left;
|
||||
.up-vote {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (any-hover: hover) {
|
||||
::-webkit-scrollbar {
|
||||
width: 0.5rem;
|
||||
|
||||
91
index.html
91
index.html
@ -183,6 +183,26 @@
|
||||
<p class="empty-state">No related articles</p>
|
||||
</section>
|
||||
</article>
|
||||
<article id="writer" class="page grid hide">
|
||||
<section class="grid gap-1-5">
|
||||
<div id="writer_profile">
|
||||
<span id="writer_initials"></span>
|
||||
</div>
|
||||
<div class="grid gap-0-5">
|
||||
<h3 id="writer_name"></h3>
|
||||
<p id="writer_bio"></p>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<h5>FLO ID</h5>
|
||||
<sm-copy id="writer_id"></sm-copy>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Articles contributed</h4>
|
||||
<div id="written_article_list" class="grid observe-empty-state"></div>
|
||||
<p class="empty-state">No articles written</p>
|
||||
</section>
|
||||
</article>
|
||||
<article id="article" class="page page-layout hide">
|
||||
<section class="hero-section">
|
||||
<h1 id="article_title"></h1>
|
||||
@ -209,17 +229,9 @@
|
||||
<section>
|
||||
<h4>Article by -</h4>
|
||||
<div id="article_contributors" class="flex"></div>
|
||||
<span>created with RanchiMall Content collaboration app</span>
|
||||
</section>
|
||||
<button id="go_to_top" class="floating-button hide" onclick="goToTop()">
|
||||
<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="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z" />
|
||||
</svg>
|
||||
</button>
|
||||
<footer class="grid gap-1-5">
|
||||
<h4>Loved the article? Don't forget leave a like.</h4>
|
||||
<section id="like_panel" class="grid gap-1-5">
|
||||
<h4 class="hide-on-medium">Like the article to support creators.</h4>
|
||||
<button id="upvote_button" class="button up-vote">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
|
||||
fill="#000000">
|
||||
@ -229,7 +241,14 @@
|
||||
</svg>
|
||||
<div id="like_count">Loading...</div>
|
||||
</button>
|
||||
</footer>
|
||||
</section>
|
||||
<button id="go_to_top" class="floating-button hide" onclick="goToTop()">
|
||||
<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="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z" />
|
||||
</svg>
|
||||
</button>
|
||||
</article>
|
||||
<article id="dashboard" class="page page-layout hide">
|
||||
<div class="flex justify-center align-center">
|
||||
@ -239,7 +258,7 @@
|
||||
<strip-option value="writers">Writers</strip-option>
|
||||
</strip-select>
|
||||
</div>
|
||||
<section id="analytic_section" class="admin-section hide">
|
||||
<section id="analytic_section" class="admin-section">
|
||||
<ul id="article_analytics" class="grid gap-1-5 observe-empty-state"></ul>
|
||||
<p class="empty-state">No articles</p>
|
||||
</section>
|
||||
@ -247,7 +266,7 @@
|
||||
<ul id="publishing_requests" class="grid gap-1-5 observe-empty-state"></ul>
|
||||
<p class="empty-state">No requests</p>
|
||||
</section>
|
||||
<section id="writers_section" class="admin-section">
|
||||
<section id="writers_section" class="admin-section hide">
|
||||
<button id="add_writer_button" class="floating-button" onclick="showAddWriterPopup()">
|
||||
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px"
|
||||
viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
@ -464,6 +483,7 @@
|
||||
<sm-copy id="user_flo_id"></sm-copy>
|
||||
<sm-button class="danger" onclick="signOut()">Sign out</sm-button>
|
||||
</div>
|
||||
<a href="#/dashboard" class="button">Admin dashboard</a>
|
||||
</section>
|
||||
</sm-popup>
|
||||
<template id="trending_article_template">
|
||||
@ -481,7 +501,7 @@
|
||||
</template>
|
||||
<template id="article_card_template">
|
||||
<li class="article-card grid">
|
||||
<a href="" class="article-card__category"></a>
|
||||
<a href="" class="article-card__category interact"></a>
|
||||
<a href="" class="grid article-link">
|
||||
<h4 class="article-card__title"></h4>
|
||||
<div class="flex">
|
||||
@ -824,7 +844,7 @@
|
||||
let params = {}
|
||||
let searchParams
|
||||
if (targetPage === '') {
|
||||
pageId = 'dashboard'
|
||||
pageId = 'main_page'
|
||||
} else {
|
||||
if (targetPage.includes('/')) {
|
||||
if (targetPage.includes('?')) {
|
||||
@ -842,10 +862,10 @@
|
||||
pageId = targetPage
|
||||
}
|
||||
}
|
||||
// if (pageId === 'dashboard' && !floGlobals.isSubAdmin) {
|
||||
// pageId = 'home'
|
||||
// history.replaceState(null, null, '#/home')
|
||||
// }
|
||||
if (pageId === 'dashboard' && !floGlobals.isSubAdmin) {
|
||||
pageId = 'home'
|
||||
history.replaceState(null, null, '#/home')
|
||||
}
|
||||
if (searchParams) {
|
||||
const urlSearchParams = new URLSearchParams('?' + searchParams);
|
||||
params = Object.fromEntries(urlSearchParams.entries());
|
||||
@ -864,6 +884,10 @@
|
||||
targetPage = 'explore'
|
||||
renderExplorePage(params)
|
||||
break;
|
||||
case 'writer':
|
||||
targetPage = 'writer'
|
||||
renderWriterPage(params)
|
||||
break;
|
||||
case 'dashboard':
|
||||
targetPage = 'dashboard'
|
||||
await Promise.all([
|
||||
@ -1094,13 +1118,15 @@
|
||||
getRef('article_body').innerHTML = allArticles[articleID]
|
||||
const frag = document.createDocumentFragment()
|
||||
contributors.forEach(id => {
|
||||
frag.append(createElement('div', {
|
||||
textContent: id,
|
||||
className: 'contributor'
|
||||
frag.append(createElement('a', {
|
||||
textContent: floGlobals.appObjects.articleWriters.hasOwnProperty(id) ? floGlobals.appObjects.articleWriters[id].name : id,
|
||||
className: 'contributor',
|
||||
attributes: { 'href': `#/writer?id=${id}` }
|
||||
}))
|
||||
})
|
||||
getRef('article_contributors').innerHTML = ''
|
||||
getRef('article_contributors').append(frag)
|
||||
getRef('like_count').textContent = floGlobals.appObjects.articles[articleID].votes
|
||||
// implement live voting
|
||||
if (!openedArticles.hasOwnProperty(articleID)) {
|
||||
floCloudAPI.requestGeneralData(`article_${articleID}_votes`, {
|
||||
@ -1141,6 +1167,27 @@
|
||||
getRef('query_results_list').innerHTML = ''
|
||||
getRef('query_results_list').append(frag)
|
||||
}
|
||||
function renderWriterPage(params) {
|
||||
if (floGlobals.appObjects.articleWriters.hasOwnProperty(params.id)) {
|
||||
const { name, bio } = floGlobals.appObjects.articleWriters[params.id]
|
||||
getRef('writer_initials').textContent = name[0]
|
||||
getRef('writer_name').textContent = name
|
||||
getRef('writer_bio').textContent = bio
|
||||
} else {
|
||||
getRef('writer_initials').textContent = 'F'
|
||||
getRef('writer_name').textContent = ''
|
||||
getRef('writer_bio').textContent = ''
|
||||
}
|
||||
getRef('writer_id').value = params.id
|
||||
const frag = document.createDocumentFragment()
|
||||
const sortedByTime = getArrayOfObj(floGlobals.appObjects.articles).sort((a, b) => b.published - a.published)
|
||||
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)))
|
||||
getRef('written_article_list').innerHTML = ''
|
||||
getRef('written_article_list').append(frag)
|
||||
}
|
||||
|
||||
let isSearchOn = false
|
||||
function toggleSearch() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user