fix: item height, container, panel text overflow

nju-lug · Jan 11, 2023 · 15d90d0 · 15d90d0
1 parent b9e65e2
commit 15d90d0
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 11 deletions.
diff --git a/src/components/MarkdownContainer.vue b/src/components/MarkdownContainer.vue
@@ -14,7 +14,9 @@ const theme = computed(() =>
 
 const CustomSelect = defineCustomElement(CustomSelectCe);
 
-customElements.define('mira-select', CustomSelect);
+if (customElements.get('mira-select') != undefined) {
+  customElements.define('mira-select', CustomSelect);
+}
 </script>
 
 <template>

diff --git a/src/components/SidePanel.vue b/src/components/SidePanel.vue
@@ -46,18 +46,24 @@ async function handleClick(link: NewsEntry) {
     <NTabs type="segment" size="small" pane-class="tab-pane">
       <NTabPane name="Mirror">
         <NRow v-for="link in news" :key="link.content">
-          <NButton text tag="a" @click="handleClick(link)">{{
-            convertTimestamp(link.time, locale as 'zh' | 'en') +
-            ' - ' +
-            link.name
-          }}</NButton>
+          <NButton text tag="a" @click="handleClick(link)">
+            <span class="link-title">
+              {{
+                convertTimestamp(link.time, locale as 'zh' | 'en') +
+                ' - ' +
+                link.name
+              }}
+            </span>
+          </NButton>
         </NRow>
       </NTabPane>
       <NTabPane name="LUG Jokes">
         <NRow v-for="link in jokes" :key="link.title">
-          <NButton text tag="a" :href="link.web_url" target="_blank">{{
-            link.title
-          }}</NButton>
+          <NButton text tag="a" :href="link.web_url" target="_blank">
+            <span class="link-title">
+              {{ link.title }}
+            </span>
+          </NButton>
         </NRow>
       </NTabPane>
     </NTabs>
@@ -67,7 +73,7 @@ async function handleClick(link: NewsEntry) {
     preset="card"
     size="huge"
     :bordered="true"
-    :title="selected?.name || 'Null'"
+    :title="selected?.name"
     v-model:show="show"
   >
     <MarkdownContainer :content="content" />
@@ -80,6 +86,10 @@ async function handleClick(link: NewsEntry) {
 }
 
 a.n-button {
+  max-width: 100%;
+}
+
+span.link-title {
   overflow: hidden;
   max-width: 100%;
   text-overflow: ellipsis;

diff --git a/src/components/TopNavi.vue b/src/components/TopNavi.vue
@@ -91,6 +91,7 @@ watch(
         :value="route.path"
         :options="options"
         mode="horizontal"
+        class="navi-menu"
         v-if="!store.state.isMobile"
       />
       <NDropdown
@@ -155,7 +156,7 @@ watch(
 </style>
 
 <style>
-.n-menu .n-menu-item {
+.navi-menu .n-menu-item {
   height: calc(100% - 1px) !important;
 }
 </style>