fossasia / susper.com Goto Github PK

As mentioned in issue no #37 , the style of susper.com looks a bit dull. It should be attractive and eye-catching in terms of styling. Here are the screenshots -

It should be styled similar to loklak.net. Also, we can add a tag-line between susper logo and search bar. We can discuss about it though if we need it.

Result Page -

this is an evolutionary issue. and one could start by contributing the tests to those functions not covered in the test suite .
addition of the code coverage tools could also be done.

The index page having two search bars is redundant. The search bar in the title bar needs to be hidden in the index page and displayed only in the search page.

when user searches for something ,the search bar in the results page is empty, query could be parsed and displayed there

present susper susper-backbone has a choice to search images, this could be implemented here.

On the homepage susper.com , clicking on SUSPER logo directs to yacy.net . The logo should not link to any website just like Google search engine.

Coala should not be on gh-pages but on the angular branch as done by @harshit98 we should remove it. It is also not working there!

replace github's default 404 page with susper's

The search bar in the 404 page needs to be updated. It does not render search results, moreover it needs to be updated to the latest version which looks like this

instead of:

NOTE:Instead of hard coding the search bar every time we use it, simply including the navbar component would be more efficient.

adding the codecoverage , and html linters would make the code quallity better and easier to view and understand. one picking up this issue needs to correct html lint errors present in the project too.

• add codecoverage

• add html linter and correct lint errors present

We could do following do following changes

1. Alignment of the search results page(PS:the red lines), please see the image below
   

2. The Menu about right now works on both hover and click, we can keep it just one which would be make it easy even I feel icons are pretty huge may be we could change dropdown menu as next pic
   
   

3. Floater's position could be fix such that when we scroll it stays at bottom instead of moving along the scroll and we could hide the flyer in mobile or make some change such that it doesn't overlaps texts
   
   

4. Favicon is not displayed
   

All these issues are very small I would suggest first timers solving them, I am ready to help if needed.

When we navigate from one page of images, to the next and then click on the all tab, we get results from the 10th page(since a 100 images are displayed each time).

This may confuse the user, we have two possible solutions

1. Separate pagination bar for each view type(image, all etc)
2. Set page to 1, every time a new view type is clicked on
   (Note: Google implements the second suggestion)

currently we have only one component for results page, but it is a bad practice to have a whole page as one component .subdividing the results component to subcomponents will lead to cross component communication, and extending susper in future would lead to many more cross component state dependencies.
so a solution to this is to implement redux based architecture for search results and any other cross dependencies in future.

In about this page section- the icons seems to be blurred (not sharp, pixels are observed) . I would like to work on this.
Also rather than using pictures, we can use icons. It would be much better to have fast website.

Searching images more than 3 - seems good. Pagination remains in it's position. But, searching images less than 3 - the pagination shifts from it's position upwards. Here are the screenshots -

implement susper ,similar to google.

• Implement a menu with tabs "All", "Images", "Videos" and "Search Tools"

• On clicking "Search Tools" show submenus

• Below menu "All" show options

• Sort by date

• All Results, File Types, Provider, Authors - with a dropdown menu that opens on scroll over and shows tick boxes

• Below Images show options

•         All Images, File Types (only show image file types here), Provider, Authors - with a dropdown menu that opens on scroll over and shows tick boxes
  

• Below Videos show options

•         All Videos, File Types (only show video file types here), Provider, Authors - with a dropdown menu that opens on scroll over and shows tick boxes
  

The goal would be to implement a design closer to google than to the old susper design with the sidebar.
more details can be found at
fossasia/susper-backbone#5

Whether I go to susper.com or work locally on my machine (localhost:4200) the site ends up loading a default options box.

Isn't it good to have a progress bar to show while doing a search.

Here are the screenshots -
First click on the image tab shows- link of the images but no images are display.

Second click on the image tab shows- images with no link (from the website they have been rendered).

It should be similar to Google- on single click images appear with respective links.

there is an extra space on top of the page

once the initial project is setup one could start working on this.

The search bar in the home page and the results page need to be linked, i.e, text in one should be displayed in the other. I think a common component that is injected into both pages will be a solution. What do you think @nikhilrayaprolu ?

I was testing out the site on different screen sizes and it seems that the site is not responsive on all screens. Here are the screenshots:


I would like to work on this issue. Thanks

The image display of susper seems to be broken. Only the links are being displayed

when we type a url which isn't present , the site isn't rendering us anything in router-outlet. a 404 error page implementation would make this fixed

Clicking on About this page under the help icon gives a 404 error.

the present filter functionality and search tools functionality could be implemented.

• implement the filters

• implemet the search tools bar

The start page of susper is currently blank. It shows an option to add search to Firefox very shortly (on Chrome) and then only a blank white page is shown.

There are few letters which are cutting from bottom like 'g' and 'j'

We should not have link from homepage to homepage again, from accessibility point of you, Sometime this could be confusing..

The basis of the service was the old susper.com website. The goal of the new development would be to get a service that has a more modern design similar to google and loklak.

To give good user experience we have to link nav-bar logo and 404 page with the home page. like google does.

Please implement Angular2 to gh-pages branch on each commit.

This is already implement in the loklak search project. You can check there for questions as well: https://github.com/fossasia/loklak_search

The links under the help icon are redundant as they all point to yacysearch(as it was in susper-backbone), they require to be updated, and restyled. @mariobehling Any ideas on how to go about this? Especially since google has no feature like this.
Susper:

Google:

The pagination bar has the following two problems

1. The next and previous only update the pagination bar, not the entire page
2. Its functionality for images is unclear, as it tries to display images from the same page where documents were last viewed.
   @mariobehling @nikhilrayaprolu What do you suggest? How should images be displayed? Should there be paging for them at all? Google doesnot display images in pages, it displays all of them at once. Should we implement something like that?
   If images and videos have the paging system too, then where should it start from, from page 1 or the page the user is currently viewing in say documents?

when a search is made , the results count isn't displaying.

since github doesn't make calls to http servers (mixed content) ,susper doesn't work on github pages .one way we could make a workaround for this is to publish the site to a custom domain by adding a CNAME file.
@mariobehling

The search bar on the results page seems to have a bug. It does nothing on clicking the search button.

Here are the screenshots of the following logo i'm taking about :-

On clicking the SUSPER it should- direct to susper.com just like Google.

We should resize the susper logo - it should be little more big in size. And there is too much area between the logo and the search bar. It should also be reduced. It should have similar design just like Google have! Here are the screenshots -

result's page is a single component now . which could be sub divided into many components which makes the code maintainable and understandable.

• Search bar component.
• Autocomplete component.
• Infobox component.
• Related search component.
• Dropdown component.
• Navbar component.
• Footer navbar component.

Left :-

• Pagination component.

• Images component

• videos component

Searching a particular thing, and results being fetched is working good! But when I click on any of the link - it redirects me to 404 Page not found. Here are the screenshots -

After clicking on a desired link -

When the site loads on Firefox, it looks like this -

While on Chrome- it appears just for seconds and get disappear and ends up loading the search bar.

Here is the screenshot of the following bug -

This issue is similar to issue #84

the url parameters are implemented as matrix parameters(default way to pass parameters in angular2 using semi colon) now , but since matrix parameters are not good for our case ,it is better to change them to query parameters with ? and &.

Isn't it good to have a place holder for search input box.

The start page shows a loading info. Please avoid loading infos.

now when ever user wants to search something he has to type it and click enter , a auto search feature while user types would fix this

I have attached the screenshots please do review it,
The error.png denotes the issue image
and the correct.png refers to correct image