prehistoric-systems/Gitako
1
1
Fork 0
mirror of https://github.com/EnixCoda/Gitako.git synced 2026-03-11 08:54:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: optimize multi-line header layout

Browse source
This commit is contained in:
EnixCoda 2021-12-22 14:35:15 +08:00
parent f88d7c0575
commit 088198fa6e
2 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/MetaBar.tsx
View file

@ -15,8 +15,10 @@ export function MetaBar({ metaData }: Props) {
return (
<>
<Breadcrumb className={'user-and-repo'}>
<Breadcrumb.Item href={userUrl}>{userName}</Breadcrumb.Item>
<Breadcrumb.Item href={repoUrl}>
<Breadcrumb.Item className={'user-name'} href={userUrl}>
{userName}
</Breadcrumb.Item>
<Breadcrumb.Item className={'repo-name'} href={repoUrl}>
<Text fontWeight="bolder">{repoName}</Text>
</Breadcrumb.Item>
</Breadcrumb>

15
src/styles/index.scss
View file

@ -466,11 +466,17 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
.user-and-repo {
display: inline; // would be override by CSS rule of section from @primer/css
line-height: 32px;
a {
color: var(--gitako-accent-fg);
white-space: normal;
li {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 4px 0;
a {
color: var(--gitako-accent-fg);
white-space: normal;
}
}
}
@ -479,6 +485,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
padding: 4px 6px; // did not align well for some reason :/
color: var(--gitako-fg-muted);
background-color: var(--gitako-accent-subtle);
word-break: break-word;
}
.close-side-bar-button-position {