fix(seaside): #185 fix UI after daisyUI upgrade

Marthym · Nov 19, 2023 · 86bd8e3 · 86bd8e3
1 parent 461f1b7
commit 86bd8e3
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 36 deletions.
diff --git a/seaside/src/administration/component/UserAdminTab.vue b/seaside/src/administration/component/UserAdminTab.vue
@@ -34,9 +34,9 @@
         <th scope="col">Role</th>
         <th scope="col">Created At</th>
         <th scope="col">
-          <div class="btn-group justify-end" v-if="pagesNumber > 1">
+          <div class="join justify-end" v-if="pagesNumber > 1">
             <button v-for="i in pagesNumber" :key="i"
-                    :class="{'btn-active': activePage === i-1}" class="btn btn-sm"
+                    :class="{'btn-active': activePage === i-1}" class="join-item btn btn-sm"
                     v-on:click="loadUserPage(i-1).subscribe()">
               {{ i }}
             </button>
@@ -86,9 +86,9 @@
         <th scope="col">Role</th>
         <th scope="col">Created At</th>
         <th scope="col">
-          <div class="btn-group justify-end" v-if="pagesNumber > 1">
+          <div class="join justify-end" v-if="pagesNumber > 1">
             <button v-for="i in pagesNumber" :key="i"
-                    :class="{'btn-active': activePage === i-1}" class="btn btn-sm"
+                    :class="{'btn-active': activePage === i-1}" class="join-item btn btn-sm"
                     v-on:click="loadUserPage(i-1).subscribe()">
               {{ i }}
             </button>

diff --git a/seaside/src/administration/page/AdministrationPage.vue b/seaside/src/administration/page/AdministrationPage.vue
@@ -1,38 +1,38 @@
 <template>
-    <nav class="tabs tabs-boxed">
-        <a class="tab" :class="{'tab-active': 'UserAdminTab' === activeTab}"
-           @click.prevent="onChangeTab('UserAdminTab')">Users</a>
-        <a class="tab" :class="{'tab-active': 'ConfigAdminTab' === activeTab}"
-           @click.prevent="onChangeTab('ConfigAdminTab')">Configuration</a>
-        <a class="tab" :class="{'tab-active': 'StatisticsAdminTab' === activeTab}"
-           @click.prevent="onChangeTab('StatisticsAdminTab')">Statistiques</a>
-    </nav>
-    <component :is="activeTab"></component>
+  <nav role="tablist" class="tabs tabs-boxed place-content-start">
+    <a role="tab" class="tab" :class="{'tab-active': 'UserAdminTab' === activeTab}"
+       @click.prevent="onChangeTab('UserAdminTab')">Users</a>
+    <a role="tab" class="tab" :class="{'tab-active': 'ConfigAdminTab' === activeTab}"
+       @click.prevent="onChangeTab('ConfigAdminTab')">Configuration</a>
+    <a role="tab" class="tab" :class="{'tab-active': 'StatisticsAdminTab' === activeTab}"
+       @click.prevent="onChangeTab('StatisticsAdminTab')">Statistiques</a>
+  </nav>
+  <component :is="activeTab"></component>
 </template>
 
 <script lang="ts">
-import {Component, Vue} from 'vue-facing-decorator';
+import { Component, Vue } from 'vue-facing-decorator';
 import UserAdminTab from '@/administration/component/UserAdminTab.vue';
 import ConfigAdminTab from '@/administration/component/ConfigAdminTab.vue';
-import {defineAsyncComponent} from "vue";
+import { defineAsyncComponent } from 'vue';
 
 const StatisticsAdminTab = defineAsyncComponent(() => import('@/administration/component/StatisticsAdminTab.vue'));
 
 type Tab = 'UserAdminTab' | 'ConfigAdminTab' | 'StatisticsAdminTab';
 
 @Component({
-    name: 'AdministrationPage',
-    components: {
-        UserAdminTab,
-        ConfigAdminTab,
-        StatisticsAdminTab,
-    },
+  name: 'AdministrationPage',
+  components: {
+    UserAdminTab,
+    ConfigAdminTab,
+    StatisticsAdminTab,
+  },
 })
 export default class AdministrationPage extends Vue {
-    private activeTab: Tab = 'UserAdminTab';
+  private activeTab: Tab = 'UserAdminTab';
 
-    private onChangeTab(toBeActivate: Tab): void {
-        this.activeTab = toBeActivate;
-    }
+  private onChangeTab(toBeActivate: Tab): void {
+    this.activeTab = toBeActivate;
+  }
 }
 </script>
