Merge pull request #6 from harshqa-webkul/zoom_in

zoom in zoom out images

Author: jitendra-webkul

.vitepress/theme/components/ImagePopup.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <!-- Thumbnail -->
+    <img
+      :src="src"
+      :alt="alt"
+      class="thumbnail"
+      @click="open = true"
+    />
+
+    <!-- Fullscreen Overlay -->
+    <div
+      v-if="open"
+      class="overlay"
+      @click.self="open = false"
+    >
+      <div class="image-wrapper">
+        <button class="close-btn" @click="open = false">✕</button>
+
+        <img :src="src" :alt="alt" class="popup-image" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ImagePopup",
+  props: {
+    src: String,
+    alt: String
+  },
+  data() {
+    return { open: false }
+  }
+}
+</script>
+
+<style scoped>
+.thumbnail {
+  cursor: zoom-in;
+  max-width: 100%;
+  border-radius: 8px;
+}
+
+/* FULLSCREEN OVERLAY */
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 99999;
+  animation: fadeIn .25s ease;
+}
+
+.image-wrapper {
+  position: relative;
+  animation: zoomIn .25s ease;
+}
+
+.popup-image {
+  max-width: 85vw;
+  max-height: 85vh;
+  border-radius: 10px;
+  box-shadow: 0 0 20px rgba(0,0,0,0.5);
+}
+
+.close-btn {
+  position: absolute;
+  top: -35px;
+  right: -40px;
+  background: white;
+  color: black;
+  border: none;
+  border-radius: 50%;
+  font-size: 20px;
+  padding: 5px 10px;
+  cursor: pointer;
+}
+
+@media (max-width: 600px) {
+  .close-btn {
+    display: none;
+  }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes zoomIn {
+  from { transform: scale(0.7); opacity: 0; }
+  to   { transform: scale(1);   opacity: 1; }
+}
+
+</style>

.vitepress/theme/index.ts

@@ -2,6 +2,7 @@ import { h } from 'vue'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import VersionSwitcher from '@theme/components/VersionSwitcher.vue'
+import ImagePopup from './components/ImagePopup.vue'
 import '@theme/styles/index.css'
 import '@theme/styles/custom.css'
 
@@ -12,5 +13,6 @@ export default {
   },
   enhanceApp({ app }) {
     app.component('VersionSwitcher', VersionSwitcher)
+    app.component('ImagePopup', ImagePopup)
   }
 } satisfies Theme

src/master/contact/configurations.md

@@ -12,7 +12,7 @@ This guide explains the key configurations available in the Contacts plugin and
 
 1. Navigate to **`Contacts → Configurations → Tags → New Tag`** as shown in the below image.
 
-   ![Config Contact](/images1/contacts/navigate_config_tags.png)
+   <ImagePopup src="/images1/contacts/navigate_config_tags.png" alt="Config Contact" />
 
 2. A modal form appears with the following fields:
 
@@ -21,7 +21,7 @@ This guide explains the key configurations available in the Contacts plugin and
 
 3. Click **Create** to save the tag.
 
-![Config Contact](/images1/contacts/generate_tag.png)
+<ImagePopup src="/images1/contacts/generate_tag.png" alt="Config Contact" />
 
 ## Titles Configuration
 
@@ -31,7 +31,7 @@ This guide explains the key configurations available in the Contacts plugin and
 
 1. Navigate to **`Contacts → Configurations → Titles → New Title`** as shown in the below image.
 
-   ![Config Contact](/images1/contacts/navigate_config_titles.png)
+   <ImagePopup src="/images1/contacts/navigate_config_titles.png" alt="Config Contact" />
 
 2. A modal form opens with these fields:
 
@@ -40,7 +40,7 @@ This guide explains the key configurations available in the Contacts plugin and
 
 3. Click **Create** to add the title to your system.
 
-![Config Contact](/images1/contacts/generate_title.png)
+<ImagePopup src="/images1/contacts/generate_title.png" alt="Config Contact" />
 
 ## Industry Configuration
 
@@ -50,7 +50,7 @@ This guide explains the key configurations available in the Contacts plugin and
 
 1. Navigate to **`Contacts → Configurations → Industry → New Industry`** as shown in the below image.
 
-   ![Config Contact](/images1/contacts/navigate_config_industry.png)
+   <ImagePopup src="/images1/contacts/navigate_config_industry.png" alt="Config Contact" />
 
 2. A modal form appears with:
 
@@ -59,7 +59,7 @@ This guide explains the key configurations available in the Contacts plugin and
 
 3. Click **Create** to save.
 
