From 77905ab3ac1c91f3301107bc5341a565832ada4a Mon Sep 17 00:00:00 2001 From: flowfield Date: Sat, 24 Dec 2022 13:56:47 +0100 Subject: [PATCH 1/9] ref: organize CSS files --- config.php.example => config.php | 0 misc/header.php | 2 +- opensearch.xml.example => opensearch.xml | 0 static/css/{ => themes}/amoled.css | 0 static/css/{ => themes}/auto.css | 0 static/css/{ => themes}/dark.css | 0 static/css/{ => themes}/darker.css | 0 static/css/{ => themes}/discord.css | 0 static/css/{ => themes}/github_night.css | 0 static/css/{ => themes}/google.css | 0 static/css/{ => themes}/gruvbox.css | 0 static/css/{ => themes}/light.css | 0 static/css/{ => themes}/night_owl.css | 0 static/css/{ => themes}/nord.css | 0 static/css/{ => themes}/startpage.css | 0 15 files changed, 1 insertion(+), 1 deletion(-) rename config.php.example => config.php (100%) rename opensearch.xml.example => opensearch.xml (100%) rename static/css/{ => themes}/amoled.css (100%) rename static/css/{ => themes}/auto.css (100%) rename static/css/{ => themes}/dark.css (100%) rename static/css/{ => themes}/darker.css (100%) rename static/css/{ => themes}/discord.css (100%) rename static/css/{ => themes}/github_night.css (100%) rename static/css/{ => themes}/google.css (100%) rename static/css/{ => themes}/gruvbox.css (100%) rename static/css/{ => themes}/light.css (100%) rename static/css/{ => themes}/night_owl.css (100%) rename static/css/{ => themes}/nord.css (100%) rename static/css/{ => themes}/startpage.css (100%) diff --git a/config.php.example b/config.php similarity index 100% rename from config.php.example rename to config.php diff --git a/misc/header.php b/misc/header.php index 933364a..de72447 100644 --- a/misc/header.php +++ b/misc/header.php @@ -8,7 +8,7 @@ Date: Sat, 24 Dec 2022 14:10:23 +0100 Subject: [PATCH 2/9] feat: add placeholder to search input --- index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.php b/index.php index 9146e9a..5eaaca1 100644 --- a/index.php +++ b/index.php @@ -5,7 +5,7 @@

LibreX

