WIP styling backlink section

This commit is contained in:
Tuan Cao 2022-04-08 11:56:09 +07:00
parent 2bb96504c9
commit aecf7c9da6
2 changed files with 85 additions and 15 deletions

View File

@ -6,22 +6,29 @@ import Link from 'next/link'
function BackLinks({linkList}) {
return (<ul>
{
(linkList != null && linkList.length > 0)
return (<div className="note-footer">
{(linkList != null && linkList.length > 0)
?
linkList.map(aLink =>
<li>
<Link href={aLink.slug}>
<a>
{aLink.title}
</a>
</Link>
</li>
)
: <h1>No Back link found</h1>
}
</ul>);
<>
<h3 className="backlink-heading">Link to this note</h3>
<div className="backlink-container">
{linkList.map(aLink =>
<div className="backlink">
<Link href={aLink.slug}>
<a >
<p className="backlink-title">{aLink.title}</p>
<p className="backlink-preview">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsumLorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
</a>
</Link>
</div>
)}
</div>
</>
: <></>}
</div>);
}
function MDContent({content, fileNames, backLinks, handleOpenNewContent}) {

View File

@ -16,6 +16,69 @@ a:hover {
flex-direction: row;
justify-content: center;
}
/* Foooter section BEGIN */
.note-footer {
display: block;
background-color: rgba(238, 238, 238, 0.8);
border-radius: 16px;
margin-top: 24px;
padding: 16px;
}
.backlink-container {
flex-wrap: wrap;
justify-content: space-between;
position: relative;
/*background-color: #f8bbbb;*/
flex-direction: row;
display: flex;
}
.note-footer .backlink-heading {
display: block;
font-size: 18px;
line-height: 24px;
font-weight: 600;
color: var(--text-muted);
}
.backlink-container .backlink {
/*background-color: #f8f2f2;*/
margin: 8px;
height: 118px;
width: 318px;
text-decoration: none;
display: block;
overflow: hidden;
border-radius: 8px;
/*padding-bottom: 8px;*/
}
.backlink-container .backlink:hover {
background-color: rgba(180, 177, 177, 0.3);
}
.backlink-container .backlink-title {
font-size: 12px;
line-height: 16px;
font-weight: 600;
text-decoration: none;
}
.backlink-container a{
text-decoration: none;
color: var(--text-muted);
}
.backlink-container .backlink-preview {
font-size: 12px;
line-height: 16px;
overflow: hidden;
}
.backlink-container p {
margin: 12px 0px;
}
/* Foooter section END */
.markdown-rendered {
font-size: 18px;