diff --git a/frontend_nuxt/assets/global.css b/frontend_nuxt/assets/global.css index 1c4a45950..450fc2656 100644 --- a/frontend_nuxt/assets/global.css +++ b/frontend_nuxt/assets/global.css @@ -17,7 +17,7 @@ --background-color: white; --background-color-blur: rgba(255, 255, 255, 0.57); --menu-border-color: lightgray; - --normal-border-color: lightgray; + --normal-border-color: rgba(211, 211, 211, 0.63); --menu-selected-background-color: rgba(88, 241, 255, 0.166); --normal-light-background-color: rgba(242, 242, 242, 0.884); --menu-selected-background-color-hover: rgba(242, 242, 242, 0.884); @@ -348,6 +348,22 @@ body { } } +/* Adjust diff2html layout on mobile */ +@media (max-width: 768px) { + .content-diff .d2h-wrapper, + .content-diff .d2h-code-line, + .content-diff .d2h-code-side-line, + .content-diff .d2h-code-line-ctn, + .content-diff .d2h-code-side-line-ctn, + .content-diff .d2h-file-header { + font-size: 12px; + } + + .content-diff .d2h-wrapper { + overflow-x: auto; + } +} + /* Transition API */ ::view-transition-old(root), ::view-transition-new(root) { diff --git a/frontend_nuxt/components/PostChangeLogItem.vue b/frontend_nuxt/components/PostChangeLogItem.vue index bc56d5934..7e4996ec4 100644 --- a/frontend_nuxt/components/PostChangeLogItem.vue +++ b/frontend_nuxt/components/PostChangeLogItem.vue @@ -11,18 +11,18 @@ {{ log.username }} 变更了文章内容 变更了文章标题 - + + @@ -68,7 +68,6 @@ const props = defineProps({ }) const diffHtml = computed(() => { - const isMobile = useIsMobile() // Track theme changes const isDark = import.meta.client && document.documentElement.dataset.theme === 'dark' themeState.mode @@ -83,7 +82,6 @@ const diffHtml = computed(() => { showFiles: false, matching: 'lines', drawFileList: false, - outputFormat: isMobile.value ? 'line-by-line' : 'side-by-side', colorScheme, }) } else if (props.log.type === 'TITLE') { @@ -95,7 +93,6 @@ const diffHtml = computed(() => { showFiles: false, matching: 'lines', drawFileList: false, - outputFormat: isMobile.value ? 'line-by-line' : 'side-by-side', colorScheme, }) } @@ -110,9 +107,12 @@ const diffHtml = computed(() => { /* padding-top: 5px; */ /* padding-bottom: 30px; */ font-size: 14px; + border-bottom: 1px solid var(--normal-border-color); + padding-bottom: 10px; } .change-log-text { display: flex; + flex-wrap: wrap; align-items: center; } .change-log-user { @@ -146,5 +146,6 @@ const diffHtml = computed(() => { flex-direction: row; gap: 4px; align-items: center; + flex-wrap: wrap; } diff --git a/frontend_nuxt/pages/posts/[id]/index.vue b/frontend_nuxt/pages/posts/[id]/index.vue index ffadf0109..9c491d71c 100644 --- a/frontend_nuxt/pages/posts/[id]/index.vue +++ b/frontend_nuxt/pages/posts/[id]/index.vue @@ -1163,6 +1163,7 @@ onMounted(async () => { margin-top: 10px; gap: 10px; align-items: center; + flex-wrap: wrap; } .info-content-container { @@ -1218,7 +1219,7 @@ onMounted(async () => { } .post-time { - font-size: 14px; + font-size: 12px; opacity: 0.5; } @@ -1284,10 +1285,6 @@ onMounted(async () => { font-size: 12px; } - .post-time { - font-size: 12px; - } - .info-content-text { line-height: 1.5; }