ref: finish refactoring the layout

engines/ahmia/hidden_service.php

@@ -30,6 +30,7 @@
 
     function print_hidden_service_results($results)
     {
+        echo "<div class=\"result-container__inner\">";
         echo "<div class=\"text-result-container\">";
 
         foreach($results as $result)

engines/bittorrent/merge.php

@@ -73,6 +73,7 @@
 
     function print_merged_torrent_results($results)
     {
+        echo "<div class=\"result-container__inner\">";
         echo "<div class=\"text-result-container\">";
 
         if (!empty($results)) 

engines/brave/video.php

@@ -38,6 +38,7 @@
 
     function print_video_results($results)
     {
+        echo "<div class=\"result-container__inner\">";
         echo "<div class=\"text-result-container\">";
 
             foreach($results as $result)

engines/google/text.php

@@ -140,20 +140,26 @@
             $response = $special["special_response"]["response"];
             $source = $special["special_response"]["source"];
 
-            echo "<p class=\"special-result-container\">";
+            echo "<div class=\"special-result-container\">";
             if (array_key_exists("image", $special["special_response"]))
             {
                 $image_url = $special["special_response"]["image"];
                 echo "<img src=\"image_proxy.php?url=$image_url\">";
             }
-            echo $response;
+            
+            echo "<div class=\"special-result-container__inner\">";
+
             if ($source)
                 echo "<a href=\"$source\" target=\"_blank\">$source</a>";
-            echo "</p>";
+            echo "<p>$response</p>";
+            
+            echo "</div>";
 
             array_shift($results);
         }
 
+        echo "</div>";
+        echo "<div class=\"result-container__inner\">";
         echo "<div class=\"text-result-container\">";
 
         foreach($results as $result)

engines/qwant/image.php

@@ -42,6 +42,7 @@
 
     function print_image_results($results)
     {
+        echo "<div class=\"result-container__inner\">";
         echo "<div class=\"image-result-container\">";
 
             foreach($results as $result)

search.php

@@ -51,6 +51,7 @@
             $config = require "config.php";
             require "misc/tools.php";
 
+            echo "<div class=\"result-container\">";
 
             $page = isset($_REQUEST["p"]) ? (int) $_REQUEST["p"] : 0;
 
@@ -64,22 +65,22 @@
                         check_ddg_bang($query);
                     require "engines/google/text.php";
                     $results = get_text_results($query, $page);
-                    print_elapsed_time($start_time);
                     print_text_results($results);
+                    print_elapsed_time($start_time);
                     break;
 
                 case 1:
                     require "engines/qwant/image.php";
                     $results = get_image_results($query_encoded, $page);
-                    print_elapsed_time($start_time);
                     print_image_results($results);
+                    print_elapsed_time($start_time);
                     break;
 
                 case 2:
                     require "engines/brave/video.php";
                     $results = get_video_results($query_encoded);
-                    print_elapsed_time($start_time);
                     print_video_results($results);
+                    print_elapsed_time($start_time);
                     break;
 
                 case 3:
@@ -89,8 +90,8 @@
                     {
                         require "engines/bittorrent/merge.php";
                         $results = get_merged_torrent_results($query_encoded);
-                        print_elapsed_time($start_time);
                         print_merged_torrent_results($results);
+                        print_elapsed_time($start_time);
                     }
                     break;
 
@@ -101,8 +102,8 @@
                     {
                         require "engines/ahmia/hidden_service.php";
                         $results = get_hidden_service_results($query_encoded);
-                        print_elapsed_time($start_time);
                         print_hidden_service_results($results);
+                        print_elapsed_time($start_time);
                     }
                     break;
 
@@ -130,8 +131,11 @@
 
                     print_next_page_button("&gt;", $page + 10, $query, $type);
 
-                echo "</div>";
+                echo "</div>"; # .next-page-button-wrapper
             }
+
+            echo "</div>"; # .result-container__inner (text.php->print_x_results)
+            echo "</div>"; # .result-container
         ?>
 
 <?php require "misc/footer.php"; ?>

static/css/styles.css

@@ -227,32 +227,75 @@ a:hover,
     float: right;
 }
 
-.text-result-container,
+.result-container {
-#time,
+    display: flex;
+    flex-direction: row-reverse;
+    gap: 2rem;
+    width: fit-content;
+    padding: calc(var(--footer-height) + 2rem) 170px;
+    padding-top: 1rem;
+    box-sizing: border-box;
+}
+
+.result-container__inner {
+    display: flex;
+    flex-direction: column;
+}
+
+#time {
+    font-size: 13px;
+    opacity: 0.65;
+    order: 0;
+}
+
+.image-result-container,
+.text-result-container {
+    order: 1;
+}
+
 .next-page-button-wrapper {
-    margin-left: 170px;
+    order: 2;
 }
 
 .text-result-container {
-    margin-bottom: 100px;
+    margin-bottom: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
 }
 
 .special-result-container {
-    padding: 10px;
+    padding: 18px;
     border: 1px solid var(--special-result-border);
     width: 500px;
     border-radius: 8px;
     background: var(--special-text-background);
     color: var(--special-text-color);
-    margin-left: 840px;
+    height: fit-content;
-    margin-top: 0px;
+    box-sizing: border-box;
-    position: absolute;
+
+    /* New layout */
+    display: flex;
+    flex-direction: row;
+    gap: 1.5rem;
 }
 
