Refactor footer, add css classes

wbbaker · Mar 17, 2025 · 6e17b28 · 6e17b28
1 parent 163fdbe
commit 6e17b28
Show file tree

Hide file tree

Showing 16 changed files with 108 additions and 95 deletions.
diff --git a/src/components/Autocomplete/Autocomplete.global.vue b/src/components/Autocomplete/Autocomplete.global.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="autocomplete md:block md:mr-0 mr-3 relative w-fit">
+  <div class="tp-autocomplete md:block md:mr-0 mr-3 relative w-fit">
     <div
       class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"
     >
@@ -9,7 +9,7 @@
       v-model="typed"
       type="text"
       autocomplete="none"
-      class="autocomplete__input block box-border min-w-full p-1.5 pl-10 text-base-content rounded border sm:text-sm placeholder:text-sm dark:border-slate-700 border-gray-300 dark:placeholder:text-slate-400 focus:ring-primary-500 focus:border-primary-500"
+      class="tp-autocomplete__input block box-border min-w-full p-1.5 pl-10 text-base-content rounded border sm:text-sm placeholder:text-sm dark:border-slate-700 border-gray-300 dark:placeholder:text-slate-400 focus:ring-primary-500 focus:border-primary-500"
       :placeholder="placeholder"
       ref="inputElement"
     />
@@ -20,12 +20,12 @@
 
     <ul
       v-if="list.length"
-      class="autocomplete__list list absolute z-[500] max-h-52 w-full overflow-y-auto border bg-base-foreground border-base-border !m-0 shadow-md"
+      class="tp-autocomplete__list list absolute z-[500] max-h-52 w-full overflow-y-auto border bg-base-foreground border-base-border !m-0 shadow-md"
     >
       <li
         v-for="item in list"
         :key="item.id"
-        class="autocomplete__item px-3 py-2 border-b text-xs text-base-content cursor-pointer hover:bg-secondary-color hover:bg-opacity-5 border-base-border truncate"
+        class="tp-autocomplete__item px-3 py-2 border-b text-xs text-base-content cursor-pointer hover:bg-secondary-color hover:bg-opacity-5 border-base-border truncate"
         @click="selectItem(item)"
       >
         <span v-html="item[label]" />
