@@ -25,12 +32,9 @@ const close = async () => {
-
diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue
index 79f959c..9457460 100644
--- a/src/components/StackedNote.vue
+++ b/src/components/StackedNote.vue
@@ -24,8 +24,8 @@ const props = defineProps<{
const { scrollToFocusedNote } = useQueryStackedNotes()
const { content } = useFile(props.sha)
-const { listenToClick } = useLinks('stacked-note', props.sha)
const className = computed(() => `stacked-note-${props.index}`)
+const { listenToClick } = useLinks(className.value, props.sha)
const titleClassName = computed(() => `title-${className.value}`)
useTitleNotes(props.repo)
@@ -81,7 +81,7 @@ const focus = () => scrollToFocusedNote(props.sha)
$border-color: rgba(18, 19, 58, 0.2);
.stacked-note {
- padding: 1rem 1.5rem;
+ padding: 0 1.5rem 1rem;
background-color: var(--background-color);
transition: cubic-bezier(0.39, 0.575, 0.565, 1) 0.3s;
@@ -125,7 +125,7 @@ $border-color: rgba(18, 19, 58, 0.2);
@media screen and (max-width: 768px) {
.stacked-note {
- padding: 0 1.5rem;
+ padding: 0 0.5rem 1rem;
.title-stacked-note {
padding: 0.5rem 0 0;
@@ -137,6 +137,8 @@ $border-color: rgba(18, 19, 58, 0.2);
}
.note-content {
+ padding: 0 1.5rem;
+
.table {
overflow-x: auto;
}
diff --git a/src/hooks/useLinks.hook.ts b/src/hooks/useLinks.hook.ts
index d3b2b50..d21fde4 100644
--- a/src/hooks/useLinks.hook.ts
+++ b/src/hooks/useLinks.hook.ts
@@ -1,9 +1,12 @@
import { noteEventBus } from '@/bus/noteEventBus'
import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
import { isExternalLink } from '@/utils/link'
-import { onUnmounted } from 'vue'
+import { ComputedRef, onUnmounted, toValue } from 'vue'
-export const useLinks = (className: string, sha?: string) => {
+export const useLinks = (
+ className: ComputedRef | string,
+ sha?: string
+) => {
const store = useUserRepoStore()
const linkNote: EventListener = (event) => {
@@ -34,7 +37,7 @@ export const useLinks = (className: string, sha?: string) => {
})
}
- const selector = `.${className} a`
+ const selector = `.${toValue(className)} a`
const removeListeners = () => {
const elements = document.querySelectorAll(selector)
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 28da44a..32338af 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -1,5 +1,5 @@
@charset "utf-8";
-@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&family=Courgette&family=IBM+Plex+Serif&family=Kiwi+Maru&family=Maven+Pro&family=Noto+Sans+KR&family=Tajawal&family=Domine&family=Amiri&display=swap&family=Montagu+Slab&family=Gowun+Batang&family=Cormorant+Garamond&family=forum');
+@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&family=Courgette&family=IBM+Plex+Serif&family=Kiwi+Maru&family=Maven+Pro&family=Noto+Sans+KR&family=Tajawal&family=Domine&family=Amiri&display=swap&family=Montagu+Slab&family=Gowun+Batang&family=Cormorant+Garamond&family=Forum');
/**
font-family: 'Courgette', cursive;
@@ -113,4 +113,4 @@ pre {
code {
font-family: var(--font-family);
-}
\ No newline at end of file
+}