Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve rendering of the tabs #535

Merged
merged 31 commits into from
Feb 7, 2022
Merged

Conversation

jacr13
Copy link
Contributor

@jacr13 jacr13 commented Nov 17, 2021

The rendering is similar in all the tabs.

In addition, the tab disposition is the same across all the tabs.

If the translation is not present, the default names will be displayed (in English), some effort needs to be made here to add translation for all supported languages. It shouldn't be very hard to translate since they are very basic words.

This probably fixes #298. I intentionally removed the shopping tab because it requires some effort to render correctly (#136).

The header should be extended to add an extra row with different parameters to choice from (#322 and possibly #192)

Copy link
Owner

@benbusby benbusby left a comment

Choose a reason for hiding this comment

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

Awesome @jacr13, thanks for working on this feature. On desktop it seems to work really well. I did a quick review, the main things are:

  • Are you working on a mobile tab replacement as well? Currently the mobile tab bar is removed but not replaced by anything
  • Some styling elements are potentially not necessary, or need to be updated.

app/utils/search.py Show resolved Hide resolved
app/utils/results.py Outdated Show resolved Hide resolved
app/templates/header.html Outdated Show resolved Hide resolved
app/static/css/header.css Outdated Show resolved Hide resolved
app/filter.py Outdated Show resolved Hide resolved
app/filter.py Outdated Show resolved Hide resolved
app/templates/header.html Show resolved Hide resolved
app/static/settings/translations.json Show resolved Hide resolved
app/static/css/header.css Outdated Show resolved Hide resolved
app/static/css/header.css Outdated Show resolved Hide resolved
@jacr13
Copy link
Contributor Author

jacr13 commented Nov 19, 2021

Thanks @benbusby for reviewing the code!

This is a first version and of course it needs some rework.
For the mobile version I have not done any testing, I will do when addressing the other issues!

I will not have too much time the next two weeks, so I may take a couple of weeks to fix yours remarks and implement the rest.

@jacr13
Copy link
Contributor Author

jacr13 commented Jan 24, 2022

I have added support for the mobile version and fixed the issues you highlighted before.

The translation still needs to be done for all the languages (except English).

@benbusby
Copy link
Owner

I have added support for the mobile version and fixed the issues you highlighted before.

The translation still needs to be done for all the languages (except English).

Awesome! Will review this week.

@benbusby
Copy link
Owner

benbusby commented Feb 2, 2022

Just FYI -- I'm holding off on reviewing this for a bit longer since Google is in the middle of changing how results are formatted, and I want to make sure their formatting changes don't break this feature. I'll be sure to review once it seems like the new result formatting changes they're making are finished/permanent.

The images page still had a number of pages linked that forwarded to
non-Whoogle pages.

Also fixed footer styling on image results page.
Created a G class enum to reference class names returned in search
results. As noted in the class doc, this should only be used/updated as
a last resort, as class names change frequently. For some instances,
such as replacing the tbm tab, it's a lot easier to just replace by
header name than attempting to replace it based on how the element is
structured.

Also updated a few styles to revert the latest styling changes being
applied by Google.
Copy link
Owner

@benbusby benbusby left a comment

Choose a reason for hiding this comment

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

Awesome, this looks good to go. I've added a few things with regard to styling and moving the tbm tab class names to their own enum, as well as translations for the tab names for currently supported languages.

Thanks again @jacr13!

@benbusby benbusby merged commit 11099f7 into benbusby:main Feb 7, 2022
@DUOLabs333
Copy link
Contributor

DUOLabs333 commented Feb 7, 2022

Problem I've been having -- between switching tabs, for a brief second, it switches to some font (maybe Times New Roman?), before going back to the default font.

TrueMysterious added a commit to TrueMysterious/whoogle-search that referenced this pull request Feb 28, 2022
* Make `/config` directory writable by all (benbusby#616)

The `/config` directory needs to be writable by all in order to run the container
as a non-root user.

* Run container as non-root `whoogle` user (benbusby#617)

Creates a non-root user ("whoogle"), and runs the container as that user.

* Fix docker-compose.yml permission errors (benbusby#623)

* Refactor Docker CI workflows

Split previous docker test CI into one for PRs and one for triggering
the main buildx workflow that deploys new images to Docker Hub.

Note that this needs to be further refactored soon to use reusable
workflows. The main portion of docker/docker-compose tests is duplicated
between the new main + test workflows.

* Move bangs init to bg thread

Initializing the DDG bangs when running whoogle for the first time
creates an indeterminate amount of delay before the app becomes usable,
which makes usability tests (particularly w/ Docker) unreliable. This
moves the bang json init to a background thread and writes a temporary
empty dict to the bangs json file until the full bangs json can be used.

* Remove trailing whitespace

* Use `test` image tag for docker-compose tests

Also adds the ability to overwrite the image in docker-compose.yml,
which allows the CI build to use the same image for all docker tests.
The default is still 'benbusby/whoogle-search' though.

* Remove bash dependency

Depending on bash wasn't strictly necessary, as the two minimal scripts
in the repo were both nearly POSIX anyways.

Aside from simplifying the repo's dependencies a little bit, this also
helps reduce the overall Docker image size as an added bonus.

* Add nightly container vuln scan

Introduces a new 'scan' workflow for scanning the main branch container for
vulnerabilities nightly. By default, this will fail for any 'medium' or higher
vulnerability. 

Fixes benbusby#613

* Bump version to 0.7.1

* Remove broken public instance [skip ci]

search.exonip.de now redirects to startpage

Fixes benbusby#635

* Run buildx workflow on new tag

Fixes benbusby#630

* Add note for fosshost instance [skip ci]

The fosshost team decommissioned the region that Whoogle was hosted in,
but hasn't provided an option to transfer the domain record to the new VM. Until
that is fixed, the instance is inaccessible.

* Read `WHOOGLE_CONFIG_DISABLE` var as bool in app init

Fixes benbusby#636, which pointed out that the var was being interpreted as
"active" (config hidden) regardless of the value that was set.

* Override new Google search result formatting

There have been some recent formatting changes made by Google for search
results that do not look good (especially for dark themes). This
mostly overrides those styles to resemble the original Whoogle
result formatting.

* Amend body width formatting in search css

`min-width` is a better field to override than `max-width`, since some
users prefer full width results.

* Push images to ghcr.io

Alternative container registries like ghcr.io are a good option for anyone
seeking to avoid things like docker hub's latest changes to rate limiting

* Fix incorrect min-width for mobile screen sizes

min-width was previously set to 736px for all screen sizes, which forced
content off screen for smaller devices such as mobile phones. This
modifies the search stylesheet to only apply a min-width style to
devices > 800px wide.

* Update minimal mode for new Google formatting (benbusby#637)

Google's latest formatting changes broke the modifications made when enabling
`WHOOGLE_MINIMAL`. This updates the result filtering to work with the new
changes.

Fixes benbusby#634

* Fix Sinhala translation for farside search (benbusby#594)

* Use consistent header for all result types (benbusby#535)

Introduces a header for switching between result types (i.e. "All", "News",
etc) that is consistent between the different result types. Previously, image
results had a tab header that was formatted in a drastically different manner,
which was jarring when switching from a different result page to the Images
page.

Created a G class enum to reference class names returned in search
results. As noted in the class doc, this should only be used/updated as
a last resort, as class names change frequently. For some instances,
such as replacing the tbm tab, it's a lot easier to just replace by
header name than attempting to replace it based on how the element is
structured.

Also updated a few styles to revert the latest styling changes being
applied by Google.

Co-authored-by: jacr13 <ramos.joao@protonmail.com>
Co-authored-by: Ben Busby <contact@benbusby.com>

* Clean "Show more results" of all site blocks (benbusby#646)

* Add new instance to readme [skip ci] (benbusby#647)

https://whoogle.esmailelbob.xyz

* Add public instance to instance list [skip ci]

https://whoogle.esmailelbob.xyz

Amendment to benbusby#647

* Add gowogle.voring.me as public instance (benbusby#650)

Also removes fosshost instance from readme

From @benbusby:
I'm unable to get in touch with fosshost support about the whoogle
instance being unavailable, and am no longer interested in
maintaining the instance due to the lack of communication.

* Add new public instances to txt list [skip ci]

Missing from benbusby#650

* Check for soup body in `remove_site_blocks` (benbusby#651)

Fixes error with `remove_site_blocks` in the Images tab

* Fix `collapse_sections` for `MINIMAL_MODE` (benbusby#654)

* Fix "my ip" search regression

Removes dependency on class names for creating the "my ip" info card in
the results list for searches pertaining to the user's public IP.

Adds test to prevent this from happening again.

Note to anyone reading this and looking to contribute: please avoid
using hardcoded class names at all costs. This approach of
creating/removing content just results in issues if/when Google decides
to introduce/remove class names from the result page.

Fixes benbusby#657

* Check for updates using 24 hour time delta

Rather than only checking for an available update on app init, the check
for updates now performs the check once every 24 hours on the first
request sent after that period.

This also now catches the requests.exceptions.ConnectionError that is
thrown if the app is initialized without an active internet connection.

Fixes benbusby#649

* Give `Accept-Language` div its own class (benbusby#659)

Fixes accidental assignment of "get-only" class to the
"Accept-Language" config option

* Ensure valid str->float conv in currency calc

Currency amounts returned by google seem to randomly include unicode
chars ('\xa0' noted in benbusby#642) which broke the currency calculator
included in the project. This ensures that only strings that can be
converted to float are ever used in the conversion.

Fixes benbusby#642

* [Docker] Split config dir creation/set permissions

If the config dir already exists, setting the mode (`-m 777`) doesn't
actually work as it should. This change splits the command into two
separate commands for directory creation and enabling the directory to
be writable by all.

Fixes benbusby#658

* Upgrade Python image in Dockerfile (benbusby#669)

Vulnerable Python image upgraded to python:3.11.0a5-alpine

* Configure setup() using setup.cfg (benbusby#667)

Dependencies are not read from requirements.txt intentionally, so only
direct dependencies without version pinning are included.

Setuptools documentation:
https://setuptools.pypa.io/en/latest/userguide/declarative_config.html

* Update ad filter

Recent changes to ads in search results caused Whoogle to display ads
for certain searches. In particular, ads recently started appearing
grouped into one div, as opposed to a singular ad per div. This was
accompanied by the div label "ads" (instead of just "ad"), which threw
off the existing ad filter. The ad keyword blacklist has been updated
accordingly, and has been enhanced to only check against alpha chars for
each label.

This only seems to have affected English language searches, and only for
very specific searches.

Co-authored-by: ras07 <17038818+ras07@users.noreply.github.com>
Co-authored-by: nakoo <4975021+nakoo@users.noreply.github.com>
Co-authored-by: Ben Busby <contact@benbusby.com>
Co-authored-by: DUO Labs <dvdugo333@gmail.com>
Co-authored-by: සයුරි | Sayuri <85907926+sayuri-gi@users.noreply.github.com>
Co-authored-by: Joao A. Candido Ramos <joao.candido@etu.unige.ch>
Co-authored-by: jacr13 <ramos.joao@protonmail.com>
Co-authored-by: Esmail EL BoB <github.defilable@simplelogin.co>
Co-authored-by: Kainoa Kanter <44733677+ThatOneCalculator@users.noreply.github.com>
Co-authored-by: Nitish Yadav <nitishy01@gmail.com>
Co-authored-by: Albony Cal <67057319+Albonycal@users.noreply.github.com>
Co-authored-by: jan Anja <bs@sysrq.in>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants