From b2d9e568f4ded6bd0631769fb487fee868b308c9 Mon Sep 17 00:00:00 2001
From: "Mr. Robot" <gomexxxx71@gmail.com>
Date: Sun, 4 Jun 2023 19:50:49 +0600
Subject: [PATCH] Issue[#323]: click image to enlarge

---
 assets/css/tailwind.css | 5 +++++
 components/TProfile.vue | 8 +++++++-
 nuxt.config.js          | 1 +
 package.json            | 1 +
 plugins/enlarge.js      | 5 +++++
 yarn.lock               | 5 +++++
 6 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 plugins/enlarge.js

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 3c82a16a..3dc9bcb8 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -111,6 +111,7 @@ html {
   min-width: 10rem;
 }
 
+<<<<<<< HEAD
 .typo {
   /* These are technically the same, but use both */
   overflow-wrap: break-word;
@@ -127,6 +128,10 @@ html {
   -moz-hyphens: auto;
   -webkit-hyphens: auto;
   hyphens: auto;
+=======
+.enlargeable-image > .slot > img.default {
+  border-radius: 50%;
+>>>>>>> a7a58bd (Issue[#323]: click image to enlarge)
 }
 
 /* purgecss end ignore */
diff --git a/components/TProfile.vue b/components/TProfile.vue
index 13393f25..39430a6a 100644
--- a/components/TProfile.vue
+++ b/components/TProfile.vue
@@ -57,13 +57,19 @@
       </TDropdown>
     </THeader>
 
+<<<<<<< HEAD
     <div class="grid grid-cols-4 gap-4 p-4">
       <div>
         <img
+=======
+    <div class="flex p-4 space-x-4">
+      <div class="w-32">
+        <EnlargeableImage
+>>>>>>> a7a58bd (Issue[#323]: click image to enlarge)
           v-if="profile.photo"
           :src="profile.photo"
+          :src_large="profile.photo"
           :alt="profile.username"
-          class="w-full rounded-full"
         />
         <TIcon
           v-else-if="profile.type !== 'City'"
diff --git a/nuxt.config.js b/nuxt.config.js
index c042c4f0..8e107243 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -78,6 +78,7 @@ export default {
     '~/plugins/directives',
     '~/plugins/vue-tailwind',
     '~/plugins/vue-datepicker',
+    { src: '@/plugins/enlarge', mode: 'client', ssr: false },
   ],
   /*
    ** Nuxt.js dev-modules
diff --git a/package.json b/package.json
index aa761953..3f902143 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "*.{css,vue}": "stylelint"
   },
   "dependencies": {
+    "@diracleo/vue-enlargeable-image": "^0.0.7",
     "@nuxt/content": "^1.9.0",
     "@nuxt/markdown": "^0.0.21",
     "@nuxt/vue-app": "^2.15.8",
diff --git a/plugins/enlarge.js b/plugins/enlarge.js
new file mode 100644
index 00000000..40e74c1b
--- /dev/null
+++ b/plugins/enlarge.js
@@ -0,0 +1,5 @@
+import Vue from 'vue'
+import EnlargeableImage from '@diracleo/vue-enlargeable-image'
+Vue.config.productionTip = false
+
+Vue.component('EnlargeableImage', EnlargeableImage)
diff --git a/yarn.lock b/yarn.lock
index 846afbfc..6b9c11d2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1265,6 +1265,11 @@
   resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
   integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
 
+"@diracleo/vue-enlargeable-image@^0.0.7":
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/@diracleo/vue-enlargeable-image/-/vue-enlargeable-image-0.0.7.tgz#d1b9d9519effebb868c3840188a4d867e1507977"
+  integrity sha512-nwrDbNQPDptwj4QRUdhvCwOfHW3ZLitaCZfjx7i+OsF1LiVcbHCgikbzrkORqCXSY3caCu+gPftElNXk37cwoQ==
+
 "@firebase/analytics-types@0.4.0":
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/@firebase/analytics-types/-/analytics-types-0.4.0.tgz#d6716f9fa36a6e340bc0ecfe68af325aa6f60508"