search

up-for-grabs / up-for-grabs.net

This is a list of projects which have curated tasks specifically for new contributors. These issues are a great way to get started with a project, or to help share the load of working on open source projects. Jump in!
https://up-for-grabs.net/
Other
5.43k stars 2.08k forks source link

Improving Frontend #930

Open ritwik12 opened 6 years ago

ritwik12 commented 6 years ago

At present, up-for-grabs.net is great content wise and is also good in front-end, But I can see a lot of potential for improvement as there are so many great web designers who can make up-for-grabs.net a very beautiful website. I would recommend awwwards for getting ideas.

Few points to work on as per @camilosampedro suggestions in the comments:

ritwik12 commented 2 years ago

Yeah, we can check that, Do we have a way to check how many users click on the dark mode? it toggles a theme that is static I guess, I am not sure if we get the reply from there or it is only on the user side. If it is dynamic then we can surely record that and get an estimate about how many users are using dark mode or light mode.

ghost commented 2 years ago

Yeah, we can check that, Do we have a way to check how many users click on the dark mode? it toggles a theme that is static I guess, I am not sure if we get the reply from there or it is only on the user side. If it is dynamic then we can surely record that and get an estimate about how many users are using dark mode or light mode.

We could maybe set up something with Google Analytics? I think it's possible to send custom data to Google Analytics.

ghost commented 2 years ago

I have made some progress. See #3023.

ghost commented 2 years ago

I have an idea that might help tremendously. I could attempt to implement a scrolling "back to top" button that would allow users who have scrolled way down the page to get back up to the search bar without needing to scroll all the way back manually. Other suggestions may come to me as I use the site.

By the way, I accidentally removed this in my changes. I will add it back in a bit.

ghost commented 2 years ago

I have an idea that might help tremendously. I could attempt to implement a scrolling "back to top" button that would allow users who have scrolled way down the page to get back up to the search bar without needing to scroll all the way back manually. Other suggestions may come to me as I use the site.

By the way, I accidentally removed this in my changes. I will add it back in a bit.

It is back.

Jai2305 commented 2 years ago

Hi , been a long time, was really busy with work...
so I had a simple to execute yet pretty design in mind image So I was thinking maybe we can use the space here in a more efficient manner by displaying projects in form of tabs/cards , the design would be responsive and they will be of the same dimension , the height here can be managed by displaying a read more option, if you like the idea then I can try to work further on it and make this design better and prettier

Jai2305 commented 2 years ago

we can play with the colors and see what seem fit in dark mode too , also for menu , how about a toggle button on the side which will reveal a banner for filters , it's just an idea , I have not worked on it yet .

ritwik12 commented 2 years ago

@Jai2305 Thanks for the ideas. Tabs looks good to me. The SS is not having tabs of same size but I am assuming you meant all will be of similar size and this is just a example without same size.

We can also have the toggle button for filters but if there is space available then the current one seems fine too.

Jai2305 commented 2 years ago

yeah in the SS they are not same size because I have not worked on it yet ; to be honest , I am not sure if read more would be a good choice that's why I was thinking about css grid auto-placement , after that it won't waste any space tabs will cover up the available space , if I make any progress , I will make sure to share here first before working further .

Jai2305 commented 2 years ago

Hi, I made a pull request #3146 , but the checks are failing on that , can someone suggest me reasons due to which they might be failing as well as the changes I can make in the code , also please comment on the look in the pull request so that I know it is worth working on it or it should be changed , any ideas will be appreciated

ritwik12 commented 2 years ago

@Jai2305 Those are due to merge conflicts. If you see stuff like <<<<< and ======= in your code when you commit something and create a pull request. that is merge conflict. Reason for that is due to files having a conflict between two changes.

Suppose you made a change in some file in your local and did not yet pushed it by creating a PR. Someone else also made some changes in their local and pushed it by creating a PR. So, now when you create a PR for those same files, there will be changes which might be conflicting as the file in the upstream (i.e main repo) is already changed.

<<<<<<< HEAD
this is some content to mess with
content to append
=======
totally different content to merge later
>>>>>>> new_branch_to_merge_later
ritwik12 commented 2 years ago

Try to read https://www.atlassian.com/git/tutorials/using-branches/merge-conflicts. For simple steps, github opens a merge conflict window when there are merge conflicts. just go there and remove those lines with <<<<< and ===== which are not related to your code.

Jai2305 commented 2 years ago

Yeah, actually I anticipated that checks are failing due to merge conflicts but they can only be resolved if I get yours or any authorities to take a look at it and let me know that changes I have made are acceptable or not , because for eg , I changed the table tags to div tags for better front end design because there is not so much you can do while using table tags , the changes are very small in terms of number of lines changed , I think changing the table tag into the div is the only major change which requires you/authorities to take a look otherwise there are some minor changes like some lines in CSS file and so on .

In all let me know what you think , and what do you think of the new design , I was thinking that after it gets merged , we can do some more changes after that , but majorly the design will look something like this( depicted in screenshots ) Thanks for replying @ritwik12

Bencourt commented 2 years ago

Hi there, I posted a comment on a different issue thread about updating the logo, but it seems like this thread has more attention so I thought I might post again. I have come up with a couple alternate logo ideas since the current logo has issues with readability in dark mode. I was hoping to get some thoughts and propose changing the current logo to one of my designs. Please let me know what you all think! up_for_grabs_logo_white up_for_grabs_logo

Bencourt commented 2 years ago