-![Config Contact](/images1/contacts/generate_industry.png)
+<ImagePopup src="/images1/contacts/generate_industry.png" alt="Config Contact" />
 
 ## Banks Configuration
 
@@ -69,7 +69,7 @@ This guide explains the key configurations available in the Contacts plugin and
 
 1. Navigate to **`Contacts → Configurations → Banks → New Bank`** as shown in the below image.
 
-   ![Config Contact](/images1/contacts/navigate_config_banks.png)
+   <ImagePopup src="/images1/contacts/navigate_config_banks.png" alt="Config Contact" />
 
 2. A form with the following sections appears:
 
@@ -90,7 +90,7 @@ This guide explains the key configurations available in the Contacts plugin and
 
 3. Click **Create** to add the bank.
 
-![Config Contact](/images1/contacts/generate_bank.png)
+<ImagePopup src="/images1/contacts/generate_bank.png" alt="Config Contact" />
 
 ## Bank Accounts Configuration
 
@@ -100,7 +100,7 @@ This guide explains the key configurations available in the Contacts plugin and
 
 1. Navigate to **`Contacts → Configurations → Bank Accounts → New Bank Account`** as shown in the below image.
 
-   ![Config Contact](/images1/contacts/navigate_config_bank_accounts.png)
+   <ImagePopup src="/images1/contacts/navigate_config_bank_accounts.png" alt="Config Contact" />
 
 2. A modal form appears with these fields:
 
@@ -111,7 +111,7 @@ This guide explains the key configurations available in the Contacts plugin and
 
 3. Click **Create** to save the new bank account.
 
-![Config Contact](/images1/contacts/generate_bank_account.png)
+<ImagePopup src="/images1/contacts/generate_bank_account.png" alt="Config Contact" />
 
 ## Summary
 

src/master/contact/contacts.md

@@ -8,7 +8,7 @@ The **Contacts** plugin in **AureusERP** helps you manage all types of business
 
 1. Navigate to **`Contacts → Contacts → Create Contact`** as shown in the below image.
 
-   ![Create Contact](/images1/contacts/navigate_create_contact.png)
+  <ImagePopup src="/images1/contacts/navigate_create_contact.png" alt="Create Contact" />
 
 2. Fill out the form with the following details:
 
@@ -27,7 +27,7 @@ The **Contacts** plugin in **AureusERP** helps you manage all types of business
    - **_Tags:_** Labels or categories to organize contacts better.
    - **_Address:_** Fill in full address details including street, city, zip code, state, and country.
 
-   ![General Contact](/images1/contacts/general_contact.png)
+  <ImagePopup src="/images1/contacts/general_contact.png" alt="General Contact" />
 
    ### Sales and Purchase Section
 
@@ -41,7 +41,7 @@ The **Contacts** plugin in **AureusERP** helps you manage all types of business
      - **_Reference:_** Optional code for cross-referencing.
      - **_Industry:_** Select the business sector this contact belongs to.
 
-   ![General Contact](/images1/contacts/others_contact.png)
+  <ImagePopup src="/images1/contacts/others_contact.png" alt="General Contact" />
 
 3. Action Buttons:
 
@@ -53,7 +53,7 @@ The **Contacts** plugin in **AureusERP** helps you manage all types of business
 
 Click **Create** to save the contact. You'll be redirected to the **View Partner** page.
 
-![View Contact](/images1/contacts/view_contact.png)
+<ImagePopup src="/images1/contacts/view_contact.png" alt="View Contact" />
 
 ### Edit Partner
 
@@ -70,7 +70,7 @@ This allows you to:
 - Add multiple representatives or staff members for a business contact.
 - Store different contact roles (salesperson, support, billing, etc.).
 
-![Manage Contacts](/images1/contacts/manage_contacts.png)
+<ImagePopup src="/images1/contacts/manage_contacts.png" alt="Manage Contacts" />
 
 > 📌 **Use Case:** Useful for organizations that need to store multiple points of contact under one company.
 
@@ -84,7 +84,7 @@ This allows you to:
 - **_Types:_** Choose the address type—Permanent, Present, Invoice, Delivery, or Other.
 - **_Fields:_** Fill in details like name, email, phone, mobile, and complete address.
 
-![Manage Address](/images1/contacts/address_tab.png)
+<ImagePopup src="/images1/contacts/address_tab.png" alt="Manage Address" />
 
 This structure ensures that all address-related information is properly categorized and easily accessible.