improved HTML for search results

Attention: Template authors need to adjust their CSS!

Original structure:
div.search_result >
  a.wikilink1 > span.search_cnt
  br
  div.search_snippet

New structure:
dl.search_results >
  dt > a.wikilink1
  dd

Author: selfthinker

inc/html.php

@@ -323,11 +323,11 @@ function html_search(){
     flush();
 
     //show progressbar
-    print '<div class="centeralign" id="dw__loading">'.NL;
+    print '<div id="dw__loading">'.NL;
     print '<script type="text/javascript" charset="utf-8"><!--//--><![CDATA[//><!--'.NL;
     print 'showLoadBar();'.NL;
     print '//--><!]]></script>'.NL;
-    print '<br /></div>'.NL;
+    print '</div>'.NL;
     flush();
 
     //do quick pagesearch
@@ -363,20 +363,24 @@ function html_search(){
     //do fulltext search
     $data = ft_pageSearch($QUERY,$regex);
     if(count($data)){
+        print '<dl class="search_results">';
         $num = 1;
         foreach($data as $id => $cnt){
-            print '<div class="search_result">';
+            print '<dt>';
             print html_wikilink(':'.$id,useHeading('navigation')?null:$id,$regex);
             if($cnt !== 0){
-                print ': <span class="search_cnt">'.$cnt.' '.$lang['hits'].'</span><br />';
+                print ': '.$cnt.' '.$lang['hits'].'';
+            }
+            print '</dt>';
+            if($cnt !== 0){
                 if($num < FT_SNIPPET_NUMBER){ // create snippets for the first number of matches only
-                    print '<div class="search_snippet">'.ft_snippet($id,$regex).'</div>';
+                    print '<dd>'.ft_snippet($id,$regex).'</dd>';
                 }
                 $num++;
             }
-            print '</div>';
             flush();
         }
+        print '</dl>';
     }else{
         print '<div class="nothing">'.$lang['nothingfound'].'</div>';
     }

lib/tpl/default/design.css

@@ -706,12 +706,20 @@ div.insitu-footnote {
 }
 
 /* --------------- search result formating --------------- */
-div.dokuwiki .search_result {
-  margin-bottom: 6px;
+#dw__loading {
+    text-align: center;
+    margin-bottom: 1em;
+}
+
+div.dokuwiki .search_results {
   padding: 0 10px 0 30px;
 }
 
-div.dokuwiki .search_snippet {
+div.dokuwiki .search_results dt {
+  margin-bottom: 3px;
+}
+div.dokuwiki .search_results dd {
+  margin-bottom: 6px;
   color: __text_other__;
   font-size: 12px;
   margin-left: 20px;

lib/tpl/dokuwiki/css/_search.css

@@ -8,6 +8,8 @@
 
 /* loading gif */
 #dw__loading {
+    text-align: center;
+    margin-bottom: 1.4em;
 }
 
 /*____________ matching pagenames ____________*/
@@ -31,14 +33,20 @@
 
 /*____________ search results ____________*/
 
-/* container for one search result */
-.dokuwiki div.search_result {
-    margin-bottom: 1.4em;
+.dokuwiki dl.search_results {
+    margin-bottom: 1.2em;
+}
+
+/* search heading */
+.dokuwiki dl.search_results dt {
+    font-weight: normal;
+    margin-bottom: .2em;
 }
 /* search snippet */
-.dokuwiki div.search_result div.search_snippet {
+.dokuwiki dl.search_results dd {
     color: __text_alt__;
     background-color: inherit;
+    margin: 0 0 1.2em 0;
 }
 
 /* search hit in normal text */
@@ -47,11 +55,11 @@
     background-color: __highlight__;
 }
 /* search hit in search results */
-.dokuwiki div.search_result strong.search_hit {
+.dokuwiki .search_results strong.search_hit {
     font-weight: normal;
 }
 /* ellipsis separating snippets */
-.dokuwiki div.search_result .search_sep {
+.dokuwiki .search_results .search_sep {
     color: __text__;
     background-color: inherit;
 }