Add list style for panel content. Fix pagination buttons

wbbaker · Jul 3, 2024 · e4397f7 · e4397f7
1 parent d2ca8c4
commit e4397f7
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git a/src/components/Pagination/VPagination.global.vue b/src/components/Pagination/VPagination.global.vue
@@ -7,7 +7,7 @@
     <li>
       <button
         type="button"
-        :disabled="currentPage < 2"
+        :disabled="currentPage < 2 || !pages"
         aria-label="Go to first page"
         class="border border-base-border rounded-l-md px-2 py-1.5"
         @click="currentPage = 1"
@@ -21,7 +21,7 @@
     >
       <button
         type="button"
-        :disabled="currentPage < 2"
+        :disabled="currentPage < 2 || !pages"
         aria-label="Go to previous page"
         class="border border-base-border px-2 py-1.5"
         @click="currentPage--"
@@ -77,7 +77,7 @@
         type="button"
         aria-label="Go to next page"
         class="border border-base-border px-2 py-1.5"
-        :disabled="currentPage === pages"
+        :disabled="currentPage === pages || !pages"
         @click="() => currentPage++"
       >
         ›
@@ -86,7 +86,7 @@
     <li role="presentation">
       <button
         type="button"
-        :disabled="currentPage === pages"
+        :disabled="currentPage === pages || !pages"
         aria-label="Go to last page"
         class="border border-base-border rounded-r-md px-2 py-1.5"
         @click="() => (currentPage = pages)"

diff --git a/src/modules/otus/components/Panel/PanelContent/PanelContentTopic.vue b/src/modules/otus/components/Panel/PanelContent/PanelContentTopic.vue
@@ -2,14 +2,13 @@
   <VCardHeader class="border-t border-base-muted first:border-t-0">
     {{ title }}
   </VCardHeader>
-  <VCardContent>
-    <ul 
+  <VCardContent class="panel-content-list">
+    <div
       v-for="(text, index) in textList"
       :key="index"
-      class="pt-1 text-sm "
-    >
-      <li v-html="text" />
-    </ul>
+      class="pt-1 text-sm"
+      v-html="text"
+    ></div>
   </VCardContent>
 </template>
 
@@ -25,4 +24,19 @@ defineProps({
     required: true
   }
 })
-</script>
+</script>
+
+<style>
+.panel-content-list {
+  ul {
+    margin: 1rem 0;
+    list-style: disc;
+    margin-left: 1rem;
+  }
+
+  ol {
+    list-style-type: decimal;
+    margin-left: 1rem;
+  }
+}
+</style>