Home Explore Help
Sign In
poesty
/
librex-extra
forked from mirrors/librex
1
0
Fork 0
Files Pull Requests 0
Browse Source

Merge pull request #113 from flowfield-dev/main

Refactor UI/UX design for improved user experience
hnhx 2 years ago
parent
312517b955 0e81ca001c
commit
7d8c0ed606
23 changed files with 256 additions and 62 deletions
Split View Show Diff Stats
  1. 0 0
      config.php
  2. 1 0
      engines/ahmia/hidden_service.php
  3. 1 0
      engines/bittorrent/merge.php
  4. 7 3
      engines/brave/video.php
  5. 9 3
      engines/google/text.php
  6. 13 0
      engines/qwant/image.php
  7. 1 1
      index.php
  8. 1 1
      misc/header.php
  9. 0 0
      opensearch.xml
  10. 10 6
      search.php
  11. 213 48
      static/css/styles.css
  12. 0 0
      static/css/themes/amoled.css
  13. 0 0
      static/css/themes/auto.css
  14. 0 0
      static/css/themes/dark.css
  15. 0 0
      static/css/themes/darker.css
  16. 0 0
      static/css/themes/discord.css
  17. 0 0
      static/css/themes/github_night.css
  18. 0 0
      static/css/themes/google.css
  19. 0 0
      static/css/themes/gruvbox.css
  20. 0 0
      static/css/themes/light.css
  21. 0 0
      static/css/themes/night_owl.css
  22. 0 0
      static/css/themes/nord.css
  23. 0 0
      static/css/themes/startpage.css

+ 0 - 0
config.php.example → config.php
View File


+ 1 - 0
engines/ahmia/hidden_service.php
View File 

@@ -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)

+ 1 - 0
engines/bittorrent/merge.php
View File 

@@ -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))

+ 7 - 3
engines/brave/video.php
View File 

@@ -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)
 
@@ -50,12 +51,15 @@
 
                 $thumbnail = $result["thumbnail"];
 
 
                 echo "<div class=\"text-result-wrapper\">";
 
-                echo "<a href=\"$url\">";
 
+                echo "<a class=\"video-link\" href=\"$url\">";
 
+                echo "<div class=\"video-thumbnail\">";
 
+                echo "<img class=\"video-img\" src=\"image_proxy.php?url=$thumbnail\">";
 
+                echo "</div>";
 
+                echo "<div class=\"video-properties\">";
 
                 echo "$base_url";
 
                 echo "<h2>$title</h2>";
 
-                echo "<img class=\"video-img\" src=\"image_proxy.php?url=$thumbnail\">";
 
-                echo "<br>";
 
                 echo "<span>$date - $views</span>";
 
+                echo "</div>";
 
                 echo "</a>";
 
                 echo "</div>";
 
             }

+ 9 - 3
engines/google/text.php
View File 

@@ -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)

+ 13 - 0
engines/qwant/image.php
View File 

@@ -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)
 
@@ -50,8 +51,20 @@
 
                 $alt = $result["alt"];
 
                 $url = $result["url"];
 
 
+                $parsed_url = parse_url($url);
 
+                $host = $parsed_url['host'];
 
+
 
+                // Extract the domain name from the host
 
+                $url_trunc = preg_replace('/^www\./', '', $host);
 
+
 
                 echo "<a title=\"$alt\" href=\"$url\" target=\"_blank\">";
 
+                echo "<div class=\"image-wrapper\">";
 
                 echo "<img src=\"image_proxy.php?url=$thumbnail\">";
 
+                echo "</div>";
 
+                echo "<span class=\"image-properties\">";
 
+                echo "<span class=\"image-url\">$url_trunc</span>";
 
+                echo "<h4 class=\"image-title\">$alt</h4>";
 
+                echo "</span>";
 
                 echo "</a>";
 
             }

+ 1 - 1
index.php
View File 

