From 7638f338d22fccffb33bdfe028c076b17465337a Mon Sep 17 00:00:00 2001
From: jochen <jochen.christ@innoq.com>
Date: Wed, 29 May 2024 09:25:25 +0200
Subject: [PATCH] catalog: Show search bar also on mobile

---
 CHANGELOG.md                            |  3 ++-
 datacontract/templates/index.html       | 12 ++++-----
 datacontract/templates/style/output.css | 33 ++++++++++++++-----------
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 90b4eb27..3b1a5617 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,12 +12,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `datacontract export --format dbml`: Export to [Database Markup Language (DBML)](https://dbml.dbdiagram.io/home/) (#135)
 - `datacontract export --format avro`: Now supports config map on field level for logicalTypes and default values [Custom Avro Properties](./README.md#custom-avro-properties)
 - `datacontract import --format avro`: Now supports importing logicalType and default definition on avro files [Custom Avro Properties](./README.md#custom-avro-properties)
-- Support `bigqueryType` for testing BigQuery types
+- Support `config.bigqueryType` for testing BigQuery types
 
 ### Fixed
 
 - Fixed jsonschema export for models with empty object-typed fields (#218)
 - Fixed testing BigQuery tables with BOOL fields
+- `datacontract catalog` Show search bar also on mobile
 
 ## [0.10.4] - 2024-05-17
 
diff --git a/datacontract/templates/index.html b/datacontract/templates/index.html
index 2d07435d..511e04b6 100644
--- a/datacontract/templates/index.html
+++ b/datacontract/templates/index.html
@@ -14,7 +14,7 @@
 <div class="min-h-full flex flex-col">
 
   <nav class="bg-white shadow-sm">
-    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
       <div class="flex h-16 justify-between">
         <div class="flex">
           <div class="flex flex-shrink-0 items-center mr-6">
@@ -32,9 +32,9 @@
 
   <main class="pb-7">
 
-    <div class="pt-5 mx-auto max-w-7xl sm:px-6 lg:px-8">
+    <div class="pt-5 mx-auto max-w-7xl px-6 lg:px-8">
       <div>
-        <div class="lg:flex lg:items-center lg:justify-between px-4 sm:px-0">
+        <div class="lg:flex lg:items-center lg:justify-between px-0">
           <div class="min-w-0 flex-1">
             <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
               Data Contract Catalog</h2>
@@ -54,8 +54,8 @@ <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm
 
             <form aria-labelledby="filter-heading" class="pb-4" >
               <h2 id="filter-heading" class="sr-only">Filters</h2>
-              <div class="flex items-center justify-between">
-                <div class="hidden sm:flex sm:items-baseline sm:space-x-8">
+              <div class="sm:flex items-center justify-between">
+                <div class="sm:flex items-baseline space-x-8">
                   <div>
                     <div class="relative rounded-md shadow-sm">
                       <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
@@ -63,7 +63,7 @@ <h2 id="filter-heading" class="sr-only">Filters</h2>
                           <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
                         </svg>
                       </div>
-                      <input type="text" name="q" id="search" class="block w-72 rounded-md border-0 py-1.5 pl-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="Search">
+                      <input type="text" name="q" id="search" class="block w-full sm:w-72 rounded-md border-0 py-1.5 pl-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="Search">
                     </div>
                   </div>
                 </div>
diff --git a/datacontract/templates/style/output.css b/datacontract/templates/style/output.css
index 56c62617..a3066ee0 100644
--- a/datacontract/templates/style/output.css
+++ b/datacontract/templates/style/output.css
@@ -781,10 +781,6 @@ video {
   width: 58.333333%;
 }
 
-.w-72 {
-  width: 18rem;
-}
-
 .w-9\/12 {
   width: 75%;
 }
@@ -841,6 +837,10 @@ video {
   align-items: center;
 }
 
+.items-baseline {
+  align-items: baseline;
+}
+
 .justify-center {
   justify-content: center;
 }
@@ -888,6 +888,12 @@ video {
   margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(2rem * var(--tw-space-x-reverse));
+  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-y-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1004,6 +1010,11 @@ video {
   padding: 1.5rem;
 }
 
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -1376,6 +1387,10 @@ video {
     width: 80%;
   }
 
+  .sm\:w-72 {
+    width: 18rem;
+  }
+
   .sm\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -1392,22 +1407,12 @@ video {
     align-items: center;
   }
 
-  .sm\:items-baseline {
-    align-items: baseline;
-  }
-
   .sm\:space-x-6 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(1.5rem * var(--tw-space-x-reverse));
     margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
-  .sm\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(2rem * var(--tw-space-x-reverse));
-    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
-  }
-
   .sm\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;