eos-uiux-solutions / eos-icons-landing Goto Github PK

Description
Bottom Border on top navigation is irregular in each case of active links happens due to bottom attribute.

Resolution
To have uniform bottom border.

Codeblock overlaps on scrolling in firefox browser .
This works fine in different browsers like chrome, brave.
This is a browser specific issue.

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

The thickness of the bottom blue line under Icons, About Us, Docs, and Team are not equal.

Expected Behavior

It's a simple bug; all we have to do is equalise the border thickness of each section.

Steps To Reproduce

No response

Anything else?

No response

What browsers are you seeing the problem on?

No response

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

On clicking any of the above button and links, page refreshes.

Expected Behavior

Page should not refresh on click of any links or button.

Steps To Reproduce

1. Open the site
2. Click on links

• Learn more about our cookie policy
• Edit preferences
  or
  Click on Accept

Anything else?

No response

What browsers are you seeing the problem on?

No response

The very first load of Docs page looks like this.

I guess the default view of the Page should be like below -

Importing issues from old repo on Gitlab.
Created by: @vinayaksh42

The search field of the animated icons tab is not getting populated which results in the inability to share the icon as the URL remains the same.

There are certain bugs which can be fixed in the eos-icons website.
1.The text "Implementation example" is mentioned twice. We can make it show only one.

2. These are some typos which can be fixed.
   

3. We can add the GitHub repository link just after the "Go to our GitHub to find out more"
   

4. There is a broken link to Saurabh Sharma Sir's twitter account(saying the account does not exist when we open it). We can add the updated link.
   

5. Fix text and link mobile responsiveness issue(as here we can see colon is below with the link not with the text)
   
   
   

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

The Colour picker prompt opens up on clicking the' edit and download' button but doesn't close on clicking outside the prompt.

Expected Behavior

The Colour picker prompt opens up on clicking the' edit and download' button and closes on clicking outside the prompt.

Steps To Reproduce

1. Click on any icon
2. Click on the edit and download button on the HowTo panel
3. Try to close the prompt by clicking outside the color picker prompt.

Anything else?

No response

What browsers are you seeing the problem on?

No response

Currently when we select a element & try to copy it using the button . No notification is shown to the user.
We can add simple notification.

Importing issues from old repo on Gitlab.
Created by: @Aman-Codes

There are non-consecutive heading levels used in the website which contains <h4> tag directly following an <h1> tag.
Proposal to replace all non-consecutive heading tags with consecutive tags

Importing issues from old repo on Gitlab.
Created by: @Striver08

While searching two or more icons it shows "No Results to shows" but upon scrolling the page, Icons can be seen.
PFA for reference.

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

There is a color scheme provided by prism-theme.scss which is used in code sections(where the links are stored). When we view the (in your application) page the code section shows colorful code, but as soon as we change to any other section such as (React) or (Vue) and then go back to (In your application) section then the colored code disappears. The prism-theme.scss file is loading correctly as there are changes which are implementing on state change but the text colors are disappearing.

Expected Behavior

The colored code should be present if we switch back to the current state.

Steps To Reproduce

No response

Anything else?

No response

What browsers are you seeing the problem on?

No response

Empty space between different Icon sections is alot.

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

No response

Expected Behavior

No response

Steps To Reproduce

No response

Anything else?

No response

What browsers are you seeing the problem on?

No response

Currently when a user tries to install the npm package, the code has to be copied at all like this.

Instead we can add a copy button to it like the one as shown so that the user can copy it without having selecting all.

"Repository" and "Report an issue" links in the footer are linked to old Gitlab links instead of the Github links.

Importing issues from old repo on Gitlab.
Created by: @m1-key

If you select an icon and then refresh the page, the selected icon automatically gets cached. And by default, it searches for similar icons of the selected one, and the same goes for the multiple selected, in this the last selected icon get cached in the search result, and then on refreshing the page it automatically searches according to the last selected icon.
So the gist is that if a user refreshes the page and before refreshing he/she has selected any icon then after refresh it searches for icons similar to the selected one. I have attached a video for the same.

When we select a static icon, search field is populated with the selected icon's name & then if we move onto animated icon's tab then search field is not getting emptied & it searches for the same type of animated icon but the url is changed & if the resulting animated icon is not found, the rest of the animated icons appear below No Result to show screen.

There are two issues