@@ -116,7 +116,7 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.autocomplete {
+.tp-autocomplete {
   &__list {
     display: none;
     padding: 0px;

diff --git a/src/components/Button/VButton.global.vue b/src/components/Button/VButton.global.vue
@@ -2,6 +2,7 @@
   <button
     type="button"
     :class="[
+      'tp-button',
       'px-3',
       'py-1',
       'hover:bg-opacity-80',

diff --git a/src/components/Card/VCard.global.vue b/src/components/Card/VCard.global.vue
@@ -1,13 +1,16 @@
 <template>
-  <div class="border-1 card border-base-muted bg-base-foreground print:shadow-none print:border-0 rounded">
+  <div
+    class="border-1 tp-card border-base-muted bg-base-foreground print:shadow-none print:border-0 rounded"
+  >
     <slot />
   </div>
 </template>
 
 <style>
-.card {
-    box-shadow: rgba(30,41,59,.04) 0 2px 4px 0;
-    border: 1px solid rgba(98,105,118,.16);
-    transition: transform .3s ease-out,opacity .3s ease-out,box-shadow .3s ease-out;
+.tp-card {
+  box-shadow: rgba(30, 41, 59, 0.04) 0 2px 4px 0;
+  border: 1px solid rgba(98, 105, 118, 0.16);
+  transition: transform 0.3s ease-out, opacity 0.3s ease-out,
+    box-shadow 0.3s ease-out;
 }
-</style>
+</style>
diff --git a/src/components/Card/VCardContent.global.vue b/src/components/Card/VCardContent.global.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 pl-5 pr-5">
+  <div class="p-4 pl-5 pr-5 tp-card-content">
     <slot />
   </div>
-</template>
+</template>
diff --git a/src/components/Card/VCardHeader.global.vue b/src/components/Card/VCardHeader.global.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="p-4 pl-5 pr-5 border-b font-medium border-base-muted">
+  <div
+    class="tp-card-header p-4 pl-5 pr-5 border-b font-medium border-base-muted"
+  >
     <slot />
   </div>
-</template>
+</template>
diff --git a/src/components/Footer/FooterCitation.vue b/src/components/Footer/FooterCitation.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="tp-footer-citation pt-4 pb-2 break-words">
+    {{ project_authors }}
+    <ClientOnly>
+      <span v-html="store.nextAuthor" />
+    </ClientOnly>
+    {{ project_citation }}.
+    <ClientOnly>
+      <span>Retrieved on {{ currentDate }}</span>
+    </ClientOnly>
+    <span v-if="currentUrl">
+      at
+      <a
+        class="text-secondary-color"
+        :href="currentUrl"
+      >
+        {{ currentUrl }}
+      </a>
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useFooterStore } from '@/store'
+const { project_authors, project_citation, project_url, hash_mode } =
+  __APP_ENV__
+
+const store = useFooterStore()
+const currentDate = new Date().toISOString().split('T')[0]
+const route = useRoute()
+
+const currentUrl = computed(() => {
+  const projectUrl = (project_url || '').replace(/\/$/, '')
+
+  if (!projectUrl.length) {
+    return ''
+  }
+
+  return hash_mode
+    ? projectUrl + '/#' + route.fullPath
+    : projectUrl + route.fullPath
+})
+</script>
diff --git a/src/components/Footer/FooterCopyright.vue b/src/components/Footer/FooterCopyright.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="tp-footer-copyright flex items-center text-xs gap-2">
+    <component
+      :is="copyright_image_link ? 'a' : 'span'"
+      :href="copyright_image_link"
+      class="min-w-fit"
+    >
+      <img
+        v-if="copyright_image"
+        :src="copyright_image"
+        alt="copyright"
+      />
+    </component>
+    <span>{{ copyright_text }}</span>
+  </div>
+</template>
+
+<script setup>
+const { copyright_image, copyright_image_link, copyright_text } = __APP_ENV__
+</script>
diff --git a/src/components/Layout/LayoutFooter.vue b/src/components/Layout/LayoutFooter.vue
@@ -3,39 +3,8 @@
     class="footer text-white bottom-0 border-gray-200 bg-zinc-800 pl-4 pr-4"
   >
     <div class="container mx-auto text-sm pt-2 pb-4">
-      <div class="pt-4 pb-2 break-words">
-        {{ project_authors }}
-        <ClientOnly>
-          <span v-html="store.nextAuthor" />
-        </ClientOnly>
-        {{ project_citation }}.
-        <ClientOnly>
-          <span>Retrieved on {{ currentDate }}</span>
-        </ClientOnly>
-        <span v-if="currentUrl">
-          at
-          <a
-            class="text-secondary-color"
-            :href="currentUrl"
-          >
-            {{ currentUrl }}
-          </a>
-        </span>
-      </div>
-      <div class="flex items-center text-xs gap-2">
-        <component
-          :is="copyright_image_link ? 'a' : 'span'"
-          :href="copyright_image_link"
-          class="min-w-fit"
-        >
-          <img
-            v-if="copyright_image"
-            :src="copyright_image"
-            alt="copyright"
-          />
-        </component>
-        <span>{{ copyright_text }}</span>
-      </div>
+      <FooterCitation />
+      <FooterCopyright />
 
       <hr class="mt-3 mb-3 border-gray-500" />
 
@@ -86,34 +55,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
-import { useFooterStore } from '@/store'
+import FooterCitation from '@/components/Footer/FooterCitation.vue'
+import FooterCopyright from '@/components/Footer/FooterCopyright.vue'
 import FooterAnalytics from '@/components/Footer/FooterAnalytics.vue'
-
-const {
-  project_authors,
-  project_citation,
-  project_url,
-  copyright_text,
-  copyright_image,
-  copyright_image_link,
-  hash_mode
-} = __APP_ENV__
-
-const store = useFooterStore()
-const currentDate = new Date().toISOString().split('T')[0]
-const route = useRoute()
-
-const currentUrl = computed(() => {
-  const projectUrl = (project_url || '').replace(/\/$/, '')
-
-  if (!projectUrl.length) {
-    return ''
-  }
-
-  return hash_mode
-    ? projectUrl + '/#' + route.fullPath
-    : projectUrl + route.fullPath
-})
 </script>
diff --git a/src/components/Layout/LayoutHeader.vue b/src/components/Layout/LayoutHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <header
-    class="relative bg-header px-2 sm:px-4 py-2.5 shadow-sm shadow-base-muted pl-4 pr-4 h-9 align-middle flex items-center bg-primary-color"
+    class="tp-header relative bg-header px-2 sm:px-4 py-2.5 shadow-sm shadow-base-muted pl-4 pr-4 h-9 align-middle flex items-center bg-primary-color"
   >
     <div
       class="container flex flex-wrap justify-between items-center mx-auto font-medium text-secondary-content"
@@ -23,18 +23,18 @@
       <NavbarMobile />
 
       <div class="relative hidden md:flex items-center ml-auto">
-        <nav class="text-sm leading-6 font-normal">
+        <nav class="tp-header-nav text-sm leading-6 font-normal">
           <ul class="flex space-x-8">
             <li
               v-for="(item, index) in header_links"
               :key="index"
             >
-              <router-link
+              <RouterLink
                 :to="item.link"
                 class="hover:text-primary-content text-primary-content"
               >
                 {{ item.label }}
-              </router-link>
+              </RouterLink>
             </li>
           </ul>
         </nav>

diff --git a/src/components/Navbar/NavbarMobile.vue b/src/components/Navbar/NavbarMobile.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     type="button"
-    class="inline-flex items-center p-2 z-50 ml-3 text-sm text-primary-content rounded-lg md:hidden print:hidden"
+    class="tp-mobile-navbar-button inline-flex items-center p-2 z-50 ml-3 text-sm text-primary-content rounded-lg md:hidden print:hidden"
     title="Menu"
     aria-controls="mobile-menu"
     :aria-expanded="isMenuVisible"
@@ -18,7 +18,7 @@
   <AnimationOpacity>
     <div
       v-if="isMenuVisible"
-      class="absolute top-full left-0 w-full z-50 bg-base-foreground text-base-content block shadow-md md:hidden print:hidden"
+      class="tp-mobile-navbar absolute top-full left-0 w-full z-50 bg-base-foreground text-base-content block shadow-md md:hidden print:hidden"
     >
       <nav class="font-normal container mx-auto">
         <ul class="flex flex-col m-0 p-0 border-t border-base-border">

diff --git a/src/components/Tab/TabItem.global.vue b/src/components/Tab/TabItem.global.vue
@@ -1,5 +1,5 @@
 <template>
-  <li class="inline-flex items-center text-sm">
+  <li class="tp-tab-item inline-flex items-center text-sm">
     <router-link
       class="p-2 pb-2 block py-2 pr-4 pl-3 text-base-content border-b-2 border-transparent"
       active-class="border-b-2 !border-secondary-color font-medium"

diff --git a/src/components/Tab/TabMenu.global.vue b/src/components/Tab/TabMenu.global.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul class="inline-flex items-center space-x-1 md:space-x-3">
+  <ul class="tp-tab-list inline-flex items-center space-x-1 md:space-x-3">
     <slot />
   </ul>
 </template>
diff --git a/src/components/Table/VTable.global.vue b/src/components/Table/VTable.global.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative sm:rounded-lg">
+  <div class="tp-table relative sm:rounded-lg">
     <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
       <slot />
     </table>

diff --git a/src/components/TrackerReport.global.vue b/src/components/TrackerReport.global.vue
@@ -14,7 +14,7 @@
   </component>
   <VModal
     v-if="isModalVisible"
-    class="text-base-content"
+    class="tp-tracker-report-modal text-base-content"
     @close="isModalVisible = false"
   >
     <template #header>

diff --git a/src/components/VSpinner.global.vue b/src/components/VSpinner.global.vue
@@ -4,7 +4,7 @@
     class="box-spinner mx-spinner absolute bg-base-foreground opacity-90 h-full flex items-center"
     :style="cssProperties"
   >
-    <div :class="['tw-spinner', `tw-spinner-${spinnerPosition}`]">
+    <div :class="['tp-spinner', `tp-spinner-${spinnerPosition}`]">
       <svg
         v-if="showSpinner"
         :style="logoSize"
@@ -165,7 +165,7 @@ const checkResize = () => {
 }
 </script>
 <style lang="scss" scoped>
-.tw-spinner {
+.tp-spinner {
   display: flex;
   margin: 0 auto;
   height: auto;
@@ -181,24 +181,24 @@ const checkResize = () => {
 .fade-leave-to {
   opacity: 0;
 }
-.tw-spinner-left {
+.tp-spinner-left {
   flex-direction: row;
 }
-.tw-spinner-right {
+.tp-spinner-right {
   flex-direction: row-reverse;
 }
-.tw-spinner-top {
+.tp-spinner-top {
   flex-direction: column;
 }
-.tw-spinner-bottom {
+.tp-spinner-bottom {
   flex-direction: column-reverse;
 }
 
 .box-spinner {
   z-index: 4000;
 }
 
-.tw-spinner {
+.tp-spinner {
   font-size: 20px;
   overflow: hidden;
   width: 100%;

diff --git a/src/modules/otus/components/Breadcrumb/Breadcrumb.vue b/src/modules/otus/components/Breadcrumb/Breadcrumb.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul class="inline-flex items-center flex-wrap">
+  <ul class="breadcrumb inline-flex items-center flex-wrap">
     <li
       v-for="(item, key, index) in list"
       :key="item.id"