tristonarmstrong/XeNote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP styling backlink section

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
components/MDContent.js
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}) {

63
styles/style.css
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;