+.special-result-container__inner {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.special-result-container__inner p {
+    font-size: 16px;
+    margin: 0;
+    color: var(--main-fg);
+}
+
+
 .text-result-wrapper {
     max-width: 550px;
     word-wrap: break-word;
-    margin-bottom: 35px;
 }
 
 .text-result-wrapper a {
@@ -270,33 +313,26 @@ a:hover,
     color: var(--result-link-fg);
     padding-top: 5px;
     margin-top: 1px;
+    font-weight: 500;
+    margin-bottom: 8px;
 }
 
 .special-result-container a {
     display: flex;
-    margin-top: 10px;
     font-size: 14px;
 }
 
 .special-result-container img {
     display: flex;
     max-width: 60%;
-    max-height: 200px;
+    max-height: 64px;
-    padding-bottom: 10px;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.next-page-button-wrapper {
-    margin-top: -50px;
-    margin-bottom: 100px;
 }
 
 .next-page-button-wrapper button {
     border: none;
     background-color: inherit;
     color: var(--result-link-fg);
-    font-size: 18px;
+    font-size: 16px;
     margin-right: 8px;
 }
 
@@ -380,11 +416,16 @@ a[title] {
     color: #ff79c6;
 }
 
-@media only screen and (max-width: 1320px) {
+@media only screen and (max-width: 1422px) {
+    /* Move the special result to the top of the page, under the #time element */
+    .result-container {
+        flex-direction: column;
+        gap: 1rem;
+    }
+
     .special-result-container {
-        position: relative;
+        max-width: 550px;
-        float: none;
+        margin: 0;
-        margin-left: 165px;
     }
 }
 
@@ -489,7 +530,6 @@ a[title] {
         position: relative;
         float: none;
         max-width: 90%;
-        margin-left: 10px;
         width: auto;
     }
 
@@ -510,10 +550,21 @@ a[title] {
         margin-top: 10%;
     }
 
-    .text-result-container,
+    .special-result-container {
-    #time,
+        margin: 0;
-    .next-page-button-wrapper {
+        max-width: 550px;
-        margin-left: 20px;
+
-        max-width: 90%;
+        /* Make the layout a column */
+        flex-direction: column;
+    }
+
+    .special-result-container img {
+        max-width: 64px;
+    }
+
+    .result-container {
+        /* Remove the giant padding from the container */
+        padding: calc(var(--footer-height) + 2rem) 25px;
+        padding-top: 1rem;
     }
 }