feat: reduce padding for mobile

This commit is contained in:
Julien Calixte
2025-04-08 09:13:35 +02:00
parent 3c988c8a45
commit c8c669c0c2
2 changed files with 27 additions and 21 deletions

View File

@@ -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;
} }

View File

@@ -315,7 +315,7 @@ a.title-stacked-note-link {
} }
.note-content { .note-content {
padding: 0 1.5rem; padding: 0;
} }
} }
} }