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

29
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>
<>
<h3 className="backlink-heading">Link to this note</h3>
<div className="backlink-container">
{linkList.map(aLink =>
<div className="backlink">
<Link href={aLink.slug}>
<a >
{aLink.title}
<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>
</li>
)
: <h1>No Back link found</h1>
}
</ul>);
</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;