Merge pull request #940 from nagisa77/codex/adjust-diff2html-font-for-mobile-ui

style: adjust diff2html fonts on mobile

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) {

frontend_nuxt/components/PostChangeLogItem.vue

@@ -11,18 +11,18 @@
       <span v-if="log.username" class="change-log-user">{{ log.username }}</span>
       <span v-if="log.type === 'CONTENT'" class="change-log-content">变更了文章内容</span>
       <span v-else-if="log.type === 'TITLE'" class="change-log-content">变更了文章标题</span>
-      <span v-else-if="log.type === 'CATEGORY'" class="change-log-content change-log-category">
+      <template v-else-if="log.type === 'CATEGORY'">
         <div class="change-log-category-text">变更了文章分类, 从</div>
         <ArticleCategory :category="log.oldCategory" />
         <div class="change-log-category-text">修改为</div>
         <ArticleCategory :category="log.newCategory" />
-      </span>
-      <span v-else-if="log.type === 'TAG'" class="change-log-content change-log-category">
+      </template>
+      <template v-else-if="log.type === 'TAG'">
         <div class="change-log-category-text">变更了文章标签, 从</div>
         <ArticleTags :tags="log.oldTags" />
         <div class="change-log-category-text">修改为</div>
         <ArticleTags :tags="log.newTags" />
-      </span>
+      </template>
       <span v-else-if="log.type === 'CLOSED'" class="change-log-content">
         <template v-if="log.newClosed">关闭了文章</template>
         <template v-else>重新打开了文章</template>
@@ -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;
 }
 </style>

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