Fix image results page always showing same-sized images
Some checks failed
Run Integration Tests / test (push) Failing after 1m36s
Some checks failed
Run Integration Tests / test (push) Failing after 1m36s
This commit is contained in:
partisan
parent
be973266c6
commit
f8c4318b3d
1 changed files with 153 additions and 54 deletions
|
|
@ -64,13 +64,13 @@
|
|||
margin-top: 110px !important;
|
||||
}
|
||||
|
||||
.fetched_dif_files{
|
||||
.fetched_dif_files {
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
|
||||
|
||||
.fetched_dif_images {
|
||||
margin-top: 10px ;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.fetched_img {
|
||||
|
|
@ -215,23 +215,96 @@ html {
|
|||
}
|
||||
|
||||
/* container */
|
||||
|
||||
.images {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-right: 35.4%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image {
|
||||
flex: 1 1 auto;
|
||||
padding: .5rem .5rem 2rem .5rem;
|
||||
flex-grow: 1;
|
||||
padding: .5rem .5rem 3rem .5rem;
|
||||
margin: .25rem;
|
||||
border-radius: 12px;
|
||||
height: 10rem;
|
||||
max-width: 20rem;
|
||||
min-width: 3rem;
|
||||
transition: outline 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
.image_selected {
|
||||
border-color: var(--search-bg);
|
||||
}
|
||||
|
||||
.image>a {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*
|
||||
.image .resolution {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
top: calc(100% - 25px);
|
||||
left: 5px;
|
||||
font-size: 12px;
|
||||
background-color: var(--view-image-color);
|
||||
color: var(--fg);
|
||||
border-radius: 4px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: .3s;
|
||||
padding: 0 2px;
|
||||
} */
|
||||
|
||||
.image img {
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.resolution {
|
||||
transition: .3s !important;
|
||||
}
|
||||
|
||||
.image:hover img {
|
||||
box-shadow: 0 14px 28px var(--view-image-color);
|
||||
}
|
||||
|
||||
.img_title,
|
||||
.img_source {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
font-size: .9rem;
|
||||
color: var(--fg);
|
||||
padding: .5rem 0 0 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.img_title {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.img_source {
|
||||
padding: 1.8rem 0 0 0;
|
||||
font-size: .7rem;
|
||||
}
|
||||
|
||||
.image img {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
vertical-align: bottom;
|
||||
border-radius: 12px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.image_selected {
|
||||
outline: 1px solid var(--border);
|
||||
transform: scale(1.05);
|
||||
|
|
@ -384,6 +457,7 @@ hr {
|
|||
.results .video_title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/*
|
||||
this is so stupid, separate css into general style and per result page css style to avoid this
|
||||
.video_title h3 {
|
||||
|
|
@ -1003,7 +1077,8 @@ p {
|
|||
|
||||
:root {
|
||||
/*--search-bg-input: #1a1a1a; /* Example background color */
|
||||
--search-bg-input-border: #2a2a2a; /* Visible border color */
|
||||
--search-bg-input-border: #2a2a2a;
|
||||
/* Visible border color */
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
|
|
@ -1138,6 +1213,7 @@ p {
|
|||
color: var(--link);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.fact a:visited {
|
||||
color: var(--link-visited);
|
||||
}
|
||||
|
|
@ -1299,14 +1375,16 @@ p {
|
|||
background: var(--button) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
color: var(--fg) !important;
|
||||
text-shadow: 1px 1px 2px var(--border) !important; /* Adjust text shadow */
|
||||
text-shadow: 1px 1px 2px var(--border) !important;
|
||||
/* Adjust text shadow */
|
||||
}
|
||||
|
||||
.leaflet-control-scale-line {
|
||||
background: var(--button) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
color: var(--fg) !important;
|
||||
text-shadow: 1px 1px 2px var(--border) !important; /* Adjust text shadow */
|
||||
text-shadow: 1px 1px 2px var(--border) !important;
|
||||
/* Adjust text shadow */
|
||||
}
|
||||
|
||||
/* Favicon styling */
|
||||
|
|
@ -1375,8 +1453,10 @@ p {
|
|||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.5; /* adjust if needed */
|
||||
max-height: calc(1.5em * 3); /* 3 lines */
|
||||
line-height: 1.5;
|
||||
/* adjust if needed */
|
||||
max-height: calc(1.5em * 3);
|
||||
/* 3 lines */
|
||||
}
|
||||
|
||||
.result-description {
|
||||
|
|
@ -1409,6 +1489,7 @@ p {
|
|||
font-weight: 500;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/*
|
||||
.result-path::before {
|
||||
content: "›";
|
||||
|
|
@ -1416,9 +1497,16 @@ p {
|
|||
opacity: 0.6;
|
||||
} */
|
||||
|
||||
body, h1, p, a, input, button {
|
||||
color: var(--text-color); /* Applies the text color based on theme */
|
||||
background-color: var(--background-color); /* Applies the background color based on theme */
|
||||
body,
|
||||
h1,
|
||||
p,
|
||||
a,
|
||||
input,
|
||||
button {
|
||||
color: var(--text-color);
|
||||
/* Applies the text color based on theme */
|
||||
background-color: var(--background-color);
|
||||
/* Applies the background color based on theme */
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1320px) {
|
||||
|
|
@ -1618,7 +1706,8 @@ body, h1, p, a, input, button {
|
|||
padding: 10px;
|
||||
display: block;
|
||||
margin-top: 0px;
|
||||
top: -5px; /* how ? why ? I dont even wanna know */
|
||||
top: -5px;
|
||||
/* how ? why ? I dont even wanna know */
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
|
|
@ -1712,7 +1801,7 @@ body, h1, p, a, input, button {
|
|||
margin-top: 135px !important;
|
||||
}
|
||||
|
||||
.fetched_dif_files{
|
||||
.fetched_dif_files {
|
||||
margin-top: 25px !important;
|
||||
}
|
||||
|
||||
|
|
@ -1790,7 +1879,8 @@ body, h1, p, a, input, button {
|
|||
padding-right: 10px;
|
||||
position: relative;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none; /* Hide scrollbar for Firefox */
|
||||
scrollbar-width: none;
|
||||
/* Hide scrollbar for Firefox */
|
||||
}
|
||||
|
||||
/* Hide scrollbar for Webkit-based browsers (e.g., Chrome, Safari) */
|
||||
|
|
@ -1800,15 +1890,20 @@ body, h1, p, a, input, button {
|
|||
|
||||
/* Gradient as a fixed visual indicator */
|
||||
.sub-search-button-wrapper::after {
|
||||
content: ''; /* Adds a gradient or fade effect as a scroll indicator */
|
||||
position: fixed; /* Ensure it doesn't move with scrolling */
|
||||
content: '';
|
||||
/* Adds a gradient or fade effect as a scroll indicator */
|
||||
position: fixed;
|
||||
/* Ensure it doesn't move with scrolling */
|
||||
top: 90px;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
width: 20px;
|
||||
background: linear-gradient(to left, var(--html-bg), rgba(255, 255, 255, 0)); /* Adjust colors */
|
||||
pointer-events: none; /* Prevent interaction */
|
||||
z-index: 1; /* Ensure it is above the scrollable content */
|
||||
background: linear-gradient(to left, var(--html-bg), rgba(255, 255, 255, 0));
|
||||
/* Adjust colors */
|
||||
pointer-events: none;
|
||||
/* Prevent interaction */
|
||||
z-index: 1;
|
||||
/* Ensure it is above the scrollable content */
|
||||
}
|
||||
|
||||
/* Hide gradient when fully scrolled */
|
||||
|
|
@ -1817,7 +1912,7 @@ body, h1, p, a, input, button {
|
|||
}
|
||||
}
|
||||
|
||||
/* This is really bad */
|
||||
/* This is really bad */
|
||||
@media only screen and (max-width: 400px) {
|
||||
|
||||
.icon-button {
|
||||
|
|
@ -1825,13 +1920,16 @@ body, h1, p, a, input, button {
|
|||
}
|
||||
|
||||
.results_settings {
|
||||
display: flex; /* Enable flexbox */
|
||||
flex-wrap: wrap; /* Allow elements to wrap onto new lines when necessary */
|
||||
display: flex;
|
||||
/* Enable flexbox */
|
||||
flex-wrap: wrap;
|
||||
/* Allow elements to wrap onto new lines when necessary */
|
||||
}
|
||||
}
|
||||
|
||||
/* Ensuring dark theme compliance */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.leaflet-control-locate,
|
||||
.leaflet-control-layers-toggle,
|
||||
.leaflet-bar a,
|
||||
|
|
@ -1844,7 +1942,8 @@ body, h1, p, a, input, button {
|
|||
background-color: var(--button) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
color: var(--fg) !important;
|
||||
text-shadow: 1px 1px 2px var(--background-color) !important; /* Dark theme shadow adjustment */
|
||||
text-shadow: 1px 1px 2px var(--background-color) !important;
|
||||
/* Dark theme shadow adjustment */
|
||||
}
|
||||
|
||||
.leaflet-control-attribution a {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue