refactore utils

refactore html about, client_geo

3 files changed, 33 insertions, 24 deletions

diff --git a/templates/partials/about.html b/templates/partials/about.html
index b9dc26d..238d895 100644
--- a/templates/partials/about.html
+++ b/templates/partials/about.html
@@ -1,10 +1,15 @@
-<div class="about relative  text-center">
+<div class="about relative text-center">
   <p>Привет, меня зовут Стас</p>
   <p>
     Я
-    <a class="text-interactive group" href="https://habr.com/ru/companies/ruvds/articles/488340/">
+    <a
+      class="text-interactive group"
+      href="https://habr.com/ru/companies/ruvds/articles/488340/"
+    >
       backend
-      <span class="hidden z-10 group-hover:inline-block absolute text-black bg-neutral-100 border-2 border-neutral-500 inset-x-0 my-10 p-2">
+      <span
+        class="hidden z-10 group-hover:inline-block absolute text-black bg-neutral-100 border-2 border-neutral-500 inset-x-0 my-10 p-2"
+      >
         Если говорить академично, то бэкенд-разработчик — это программист,
         который отвечает за внутреннюю и вычислительную логику веб-сайта или
         веб-приложения, а также иного программного обеспечения и информационных
@@ -22,24 +27,10 @@
     В основном пишу на
     <a href="https://python.org" class="text-interactive">python</a>
   </p>
-  <div class="gap-2 flex flex-wrap text-2xl my-2">
-    <p class="w-full ">
-      Уже вычислил тебя по ip: 
-    </p>
-    <div class="w-full flex flex-wrap justify-around">
-      <span>😎</span>
-      <a class="block text-center underline decoration-primary-300" href="https://ip-api.com">
-        {{client_geo['query']}}
-      </a>
-      <span>😎</span>
-    </div>
-    {% if 'city' in client_geo %}
-    <div class="flex w-full">
-      <p>{{client_geo['country']}}</p>
-      <p>{{client_geo['city']}}</p>
-    </div>
-    {% endif %}
-      
-  </div>
-
+  <div
+    hx-get="/client_geo"
+    hx-trigger="load"
+    hx-swap="outerHTML"
+    class="w-full min-h-16"
+  ></div>
 </div>
diff --git a/templates/partials/avatars.html b/templates/partials/avatars.html
index a6f84ff..4a5c05f 100644
--- a/templates/partials/avatars.html
+++ b/templates/partials/avatars.html
@@ -1,5 +1,5 @@
   <div class="swiper h-full">
-    <div class="swiper-wrapper">
+    <div class="swiper-wrapper select-none">
       {% for url in avatar_urls %}
         <img src="{{url}}" alt="" class="swiper-slide"/>
       {% endfor %}
diff --git a/templates/partials/client_geo.html b/templates/partials/client_geo.html
new file mode 100644
index 0000000..fac4371
--- /dev/null
+++ b/templates/partials/client_geo.html
@@ -0,0 +1,18 @@
+<div class="w-full flex flex-col text-2xl">
+  <p>Уже вычислил тебя по ip:</p>
+  <div class="flex w-full justify-around">
+    <span>😎</span>
+    <a
+      class="block text-center underline decoration-primary-300"
+      href="https://ip-api.com"
+    >
+      {{client_geo['query']}}
+    </a>
+    <span>😎</span>
+  </div>
+
+  {% if 'city' in client_geo %}
+  <p>{{client_geo['country']}}</p>
+  <p>{{client_geo['city']}}</p>
+  {% endif %}
+</div>