Improving Frontend

[ritwik12]

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:

• Add task filter by last update (First of all active).
• Сhange layout of the page, in particular, move filters to the side menu. Thereby solving the problem of unused space.
• Add dark (night) mode.
• Fix dark mode contrast.
• Set nicer colors and fonts.

[NjalTheKnut]

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.

[ritwik12]

@NjalTheKnut That will be a good feature, go for it.

[sunilkumarvalmiki]

hi,can i undertake the work proposed by NjalTheKnut...

[NjalTheKnut]

I actually found out how to do it recently. I am willing to do it and have a second person go over the code to ensure I am doing things in the best fashion possible.

Being somewhat inexperienced with remote team mechanics, I would appreciate a little guidance acquiring the code and making certain I don't foul up production branches in the VCS.

Also, am I allowed to introduce jQuery, if it is not already used in this project?

[sunilkumarvalmiki]

up-for-grabs.net-gh-pages 2.zip

i have completed the task...

[ritwik12]

@sunilkumarvalmiki Can you host this on your fork? it will be easy to review that way.

[sunilkumarvalmiki]

yes, i forked it to my profile.

[ritwik12]

@NjalTheKnut I meant if you can host this as github pages on your fork so that we can see it live.

[Supreme-Kai]

@ritwik12 Hey there! I actually wanted to make some changes to the front-end, but I noticed the _site folder holding the index.html and stylesheets is in git.ignore. Just wanted to know if I can "un-ignore" the file or if not, how I can proceed.

[shiftkey]

@Supreme-Kai

Hey there! I actually wanted to make some changes to the front-end, but I noticed the _site folder holding the index.html and stylesheets is in git.ignore. Just wanted to know if I can "un-ignore" the file or if not, how I can proceed.

Those files are not supposed to be committed, as they are regenerated by Jekyll - the engine underneath GitHub Pages.

If you want to test things out on your fork, this guide should help ensure it is configured right. Alternatively, you can try and get Jekyll running locally or use the included Dockerfile in this repository.

[Supreme-Kai]

@shiftkey Hey thanks for responding. I had the environment running locally already, I was just testing the index and stylesheet from the _site folder and so naturally my changes weren't showing when I ran git status. My fault. That said can I be assigned to this? I have some ideas on how to tweak this style wise.

[shiftkey]

That said can I be assigned to this? I have some ideas on how to tweak this style wise.

@Supreme-Kai the assignee field is based on organization membership, but feel free to work on this and propose changes in a PR

[Supreme-Kai]

Oh right, got it. Awesome, I'll do that. Thanks.

[ritwik12]

These two white spaces at the sides always trouble me :P
Let's use that empty space a lit bit to improve readability.

How about if we just increase the Centre block on both sides so that The projects with Long description will at least get in few lines than so many lines as shown in this image.

Also, we can improve the button on the bottom right corner to a good design. For now, it is simply a bold look.

[rustmn]

@ritwik12 I have some ideas for improving FE of the project and enhance user-experience:

1. Add task filter by last update (First of all active).
2. Сhange layout of the page, in particular, move filters to the side menu. Thereby solve the problem of unused space.
3. Add night-mode (many people do not like to look at the white screen).
4. Set nicer colors and fonts.

I can write this in TypeScript using react / next.js, if you will allow. (I know that using a framework for such a simple project can be overkill but maybe he will grow into something more?)

[ritwik12]

@rustmn I think it will be good. Can you please share a design or something to see how that would look like before actually making it.
@shiftkey can you suggest the improvements for the front end that we would want to see on the site.

[rustmn]

@ritwik12 ok, I will make PSD layout.

[rustmn]

@ritwik12 okay... something like this. Of course, design is not final and i'm open for your suggestions. Also, current logo is not suitable for the dark theme, if you have .eps / .ai or .svg of it, i can fix this.

[ritwik12]

@rustmn That's good. From my point of view I would love to have the old look and improve that. The current look is awesome and lets improve that. For Dark mode. It will be good if we have a toggle or button to switch between Dark and Light modes of the site. Will prefer the Light mode for default though.

I really like the left part, Your views @shiftkey for left side area.

[ritwik12]

@rustmn If it's not a long work, can you try and add the left part to the present website and share how it looks. Check the tone of color for whichever looks better there. I guess black would suite too

[rustmn]

@ritwik12 ok, done. It might look something like this:
view - 31.131.27.205:4000
changes - https://github.com/rustmn/up-for-grabs.net/commit/7697b7397b1661dd4b9a087fc2646f33d9a27ed9

The search does not work correctly yet, because I have not figured out how it works.

Also, when I open your site, my screen locks for 2 seconds, due to the fact that all projects are rendered at the same time. I can fix this. If this is done for web scrapers, I can make api for this.

[ritwik12]

@rustmn Not able to see the view :(

[rustmn]

@ritwik12 hm... strange.

Then so: https://rustmn.github.io

[Jai2305]

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]

@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]

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]

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]

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!

[Bencourt]

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.

[ritwik12]

@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]

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.

[Jai2305]

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]

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]

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]

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]

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]

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

[jalaniz1]

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

[ritwik12]

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

[JeetPatel1016]

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:

• Contrast between page background and the Main container
  • Did only slight contrast as more contrast would only mess with the logo
• Typographical Hiearchy
  • Labels in the filter section were hard to read due to their comparatively small size
• Alignment of Project Cards with Filter Section
• Button Style so that the button elements sit well with the overall page

Preview:

Dark Mode:

• So rather than sticking to neutral shades of black, I used shades of blue in the palette to better couple with the light theme.
• Included this suggestion by @Bencourt on Heading banners
• Fixed Contrast Issues in Filter labels and Project Titles
• Added background color to the project cards to better differentiate from the container background

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

[ritwik12]

@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]

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

[tagener-noisu]

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]

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

[ffshreyansh]

@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.

[jitendraKhadoliya]

BEFORE ==>

mistakes that I found =>

• responsive issue
• Icons are very big for the mobile screen
• icon pattern was not matching the scroll-up button was square and the theme button was in the circle
• The main issue with the icons was the overlaying on the text field which makes the user experience bad

AFTER ==>

• added media query
• now the web app looks more UX friendly
• the same size of both buttons
• same height from the top and bottom
• buttons are on the same line which looks more impressive
• margin right is also the same
• solved the problem of the overlay on the text field
  

[Manan50]

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