diff --git a/seaside/src/common/components/smartTable/SmartTable.vue b/seaside/src/common/components/smartTable/SmartTable.vue
@@ -36,9 +36,9 @@
       </th>
       <th v-for="column in _columns" scope="col">{{ column }}</th>
       <th scope="col">
-        <div class="btn-group justify-end" v-if="pagesNumber > 1">
+        <div class="join justify-end" v-if="pagesNumber > 1">
           <button v-for="i in pagesNumber" :key="i"
-                  :class="{'btn-active': activePage === i-1}" class="btn btn-sm"
+                  :class="{'btn-active': activePage === i-1}" class="join-item btn btn-sm"
                   v-on:click="loadPageByIndex(i-1).subscribe()">
             {{ i }}
           </button>
@@ -83,9 +83,9 @@
       <th scope="col" class="w-1"></th>
       <th v-for="column in _columns" scope="col">{{ column }}</th>
       <th scope="col">
-        <div class="btn-group justify-end" v-if="pagesNumber > 1">
+        <div class="join justify-end" v-if="pagesNumber > 1">
           <button v-for="i in pagesNumber" :key="i"
-                  :class="{'btn-active': activePage === i-1}" class="btn btn-sm"
+                  :class="{'btn-active': activePage === i-1}" class="join-item btn btn-sm"
                   v-on:click="loadPageByIndex(i-1).subscribe()">
             {{ i }}
           </button>

diff --git a/seaside/src/configuration/components/feedslist/FeedsList.vue b/seaside/src/configuration/components/feedslist/FeedsList.vue
@@ -15,9 +15,9 @@
           <div class="grid grid-cols-1 md:grid-cols-12">
             <div class="md:col-span-3 my-auto">Name</div>
             <div class="md:col-span-7 my-auto">Link / Categories</div>
-            <div class="md:col-span-2 btn-group justify-end" v-if="pagesNumber > 1">
+            <div class="md:col-span-2 join justify-end" v-if="pagesNumber > 1">
               <button v-for="i in pagesNumber" :key="i"
-                      :class="{'btn-active': activePage === i-1}" class="btn btn-sm"
+                      :class="{'btn-active': activePage === i-1}" class="join-item btn btn-sm"
                       v-on:click="loadFeedPage(i-1).subscribe()">
                 {{ i }}
               </button>
@@ -56,9 +56,9 @@
           <div class="grid grid-cols-1 md:grid-cols-12">
             <div class="md:col-span-3 my-auto">Name</div>
             <div class="md:col-span-7 my-auto">Link / Categories</div>
-            <div class="md:col-span-2 btn-group justify-end" v-if="pagesNumber > 1">
+            <div class="md:col-span-2 join justify-end" v-if="pagesNumber > 1">
               <button v-for="i in pagesNumber" :key="i"
-                      :class="{'btn-active': activePage === i-1}" class="btn btn-sm"
+                      :class="{'btn-active': activePage === i-1}" class="join-item btn btn-sm"
                       v-on:click="loadFeedPage(i-1).subscribe()">
                 {{ i }}
               </button>

diff --git a/seaside/src/configuration/pages/ConfigurationPage.vue b/seaside/src/configuration/pages/ConfigurationPage.vue
@@ -1,7 +1,7 @@
 <template>
-  <nav class="tabs tabs-boxed">
-    <router-link to="/config/feeds" class="tab" active-class="tab-active">Feeds</router-link>
-    <router-link to="/config/profile" class="tab" active-class="tab-active">Profile</router-link>
+  <nav role="tablist" class="tabs tabs-boxed place-content-start">
+    <router-link to="/config/feeds" role="tab" class="tab" active-class="tab-active">Feeds</router-link>
+    <router-link to="/config/profile" role="tab" class="tab" active-class="tab-active">Profile</router-link>
   </nav>
   <router-view></router-view>
 </template>