@@ -5,7 +5,7 @@
 
     <body>
 
         <form class="search-container" action="search.php" method="get" autocomplete="off">
 
                 <h1>Libre<span class="X">X</span></h1>
 
-                <input type="text" name="q" autofocus/>
 
+                <input placeholder="Search..." type="text" name="q" autofocus/>
 
                 <input type="hidden" name="p" value="0"/>
 
                 <input type="hidden" name="t" value="0"/>
 
                 <input type="submit" class="hide"/>

+ 1 - 1
misc/header.php
View File 

@@ -8,7 +8,7 @@
 
         <link rel="stylesheet" type="text/css" href="static/css/styles.css"/>
 
         <link title="LibreX search" type="application/opensearchdescription+xml" href="/opensearch.xml?method=POST" rel="search"/>
 
         <link rel="stylesheet" type="text/css" href="<?php
 
-                echo "static/css/";
 
+                echo "static/css/themes/";
 
                 if (isset($_COOKIE["theme"]) || isset($_REQUEST["theme"]))
 
                     echo htmlspecialchars((isset($_COOKIE["theme"]) ? $_COOKIE["theme"] : $_REQUEST["theme"]) . ".css");
 
                 else

+ 0 - 0
opensearch.xml.example → opensearch.xml
View File


+ 10 - 6
search.php
View File 

@@ -51,6 +51,7 @@
 
             $config = require "config.php";
 
             require "misc/tools.php";
 
 
+            echo "<div class=\"result-container\" data-type=\"$type\">";
 
 
             $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"; ?>

+ 213 - 48
static/css/styles.css
View File 

@@ -1,3 +1,19 @@
 
+/* Layout variables */
 
+:root {
 
+    --footer-height: 51px;
 
+}
 
+
 
+/* Color variables */
 
+:root {
 
+    /*
 
+        TODO: Variables here were magic colors
 
+              found scattered around in the primary CSS.
 
+              Move them to in their respective themes
 
+              in the future :v
 
+    */
 
+    --element-border-focus: #5f6368;
 
+}
 
+
 
 html {
 
     color: var(--main-fg);
 
     background-color: var(--main-bg);
 
@@ -40,12 +56,28 @@ a:hover,
 
 }
 
 
 .search-container {
 
+    /*  Make the search container take up 100% of the screen height
 
+        And cooperate with the footer */
 
+    height: calc(100vh - var(--footer-height));
 
+
 
+    /* Flex properties for correct alignment */
 
+    display: flex;
 
+    flex-direction: column;
 
+    
+    /* Align text & items in the middle */
 
     text-align: center;
 
-    margin-top: 10%;
 
+    justify-content: center;
 
+    align-items: center;
 
+
 
+    /* Gap between elements */
 
+    gap: 1rem
 
 }
 
 
 .search-container h1 {
 
     font-size: 70px;
 
+
 
+    /* Remove unnecessary margin */
 
+    margin-bottom: 0;
 
 }
 
 
 .search-container input,
 
@@ -53,11 +85,34 @@ a:hover,
 
     width: 500px;
 
     color: var(--search-container-text-color);
 
     background-color: var(--search-container-background-color);
 
-    padding: 10px;
 
     font-size: inherit;
 
     font-family: sans-serif;
 
     border: 1px solid var(--search-container-background-border);
 
     border-radius: 25px;
 
+    
+    /* Give a wider padding on the X axis to look more appealing */
 
+    padding: 10px 16px;
 
+}
 
+
 
+/* Input focus style for accessibility */
 
+.search-container input:focus,
 
+.sub-search-container input:focus {
 
+    border: 1px solid var(--element-border-focus);
 
+}
 
+
 
+/*  Make sure that we can differentiate the placeholder
 
+    from real input */
 
+.search-container input::placeholder,
 
+.sub-search-container input::placeholder {
 
+    font-style: italic;
 
+}
 
+
 
+/* Make the search button wrapper a flexbox */
 
