From cad7e6d3c6306678576d05bada416552f77a5eb0 Mon Sep 17 00:00:00 2001
From: unknown <tom.boissonnet@hhu.de>
Date: Wed, 8 Nov 2023 17:25:57 +0100
Subject: [PATCH] improved css

---
 .../tagsearch/css/webtagging_search.css       | 19 ++++++++-
 .../templates/omero_tagsearch/tagnav.html     | 39 ++++++++++++-------
 2 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/omero_tagsearch/static/tagsearch/css/webtagging_search.css b/omero_tagsearch/static/tagsearch/css/webtagging_search.css
index 0c8d447..c429942 100644
--- a/omero_tagsearch/static/tagsearch/css/webtagging_search.css
+++ b/omero_tagsearch/static/tagsearch/css/webtagging_search.css
@@ -11,9 +11,26 @@
     }
 
 #id_selectedTags {
-  width:150px;
+  width:200px;
 }
 
+#id_excludedTags {
+  width:200px;
+}
+
+.tagSearchDivider .field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 1px; /* Adjust as needed */
+}
+
+.tagSearchDivider label {
+    width:100px;
+    margin-right: 10px; /* Adjust as needed */
+}
+
+
 .hidden {
   display: none !important;
 }
diff --git a/omero_tagsearch/templates/omero_tagsearch/tagnav.html b/omero_tagsearch/templates/omero_tagsearch/tagnav.html
index 9f69d47..c433fb3 100644
--- a/omero_tagsearch/templates/omero_tagsearch/tagnav.html
+++ b/omero_tagsearch/templates/omero_tagsearch/tagnav.html
@@ -218,20 +218,33 @@ <h2>{% trans "Tag Search" %}</h2>
           {# {{ tagnav_form.as_p }} #}
           {{ tagnav_form.non_field_errors }}
           <div class="fieldWrapper">
-              <div class="tagSearchDivider">
-                  <label for="id_operation">Joining method:</label>{{ tagnav_form.operation }}<br/>
-                  {{ tagnav_form.selectedTags.errors }}
-                  <label for="id_selectedTags">Selected Tags:</label>
-                  {{ tagnav_form.selectedTags }}
-                  <span class="searching_info"
-                    title="Tag Search - <small>Perform a query for Projects, Datasets and Images based on the tag specified. The query gets all Projects, Datasets and Images which have <b>all</b> of the specified tags.
-                    Each time a tag is added, the list of potential tags to add is reduced to those that overlap with the tags already specified.
-                    A count of results is shown in the search panel and at any time it is possible to show the Projects, Datasets and Images that match by turning on the <b>Preview<b></small>">
+                <div class="tagSearchDivider">
+                  <div>
+                    <label for="id_operation">Joining method:</label>
+                    {{ tagnav_form.operation }}
+                    <span class="searching_info"
+                    title="With the AND joining method, the query gets the objects which have all of the specified tags. With the OR joining method, it will get the objects having at least one of the specified tags.">
                     <img src="{% static 'webgateway/img/help16.png' %}" />
-                  </span><br/><br/>
-                  {{ tagnav_form.excludedTags.errors }}
-                  <label for="id_excludedTags">Excluded Tags:</label>
-                  {{ tagnav_form.excludedTags }}
+                    </span>
+                  </div><br/>
+                  <div class="field">
+                    {{ tagnav_form.selectedTags.errors }}
+                    <label for="id_selectedTags">Selected Tags:</label>
+                    {{ tagnav_form.selectedTags }}
+                    <span class="searching_info"
+                    title="Perform a query for Projects, Datasets, Screen, Plates, Runs, Wells and Images based on the specifed tag, according to the specified joining operation.">
+                    <img src="{% static 'webgateway/img/help16.png' %}" />
+                    </span>
+                  </div><br/><br/>
+                  <div class="field">
+                    {{ tagnav_form.excludedTags.errors }}
+                    <label for="id_excludedTags">Excluded Tags:</label>
+                    {{ tagnav_form.excludedTags }}
+                    <span class="searching_info"
+                    title="Remove from the results the objects having excluded tags.">
+                    <img src="{% static 'webgateway/img/help16.png' %}" />
+                    </span>
+                  </div>
               </div>
 
               {{ tagnav_form.results_preview.errors }}