Hi once again, I noticed some issues with the dark and light mode styling such as the header backgrounds having a white background in the dark mode, the return to top button being light in dark mode, the blue font color being somewhat difficult to read in dark mode, and the box drop shadow being somewhat visually confusing, so I made some updates to the styling and they currently live on my fork of the repo. I feel like these are good changes and they pass CI, but I haven't made a pull request because I am using the logo I redesigned so let me know if they are changes that should be pulled and I'll replace the logo and make a pull request. contribution2-end contribution2-end-dark

ritwik12 commented 2 years ago

@Bencourt Thanks a lot for creating PR and contributing. I can't comment on the logo @shiftkey might be able to tell better. I agree with you for Dark mode issues, can you please share Screenshot of the design after your changes?

AllanOcelot commented 2 years ago

Coming back after a long hiatus here, but I had a spare hour to crack this up whilst waiting for an email reply!

Happy to share the Adobe XD file with anyone who wants it - just shoot me a mail. Sadly I lack the free time to code any of this currently but happy to discuss points with anyone interested. Web 1920 – 1

Jai2305 commented 2 years ago

Hi, that's a really good design , i think it is better than the current, also I guess we can make the side menu bar collapse into a little burger option on top which will be set to sticky so that user can use filters whenever they want after scrolling , all good but I guess we gotta keep the logo out of menu bar , if it collapses with the rest of the menu into a button it won't be visible at the website anymore or is it fine ?

ritwik12 commented 2 years ago

That's a good design @AllanOcelot. Thanks for the ideas. @Jai2305 You are right, it would be great to have it as a collapsible side bar. For the logo I would say let's try to keep it on top left for this where after collapsible it'll stay there in form of a semi circle or circle.

Thoughts?

Jai2305 commented 2 years ago

Yeah, I guess we can do that , I am just trying to figure out the mobile version of this in which rather then left logo stays on top.

AllanOcelot commented 2 years ago

Glad you like it - happy to tweak things, if there's interest in getting this going forward I can certainly Mock up a mobile version with a collapsible sidebar & smaller logo/icons etc.

Realistically it would be Tuesday/Wednesday night due to work commitments - but I'm following the thread and will work other suggestions etc in

ritwik12 commented 2 years ago

Yeah @AllanOcelot, that would be awesome. If you are busy and @Jai2305 is ready to work on it. It would be great to have the mobile design too.

p4nu commented 2 years ago

I'm also interested in implementing mobile layout when the design is ready 👍

jalaniz1 commented 2 years ago

Another source of ideas for improvement could potentially come from looking at the Lighthouse report for up for grabs.net. I suppose these might be considered to be optimizations rather than improvements but thought of sharing anyway.

Here's a sample report run from my browser with mobile as the targeted platform: up_for_grabs_net.pdf image

ritwik12 commented 2 years ago

@jalaniz1 Thanks for sharing the report. I think we can work on this and open up few issues to take the concerns.

JeetPatel1016 commented 2 years ago

I've been going through this thread and while I do not wish to greatly alter the layout of the site (it seems alternate layouts have been proposed by others), there are few changes that I made for the color theme and I'd like to suggest them.

Light Mode: Some slight modifications have been made to the light theme and that includes:

Preview: upforgrablight

Dark Mode:

upforgrabdark

Please let me know about these changes and I'd appreciate further suggestions from your end.

ritwik12 commented 2 years ago

@JeetPatel1016 Thanks for your suggestions. All your suggestions look good to me, especially the Dark Mode contrast. Please go ahead with your changes except for the logo change. The current logo in bright mode looks better than your suggestion here. Please raise a PR.

JeetPatel1016 commented 2 years ago

@ritwik12 I've raised a PR and dropped the logo change as you mentioned.

tagener-noisu commented 2 years ago

Not sure if I shoud create a separate issue for this. The first time I opened the https://up-for-grabs.net/ I couldn't understand where should I click to start. It's not intuitive enough that the "I want to get envolved" group is clickable.

UsmanAhmadSaeed commented 2 years ago

I'd love to take on the dark mode feature. Where can I find the project structure to know where to make changes?

ffshreyansh commented 1 year ago

@ritwik12 Hey I'd love to contribute in frontend mostly in Design and some features as I guess there is lots of room for changes, some design I thought along with the color combi. , let me know if this would work for the issue or not . I just created this idea with some color and fonts layout changes.

UPG

jitendraKhadoliya commented 1 year ago

BEFORE ==>

mistakes that I found =>

127 0 0 1_4000_(iPhone SE) (1)

AFTER ==>

Manan50 commented 1 year ago

@ritwik12 are there any more issues left for me to undertake as I am interested in improving the FE of site and contributing

Murdock9803 commented 1 month ago

Hello @ritwik12, since its been a long time this issue has opened from, is there any help I can provide on this at present ? I would love to contribute :raised_hands:

Mohd-Hamza-Khan commented 4 weeks ago

Hello @ritwik12, I see the UI, since its been a long time this issue has opened

I believe up-for-grabs.net could benefit from a few UI improvements to enhance its look and usability. Here are some ideas:

1) Cursor Animation, Adding a smooth cursor animation can give the site a modern touch. 2) Color Scheme, A well-chosen color palette will make the design more cohesive and appealing. 3) Updated Menu Bar, A stylish and responsive menu bar can improve navigation. 4) Choosing fonts that work well together will create a polished, professional feel.

I would love to contribute, here is my suggestion to add this type of animation 1 2 3

These changes would make the site both visually pleasing and more user-friendly

Mohd-Hamza-Khan commented 4 weeks ago

I want to add these type of changes, please assign to me!

Noodlebox1 commented 1 week ago

The dark mode as it is currently on the site looks great, but I noticed that:

  1. even if your system preferences are set to dark, the site will still load as light
  2. if you reload the page or open it in a new tab, it doesn't remember your theme preference I know the site was primarily designed with light mode in mind, but it'd be nice to fix these issues.