- + From 0ccddb3c5e98496f7b30d5603a13bfd7670d389e Mon Sep 17 00:00:00 2001 From: flowfield Date: Sat, 24 Dec 2022 14:18:20 +0100 Subject: [PATCH 3/9] feat: update input styles, better container layout --- static/css/styles.css | 50 +++++++++++++++++++++++++++++++++++++++---- 1 file changed, 46 insertions(+), 4 deletions(-) diff --git a/static/css/styles.css b/static/css/styles.css index 3b56ac0..88e658a 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -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,8 +56,18 @@ 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; } .search-container h1 { @@ -53,11 +79,26 @@ 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; } .search-button-wrapper button, @@ -116,7 +157,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,7 +213,7 @@ 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; } @@ -297,6 +338,7 @@ a[title] { padding-bottom: 15px; border-top: 1px solid var(--border); text-align: center; + max-height: var(--footer-height); } .git-container a { From 113870a5f35dd358da573fb4c23f6d6bd44426e4 Mon Sep 17 00:00:00 2001 From: flowfield Date: Sat, 24 Dec 2022 14:30:56 +0100 Subject: [PATCH 4/9] ref: refactor home page layout --- static/css/styles.css | 29 ++++++++++++++++++++--------- 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/static/css/styles.css b/static/css/styles.css index 88e658a..0f883c8 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -68,10 +68,16 @@ a:hover, text-align: center; 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, @@ -101,6 +107,14 @@ a:hover, 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, .misc-container button, .misc-container select { @@ -109,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: 12px 10px; } .sub-search-container { @@ -393,10 +402,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 { From e4c0dc67887cbb2de8827f54a2b0dc62592b115d Mon Sep 17 00:00:00 2001 From: flowfield Date: Sat, 24 Dec 2022 14:33:21 +0100 Subject: [PATCH 5/9] ref: search buttons now have larger horiz. padding --- static/css/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/css/styles.css b/static/css/styles.css index 0f883c8..f2d2e14 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -123,7 +123,7 @@ a:hover, font-size: 14px; border: 1px solid var(--main-bg); border-radius: 4px; - padding: 12px 10px; + padding: 10px 16px; } .sub-search-container { From 4bc1beac9e2560ab7cecae564463cf6b0e1c5706 Mon Sep 17 00:00:00 2001 From: flowfield Date: Sat, 24 Dec 2022 18:07:53 +0100 Subject: [PATCH 6/9] ref: finish refactoring the layout --- engines/ahmia/hidden_service.php | 1 + engines/bittorrent/merge.php | 1 + engines/brave/video.php | 1 + engines/google/text.php | 12 +++- engines/qwant/image.php | 1 + search.php | 16 +++-- static/css/styles.css | 111 ++++++++++++++++++++++--------- 7 files changed, 104 insertions(+), 39 deletions(-) diff --git a/engines/ahmia/hidden_service.php b/engines/ahmia/hidden_service.php index 5a840f7..61080b7 100644 --- a/engines/ahmia/hidden_service.php +++ b/engines/ahmia/hidden_service.php @@ -30,6 +30,7 @@ function print_hidden_service_results($results) { + echo "
"; echo "
"; foreach($results as $result) diff --git a/engines/bittorrent/merge.php b/engines/bittorrent/merge.php index 08e3c25..711298b 100644 --- a/engines/bittorrent/merge.php +++ b/engines/bittorrent/merge.php @@ -73,6 +73,7 @@ function print_merged_torrent_results($results) { + echo "
"; echo "
"; if (!empty($results)) diff --git a/engines/brave/video.php b/engines/brave/video.php index f86523f..c59256f 100644 --- a/engines/brave/video.php +++ b/engines/brave/video.php @@ -38,6 +38,7 @@ function print_video_results($results) { + echo "
"; echo "
"; foreach($results as $result) diff --git a/engines/google/text.php b/engines/google/text.php index c5270b1..be4f40c 100644 --- a/engines/google/text.php +++ b/engines/google/text.php @@ -140,20 +140,26 @@ $response = $special["special_response"]["response"]; $source = $special["special_response"]["source"]; - echo "

"; + echo "

"; if (array_key_exists("image", $special["special_response"])) { $image_url = $special["special_response"]["image"]; echo ""; } - echo $response; + + echo "
"; + if ($source) echo "$source"; - echo "

"; + echo "

$response

"; + + echo "
"; array_shift($results); } + echo "
"; + echo "
"; echo "
"; foreach($results as $result) diff --git a/engines/qwant/image.php b/engines/qwant/image.php index d5b7a16..4a3857f 100644 --- a/engines/qwant/image.php +++ b/engines/qwant/image.php @@ -42,6 +42,7 @@ function print_image_results($results) { + echo "
"; echo "
"; foreach($results as $result) diff --git a/search.php b/search.php index ae823f8..58909a2 100644 --- a/search.php +++ b/search.php @@ -51,6 +51,7 @@ $config = require "config.php"; require "misc/tools.php"; + echo "
"; $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(">", $page + 10, $query, $type); - echo "
"; + echo "
"; # .next-page-button-wrapper } + + echo "
"; # .result-container__inner (text.php->print_x_results) + echo "
"; # .result-container ?> diff --git a/static/css/styles.css b/static/css/styles.css index f2d2e14..92bf365 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -227,32 +227,75 @@ a:hover, 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; +} + +#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 { @@ -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; - 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; } @@ -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; - float: none; - margin-left: 165px; + max-width: 550px; + margin: 0; } } @@ -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, - #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; } } From d95ccfc71df3b4b12449cff9cbb44650cc2be83b Mon Sep 17 00:00:00 2001 From: flowfield Date: Sat, 24 Dec 2022 18:40:04 +0100 Subject: [PATCH 7/9] feat: rework the images page --- engines/qwant/image.php | 12 +++++++++++ static/css/styles.css | 48 +++++++++++++++++++++++++++++++++++++---- 2 files changed, 56 insertions(+), 4 deletions(-) diff --git a/engines/qwant/image.php b/engines/qwant/image.php index 4a3857f..209b9a9 100644 --- a/engines/qwant/image.php +++ b/engines/qwant/image.php @@ -51,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 ""; + echo "
"; echo ""; + echo "
"; + echo ""; + echo "$url_trunc"; + echo "

$alt

"; + echo ""; echo ""; } diff --git a/static/css/styles.css b/static/css/styles.css index 92bf365..edf91c8 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -315,6 +315,7 @@ a:hover, margin-top: 1px; font-weight: 500; margin-bottom: 8px; + width: fit-content; } .special-result-container a { @@ -345,15 +346,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 { @@ -364,7 +405,6 @@ a[title] { vertical-align: bottom; } - .git-container { right: 0; } From affd324ac5fccc22896e38ca6e2cc70bfdf1a60f Mon Sep 17 00:00:00 2001 From: flowfield Date: Sat, 24 Dec 2022 18:57:38 +0100 Subject: [PATCH 8/9] feat: rework the videos page --- engines/brave/video.php | 9 ++++++--- search.php | 2 +- static/css/styles.css | 25 +++++++++++++++++++++++-- 3 files changed, 30 insertions(+), 6 deletions(-) diff --git a/engines/brave/video.php b/engines/brave/video.php index c59256f..9c20256 100644 --- a/engines/brave/video.php +++ b/engines/brave/video.php @@ -51,12 +51,15 @@ $thumbnail = $result["thumbnail"]; echo "
"; - echo ""; + echo ""; + echo "
"; + echo ""; + echo "
"; + echo "
"; echo "$base_url"; echo "

$title

"; - echo ""; - echo "
"; echo "$date - $views"; + echo "
"; echo ""; echo "
"; } diff --git a/search.php b/search.php index 58909a2..093debe 100644 --- a/search.php +++ b/search.php @@ -51,7 +51,7 @@ $config = require "config.php"; require "misc/tools.php"; - echo "
"; + echo "
"; $page = isset($_REQUEST["p"]) ? (int) $_REQUEST["p"] : 0; diff --git a/static/css/styles.css b/static/css/styles.css index edf91c8..a4199fe 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -242,6 +242,11 @@ a:hover, 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; @@ -303,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 { @@ -405,6 +413,19 @@ a[title] .image-properties { 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; } From 0e81ca001c45878d2afb988a22e9c8320a39368b Mon Sep 17 00:00:00 2001 From: flowfield Date: Sat, 24 Dec 2022 19:54:26 +0100 Subject: [PATCH 9/9] fix: change formatting (__ -> -, # -> //) --- engines/ahmia/hidden_service.php | 2 +- engines/bittorrent/merge.php | 2 +- engines/brave/video.php | 2 +- engines/google/text.php | 4 ++-- engines/qwant/image.php | 2 +- search.php | 6 +++--- static/css/styles.css | 6 +++--- 7 files changed, 12 insertions(+), 12 deletions(-) diff --git a/engines/ahmia/hidden_service.php b/engines/ahmia/hidden_service.php index 61080b7..3f43ff1 100644 --- a/engines/ahmia/hidden_service.php +++ b/engines/ahmia/hidden_service.php @@ -30,7 +30,7 @@ function print_hidden_service_results($results) { - echo "
"; + echo "
"; echo "
"; foreach($results as $result) diff --git a/engines/bittorrent/merge.php b/engines/bittorrent/merge.php index 711298b..d9c2648 100644 --- a/engines/bittorrent/merge.php +++ b/engines/bittorrent/merge.php @@ -73,7 +73,7 @@ function print_merged_torrent_results($results) { - echo "
"; + echo "
"; echo "
"; if (!empty($results)) diff --git a/engines/brave/video.php b/engines/brave/video.php index 9c20256..a099c04 100644 --- a/engines/brave/video.php +++ b/engines/brave/video.php @@ -38,7 +38,7 @@ function print_video_results($results) { - echo "
"; + echo "
"; echo "
"; foreach($results as $result) diff --git a/engines/google/text.php b/engines/google/text.php index be4f40c..9102f63 100644 --- a/engines/google/text.php +++ b/engines/google/text.php @@ -147,7 +147,7 @@ echo ""; } - echo "
"; + echo "
"; if ($source) echo "$source"; @@ -159,7 +159,7 @@ } echo "
"; - echo "
"; + echo "
"; echo "
"; foreach($results as $result) diff --git a/engines/qwant/image.php b/engines/qwant/image.php index 209b9a9..2d62fb4 100644 --- a/engines/qwant/image.php +++ b/engines/qwant/image.php @@ -42,7 +42,7 @@ function print_image_results($results) { - echo "
"; + echo "
"; echo "
"; foreach($results as $result) diff --git a/search.php b/search.php index 093debe..ed1f526 100644 --- a/search.php +++ b/search.php @@ -131,11 +131,11 @@ print_next_page_button(">", $page + 10, $query, $type); - echo "
"; # .next-page-button-wrapper + echo "
"; // .next-page-button-wrapper } - echo "
"; # .result-container__inner (text.php->print_x_results) - echo "
"; # .result-container + echo "
"; // .result-container-inner (text.php->print_x_results) + echo "
"; // .result-container ?> diff --git a/static/css/styles.css b/static/css/styles.css index a4199fe..b4175fe 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -237,7 +237,7 @@ a:hover, box-sizing: border-box; } -.result-container__inner { +.result-container-inner { display: flex; flex-direction: column; } @@ -285,13 +285,13 @@ a:hover, gap: 1.5rem; } -.special-result-container__inner { +.special-result-container-inner { display: flex; flex-direction: column; gap: 0.5rem; } -.special-result-container__inner p { +.special-result-container-inner p { font-size: 16px; margin: 0; color: var(--main-fg);