1. Search field is not getting emptied when tab is toggled from static to animated while the reverse(i.e, switching from animated to static) works fine.
2. When switching from static to animated tab No results to show screen should not be shown as the searchquery will be emptied & for empty query there should be no result & it should display all the animated icons by default.

Issue:

Steps to reproduce the issue:

• Enter "Flight Class".
• The UI will return the fetched results after entering "flight" but after the blank space and the new word, it seems it is performing a new search and returning the empty results all on the same screen.

Expected behavior:

• All items matching the keywords "flight" and/or "class" should be returned as matching results.

The links, images and the table in the mentioned screenshot are not responsive

As discussed with @cyntss the footer can be Re-Designed for the mobile view.
I have designed a footer which looks like this mentioned below.

if this is good to go, can anyone help me in assigning this.

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

When a user switches theme, the gap between the icon title and icons gets reduced.

Expected Behavior

Margin should be provided so that the switch theme icons can be equalized.

Steps To Reproduce

No response

Anything else?

No response

What browsers are you seeing the problem on?

No response

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

When a user selects multiple icons and if a user tries to click on Images with no icon selected, an Alert is shown saying 'no images selected' but in case of font no alert is shown.

Expected Behavior

An alert functionality should be added to the Font button in the select multiple section.

Steps To Reproduce

No response

Anything else?

No response

What browsers are you seeing the problem on?

No response

This will enhance the look & feel of the https://eos-icons.com/

Importing issues from old repo on Gitlab.
Created by: @Sanyam_Pandey

If someone selects an icon in static icons and toggles to 'animated icon tab', the search results are shown according to icon selected in 'static icons tab' .Also the search bar shows the selected static icon name.

video:

https://gitlab.com/SUSE-UIUX/eos-icons-landing/uploads/2f7b2466342a35f935198cd1a6dcb805/screen-capture__13_.webm

Current State :
Some of the eos-icons are not downloading, they are throwing the 404 error page not found as shown.

Expected State :
The error must be resolved and the link should be updated.

Suggested search text shown should have a pointer cursor.

Importing issues from old repo on Gitlab.
Created by: @deutranium

Current Behaviour:

The "Select Multiple" option does not toggle back to "off" state when a user is trying to select animated icons and gets disabled in the "on" state while preventing the user from selecting more than one icon. The same can be seen in the screenshot below

Static Icons:

Animated Icons:

Expected behaviour:

• Toggle in "on" state at "Static Icons" tab
  • Toggle should go to the "off" state and disabled when the user switches to the "Animated Icons" tab
  • Toggle should go back to the "on" state when the user goes back to the "Static Icons" tab
• Toggle in "off" state at "Static Icons" tab
  • Toggle should be in off state in both the tabs
  • Toggle should also be disabled in the "Animated Icons" tab

The same has been demonstrated in the form of the screenshots below:

Static Icons:

Animated Icons:

Possible fixes:

Following are a few fixes I thought of:

• Setting the toggle permanently to the "off" state and disabled when the user is on the "Animated Icons" tab
• Hiding the toggle when the user is on the "Animated Icons" tab

P.S. I think it would also be better to give a message through a tooltip (for the first fix), or by replacing the toggle with an info icon (for the second fix), hovering/clicking on which the user gets a message telling them why multiple selections have been disabled. This is done because when I tried animated icons for the first time, I was pretty confused as to why I am not able to toggle the multiple selections.

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

On mobile devices, categories are not been displayed.

Expected Behavior

Displaying categories on all devices.

Steps To Reproduce

No response

Anything else?

No response

What browsers are you seeing the problem on?

No response

When visiting different Pages, the scroll position remains the same as the previously visited page. It should be scrolled to top of the page which the user clicks for better experience.

There are certain UI improvements which can be made in the Eos icons.

1. The download eos icons is a bit far away from the text
   

Suggested Improvement :
We can add the button just below the text to make it handy as shown

2. There is a big gap present here and in certain points gap is needed to be provided.
   

3. The switch theme option is not available for the animated icons as shown.
   https://user-images.githubusercontent.com/67755381/154658676-3c24b1b2-d688-4038-98c2-b9f9d23956e2.mp4

Suggested Improvement :
We can disable the switch to theme button for the animated icons.

The download icon bar takes up a lot of space and isn't properly placed under the animation icon area.

Importing issues from old repo on Gitlab.
Created by: @cyntss

