Skip to content
This repository has been archived by the owner on Sep 7, 2023. It is now read-only.

[enh] oscar: image thumbnail layout #2675

Merged
merged 1 commit into from Apr 21, 2021
Merged

Conversation

dalf
Copy link
Contributor

@dalf dalf commented Mar 22, 2021

What does this PR do?

  • Adjust thumbnail sizes to fill the container width (code copied and adjusted from the simple theme).
  • Remove border on thumbnails

With javascript

image

image

Without javascript

image

Why is this change important?

Improve UX.

How to test this PR locally?

use the different oscar styles, search for

  • !images time
  • !general !images time

Try javascript enable and disabled.

Author's checklist

Related issues

@dalf dalf added the ui / ux label Mar 22, 2021
return42
return42 previously approved these changes Mar 22, 2021
Copy link
Contributor

@return42 return42 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks much better / Thank you!

What do you think about the code duplication?

searx/static/themes/oscar/js/searx.js Outdated Show resolved Hide resolved
if (isSearching) {
this._setSize(slice, Math.min(this.maxHeight, h));
break;
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

continue w is replaced by isSearching : try to make the code more readable.

.result-images a:focus .img-thumbnail {
box-shadow: 5px 5px 15px 0px black;
}
.result-images.js a .img-thumbnail {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ImageLayout adds the js class for each processed image.

kvch
kvch previously approved these changes Apr 3, 2021
Copy link
Member

@kvch kvch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After a rebase it is good to go.

Adjust thumbnail sizes to fill the container width
Copy link
Contributor

@BBaoVanC BBaoVanC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can this be merged soon? I've had this PR merged on my fork for a little over a week now and it works great!

Copy link
Member

@asciimoo asciimoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great, thanks!

@asciimoo asciimoo merged commit 2fa5f7a into searx:master Apr 21, 2021
@dalf dalf deleted the oscar-images branch April 27, 2021 06:51
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants