Fixed minor UI issues after bootstrap 5 migration

panchosoft · Nov 6, 2021 · 1337789 · 1337789
1 parent 6219b94
commit 1337789
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
@@ -4,11 +4,12 @@
       <div class="container-fluid">
         <a class="navbar-brand" href="#">COVID-19 M&eacute;xico</a>
         <button
-          class="navbar-toggler position-relative shadow-none"
+          class="navbar-toggler position-relative shadow-none collapsed"
           type="button"
+          ref="navbarToggler"
           data-bs-toggle="collapse"
-          data-bs-target="#navbarTogglerDemo02"
-          aria-controls="navbarTogglerDemo02"
+          data-bs-target="#navbarTogglerContainer"
+          aria-controls="navbarTogglerContainer"
           aria-expanded="false"
           aria-label="Toggle navigation"
         >
@@ -19,8 +20,8 @@
         </button>
         <div
           class="collapse navbar-collapse"
-          id="navbarTogglerDemo02"
-          ref="navbarTogglerDemo02"
+          id="navbarTogglerContainer"
+          ref="navbarTogglerContainer"
         >
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item">
@@ -117,7 +118,8 @@ export default {
   name: "NavbarComponent",
   methods: {
     toggleNavbar() {
-      this.$refs.navbarTogglerDemo02.classList.toggle("show");
+      this.$refs.navbarTogglerContainer.classList.toggle("show");
+      this.$refs.navbarToggler.classList.toggle("collapsed");
     },
   },
 };

diff --git a/src/components/StatesList.vue b/src/components/StatesList.vue
@@ -157,11 +157,12 @@ export default {
     margin-top: 10px;
   }
   table.vgt-table {
-    font-size: 12px !important;
+    font-size: 14px !important;
     border-collapse: collapse;
+    line-height: 20px;
   }
   .vgt-table.nocturnal thead th {
-    font-size: 12px !important;
+    font-size: 14px !important;
     font-style: normal;
     font-weight: normal;
   }