fix: card bg, dropdown and tabmenu interation card grid list and more (…

…#56) * FIX: Newsletter form field missing * CHORE: Remove bg from card * CHORE: Breadcrumb gap * FIX: TabMenu + Dropdown behavior
aziontech · Feb 8, 2024 · f92090a · f92090a
1 parent 0437fef
commit f92090a
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 29 deletions.
diff --git a/src/services/newsletter/newsletterSubmitHandler.js b/src/services/newsletter/newsletterSubmitHandler.js
@@ -13,6 +13,11 @@ export const newsletterSubrscribeHandler = async (formData, email) => {
           objectTypeId: '0-1',
           name: 'email',
           value: email.value
+        },
+        {
+          objectTypeId: '0-1',
+          name: 'firstname',
+          value: email.value
         }
       ],
       context: {

diff --git a/src/templates/card/index.vue b/src/templates/card/index.vue
@@ -5,7 +5,7 @@
       @mouseout="isHovered = false"
       :pt="{
         header: { class: 'rounded border surface-border overflow-hidden' },
-        root: { class: 'shadow-none surface-ground flex flex-col gap-6' }
+        root: { class: 'shadow-none bg-transparent flex flex-col gap-6' }
       }">
       <template #header>
         <picture v-if="imgSrc" >
@@ -18,11 +18,13 @@
           <h3 class="text-xl font-bold text-color">{{ title }}</h3>
           <p class="text-sm text-color-secondary">{{ description }}</p>
           <p class="text-xs text-color-secondary">{{ date }} • {{ estimateReadTime }}</p>
-          <div v-if="authors">
-            <AvatarGroup>
-              <Avatar v-for="({avatar, role, title }, index) in authors" :ariaLabel="`${title} - ${role}`" :key="index" :image="`${avatar}?ims=28x28`" shape="circle" />
-            </AvatarGroup>
-          </div>
+            <div v-if="authors">
+              <AvatarGroup>
+                <Avatar v-for="({avatar, role, title }, index) in authors" :ariaLabel="`${title} - ${role}`" :key="index" :image="`${avatar}?ims=28x28`" shape="circle" v-tooltip.bottom="{ value: `${title}`, showDelay: 200 }"
+                tabindex="1"
+                />
+              </AvatarGroup>
+            </div>
         </div>
       </template>
     </Card>

diff --git a/src/templates/post/hero/index.vue b/src/templates/post/hero/index.vue
@@ -1,15 +1,15 @@
 <template>
     <div class="flex flex-col gap-8 lg:gap-10">
       <div class="flex gap-6 lg:gap-8 flex-col w-full">
-        <Breadcrumb :model="breadcrumbItems" class="-ml-1">
-          <template #item="{ item, props }">
-            <a v-if="item.url" :href="item.url" :target="item.target" v-bind="props.action">
-                <span class="text-color-secondary">{{ item.label }}</span>
-            </a>
-            <p v-else class="p-menuitem-link"> <span class="text-color-secondary"> {{ item.label }} </span></p>
-          </template>
-        </Breadcrumb>
         <div class="flex flex-col gap-5 lg:gap-6">
+          <Breadcrumb :model="breadcrumbItems" class="-ml-1">
+            <template #item="{ item, props }">
+              <a v-if="item.url" :href="item.url" :target="item.target" v-bind="props.action">
+                  <span class="text-color-secondary">{{ item.label }}</span>
+              </a>
+              <p v-else class="p-menuitem-link"> <span class="text-color-secondary"> {{ item.label }} </span></p>
+            </template>
+          </Breadcrumb>
           <h1 class="text-3xl lg:text-4xl font-medium text-color">
             {{ title }}
           </h1>

diff --git a/src/templates/tab-menu/with-search-link.vue b/src/templates/tab-menu/with-search-link.vue
@@ -1,14 +1,25 @@
 <template>
-  <div class="flex justify-between gap-3">
-    <div class="flex items-center">
-      <TabMenu class="lg:block overflow-y-auto" :pt="{ label: 'whitespace-nowrap', menu: {
-        class: 'flex-wrap'
-      } }"
+  <div class="flex md:justify-between gap-3">
+    <div class="flex w-full items-center">
+      <TabMenu class="hidden md:block w-full"
+        :pt="{ label: 'whitespace-nowrap', menu: { class: 'flex-wrap'}}"
         :model="tabList" :url="tabList.url" :label="tabList.label" :activeIndex="activeIndex"
       />
+      <Dropdown class="md:hidden w-full" :options="tabList" optionLabel="label" :modelValue="tabList[activeIndex]">
+        <template #value="slotProps">
+          <div v-if="slotProps.value">
+            <div>{{ slotProps.value.label }}</div>
+          </div>
+        </template>
+        <template #option="slotProps">
+            <a :href="slotProps.option.url" target="_self" class="w-full px-2 py-3">
+              {{ slotProps.option.label }}
+            </a>
+        </template>
+      </Dropdown>
     </div>
-    <div class="w-8">
-      <Button class="" @click="activeDialog" icon="pi pi-search" outlined />
+    <div class="min-w-fit flex item-center md:items-start">
+      <Button  size="small" @click="activeDialog" icon="pi pi-search" outlined :label="inputPlaceholder"/>
       <AlgoliaDialog
         :isDialogActive="isDialogActive" @close="closeDialog"
         :algoliaAppId="algoliaAppId" :algoliaApiKey="algoliaApiKey" :algoliaIndex="algoliaIndex" :algoliaModel="algoliaModel"
@@ -21,6 +32,7 @@
 import TabMenu from 'primevue/tabmenu';
 import AlgoliaDialog from '../algolia-dialog/index.vue'
 import Button from 'primevue/button';
+import Dropdown from 'primevue/dropdown'
 import { ref, onMounted } from "vue";
 
 defineProps({

diff --git a/src/templates/tab-menu/with-search.vue b/src/templates/tab-menu/with-search.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="flex max-[1360px]:justify-end items-center gap-2">
-    <div class="flex min-[1360px]:max-w-[95%] w-full max-[1360px]:justify-end">
-      <TabMenu class="max-[1360px]:hidden min-[1360px]:block w-full" :pt="{
-        label: 'whitespace-nowrap'
-      }" v-model:activeIndex="activeIndex" :model="mappedData" @click="eventHandler(activeIndex)" />
-      <Dropdown class="min-[1360px]:hidden w-full md:w-fit min-w-56"
+  <div class="flex gap-2">
+    <div class="flex w-full">
+      <TabMenu class="hidden md:block w-full" :pt="{
+        label: 'whitespace-nowrap',  menu: { class: 'flex-wrap'}}"
+        v-model:activeIndex="activeIndex" :model="mappedData" @click="eventHandler(activeIndex)" />
+      <Dropdown class="md:hidden w-full md:w-fit min-w-56"
         @change="eventHandler" v-model="activeOption"
         :options="mappedData" optionLabel="label">
         <template #value="slotProps">
@@ -19,8 +19,8 @@
         </template>
       </Dropdown>
     </div>
-    <div class="w-8">
-      <Button class="" @click="activeDialog" icon="pi pi-search" outlined />
+    <div class="min-w-fit flex items-center md:items-start">
+      <Button  size="small" @click="activeDialog" icon="pi pi-search" outlined :label="inputPlaceholder"/>
       <AlgoliaDialog
         :isDialogActive="isDialogActive" @close="closeDialog"
         :algoliaAppId="algoliaAppId" :algoliaApiKey="algoliaApiKey" :algoliaIndex="algoliaIndex" :algoliaModel="algoliaModel"