I passed eos-icons on woorank.com to get an analysis as to where we can improve it, and several issues where identified. among them, is this:

More info provided by woorank

https://help.woorank.com/hc/en-us/articles/360000136385-Why-can-t-you-find-my-social-media-pages-

Current State : The Pre-defined size list table in the Vue 2/3 section of the docs section is not responsive, resulting in adding extra width to the page.

Expected State : The table should be made responsive so that the page does not add the additional width.

Down Arrow Icon & text are a little more separated & vertically misaligned due to which it looks like they both are different .
Add a border & reduce the space between down arrow icon & the text.

Current Version:

Enhanced Version:

Importing issues from old repo on Gitlab.
Created by: @Aman-Codes

Input tag has a missing label tag

EOS icons landing repo doesn't have a feature request template like the user story repo. Would be great as I want to request a feature and I am sure a lot of other people as well.

Importing issues from old repo on Gitlab.
Created by: @Aman-Codes

Add more missing meta tags like description tags, keyword tags, Facebook and Twitter metadata tags etc.

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

When we click on an already selected icon to deselect it. It takes double clicks to deselect it. Upon deselecting the icon, URL and search params remain populated with the data of the last selected icon.

Expected Behavior

Deselecting an icon in a single click, and clearing out the URL and search params upon deselecting.

Steps To Reproduce

1. Open the site and select any icon.
2. Try to deselect it ( It will take more than one clicks)
3. Once unselected visit the search and URL; they still remain populated.

Anything else?

No response

What browsers are you seeing the problem on?

No response

When a user selects an icon and shares a link to that icon. The icon gets selected and the app automatically scrolls to the selected icon(in new window or browser tab). This feature is working in local build as can be seen in PR #22 but not in production.

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

When the user is present somewhere down on the Icons page, clicking the eos-icons logo in Navbar does nothing.

Expected Behavior

Clicking the Navbar logo should restore the site to its default state i.e. how the site looks on the first-page load, clearing the How to use section, search and URL params.

Steps To Reproduce

1. Open the site and scroll down.
2. Select any icon and try to click the logo in the Navbar

Anything else?

No response

What browsers are you seeing the problem on?

No response

Steps to Reproduce

Check the Select multiple icon input to true & select some icons then disable it, the last icon selected will be show as a selected icon which is fine but the search input & uri is empty .

The current node-sass version depends on 3.x node-gyp, which requires python2 for installation.

Python2 has reached EOL and installing the repo now requires an additional python2 installation.

The updated node-sass versions seem to fix the issue.

Importing issues from old repo on Gitlab.
Created by: @Aman-Codes

Background and foreground colors should have a sufficient contrast ratio.

The following discussion from !166 should be addressed:

• @cyntss started a discussion: (+2 comments)

  In mobile, can we break the text and image in the about us page so that the image is first and the text below? (or the opposite if Zvezda designed it to be that way)

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

NavBar UI currently:

• The EOS icon in the navbar is quite small and is also not aligned with the home, about nav tab properly(for the desktop screen).

Expected Behavior

Navbar UI update:

• We can rearrange the Navbar EOS icon and menu tabs to make it look cleaner.

Steps To Reproduce

Need to work on navigation component
https://github.com/EOS-uiux-Solutions/eos-icons-landing/blob/master/src/assets/scss/components/navigation.scss

Anything else?

No response

What browsers are you seeing the problem on?

Chrome

Importing issues from old repo on Gitlab.
Created by: @Sanyam_Pandey

Currently, a user can only download one animated icons at a time . This feature will allow a user to select and download multiple animated icons at once.

video:

https://gitlab.com/SUSE-UIUX/eos-icons-landing/uploads/bdef2a8fe8fb05c188c63d20004e0c1b/screen-capture__3_.webm

The current readme file contains "To make sure your SCSS is compliant run: npm run test:scss"

However, when a user tries to run the command it throws the error as mentioned:

when we use npm run test:sass works fine and tells if there are any errors in the code.

Suggested Change:
The Readme file should be updated & command should also be changed from "npm run test:scss" to "npm run test:sass"

Also the pushed code sometimes fails on workflows due to the prettier issue which can be fixed using "npm run js:fix" we can include that also

Currently there is no functionality for Switch Theme in case of Animated Icons.

Solution
Don't hide the Switch Theme input instead Disable it if the Animated Icon Tab is active