Fijxu
/
librex
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Revert "Refactor UI/UX design for improved user experience"

This commit is contained in:
hnhx 2022-12-28 10:20:38 +00:00 committed by GitHub
parent 7d8c0ed606
commit fce8d7dae2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 62 additions and 256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

1
engines/ahmia/hidden_service.php
View File

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

1
engines/bittorrent/merge.php
View File

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

10
engines/brave/video.php
View File

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

12
engines/google/text.php
View File

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

13
engines/qwant/image.php
View File

@ -42,7 +42,6 @@
function print_image_results($results) function print_image_results($results)
{ {
echo "<div class=\"result-container-inner\">";
echo "<div class=\"image-result-container\">"; echo "<div class=\"image-result-container\">";
foreach($results as $result) foreach($results as $result)
@ -51,20 +50,8 @@
$alt = $result["alt"]; $alt = $result["alt"];
$url = $result["url"]; $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 "<a title=\"$alt\" href=\"$url\" target=\"_blank\">";
echo "<div class=\"image-wrapper\">";
echo "<img src=\"image_proxy.php?url=$thumbnail\">"; 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>"; echo "</a>";
} }

2
index.php
View File

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

2
misc/header.php
View File

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

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

16
search.php
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

261
static/css/styles.css
View File

@ -1,19 +1,3 @@
/* 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 { html {
color: var(--main-fg); color: var(--main-fg);
background-color: var(--main-bg); background-color: var(--main-bg);
@ -56,28 +40,12 @@ a:hover,
} }
.search-container { .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; text-align: center;
justify-content: center; margin-top: 10%;
align-items: center;
/* Gap between elements */
gap: 1rem
} }
.search-container h1 { .search-container h1 {
font-size: 70px; font-size: 70px;
/* Remove unnecessary margin */
margin-bottom: 0;
} }
.search-container input, .search-container input,
@ -85,34 +53,11 @@ a:hover,
width: 500px; width: 500px;
color: var(--search-container-text-color); color: var(--search-container-text-color);
background-color: var(--search-container-background-color); background-color: var(--search-container-background-color);
padding: 10px;
font-size: inherit; font-size: inherit;
font-family: sans-serif; font-family: sans-serif;
border: 1px solid var(--search-container-background-border); border: 1px solid var(--search-container-background-border);
border-radius: 25px; 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, .search-button-wrapper button,
@ -123,7 +68,12 @@ a:hover,
font-size: 14px; font-size: 14px;
border: 1px solid var(--main-bg); border: 1px solid var(--main-bg);
border-radius: 4px; border-radius: 4px;
padding: 10px 16px; padding: 13px 10px 13px 10px;
}
.search-button-wrapper button {
margin: 30px 60px 0px 60px;
} }
.sub-search-container { .sub-search-container {
@ -166,7 +116,7 @@ a:hover,
.search-button-wrapper button:hover, .search-button-wrapper button:hover,
.misc-container button:hover { .misc-container button:hover {
border: 1px solid var(--element-border-focus); border: 1px solid #5f6368;
cursor: pointer; cursor: pointer;
} }
@ -222,85 +172,37 @@ a:hover,
padding: 5px; padding: 5px;
font-size: inherit; font-size: inherit;
font-family: inherit; font-family: inherit;
border: 1px solid var(--element-border-focus); border: 1px solid #5f6368;
border-radius: 5px; border-radius: 5px;
float: right; float: right;
} }
.result-container { .text-result-container,
display: flex; #time,
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 { .next-page-button-wrapper {
order: 2; margin-left: 170px;
} }
.text-result-container { .text-result-container {
margin-bottom: 2rem; margin-bottom: 100px;
display: flex;
flex-direction: column;
gap: 1rem;
} }
.special-result-container { .special-result-container {
padding: 18px; padding: 10px;
border: 1px solid var(--special-result-border); border: 1px solid var(--special-result-border);
width: 500px; width: 500px;
border-radius: 8px; border-radius: 8px;
background: var(--special-text-background); background: var(--special-text-background);
color: var(--special-text-color); color: var(--special-text-color);
height: fit-content; margin-left: 840px;
box-sizing: border-box; margin-top: 0px;
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 { .text-result-wrapper {
max-width: 550px; max-width: 550px;
word-wrap: break-word; word-wrap: break-word;
margin-bottom: 35px;
} }
.text-result-wrapper a { .text-result-wrapper a {
@ -308,12 +210,9 @@ a:hover,
color: var(--result-fg); color: var(--result-fg);
} }
.video-thumbnail { .video-img {
min-height: 96px; height: 115px;
max-height: 96px;
background-color: var(--search-container-background-color);
border-radius: 12px; border-radius: 12px;
aspect-ratio: 4 / 3;
} }
.text-result-wrapper h2 { .text-result-wrapper h2 {
@ -321,27 +220,33 @@ a:hover,
color: var(--result-link-fg); color: var(--result-link-fg);
padding-top: 5px; padding-top: 5px;
margin-top: 1px; margin-top: 1px;
font-weight: 500;
margin-bottom: 8px;
width: fit-content;
} }
.special-result-container a { .special-result-container a {
display: flex; display: flex;
margin-top: 10px;
font-size: 14px; font-size: 14px;
} }
.special-result-container img { .special-result-container img {
display: flex; display: flex;
max-width: 60%; max-width: 60%;
max-height: 64px; max-height: 200px;
padding-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
.next-page-button-wrapper {
margin-top: -50px;
margin-bottom: 100px;
} }
.next-page-button-wrapper button { .next-page-button-wrapper button {
border: none; border: none;
background-color: inherit; background-color: inherit;
color: var(--result-link-fg); color: var(--result-link-fg);
font-size: 16px; font-size: 18px;
margin-right: 8px; margin-right: 8px;
} }
@ -354,55 +259,15 @@ a:hover,
flex-wrap: wrap; flex-wrap: wrap;
grid-gap: 1.5rem; grid-gap: 1.5rem;
justify-items: center; justify-items: center;
margin-left: 9%;
margin-right: 9%;
padding: 0; padding: 0;
margin-bottom: 50px; margin-bottom: 50px;
} }
a[title] { a[title] {
flex-grow: 1; flex-grow: 1;
height: fit-content; height: 12rem;
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 { .image-result-container img {
@ -413,18 +278,6 @@ a[title] .image-properties {
vertical-align: bottom; 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 { .git-container {
right: 0; right: 0;
@ -444,7 +297,6 @@ a[title] .image-properties {
padding-bottom: 15px; padding-bottom: 15px;
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
text-align: center; text-align: center;
max-height: var(--footer-height);
} }
.git-container a { .git-container a {
@ -477,16 +329,11 @@ a[title] .image-properties {
color: #ff79c6; color: #ff79c6;
} }
@media only screen and (max-width: 1422px) { @media only screen and (max-width: 1320px) {
/* Move the special result to the top of the page, under the #time element */
.result-container {
flex-direction: column;
gap: 1rem;
}
.special-result-container { .special-result-container {
max-width: 550px; position: relative;
margin: 0; float: none;
margin-left: 165px;
} }
} }
@ -504,12 +351,10 @@ a[title] .image-properties {
width: 80%; width: 80%;
} }
.search-button-wrapper {
flex-direction: column;
}
.search-button-wrapper button { .search-button-wrapper button {
width: 100%; display: table-row;
margin: 30px 0px 0px 0px;
width: 80%;
} }
.image-result-container { .image-result-container {
@ -591,6 +436,7 @@ a[title] .image-properties {
position: relative; position: relative;
float: none; float: none;
max-width: 90%; max-width: 90%;
margin-left: 10px;
width: auto; width: auto;
} }
@ -611,21 +457,10 @@ a[title] .image-properties {
margin-top: 10%; margin-top: 10%;
} }
.special-result-container { .text-result-container,
margin: 0; #time,
max-width: 550px; .next-page-button-wrapper {
margin-left: 20px;
/* Make the layout a column */ max-width: 90%;
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;
} }
} }