+.search-button-wrapper {
 
+    display: flex;
 
+    flex-direction: row;
 
+    align-items: center;
 
+    gap: 1rem;
 
 }
 
 
 .search-button-wrapper button,
 
@@ -68,12 +123,7 @@ a:hover,
 
     font-size: 14px;
 
     border: 1px solid var(--main-bg);
 
     border-radius: 4px;
 
-    padding: 13px 10px 13px 10px;
 
-}
 
-
 
-.search-button-wrapper button {
 
-
 
-    margin: 30px 60px 0px 60px;
 
+    padding: 10px 16px;
 
 }
 
 
 .sub-search-container {
 
@@ -116,7 +166,7 @@ a:hover,
 
 
 .search-button-wrapper button:hover,
 
 .misc-container button:hover {
 
-    border: 1px solid #5f6368;
 
+    border: 1px solid var(--element-border-focus);
 
     cursor: pointer;
 
 }
 
 
@@ -172,37 +222,85 @@ a:hover,
 
     padding: 5px;
 
     font-size: inherit;
 
     font-family: inherit;
 
-    border: 1px solid #5f6368;
 
+    border: 1px solid var(--element-border-focus);
 
     border-radius: 5px;
 
     float: right;
 
 }
 
 
-.text-result-container,
 
-#time,
 
+.result-container {
 
+    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;
 
+}
 
+
 
+/* Allow the video wrapper to be a bit bigger */
 
+.result-container[data-type="2"] .text-result-wrapper {
 
+    max-width: 700px;
 
+}
 
+
 
+#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;
 
-    margin-top: 0px;
 
-    position: absolute;
 
+    height: fit-content;
 
+    box-sizing: border-box;
 
+
 
+    /* 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 {
 
@@ -210,9 +308,12 @@ a:hover,
 
     color: var(--result-fg);
 
 }
 
 
-.video-img {
 
-    height: 115px;
 
+.video-thumbnail {
 
+    min-height: 96px;
 
+    max-height: 96px;
 
+    background-color: var(--search-container-background-color);
 
     border-radius: 12px;
 
+    aspect-ratio: 4 / 3;
 
 }
 
 
 .text-result-wrapper h2 {
 
@@ -220,33 +321,27 @@ a:hover,
 
     color: var(--result-link-fg);
 
     padding-top: 5px;
 
     margin-top: 1px;
 
+    font-weight: 500;
 
+    margin-bottom: 8px;
 
+    width: fit-content;
 
 }
 
 
 .special-result-container a {
 
     display: flex;
 
-    margin-top: 10px;
 
     font-size: 14px;
 
 }
 
 
 .special-result-container img {
 
     display: flex;
 
     max-width: 60%;
 
-    max-height: 200px;
 
-    padding-bottom: 10px;
 
-    margin-left: auto;
 
-    margin-right: auto;
 
-}
 
-
 
-.next-page-button-wrapper {
 
-    margin-top: -50px;
 
-    margin-bottom: 100px;
 
+    max-height: 64px;
 
 }
 
 
 .next-page-button-wrapper button {
 
     border: none;
 
     background-color: inherit;
 
     color: var(--result-link-fg);
 
-    font-size: 18px;
 
+    font-size: 16px;
 
     margin-right: 8px;
 
 }
 
 
@@ -259,15 +354,55 @@ a:hover,
 
     flex-wrap: wrap;
 
     grid-gap: 1.5rem;
 
     justify-items: center;
 
-    margin-left: 9%;
 
-    margin-right: 9%;
 
     padding: 0;
 
     margin-bottom: 50px;
 
 }
 
 
 a[title] {
 
     flex-grow: 1;
 
-    height: 12rem;
 
+    height: fit-content;
 
+
 
+    display: flex;
 
+    flex-direction: column;
 
+
 
+    gap: 1rem;
 
+}
 
+
 
+a[title] .image-wrapper {
 
+    min-height: 12rem;
 
+    width: 100%;
 
+    background-color: var(--search-container-background-color);
 
+    border-radius: 8px;
 
+}
 
+
 
+a[title] img {
 
+    max-height: 12rem;
 
+    border-radius: 8px;
 
+}
 
+
 
+a[title] .image-properties {
 
+    display: flex;
 
+    flex-direction: column;
 
+    gap: 4px;
 
+}
 
+
 
+.image-properties .image-url {
 
+    font-size: 13px;
 
+    color: var(--result-fg);
 
+}
 
+
 
+.image-properties .image-title {
 
+    font-size: 18px;
 
+    font-weight: 500;
 
+    color: var(--result-link-fg);
 
+    width: fit-content;
 
+    margin: 0;
 
+
 
+    /* Trunc */
 
