From c10642df88148c5b7049dc62bb0a78572163f91c Mon Sep 17 00:00:00 2001
From: ivanalfonso97 <ivanalfonso.chan@gmail.com>
Date: Wed, 3 Apr 2024 23:59:49 +0800
Subject: [PATCH] create responsive search

---
 .../templates/registry/pages/listing-details.html  | 14 +++++++-------
 .../templates/registry/pages/search-listing.html   |  4 ++--
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/registry/templates/registry/pages/listing-details.html b/registry/templates/registry/pages/listing-details.html
index 9d1cc9a..99eb179 100644
--- a/registry/templates/registry/pages/listing-details.html
+++ b/registry/templates/registry/pages/listing-details.html
@@ -3,15 +3,15 @@
 {% load static crispy_forms_tags %}
 
 {% block main %}
-<div class="flex flex-col w-full h-full p-10">
-	<div class="flex flex-row justify-between items-center pb-10">
+<div class="flex flex-col w-full h-full p-4 md:p-10">
+	<div class="flex flex-col gap-4 justify-between items-center pb-4 md:pb-10 md:flex-row md:gap-0">
 		<h3 class="heading">{{ facility.facility_name }}</h3>
-		<a class="btn btn-primary" href="{% url 'registry:search' %}">
-			← Back to facility search
+		<a class="btn btn-secondary" href="{% url 'registry:search' %}">
+			← Back to search
 		</a>
 	</div>
-	<div class="flex flex-row gap-6">
-		<div class="w-1/2">
+	<div class="flex flex-col gap-6 md:flex-row">
+		<div class="w-full md:w-1/2">
 			{% if not facility.is_verified %}
 			<div class="mb-6">
 				{% include 'registry/components/unverified-alert.html'%}
@@ -43,7 +43,7 @@ <h4 class="regular-bold mb-4">{{ facility.facility_name }}</h4>
 				</div>
 			</div>
 		</div>
-		<div class="w-1/2">
+		<div class="w-full md:w-1/2">
 			<div class="card p-4">
 				{% if facility.email or facility.alternative_email %}
 				<form action="{{ referral_form.form_action }}" method="post">
diff --git a/registry/templates/registry/pages/search-listing.html b/registry/templates/registry/pages/search-listing.html
index ff07f37..0f9ced9 100644
--- a/registry/templates/registry/pages/search-listing.html
+++ b/registry/templates/registry/pages/search-listing.html
@@ -4,9 +4,9 @@
 
 {% block main %}
 <div class="flex justify-center items-center w-full h-full">
-  <div class="absolute top-1/2 flex flex-col gap-4 w-full transform -translate-y-1/2">
+  <div class="absolute top-1/2 flex flex-col gap-4 p-4 w-full transform -translate-y-1/2">
     <img src="{% static 'images/ms-full-logo.svg' %}" style="height: 100px;" alt="Medsync Logo">
-    <form class="mx-auto w-1/2" hx-get="{% url 'registry:search' %}" hx-trigger="input" hx-target="#list-search">
+    <form class="mx-auto w-full md:w-1/2" hx-get="{% url 'registry:search' %}" hx-trigger="input" hx-target="#list-search">
       <input type="text" id="search-input" name="query" list="list-search" class="input w-full small-text"
         placeholder="Search for a facility...">
       <div id="list-search" class=""></div>