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}) { function BackLinks({linkList}) {
return (<ul> return (<div className="note-footer">
{ {(linkList != null && linkList.length > 0)
(linkList != null && linkList.length > 0)
? ?
linkList.map(aLink => <>
<li> <h3 className="backlink-heading">Link to this note</h3>
<Link href={aLink.slug}>
<a> <div className="backlink-container">
{aLink.title} {linkList.map(aLink =>
</a> <div className="backlink">
</Link> <Link href={aLink.slug}>
</li> <a >
) <p className="backlink-title">{aLink.title}</p>
: <h1>No Back link found</h1> <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>
</ul>); </Link>
</div>
)}
</div>
</>
: <></>}
</div>);
} }
function MDContent({content, fileNames, backLinks, handleOpenNewContent}) { function MDContent({content, fileNames, backLinks, handleOpenNewContent}) {

63
styles/style.css
View File

@ -16,6 +16,69 @@ a:hover {
flex-direction: row; flex-direction: row;
justify-content: center; 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 { .markdown-rendered {
font-size: 18px; font-size: 18px;