Repository: searxng/searxng

Issue:
[Simple Theme]: Suggestions to an even cleaner results page.
<!-- PLEASE FILL THESE FIELDS, IT REALLY HELPS THE MAINTAINERS OF SearXNG -->

**Is your feature request related to a problem? Please describe.**
<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
When we look at other search engine's results page, we can see that almost all of them replace the `/` in the result URL with `>`. This tends to look cleaner than having simply the URL in the result. I particularly like Brave's approach which shows just the domain name in bold darker letters (benefits somewhat to prevent phishing) and then the paths in lighter color,  the font size of the results is larger and more pleasing to the eye. Furthermore, as we can see in the second Brave screenshot below, if the path is greater than the size of the box then its simply hidden. 

**Describe the solution you'd like**
<!-- A clear and concise description of what you want to happen. -->
So, if we move the URL below the title we can follow Brave's approach with the domain name being highlighted in bold and the forward slash `/` being replaced with a right chevron `>` and make the overall font-size of the results slightly larger. If we wish to keep the URL exactly where it is now (above the result title) then DDG's approach may look better with the `http://domain.com > path > path2`. Also, I believe someone proposed adding the website icons next to the results, and in this case, we may add them to the left of the URL like DDG does. 

**Describe alternatives you've considered**
<!-- A clear and concise description of any alternative solutions or features you've considered. -->
I have not considered any at the moment. 

**Additional context**
<!-- Add any other context or screenshots about the feature request here. -->
DDG:
![image](https://user-images.githubusercontent.com/68975831/141706346-14924b0d-b6f5-433d-be15-4207d33bf0b7.png)

Brave Search: 
![image](https://user-images.githubusercontent.com/68975831/141706417-c2e078fd-d700-4274-a58e-9ebc44ef9d74.png)

Brave Search with Overflow hidden:
![image](https://user-images.githubusercontent.com/68975831/141706618-bc51377d-8853-4ebb-b302-9f85d73719e2.png)

SearXNG:
![image](https://user-images.githubusercontent.com/68975831/141706386-12f69df3-ca10-4fcd-b200-34aeb04f7390.png)

Even though this is mostly just eye candy stuff it may help the search engine look and feel similar to others. Thank you.


### What do you think?


Discussion:
I actually tried a exp. impl. of that in #441. I think it is better to keep the URL we have right now, since I am not a big fan how chrome with the address bar and all the other search engines are moving away from just displaying the URL. Maybe as a compromise the duckduckgo impl.... Using just the `>` does not look good IMO so I would suggest using inline svg's from ion icon theme... (But this would on the other hand increase the sice of the html a lot)

[EDIT] nvm we can just use `›` like ddg

[EDIT2] Actually I think you are right and the arrows lock actually better... I am going to write a small PR for that :+1: 
> [EDIT2] Actually I think you are right and the arrows lock actually better... I am going to write a small PR for that +1

IMO the `>` notation hides some informations about the URL .. by example, here I can see it is an MP4 content and if I know how to read this URL I can see the date (y: 2011, m: 11, d: 13) and the quality of the video (hd):

![grafik](https://user-images.githubusercontent.com/554536/141772169-a6f114d1-ac9e-4c6f-9f17-99c9b382179f.png)

So yeah I think something like this would look good tbh... (basically the ddg approach):
![image](https://user-images.githubusercontent.com/38733246/141775866-431c3872-f609-46eb-9400-727ec19f49df.png)

> IMO the > notation hides some informations about the URL .. by example, here I can see it is an MP4 content and if I know how to read this URL I can see the date (y: 2011, m: 11, d: 13) and the quality of the video (hd):

IMO it is still pretty easy to get this information from the url with the > notation tbh:
![image](https://user-images.githubusercontent.com/38733246/141777066-ffae1811-f052-4731-aec1-bbb25ac4cf72.png)


> IMO it is still pretty easy to get this information from the url with the > notation tbh:

Yes, looks good to me, what you suggested / thanks!
Cant copy and paste URLs if you start munging them. Bad idea.
> Cant copy and paste URLs if you start munging them. Bad idea.

AFAIK you cant copy the URL right now / if the URL is long and includes `[...]` / from my example above ...

     https://mediandr-a.akamaihd.net/progre[...]2021/1113/TV-20211113-1050-0700.hd.mp4

BTW: should we reduce the contrast of the URL? If you look at other search engines, the contrast is much lower.
> Cant copy and paste URLs if you start munging them. Bad idea.

You can also just right click the URL and copy it to the clipboard so IMO not really a problem tbh...

> BTW: should we reduce the contrast of the URL? If you look at other search engines, the contrast is much lower.

Not with ddg and I think we should keep the contrast high... Makes the result article more accessible and highlights the URL more... (we could even go as far and make the font size 1rem instead of the 0.96 rem atm)
> You can also just right click the URL and copy it to the clipboard so IMO not really a problem tbh...

Technical side note / untested trick to allow that: cut the URL in 3 parts. Display the parts with inline-block. Make disapear the second part if there is not enough space (perhaps using flexbox ?). Advantage: screen readers get the full the URL.

[EDIT] perhaps it makes sense to hide the URL to screen readers since the actual link is just below. However, it doesn't seem to be the case for ddg (full or lite version).
What are everyone’s opinions on making the font size of all results slightly larger like Brave and DDG do? The description doesn’t seem bad so it would just be the Result Title and maybe the URL like suggested by @MrPaulBlack  (?)

Resolving patch:
diff --git a/searx/webapp.py b/searx/webapp.py
--- a/searx/webapp.py
+++ b/searx/webapp.py
@@ -419,6 +419,16 @@ def _get_enable_categories(all_categories):
     return [x for x in all_categories if x in enabled_categories]
 
 
+def get_pretty_url(parsed_url):
+    path = parsed_url.path
+    path = path[:-1] if len(path) > 0 and path[-1] == '/' else path
+    path = path.replace("/", " › ")
+    return [
+        parsed_url.scheme + "://" + parsed_url.netloc,
+        path
+    ]
+
+
 def render(template_name, override_theme=None, **kwargs):
     # values from the HTTP requests
     kwargs['endpoint'] = 'results' if 'q' in kwargs else request.endpoint
@@ -457,6 +467,7 @@ def render(template_name, override_theme=None, **kwargs):
     kwargs['searx_version'] = VERSION_STRING
     kwargs['searx_git_url'] = GIT_URL
     kwargs['get_setting'] = get_setting
+    kwargs['get_pretty_url'] = get_pretty_url
 
     # helpers to create links to other pages
     kwargs['url_for'] = url_for_theme  # override url_for function in templates


Test patch: