Adjusted styling to improve scrollbar appearance. Added depnedency co…

…unter and missing changelog banner
ebkr · Mar 2, 2025 · 7010ae5 · 7010ae5
1 parent 949f960
commit 7010ae5
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 12 deletions.
diff --git a/src/components/v2/MarkdownRender.vue b/src/components/v2/MarkdownRender.vue
@@ -39,7 +39,7 @@ function captureClick(e: Event) {
     @import "~github-markdown-css/github-markdown.css";
 
     .markdown-body {
-        padding: 1rem;
+        padding-right: 1rem;
         overflow-y: auto;
         background-color: rgba(0, 0, 0, 0);
     }
@@ -52,8 +52,7 @@ function captureClick(e: Event) {
 
     .markdown-body {
         color: var(--v2-primary-text-color);
-        width: 500px;
-        overflow-x: auto;
+        margin: 0 0px 0 auto;
         overflow-y: auto;
         height: max(200px, 100%);
         overscroll-behavior: contain;

diff --git a/src/components/v2/OnlinePreviewPanel.vue b/src/components/v2/OnlinePreviewPanel.vue
@@ -85,8 +85,8 @@ function getReadableCategories(mod: ThunderstoreMod) {
 
 const markdownToRender = computed(() => {
     switch (activeTab.value) {
-        case "README": return readme.value || "No README content found";
-        case 'CHANGELOG': return changelog.value || `No CHANGELOG has been uploaded for ${props.mod.getFullName()}`;
+        case "README": return readme.value;
+        case 'CHANGELOG': return changelog.value;
         default: return null;
     }
 });
@@ -113,7 +113,7 @@ const markdownToRender = computed(() => {
                 <ul>
                     <li :class="{'is-active': activeTab === 'README'}"><a @click="setActiveTab('README')">README</a></li>
                     <li :class="{'is-active': activeTab === 'CHANGELOG'}"><a @click="setActiveTab('CHANGELOG')">CHANGELOG</a></li>
-                    <li :class="{'is-active': activeTab === 'Dependencies'}"><a @click="setActiveTab('Dependencies')">Dependencies</a></li>
+                    <li :class="{'is-active': activeTab === 'Dependencies'}"><a @click="setActiveTab('Dependencies')">Dependencies ({{ dependencies.length }})</a></li>
                 </ul>
             </div>
         </div>
@@ -130,7 +130,19 @@ const markdownToRender = computed(() => {
                 </template>
             </template>
             <template v-else>
-                <MarkdownRender :markdown="markdownToRender" />
+                <template v-if="markdownToRender !== null">
+                    <MarkdownRender :markdown="markdownToRender" />
+                </template>
+                <template v-else>
+                    <div class="notification">
+                        <div class="container">
+                            <p>
+                                <template v-if="activeTab === 'README'">Unable to fetch README</template>
+                                <template v-else-if="activeTab === 'CHANGELOG'">No CHANGELOG available for {{ props.mod.getFullName() }}</template>
+                            </p>
+                        </div>
+                    </div>
+                </template>
             </template>
         </div>
     </div>
@@ -142,7 +154,7 @@ const markdownToRender = computed(() => {
     display: flex;
     flex-flow: column;
     margin: 1rem;
-    width: 100%;
+    width: 500px;
 
     &__container {
         flex: 0;
@@ -155,7 +167,6 @@ const markdownToRender = computed(() => {
         height: max-content;
         overflow-y: auto;
         overflow-x: hidden;
-        min-width: 500px;
     }
 }
 </style>
diff --git a/src/components/views/OnlineModView.vue b/src/components/views/OnlineModView.vue
@@ -74,9 +74,7 @@
         </div>
         <div id="mod-preview">
             <template v-if="previewMod !== null">
-                <OnlinePreviewPanel :mod="previewMod">
-                    <h1>aaaaaaa</h1>
-                </OnlinePreviewPanel>
+                <OnlinePreviewPanel :mod="previewMod"/>
             </template>
         </div>
     </div>