improved css

German-BioImaging · Nov 8, 2023 · cad7e6d · cad7e6d
1 parent 98b1b91
commit cad7e6d
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 14 deletions.
diff --git 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
@@ -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 }}