hnhx-archive/librex
1
0
Fork 0
mirror of https://github.com/hnhx/librex.git synced 2025-04-29 14:09:27 -04:00
Code Issues Projects Releases Packages Wiki Activity

feat: rework the images page

Browse source
This commit is contained in:
flowfield 2022-12-24 18:40:04 +01:00
parent 4bc1beac9e
commit d95ccfc71d
No known key found for this signature in database
GPG key ID: FFBDB54A7F59ABB4
2 changed files with 56 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
engines/qwant/image.php
View file

@ -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 "<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>";
}

48
static/css/styles.css
View file

@ -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;
}