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
|
|
@ -16,7 +16,7 @@
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
word-wrap: normal;
|
word-wrap: normal;
|
||||||
direction: ltr;
|
direction: ltr;
|
||||||
|
|
||||||
/* Support for all WebKit browsers. */
|
/* Support for all WebKit browsers. */
|
||||||
-webkit-font-feature-settings: 'liga';
|
-webkit-font-feature-settings: 'liga';
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
|
|
@ -61,16 +61,16 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.fetched_dif_videos {
|
.fetched_dif_videos {
|
||||||
margin-top: 110px !important;
|
margin-top: 110px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fetched_dif_files{
|
.fetched_dif_files {
|
||||||
margin-top: 10px !important;
|
margin-top: 10px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.fetched_dif_images {
|
.fetched_dif_images {
|
||||||
margin-top: 10px ;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fetched_img {
|
.fetched_img {
|
||||||
|
|
@ -215,23 +215,96 @@ html {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* container */
|
/* container */
|
||||||
|
|
||||||
.images {
|
.images {
|
||||||
|
margin: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
margin-right: 35.4%;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
flex: 1 1 auto;
|
flex-grow: 1;
|
||||||
padding: .5rem .5rem 2rem .5rem;
|
padding: .5rem .5rem 3rem .5rem;
|
||||||
margin: .25rem;
|
margin: .25rem;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
height: 10rem;
|
height: 10rem;
|
||||||
max-width: 20rem;
|
|
||||||
min-width: 3rem;
|
|
||||||
transition: outline 0.3s ease, transform 0.3s ease;
|
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 {
|
.image_selected {
|
||||||
outline: 1px solid var(--border);
|
outline: 1px solid var(--border);
|
||||||
transform: scale(1.05);
|
transform: scale(1.05);
|
||||||
|
|
@ -384,6 +457,7 @@ hr {
|
||||||
.results .video_title {
|
.results .video_title {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
this is so stupid, separate css into general style and per result page css style to avoid this
|
this is so stupid, separate css into general style and per result page css style to avoid this
|
||||||
.video_title h3 {
|
.video_title h3 {
|
||||||
|
|
@ -585,7 +659,7 @@ this is so stupid, separate css into general style and per result page css style
|
||||||
.settings-row {
|
.settings-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
|
|
@ -604,8 +678,8 @@ this is so stupid, separate css into general style and per result page css style
|
||||||
}
|
}
|
||||||
|
|
||||||
.kno_wiki_show {
|
.kno_wiki_show {
|
||||||
display: initial !important;
|
display: initial !important;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.open-in-new-tab * {
|
.open-in-new-tab * {
|
||||||
|
|
@ -947,8 +1021,8 @@ p {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.js-enabled {
|
.js-enabled {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logomobile {
|
.logomobile {
|
||||||
|
|
@ -1003,7 +1077,8 @@ p {
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
/*--search-bg-input: #1a1a1a; /* Example background color */
|
/*--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;
|
color-scheme: dark;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1093,9 +1168,9 @@ p {
|
||||||
}
|
}
|
||||||
|
|
||||||
.wiki_known_for {
|
.wiki_known_for {
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.snip img {
|
.snip img {
|
||||||
|
|
@ -1121,25 +1196,26 @@ p {
|
||||||
}
|
}
|
||||||
|
|
||||||
.snip .about {
|
.snip .about {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.factpoint {
|
.factpoint {
|
||||||
color: var(--fg);
|
color: var(--fg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
vertical-align: text-top;
|
vertical-align: text-top;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding-right: 14px;
|
padding-right: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fact a {
|
.fact a {
|
||||||
color: var(--link);
|
color: var(--link);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fact a:visited {
|
.fact a:visited {
|
||||||
color: var(--link-visited);
|
color: var(--link-visited);
|
||||||
}
|
}
|
||||||
|
|
||||||
.snipp {
|
.snipp {
|
||||||
|
|
@ -1299,14 +1375,16 @@ p {
|
||||||
background: var(--button) !important;
|
background: var(--button) !important;
|
||||||
border: 1px solid var(--border) !important;
|
border: 1px solid var(--border) !important;
|
||||||
color: var(--fg) !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 {
|
.leaflet-control-scale-line {
|
||||||
background: var(--button) !important;
|
background: var(--button) !important;
|
||||||
border: 1px solid var(--border) !important;
|
border: 1px solid var(--border) !important;
|
||||||
color: var(--fg) !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 */
|
/* Favicon styling */
|
||||||
|
|
@ -1375,8 +1453,10 @@ p {
|
||||||
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
line-height: 1.5; /* adjust if needed */
|
line-height: 1.5;
|
||||||
max-height: calc(1.5em * 3); /* 3 lines */
|
/* adjust if needed */
|
||||||
|
max-height: calc(1.5em * 3);
|
||||||
|
/* 3 lines */
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-description {
|
.result-description {
|
||||||
|
|
@ -1409,6 +1489,7 @@ p {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
.result-path::before {
|
.result-path::before {
|
||||||
content: "›";
|
content: "›";
|
||||||
|
|
@ -1416,9 +1497,16 @@ p {
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
} */
|
} */
|
||||||
|
|
||||||
body, h1, p, a, input, button {
|
body,
|
||||||
color: var(--text-color); /* Applies the text color based on theme */
|
h1,
|
||||||
background-color: var(--background-color); /* Applies the background color based on theme */
|
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) {
|
@media only screen and (max-width: 1320px) {
|
||||||
|
|
@ -1618,7 +1706,8 @@ body, h1, p, a, input, button {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
top: -5px; /* how ? why ? I dont even wanna know */
|
top: -5px;
|
||||||
|
/* how ? why ? I dont even wanna know */
|
||||||
left: 0px;
|
left: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1709,17 +1798,17 @@ body, h1, p, a, input, button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.fetched_dif_videos {
|
.fetched_dif_videos {
|
||||||
margin-top: 135px !important;
|
margin-top: 135px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fetched_dif_files{
|
.fetched_dif_files {
|
||||||
margin-top: 25px !important;
|
margin-top: 25px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fetched_dif_images {
|
.fetched_dif_images {
|
||||||
margin-top: 25px;
|
margin-top: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.results_settings {
|
.results_settings {
|
||||||
left: 20px;
|
left: 20px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
|
@ -1790,7 +1879,8 @@ body, h1, p, a, input, button {
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
position: relative;
|
position: relative;
|
||||||
scroll-behavior: smooth;
|
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) */
|
/* 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 */
|
/* Gradient as a fixed visual indicator */
|
||||||
.sub-search-button-wrapper::after {
|
.sub-search-button-wrapper::after {
|
||||||
content: ''; /* Adds a gradient or fade effect as a scroll indicator */
|
content: '';
|
||||||
position: fixed; /* Ensure it doesn't move with scrolling */
|
/* Adds a gradient or fade effect as a scroll indicator */
|
||||||
|
position: fixed;
|
||||||
|
/* Ensure it doesn't move with scrolling */
|
||||||
top: 90px;
|
top: 90px;
|
||||||
right: 0;
|
right: 0;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
background: linear-gradient(to left, var(--html-bg), rgba(255, 255, 255, 0)); /* Adjust colors */
|
background: linear-gradient(to left, var(--html-bg), rgba(255, 255, 255, 0));
|
||||||
pointer-events: none; /* Prevent interaction */
|
/* Adjust colors */
|
||||||
z-index: 1; /* Ensure it is above the scrollable content */
|
pointer-events: none;
|
||||||
|
/* Prevent interaction */
|
||||||
|
z-index: 1;
|
||||||
|
/* Ensure it is above the scrollable content */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hide gradient when fully scrolled */
|
/* 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) {
|
@media only screen and (max-width: 400px) {
|
||||||
|
|
||||||
.icon-button {
|
.icon-button {
|
||||||
|
|
@ -1825,13 +1920,16 @@ body, h1, p, a, input, button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.results_settings {
|
.results_settings {
|
||||||
display: flex; /* Enable flexbox */
|
display: flex;
|
||||||
flex-wrap: wrap; /* Allow elements to wrap onto new lines when necessary */
|
/* Enable flexbox */
|
||||||
|
flex-wrap: wrap;
|
||||||
|
/* Allow elements to wrap onto new lines when necessary */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Ensuring dark theme compliance */
|
/* Ensuring dark theme compliance */
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
|
|
||||||
.leaflet-control-locate,
|
.leaflet-control-locate,
|
||||||
.leaflet-control-layers-toggle,
|
.leaflet-control-layers-toggle,
|
||||||
.leaflet-bar a,
|
.leaflet-bar a,
|
||||||
|
|
@ -1844,7 +1942,8 @@ body, h1, p, a, input, button {
|
||||||
background-color: var(--button) !important;
|
background-color: var(--button) !important;
|
||||||
border: 1px solid var(--border) !important;
|
border: 1px solid var(--border) !important;
|
||||||
color: var(--fg) !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 {
|
.leaflet-control-attribution a {
|
||||||
|
|
@ -1853,5 +1952,5 @@ body, h1, p, a, input, button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.favicon.globe-fallback {
|
.favicon.globe-fallback {
|
||||||
color: var(--font-fg);
|
color: var(--font-fg);
|
||||||
}
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue