f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-02 02:02:43 +00:00
Code Wiki Activity

Add maximum length, use span for spacing

Browse Source
This commit is contained in:
G.Ambatte
2025-01-03 13:34:52 +13:00
parent bbf6c3589a
commit a95eef0545
2 changed files with 25 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
client/homebrew/brewRenderer/headerNav/headerNav.jsx
View File

@@ -4,6 +4,8 @@ import * as React from 'react';
import * as _ from 'lodash'; import * as _ from 'lodash';
const MAX_TEXT_LENGTH = 40;
const HeaderNav = React.forwardRef(({}, pagesRef)=>{ const HeaderNav = React.forwardRef(({}, pagesRef)=>{
const [state, setState] = React.useState({ const [state, setState] = React.useState({
@@ -66,11 +68,20 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{
); );
const HeaderNavItem = ({ link, text, depth, className })=>{ const HeaderNavItem = ({ link, text, depth, className })=>{
return <li>
const trimString = (text, prefixLength = 0)=>{
const maxLength = MAX_TEXT_LENGTH - prefixLength;
if(text.trim().length > maxLength){
return `${text.trim().slice(0, maxLength)}...`;
}
return text.trim();
};
return <p>
<a href={`#${link}`} target='_self' className={className}> <a href={`#${link}`} target='_self' className={className}>
{`${'-'.repeat(depth)}${text}`} <span style={{ display: 'inline-block', width: `${depth * 0.5}em` }}></span>{trimString(text, depth)}
</a> </a>
</li>; </p>;
}; };
export default HeaderNav; export default HeaderNav;

23
client/homebrew/brewRenderer/headerNav/headerNav.less
View File

@@ -1,6 +1,6 @@
.headerNav { .headerNav {
position: fixed; position: fixed;
top: 0px; top: 30px;
left: 0px; left: 0px;
padding: 5px 10px; padding: 5px 10px;
background-color: #ccc; background-color: #ccc;
@@ -17,20 +17,19 @@
.navIcon { .navIcon {
cursor: pointer; cursor: pointer;
} }
li { a {
font-family: 'Open Sans'; font-family: 'Open Sans';
font-size: 12px; font-size: 12px;
padding: 2px; padding: 2px;
a { color: inherit;
color: inherit; text-decoration: none;
text-decoration: none; cursor: pointer;
cursor: pointer; &:hover {
&:hover { text-decoration: underline;
text-decoration: underline;
}
&.pageLink {
font-weight: 900;
}
} }
&.pageLink {
font-weight: 900;
}
} }
} }