feat: reduce padding for mobile
This commit is contained in:
@@ -6,22 +6,22 @@ import {
|
|||||||
onMounted,
|
onMounted,
|
||||||
onUnmounted,
|
onUnmounted,
|
||||||
toRefs,
|
toRefs,
|
||||||
watch,
|
watch
|
||||||
} from "vue"
|
} from 'vue'
|
||||||
|
|
||||||
import LiteLoading from "@/components/LiteLoading.vue"
|
import LiteLoading from '@/components/LiteLoading.vue'
|
||||||
import StackedNote from "@/components/StackedNote.vue"
|
import StackedNote from '@/components/StackedNote.vue'
|
||||||
import { useLinks } from "@/hooks/useLinks.hook"
|
import { useLinks } from '@/hooks/useLinks.hook'
|
||||||
import { useMarkdown } from "@/hooks/useMarkdown.hook"
|
import { useMarkdown } from '@/hooks/useMarkdown.hook'
|
||||||
import { useNoteView } from "@/hooks/useNoteView.hook"
|
import { useNoteView } from '@/hooks/useNoteView.hook'
|
||||||
import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook"
|
import { useRouteQueryStackedNotes } from '@/hooks/useRouteQueryStackedNotes.hook'
|
||||||
import { useVisitRepo } from "@/modules/history/hooks/useVisitRepo.hook"
|
import { useVisitRepo } from '@/modules/history/hooks/useVisitRepo.hook'
|
||||||
import CacheAllNotes from "@/modules/note/components/CacheAllNote.vue"
|
import CacheAllNotes from '@/modules/note/components/CacheAllNote.vue'
|
||||||
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'
|
||||||
|
|
||||||
const HeaderNote = defineAsyncComponent(
|
const HeaderNote = defineAsyncComponent(
|
||||||
() => import("@/components/HeaderNote.vue"),
|
() => import('@/components/HeaderNote.vue')
|
||||||
)
|
)
|
||||||
|
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
@@ -37,8 +37,8 @@ const props = withDefaults(
|
|||||||
content: null,
|
content: null,
|
||||||
parseContent: true,
|
parseContent: true,
|
||||||
withContent: true,
|
withContent: true,
|
||||||
withHeader: true,
|
withHeader: true
|
||||||
},
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
const user = computed(() => props.user)
|
const user = computed(() => props.user)
|
||||||
@@ -49,17 +49,17 @@ const store = useUserRepoStore()
|
|||||||
useUserSettings()
|
useUserSettings()
|
||||||
const { visitRepo } = useVisitRepo({ user: user, repo: repo })
|
const { visitRepo } = useVisitRepo({ user: user, repo: repo })
|
||||||
const { toHTML } = useMarkdown(repo)
|
const { toHTML } = useMarkdown(repo)
|
||||||
const { listenToClick } = useLinks("note-display")
|
const { listenToClick } = useLinks('note-display')
|
||||||
const { stackedNotes, scrollToTop } = useRouteQueryStackedNotes()
|
const { stackedNotes, scrollToTop } = useRouteQueryStackedNotes()
|
||||||
|
|
||||||
const { titles } = useNoteView("note-container")
|
const { titles } = useNoteView('note-container')
|
||||||
|
|
||||||
const renderedContent = computed(() =>
|
const renderedContent = computed(() =>
|
||||||
props.content !== null
|
props.content !== null
|
||||||
? props.parseContent
|
? props.parseContent
|
||||||
? toHTML(props.content)
|
? toHTML(props.content)
|
||||||
: props.content
|
: props.content
|
||||||
: store.readme,
|
: store.readme
|
||||||
)
|
)
|
||||||
|
|
||||||
const hasContent = computed(() => !!renderedContent.value)
|
const hasContent = computed(() => !!renderedContent.value)
|
||||||
@@ -71,7 +71,7 @@ watch(
|
|||||||
await nextTick()
|
await nextTick()
|
||||||
listenToClick()
|
listenToClick()
|
||||||
},
|
},
|
||||||
{ immediate: true },
|
{ immediate: true }
|
||||||
)
|
)
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
@@ -79,7 +79,7 @@ watch(
|
|||||||
() => {
|
() => {
|
||||||
store.setUserRepo(props.user, props.repo)
|
store.setUserRepo(props.user, props.repo)
|
||||||
},
|
},
|
||||||
{ immediate: true },
|
{ immediate: true }
|
||||||
)
|
)
|
||||||
|
|
||||||
onMounted(() => visitRepo())
|
onMounted(() => visitRepo())
|
||||||
@@ -247,6 +247,12 @@ $header-height: 40px;
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media print, screen and (max-width: 768px) {
|
@media print, screen and (max-width: 768px) {
|
||||||
|
.flux-note {
|
||||||
|
.readme {
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.flux-note {
|
.flux-note {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -315,7 +315,7 @@ a.title-stacked-note-link {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.note-content {
|
.note-content {
|
||||||
padding: 0 1.5rem;
|
padding: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user