+    max-width: 300px;
 
+    white-space:nowrap;
 
+    overflow:hidden;
 
+    text-overflow:ellipsis;
 
 }
 
 
 .image-result-container img {
 
@@ -278,6 +413,18 @@ a[title] {
 
     vertical-align: bottom;
 
 }
 
 
+.video-link {
 
+    display: inline-flex;
 
+    flex-direction: row;
 
+    align-items: flex-start;
 
+    gap: 1rem;
 
+}
 
+
 
+.video-link .video-img {
 
+    max-height: 96px;
 
+    background-color: var(--search-container-background-color);
 
+    border-radius: 8px;
 
+}
 
 
 .git-container {
 
     right: 0;
 
@@ -297,6 +444,7 @@ a[title] {
 
     padding-bottom: 15px;
 
     border-top: 1px solid var(--border);
 
     text-align: center;
 
+    max-height: var(--footer-height);
 
 }
 
 
 .git-container a {
 
@@ -329,11 +477,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;
 
-        float: none;
 
-        margin-left: 165px;
 
+        max-width: 550px;
 
+        margin: 0;
 
     }
 
 }
 
 
@@ -351,10 +504,12 @@ a[title] {
 
         width: 80%;
 
     }
 
 
+    .search-button-wrapper {
 
+        flex-direction: column;
 
+    }
 
+
 
     .search-button-wrapper button {
 
-        display: table-row;
 
-        margin: 30px 0px 0px 0px;
 
-        width: 80%;
 
+        width: 100%;
 
     }
 
 
     .image-result-container {
 
@@ -436,7 +591,6 @@ a[title] {
 
         position: relative;
 
         float: none;
 
         max-width: 90%;
 
-        margin-left: 10px;
 
         width: auto;
 
     }
 
 
@@ -457,10 +611,21 @@ a[title] {
 
         margin-top: 10%;
 
     }
 
 
-    .text-result-container,
 
-    #time,
 
-    .next-page-button-wrapper {
 
-        margin-left: 20px;
 
-        max-width: 90%;
 
+    .special-result-container {
 
+        margin: 0;
 
+        max-width: 550px;
 
+
 
+        /* 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;
 
     }
 
 }

+ 0 - 0
static/css/amoled.css → static/css/themes/amoled.css
View File


+ 0 - 0
static/css/auto.css → static/css/themes/auto.css
View File


+ 0 - 0
static/css/dark.css → static/css/themes/dark.css
View File


+ 0 - 0
static/css/darker.css → static/css/themes/darker.css
View File


+ 0 - 0
static/css/discord.css → static/css/themes/discord.css
View File


+ 0 - 0
static/css/github_night.css → static/css/themes/github_night.css
View File


+ 0 - 0
static/css/google.css → static/css/themes/google.css
View File


+ 0 - 0
static/css/gruvbox.css → static/css/themes/gruvbox.css
View File


+ 0 - 0
static/css/light.css → static/css/themes/light.css
View File


+ 0 - 0
static/css/night_owl.css → static/css/themes/night_owl.css
View File


+ 0 - 0
static/css/nord.css → static/css/themes/nord.css
View File


+ 0 - 0
static/css/startpage.css → static/css/themes/startpage.css
View File