💄 (repo title) display repo title in breadcru…

This commit is contained in:
2021-03-25 21:24:31 +01:00
parent eee3a8cf83
commit f2c36336ec
2 changed files with 25 additions and 0 deletions

View File

@@ -2,6 +2,9 @@
<div class="flux-note content note-container"> <div class="flux-note content note-container">
<div class="note readme"> <div class="note readme">
<header-note class="header" :user="user" :repo="repo" /> <header-note class="header" :user="user" :repo="repo" />
<div class="repo-title-breadcrumb">
<a @click.prevent="focus">{{ repo }}</a>
</div>
<div class="repo-title"> <div class="repo-title">
<h1 class="title is-1"> <h1 class="title is-1">
[<router-link [<router-link
@@ -48,6 +51,7 @@ import { useMarkdown } from '@/hooks/useMarkdown.hook'
import { useLinks } from '@/hooks/useLinks.hook' import { useLinks } from '@/hooks/useLinks.hook'
import { useUserRepoStore } from '@/modules/repo/store/userRepo.store' import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
import { useUserSettings } from '@/modules/user/hooks/useUserSettings.hook' import { useUserSettings } from '@/modules/user/hooks/useUserSettings.hook'
import { useFocus } from '@/hooks/useFocus.hook'
const StackedNote = defineAsyncComponent(() => const StackedNote = defineAsyncComponent(() =>
import('@/components/StackedNote.vue') import('@/components/StackedNote.vue')
@@ -71,6 +75,7 @@ export default defineComponent({
const { renderString } = useMarkdown() const { renderString } = useMarkdown()
const { listenToClick } = useLinks('note-display') const { listenToClick } = useLinks('note-display')
const { stackedNotes, resetStackedNotes } = useQueryStackedNotes() const { stackedNotes, resetStackedNotes } = useQueryStackedNotes()
const { scrollToFocusedNote } = useFocus()
const { ...noteProps } = useNote('note-container') const { ...noteProps } = useNote('note-container')
@@ -108,6 +113,7 @@ export default defineComponent({
stackedNotes, stackedNotes,
resetStackedNotes, resetStackedNotes,
userSettings: computed(() => store.userSettings), userSettings: computed(() => store.userSettings),
focus: () => scrollToFocusedNote(),
...noteProps ...noteProps
} }
} }
@@ -156,6 +162,18 @@ $header-height: 40px;
} }
@media screen and (min-width: 769px) { @media screen and (min-width: 769px) {
.repo-title-breadcrumb {
padding: 0 1rem;
transform-origin: 0 0;
transform: rotate(90deg);
a {
color: #363636;
display: block;
text-align: center;
}
}
.note { .note {
min-width: 620px; min-width: 620px;
max-width: 620px; max-width: 620px;
@@ -171,5 +189,10 @@ $header-height: 40px;
width: 100vw; width: 100vw;
} }
} }
.repo-title-breadcrumb {
display: none;
visibility: hidden;
}
} }
</style> </style>

View File

@@ -11,8 +11,10 @@ export const useFocus = () => {
const scrollToFocusedNote = (sha?: string) => { const scrollToFocusedNote = (sha?: string) => {
if (!sha) { if (!sha) {
scrollToNote(0)
return return
} }
nextTick(() => { nextTick(() => {
const index = stackedNotes.value.findIndex((noteSHA) => noteSHA === sha) const index = stackedNotes.value.findIndex((noteSHA) => noteSHA === sha)